diff --git a/package.json b/package.json
index 482636dcec74c..d8a836759f253 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath/npm_module",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@7.13.0-canary.1",
     "@elastic/ems-client": "7.12.0",
-    "@elastic/eui": "31.10.0",
+    "@elastic/eui": "32.0.4",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/maki": "6.3.0",
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index 00cc827a1e83f..29407c54e2834 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -4072,8 +4072,34 @@ exports[`Header renders 1`] = `
                               aria-expanded={false}
                               aria-haspopup="true"
                               aria-label="Help menu"
-                              buttonRef={null}
-                              className="euiHeaderSectionItem__button"
+                              buttonRef={
+                                Object {
+                                  "current": <button
+                                    aria-expanded="false"
+                                    aria-haspopup="true"
+                                    aria-label="Help menu"
+                                    class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="euiButtonContent euiButtonEmpty__content"
+                                    >
+                                      <span
+                                        class="euiButtonEmpty__text"
+                                      >
+                                        <span
+                                          class="euiHeaderSectionItemButton__content"
+                                        >
+                                          <span
+                                            data-euiicon-type="help"
+                                          />
+                                        </span>
+                                      </span>
+                                    </span>
+                                  </button>,
+                                }
+                              }
+                              className="euiHeaderSectionItemButton"
                               color="text"
                               onClick={[Function]}
                             >
@@ -4081,7 +4107,7 @@ exports[`Header renders 1`] = `
                                 aria-expanded={false}
                                 aria-haspopup="true"
                                 aria-label="Help menu"
-                                className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItem__button"
+                                className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
                                 disabled={false}
                                 onClick={[Function]}
                                 type="button"
@@ -4101,15 +4127,19 @@ exports[`Header renders 1`] = `
                                     <span
                                       className="euiButtonEmpty__text"
                                     >
-                                      <EuiIcon
-                                        size="m"
-                                        type="help"
+                                      <span
+                                        className="euiHeaderSectionItemButton__content"
                                       >
-                                        <span
-                                          data-euiicon-type="help"
+                                        <EuiIcon
                                           size="m"
-                                        />
-                                      </EuiIcon>
+                                          type="help"
+                                        >
+                                          <span
+                                            data-euiicon-type="help"
+                                            size="m"
+                                          />
+                                        </EuiIcon>
+                                      </span>
                                     </span>
                                   </span>
                                 </EuiButtonContent>
@@ -4226,7 +4256,7 @@ exports[`Header renders 1`] = `
                             aria-expanded="false"
                             aria-label="Toggle primary navigation"
                             aria-pressed="false"
-                            class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItem__button"
+                            class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
                             data-test-subj="toggleNavButton"
                             type="button"
                           >
@@ -4237,14 +4267,18 @@ exports[`Header renders 1`] = `
                                 class="euiButtonEmpty__text"
                               >
                                 <span
-                                  data-euiicon-type="menu"
-                                />
+                                  class="euiHeaderSectionItemButton__content"
+                                >
+                                  <span
+                                    data-euiicon-type="menu"
+                                  />
+                                </span>
                               </span>
                             </span>
                           </button>,
                         }
                       }
-                      className="euiHeaderSectionItem__button"
+                      className="euiHeaderSectionItemButton"
                       color="text"
                       data-test-subj="toggleNavButton"
                       onClick={[Function]}
@@ -4254,7 +4288,7 @@ exports[`Header renders 1`] = `
                         aria-expanded={false}
                         aria-label="Toggle primary navigation"
                         aria-pressed={false}
-                        className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItem__button"
+                        className="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
                         data-test-subj="toggleNavButton"
                         disabled={false}
                         onClick={[Function]}
@@ -4275,15 +4309,19 @@ exports[`Header renders 1`] = `
                             <span
                               className="euiButtonEmpty__text"
                             >
-                              <EuiIcon
-                                size="m"
-                                type="menu"
+                              <span
+                                className="euiHeaderSectionItemButton__content"
                               >
-                                <span
-                                  data-euiicon-type="menu"
+                                <EuiIcon
                                   size="m"
-                                />
-                              </EuiIcon>
+                                  type="menu"
+                                >
+                                  <span
+                                    data-euiicon-type="menu"
+                                    size="m"
+                                  />
+                                </EuiIcon>
+                              </span>
                             </span>
                           </span>
                         </EuiButtonContent>
diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx
index 16c89fdca380a..67cdd24aae848 100644
--- a/src/core/public/chrome/ui/header/header.tsx
+++ b/src/core/public/chrome/ui/header/header.tsx
@@ -98,7 +98,7 @@ export function Header({
     );
   }
 
-  const toggleCollapsibleNavRef = createRef<HTMLButtonElement>();
+  const toggleCollapsibleNavRef = createRef<HTMLButtonElement & { euiAnimate: () => void }>();
   const navId = htmlIdGenerator()();
   const className = classnames('hide-for-sharing', 'headerGlobalNav');
 
diff --git a/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap
index 9e3018fb512c3..4cd3eb13f3609 100644
--- a/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/embeddable/empty_screen/__snapshots__/dashboard_empty_screen.test.tsx.snap
@@ -617,9 +617,11 @@ exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `
                   <EuiPanel
                     className="euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter dshStartScreen__pageContent"
                     paddingSize="none"
+                    role="main"
                   >
                     <div
                       className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter dshStartScreen__pageContent"
+                      role="main"
                     >
                       <EuiImage
                         alt=""
@@ -962,9 +964,11 @@ exports[`DashboardEmptyScreen renders correctly with view mode 1`] = `
                   <EuiPanel
                     className="euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter dshStartScreen__pageContent"
                     paddingSize="none"
+                    role="main"
                   >
                     <div
                       className="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter dshStartScreen__pageContent"
+                      role="main"
                     >
                       <EuiImage
                         alt=""
diff --git a/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap b/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap
index 837cff41ccd6b..4436efb1f3508 100644
--- a/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap
+++ b/src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap
@@ -1472,13 +1472,13 @@ exports[`Inspector Data View component should render single table without select
                                             href="#__table_generated-id"
                                             isDisabled={true}
                                             onClick={[Function]}
-                                            size="xs"
+                                            size="s"
                                           >
                                             <button
                                               aria-controls="__table_generated-id"
                                               aria-current={true}
                                               aria-label="Page 1 of 1"
-                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                                               data-test-subj="pagination-button-0"
                                               disabled={true}
                                               onClick={[Function]}
@@ -3026,13 +3026,13 @@ exports[`Inspector Data View component should support multiple datatables 1`] =
                                             href="#__table_generated-id"
                                             isDisabled={true}
                                             onClick={[Function]}
-                                            size="xs"
+                                            size="s"
                                           >
                                             <button
                                               aria-controls="__table_generated-id"
                                               aria-current={true}
                                               aria-label="Page 1 of 1"
-                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                                              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                                               data-test-subj="pagination-button-0"
                                               disabled={true}
                                               onClick={[Function]}
diff --git a/test/functional/apps/discover/_data_grid_doc_table.ts b/test/functional/apps/discover/_data_grid_doc_table.ts
index 85aa96555f20b..5499f0250eb73 100644
--- a/test/functional/apps/discover/_data_grid_doc_table.ts
+++ b/test/functional/apps/discover/_data_grid_doc_table.ts
@@ -38,10 +38,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await kibanaServer.uiSettings.replace({});
     });
 
-    it('should show the first 12 rows by default', async function () {
+    it('should show the first 11 rows by default', async function () {
       // with the default range the number of hits is ~14000
       const rows = await dataGrid.getDocTableRows();
-      expect(rows.length).to.be(12);
+      expect(rows.length).to.be(11);
     });
 
     it('should refresh the table content when changing time window', async function () {
diff --git a/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap
index 22a12db680334..f521695177e05 100644
--- a/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/error_group_overview/List/__snapshots__/List.test.tsx.snap
@@ -1745,7 +1745,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     aria-controls="generated-id"
                     aria-current={true}
                     aria-label="Page 1 of 1"
-                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-0"
                     disabled={true}
                     onClick={[Function]}
diff --git a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot
index 9b5540b95e844..f59abc4fec6f9 100644
--- a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot
@@ -212,8 +212,7 @@ exports[`Storyshots components/Elements/CustomElementModal with description 1`]
                 className="euiSpacer euiSpacer--s"
               />
               <div
-                className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
-                onClick={[Function]}
+                className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
               >
                 <div
                   className="euiCard__top"
@@ -521,8 +520,7 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
               <div
-                className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned canvasElementCard"
-                onClick={[Function]}
+                className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned canvasElementCard"
               >
                 <div
                   className="euiCard__top"
@@ -545,14 +543,7 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
                   >
                     
                   </span>
-                  <div
-                    className="euiText euiText--small euiCard__description"
-                    id="generated-idDescription"
-                  >
-                    <p>
-                      
-                    </p>
-                  </div>
+                  
                 </div>
                 <div
                   className="euiCard__footer"
@@ -834,8 +825,7 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
               <div
-                className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
-                onClick={[Function]}
+                className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
               >
                 <div
                   className="euiCard__top"
@@ -855,14 +845,7 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
                   >
                     My Chart
                   </span>
-                  <div
-                    className="euiText euiText--small euiCard__description"
-                    id="generated-idDescription"
-                  >
-                    <p>
-                      
-                    </p>
-                  </div>
+                  
                 </div>
                 <div
                   className="euiCard__footer"
@@ -1142,8 +1125,7 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
                 className="euiSpacer euiSpacer--s"
               />
               <div
-                className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
-                onClick={[Function]}
+                className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
               >
                 <div
                   className="euiCard__top"
@@ -1163,14 +1145,7 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
                   >
                     
                   </span>
-                  <div
-                    className="euiText euiText--small euiCard__description"
-                    id="generated-idDescription"
-                  >
-                    <p>
-                      
-                    </p>
-                  </div>
+                  
                 </div>
                 <div
                   className="euiCard__footer"
diff --git a/x-pack/plugins/canvas/public/components/element_card/__stories__/__snapshots__/element_card.stories.storyshot b/x-pack/plugins/canvas/public/components/element_card/__stories__/__snapshots__/element_card.stories.storyshot
index 942b2861b7cb9..14640fe266839 100644
--- a/x-pack/plugins/canvas/public/components/element_card/__stories__/__snapshots__/element_card.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/element_card/__stories__/__snapshots__/element_card.stories.storyshot
@@ -9,7 +9,7 @@ exports[`Storyshots components/Elements/ElementCard with click handler 1`] = `
   }
 >
   <div
-    className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+    className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
     onClick={[Function]}
   >
     <div
@@ -62,8 +62,7 @@ exports[`Storyshots components/Elements/ElementCard with image 1`] = `
   }
 >
   <div
-    className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned canvasElementCard"
-    onClick={[Function]}
+    className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned canvasElementCard"
   >
     <div
       className="euiCard__top"
@@ -111,7 +110,7 @@ exports[`Storyshots components/Elements/ElementCard with tags 1`] = `
   }
 >
   <div
-    className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+    className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
     onClick={[Function]}
   >
     <div
@@ -279,8 +278,7 @@ exports[`Storyshots components/Elements/ElementCard with title and description 1
   }
 >
   <div
-    className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
-    onClick={[Function]}
+    className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
   >
     <div
       className="euiCard__top"
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/element_grid.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/element_grid.stories.storyshot
index ae1d4767a04c1..a0e12d4338e95 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/element_grid.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/element_grid.stories.storyshot
@@ -15,7 +15,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
       className="euiFlexItem canvasElementCard__wrapper"
     >
       <div
-        className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
         onClick={[Function]}
       >
         <div
@@ -124,7 +124,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
       className="euiFlexItem canvasElementCard__wrapper"
     >
       <div
-        className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
         onClick={[Function]}
       >
         <div
@@ -233,7 +233,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
       className="euiFlexItem canvasElementCard__wrapper"
     >
       <div
-        className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+        className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
         onClick={[Function]}
       >
         <div
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
index 8f1f68772d06e..82806426ff26e 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
@@ -239,7 +239,7 @@ exports[`Storyshots components/SavedElementsModal with custom elements 1`] = `
               className="euiFlexItem canvasElementCard__wrapper"
             >
               <div
-                className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
                 onClick={[Function]}
               >
                 <div
@@ -348,7 +348,7 @@ exports[`Storyshots components/SavedElementsModal with custom elements 1`] = `
               className="euiFlexItem canvasElementCard__wrapper"
             >
               <div
-                className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
                 onClick={[Function]}
               >
                 <div
@@ -457,7 +457,7 @@ exports[`Storyshots components/SavedElementsModal with custom elements 1`] = `
               className="euiFlexItem canvasElementCard__wrapper"
             >
               <div
-                className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
                 onClick={[Function]}
               >
                 <div
@@ -702,7 +702,7 @@ exports[`Storyshots components/SavedElementsModal with text filter 1`] = `
               className="euiFlexItem canvasElementCard__wrapper"
             >
               <div
-                className="euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
                 onClick={[Function]}
               >
                 <div
diff --git a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
index 10852e511ea29..b61f3f7f5a1e9 100644
--- a/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot
@@ -225,8 +225,9 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
             <button
               aria-pressed={false}
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+              data-test-subj="bold"
               disabled={false}
-              id="bold"
+              id="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -253,8 +254,9 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
             <button
               aria-pressed={false}
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+              data-test-subj="italic"
               disabled={false}
-              id="italic"
+              id="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -281,8 +283,9 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
             <button
               aria-pressed={false}
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+              data-test-subj="underline"
               disabled={false}
-              id="underline"
+              id="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -327,7 +330,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
             <label
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected euiButtonGroupButton-isIconOnly"
               disabled={false}
-              htmlFor="left"
+              htmlFor="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -349,8 +352,9 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                   <input
                     checked={true}
                     className="euiScreenReaderOnly"
+                    data-test-subj="left"
                     disabled={false}
-                    id="left"
+                    id="generated-id"
                     name="generated-id"
                     onChange={[Function]}
                     type="radio"
@@ -362,7 +366,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
             <label
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
               disabled={false}
-              htmlFor="center"
+              htmlFor="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -384,8 +388,9 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                   <input
                     checked={false}
                     className="euiScreenReaderOnly"
+                    data-test-subj="center"
                     disabled={false}
-                    id="center"
+                    id="generated-id"
                     name="generated-id"
                     onChange={[Function]}
                     type="radio"
@@ -397,7 +402,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
             <label
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
               disabled={false}
-              htmlFor="right"
+              htmlFor="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -419,8 +424,9 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                   <input
                     checked={false}
                     className="euiScreenReaderOnly"
+                    data-test-subj="right"
                     disabled={false}
-                    id="right"
+                    id="generated-id"
                     name="generated-id"
                     onChange={[Function]}
                     type="radio"
@@ -662,8 +668,9 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
             <button
               aria-pressed={false}
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+              data-test-subj="bold"
               disabled={false}
-              id="bold"
+              id="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -690,8 +697,9 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
             <button
               aria-pressed={false}
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+              data-test-subj="italic"
               disabled={false}
-              id="italic"
+              id="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -718,8 +726,9 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
             <button
               aria-pressed={false}
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
+              data-test-subj="underline"
               disabled={false}
-              id="underline"
+              id="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -764,7 +773,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
             <label
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected euiButtonGroupButton-isIconOnly"
               disabled={false}
-              htmlFor="left"
+              htmlFor="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -786,8 +795,9 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                   <input
                     checked={true}
                     className="euiScreenReaderOnly"
+                    data-test-subj="left"
                     disabled={false}
-                    id="left"
+                    id="generated-id"
                     name="generated-id"
                     onChange={[Function]}
                     type="radio"
@@ -799,7 +809,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
             <label
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
               disabled={false}
-              htmlFor="center"
+              htmlFor="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -821,8 +831,9 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                   <input
                     checked={false}
                     className="euiScreenReaderOnly"
+                    data-test-subj="center"
                     disabled={false}
-                    id="center"
+                    id="generated-id"
                     name="generated-id"
                     onChange={[Function]}
                     type="radio"
@@ -834,7 +845,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
             <label
               className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isIconOnly"
               disabled={false}
-              htmlFor="right"
+              htmlFor="generated-id"
               onClick={[Function]}
               style={
                 Object {
@@ -856,8 +867,9 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                   <input
                     checked={false}
                     className="euiScreenReaderOnly"
+                    data-test-subj="right"
                     disabled={false}
-                    id="right"
+                    id="generated-id"
                     name="generated-id"
                     onChange={[Function]}
                     type="radio"
diff --git a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
index b06c9ae5546ac..82f5f8b7e23cd 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot
@@ -162,7 +162,7 @@ Array [
               <label
                 className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small euiButtonGroupButton-isSelected"
                 disabled={false}
-                htmlFor="generated-id-true"
+                htmlFor="generated-id"
                 onClick={[Function]}
                 style={
                   Object {
@@ -179,8 +179,9 @@ Array [
                     <input
                       checked={true}
                       className="euiScreenReaderOnly"
+                      data-test-subj="generated-id-true"
                       disabled={false}
-                      id="generated-id-true"
+                      id="generated-id"
                       name="value"
                       onChange={[Function]}
                       type="radio"
@@ -192,7 +193,7 @@ Array [
               <label
                 className="euiButtonGroupButton euiButtonGroupButton--text euiButtonGroupButton--small"
                 disabled={false}
-                htmlFor="generated-id-false"
+                htmlFor="generated-id"
                 onClick={[Function]}
                 style={
                   Object {
@@ -209,8 +210,9 @@ Array [
                     <input
                       checked={false}
                       className="euiScreenReaderOnly"
+                      data-test-subj="generated-id-false"
                       disabled={false}
-                      id="generated-id-false"
+                      id="generated-id"
                       name="value"
                       onChange={[Function]}
                       type="radio"
diff --git a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
index f3913b83966b4..2a65ea4fd0f5f 100644
--- a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
@@ -527,7 +527,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
             <button
               aria-current={true}
               aria-label="Page 1 of 1"
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
               data-test-subj="pagination-button-0"
               disabled={true}
               onClick={[Function]}
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/policies/persona.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/policies/persona.tsx
index 100945327e824..c2a7e1530cbf5 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/policies/persona.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/epm/screens/detail/policies/persona.tsx
@@ -7,7 +7,7 @@
 import type { CSSProperties } from 'react';
 import React, { memo, useCallback } from 'react';
 import { EuiAvatar, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
-import type { EuiAvatarProps } from '@elastic/eui/src/components/avatar/avatar';
+import type { EuiAvatarProps } from '@elastic/eui';
 
 const MIN_WIDTH: CSSProperties = { minWidth: 0 };
 
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap
index 3db0aa43e0e87..98e0e7e41b236 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap
@@ -51,6 +51,7 @@ exports[`policy table should show empty state when there are not any policies 1`
 >
   <div
     class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
+    role="main"
   >
     <div
       class="euiEmptyPrompt"
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap
index 268ce4cbb5165..95921fa61233c 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap
@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AddLicense component when license is active should display correct verbiage 1`] = `"<div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
+exports[`AddLicense component when license is active should display correct verbiage 1`] = `"<div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
 
-exports[`AddLicense component when license is expired should display with correct verbiage 1`] = `"<div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
+exports[`AddLicense component when license is expired should display with correct verbiage 1`] = `"<div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap
index b75dee3c78306..4d8b653c4b10d 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RequestTrialExtension component should display when enterprise license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when enterprise license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
 
-exports[`RequestTrialExtension component should display when license is active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when license is active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
 
-exports[`RequestTrialExtension component should display when license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
 
-exports[`RequestTrialExtension component should display when platinum license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when platinum license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/revert_to_basic.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/revert_to_basic.test.js.snap
index 00737c708b824..be634a5b4f748 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/revert_to_basic.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/revert_to_basic.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RevertToBasic component should display when license is about to expire 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
+exports[`RevertToBasic component should display when license is about to expire 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
 
-exports[`RevertToBasic component should display when license is expired 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
+exports[`RevertToBasic component should display when license is expired 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
 
-exports[`RevertToBasic component should display when trial is active 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
+exports[`RevertToBasic component should display when trial is active 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/start_trial.test.js.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/start_trial.test.js.snap
index 9f08c5f11c2a2..1cacadb824630 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/start_trial.test.js.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/start_trial.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StartTrial component when trial is allowed display for basic license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed display for basic license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
 
-exports[`StartTrial component when trial is allowed should display for expired enterprise license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed should display for expired enterprise license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
 
-exports[`StartTrial component when trial is allowed should display for expired platinum license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed should display for expired platinum license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
 
-exports[`StartTrial component when trial is allowed should display for gold license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--hasShadow euiCard--borderRadiusMedium euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed should display for gold license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features<span data-euiicon-type=\\"popout\\" aria-label=\\"External link\\" class=\\"euiLink__externalIcon\\"></span><span class=\\"euiScreenReaderOnly\\">(opens in a new tab or window)</span></a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
index c89d183282219..c785ed7c99bda 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
@@ -268,9 +268,11 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
           <EuiPanel
             className="euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
             paddingSize="l"
+            role="main"
           >
             <div
               className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
+              role="main"
             >
               <EuiPageContentBody>
                 <div
@@ -1300,9 +1302,11 @@ exports[`UploadLicense should display an error when ES says license is expired 1
           <EuiPanel
             className="euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
             paddingSize="l"
+            role="main"
           >
             <div
               className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
+              role="main"
             >
               <EuiPageContentBody>
                 <div
@@ -2027,9 +2031,11 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
           <EuiPanel
             className="euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
             paddingSize="l"
+            role="main"
           >
             <div
               className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
+              role="main"
             >
               <EuiPageContentBody>
                 <div
@@ -2754,9 +2760,11 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
           <EuiPanel
             className="euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
             paddingSize="l"
+            role="main"
           >
             <div
               className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
+              role="main"
             >
               <EuiPageContentBody>
                 <div
@@ -3481,9 +3489,11 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
           <EuiPanel
             className="euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
             paddingSize="l"
+            role="main"
           >
             <div
               className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter"
+              role="main"
             >
               <EuiPageContentBody>
                 <div
diff --git a/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap
index e6c48e41fcf0d..0d5279caa5bd8 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/no_data.test.js.snap
@@ -10,6 +10,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
   >
     <div
       class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter eui-textCenter"
+      role="main"
     >
       <span
         data-euiicon-type="monitoringApp"
@@ -95,6 +96,7 @@ exports[`NoData should show text next to the spinner while checking a setting 1`
   >
     <div
       class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter eui-textCenter"
+      role="main"
     >
       <span
         data-euiicon-type="monitoringApp"
diff --git a/x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap b/x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap
index 6835b3c82a58b..7f38a92beae8f 100644
--- a/x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/page_loading/__snapshots__/page_loading.test.js.snap
@@ -10,6 +10,7 @@ exports[`PageLoading should show a simple page loading component 1`] = `
   >
     <div
       class="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter monNoData__content"
+      role="main"
     >
       <div
         class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive"
diff --git a/x-pack/plugins/monitoring/public/components/renderers/__snapshots__/setup_mode.test.js.snap b/x-pack/plugins/monitoring/public/components/renderers/__snapshots__/setup_mode.test.js.snap
index 4b72ec3dc6fbf..8134143ca5320 100644
--- a/x-pack/plugins/monitoring/public/components/renderers/__snapshots__/setup_mode.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/renderers/__snapshots__/setup_mode.test.js.snap
@@ -34,10 +34,7 @@ exports[`SetupModeRenderer should render the flyout open 1`] = `
   <EuiSpacer
     size="xxl"
   />
-  <EuiBottomBar
-    affordForDisplacement={true}
-    paddingSize="m"
-  >
+  <EuiBottomBar>
     <EuiFlexGroup
       alignItems="center"
       data-test-subj="monitoringSetupModeBottomBar"
@@ -137,10 +134,7 @@ exports[`SetupModeRenderer should render with setup mode enabled 1`] = `
   <EuiSpacer
     size="xxl"
   />
-  <EuiBottomBar
-    affordForDisplacement={true}
-    paddingSize="m"
-  >
+  <EuiBottomBar>
     <EuiFlexGroup
       alignItems="center"
       data-test-subj="monitoringSetupModeBottomBar"
diff --git a/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap b/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap
index 60453d354f29e..eb266ce93338c 100644
--- a/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap
+++ b/x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap
@@ -14,9 +14,11 @@ exports[`<RolesGridPage /> renders permission denied if required 1`] = `
         <EuiPanel
           className="euiPageContent euiPageContent--horizontalCenter"
           paddingSize="l"
+          role="main"
         >
           <div
             className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--horizontalCenter"
+            role="main"
           >
             <EuiEmptyPrompt
               body={
diff --git a/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts b/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
index 5a2f1216f8e3e..ece00bcd43578 100644
--- a/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
+++ b/x-pack/plugins/security/public/nav_control/nav_control_service.test.ts
@@ -70,7 +70,7 @@ describe('SecurityNavControlService', () => {
               aria-expanded="false"
               aria-haspopup="true"
               aria-label="Account menu"
-              class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItem__button"
+              class="euiButtonEmpty euiButtonEmpty--text euiHeaderSectionItemButton"
               data-test-subj="userMenuButton"
               type="button"
             >
@@ -80,18 +80,22 @@ describe('SecurityNavControlService', () => {
                 <span
                   class="euiButtonEmpty__text"
                 >
-                  <div
-                    aria-label="some-user"
-                    class="euiAvatar euiAvatar--s euiAvatar--user"
-                    style="background-image: none; background-color: rgb(255, 126, 98); color: rgb(0, 0, 0);"
-                    title="some-user"
+                  <span
+                    class="euiHeaderSectionItemButton__content"
                   >
-                    <span
-                      aria-hidden="true"
+                    <div
+                      aria-label="some-user"
+                      class="euiAvatar euiAvatar--s euiAvatar--user"
+                      style="background-color: rgb(255, 126, 98); color: rgb(0, 0, 0);"
+                      title="some-user"
                     >
-                      s
-                    </span>
-                  </div>
+                      <span
+                        aria-hidden="true"
+                      >
+                        s
+                      </span>
+                    </div>
+                  </span>
                 </span>
               </span>
             </button>
diff --git a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap
index bcb8a6c975359..785c57490e8ef 100644
--- a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap
+++ b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><link href=\\"/some-css-file.css\\" rel=\\"stylesheet\\"/><link href=\\"/some-other-css-file.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/path/to/base/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/path/to/base/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\"><main class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--s\\"></div><span class=\\"euiTextColor euiTextColor--subdued\\"><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiSpacer euiSpacer--s\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></main></div></body></html>"`;
+exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><link href=\\"/some-css-file.css\\" rel=\\"stylesheet\\"/><link href=\\"/some-other-css-file.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/path/to/base/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/path/to/base/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\"><main class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--s\\"></div><span class=\\"euiTextColor euiTextColor--subdued\\"><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiSpacer euiSpacer--s\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></main></div></body></html>"`;
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx
index 64f0f5f65b1ee..5650c2c55488e 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/select_rule_type/index.tsx
@@ -111,7 +111,6 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               icon={<EuiIcon size="xl" type="search" />}
               selectable={querySelectableConfig}
               layout="horizontal"
-              textAlign="left"
             />
           </EuiFlexItem>
         )}
@@ -131,7 +130,6 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               isDisabled={mlSelectableConfig.isDisabled && !mlSelectableConfig.isSelected}
               selectable={mlSelectableConfig}
               layout="horizontal"
-              textAlign="left"
             />
           </EuiFlexItem>
         )}
@@ -145,7 +143,6 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               icon={<EuiIcon size="l" type="indexFlush" />}
               selectable={thresholdSelectableConfig}
               layout="horizontal"
-              textAlign="left"
             />
           </EuiFlexItem>
         )}
@@ -159,7 +156,6 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               icon={<EuiIcon size="l" type="eql" />}
               selectable={eqlSelectableConfig}
               layout="horizontal"
-              textAlign="left"
             />
           </EuiFlexItem>
         )}
@@ -173,7 +169,6 @@ export const SelectRuleType: React.FC<SelectRuleTypeProps> = ({
               icon={<EuiIcon size="l" type="list" />}
               selectable={threatMatchSelectableConfig}
               layout="horizontal"
-              textAlign="left"
             />
           </EuiFlexItem>
         )}
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap
index efae0a4b8b3aa..220494b3a5694 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap
@@ -2919,7 +2919,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                   <button
                     aria-current="true"
                     aria-label="Page 1 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-0"
                     disabled=""
                     type="button"
@@ -2940,7 +2940,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                 >
                   <button
                     aria-label="Page 2 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-1"
                     type="button"
                   >
@@ -2960,7 +2960,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                 >
                   <button
                     aria-label="Page 3 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-2"
                     type="button"
                   >
@@ -2980,7 +2980,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                 >
                   <button
                     aria-label="Page 4 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-3"
                     type="button"
                   >
@@ -3000,7 +3000,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                 >
                   <button
                     aria-label="Page 5 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-4"
                     type="button"
                   >
@@ -3026,7 +3026,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
                 >
                   <button
                     aria-label="Page 20 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-19"
                     type="button"
                   >
@@ -5938,7 +5938,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                   <button
                     aria-current="true"
                     aria-label="Page 1 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-0"
                     disabled=""
                     type="button"
@@ -5959,7 +5959,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                 >
                   <button
                     aria-label="Page 2 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-1"
                     type="button"
                   >
@@ -5979,7 +5979,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                 >
                   <button
                     aria-label="Page 3 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-2"
                     type="button"
                   >
@@ -5999,7 +5999,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                 >
                   <button
                     aria-label="Page 4 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-3"
                     type="button"
                   >
@@ -6019,7 +6019,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                 >
                   <button
                     aria-label="Page 5 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-4"
                     type="button"
                   >
@@ -6045,7 +6045,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
                 >
                   <button
                     aria-label="Page 20 of 20"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-19"
                     type="button"
                   >
@@ -8913,7 +8913,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                 >
                   <button
                     aria-label="Page 1 of 4"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-0"
                     type="button"
                   >
@@ -8933,7 +8933,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                 >
                   <button
                     aria-label="Page 2 of 4"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-1"
                     type="button"
                   >
@@ -8954,7 +8954,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                   <button
                     aria-current="true"
                     aria-label="Page 3 of 4"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-2"
                     disabled=""
                     type="button"
@@ -8975,7 +8975,7 @@ exports[`TrustedAppsGrid renders correctly when new page and page size set (not
                 >
                   <button
                     aria-label="Page 4 of 4"
-                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                    class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-3"
                     type="button"
                   >
diff --git a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap
index 9e7e95b367712..15f35705c7fdc 100644
--- a/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_list/__snapshots__/index.test.tsx.snap
@@ -3583,7 +3583,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
                   aria-controls="mockId"
                   aria-current="true"
                   aria-label="Page 1 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-0"
                   disabled=""
                   type="button"
@@ -3605,7 +3605,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 2 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-1"
                   href="#mockId"
                   rel="noreferrer"
@@ -3627,7 +3627,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 3 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-2"
                   href="#mockId"
                   rel="noreferrer"
@@ -3649,7 +3649,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 4 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-3"
                   href="#mockId"
                   rel="noreferrer"
@@ -3671,7 +3671,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 5 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-4"
                   href="#mockId"
                   rel="noreferrer"
@@ -3699,7 +3699,7 @@ exports[`TrustedAppsList renders correctly when item details expanded 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 20 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-19"
                   href="#mockId"
                   rel="noreferrer"
@@ -6543,7 +6543,7 @@ exports[`TrustedAppsList renders correctly when loaded data 1`] = `
                   aria-controls="mockId"
                   aria-current="true"
                   aria-label="Page 1 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-0"
                   disabled=""
                   type="button"
@@ -6565,7 +6565,7 @@ exports[`TrustedAppsList renders correctly when loaded data 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 2 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-1"
                   href="#mockId"
                   rel="noreferrer"
@@ -6587,7 +6587,7 @@ exports[`TrustedAppsList renders correctly when loaded data 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 3 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-2"
                   href="#mockId"
                   rel="noreferrer"
@@ -6609,7 +6609,7 @@ exports[`TrustedAppsList renders correctly when loaded data 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 4 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-3"
                   href="#mockId"
                   rel="noreferrer"
@@ -6631,7 +6631,7 @@ exports[`TrustedAppsList renders correctly when loaded data 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 5 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-4"
                   href="#mockId"
                   rel="noreferrer"
@@ -6659,7 +6659,7 @@ exports[`TrustedAppsList renders correctly when loaded data 1`] = `
                 <a
                   aria-controls="mockId"
                   aria-label="Page 20 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-19"
                   href="#mockId"
                   rel="noreferrer"
@@ -9661,7 +9661,7 @@ exports[`TrustedAppsList renders correctly when loading data for the second time
                   aria-controls="mockId"
                   aria-current="true"
                   aria-label="Page 1 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-0"
                   disabled=""
                   type="button"
@@ -9683,7 +9683,7 @@ exports[`TrustedAppsList renders correctly when loading data for the second time
                 <a
                   aria-controls="mockId"
                   aria-label="Page 2 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-1"
                   href="#mockId"
                   rel="noreferrer"
@@ -9705,7 +9705,7 @@ exports[`TrustedAppsList renders correctly when loading data for the second time
                 <a
                   aria-controls="mockId"
                   aria-label="Page 3 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-2"
                   href="#mockId"
                   rel="noreferrer"
@@ -9727,7 +9727,7 @@ exports[`TrustedAppsList renders correctly when loading data for the second time
                 <a
                   aria-controls="mockId"
                   aria-label="Page 4 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-3"
                   href="#mockId"
                   rel="noreferrer"
@@ -9749,7 +9749,7 @@ exports[`TrustedAppsList renders correctly when loading data for the second time
                 <a
                   aria-controls="mockId"
                   aria-label="Page 5 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-4"
                   href="#mockId"
                   rel="noreferrer"
@@ -9777,7 +9777,7 @@ exports[`TrustedAppsList renders correctly when loading data for the second time
                 <a
                   aria-controls="mockId"
                   aria-label="Page 20 of 20"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-19"
                   href="#mockId"
                   rel="noreferrer"
@@ -12621,7 +12621,7 @@ exports[`TrustedAppsList renders correctly when new page and page size set (not
                 <a
                   aria-controls="mockId"
                   aria-label="Page 1 of 4"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-0"
                   href="#mockId"
                   rel="noreferrer"
@@ -12643,7 +12643,7 @@ exports[`TrustedAppsList renders correctly when new page and page size set (not
                 <a
                   aria-controls="mockId"
                   aria-label="Page 2 of 4"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-1"
                   href="#mockId"
                   rel="noreferrer"
@@ -12666,7 +12666,7 @@ exports[`TrustedAppsList renders correctly when new page and page size set (not
                   aria-controls="mockId"
                   aria-current="true"
                   aria-label="Page 3 of 4"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-2"
                   disabled=""
                   type="button"
@@ -12688,7 +12688,7 @@ exports[`TrustedAppsList renders correctly when new page and page size set (not
                 <a
                   aria-controls="mockId"
                   aria-label="Page 4 of 4"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-3"
                   href="#mockId"
                   rel="noreferrer"
diff --git a/x-pack/plugins/spaces/public/management/spaces_grid/__snapshots__/spaces_grid_pages.test.tsx.snap b/x-pack/plugins/spaces/public/management/spaces_grid/__snapshots__/spaces_grid_pages.test.tsx.snap
index 0735a87dce039..a754eaf73620f 100644
--- a/x-pack/plugins/spaces/public/management/spaces_grid/__snapshots__/spaces_grid_pages.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/management/spaces_grid/__snapshots__/spaces_grid_pages.test.tsx.snap
@@ -145,7 +145,6 @@ Array [
     <EuiAvatar
       color="#AA6556"
       data-test-subj="space-avatar-default"
-      imageUrl=""
       initials="D"
       initialsLength={2}
       name="Default"
@@ -159,7 +158,6 @@ Array [
         style={
           Object {
             "backgroundColor": "#AA6556",
-            "backgroundImage": "none",
             "color": "#000000",
           }
         }
@@ -187,7 +185,6 @@ Array [
     <EuiAvatar
       color="#DA8B45"
       data-test-subj="space-avatar-custom-1"
-      imageUrl=""
       initials="C1"
       initialsLength={2}
       name="Custom 1"
@@ -201,7 +198,6 @@ Array [
         style={
           Object {
             "backgroundColor": "#DA8B45",
-            "backgroundImage": "none",
             "color": "#000000",
           }
         }
@@ -232,7 +228,6 @@ Array [
     <EuiAvatar
       color="#ABCDEF"
       data-test-subj="space-avatar-custom-2"
-      imageUrl=""
       initials="LG"
       initialsLength={2}
       name="Custom 2"
@@ -246,7 +241,6 @@ Array [
         style={
           Object {
             "backgroundColor": "#ABCDEF",
-            "backgroundImage": "none",
             "color": "#000000",
           }
         }
diff --git a/x-pack/plugins/spaces/public/space_avatar/__snapshots__/space_avatar_internal.test.tsx.snap b/x-pack/plugins/spaces/public/space_avatar/__snapshots__/space_avatar_internal.test.tsx.snap
index 9a63e14cb38ef..f45f55fdd02d9 100644
--- a/x-pack/plugins/spaces/public/space_avatar/__snapshots__/space_avatar_internal.test.tsx.snap
+++ b/x-pack/plugins/spaces/public/space_avatar/__snapshots__/space_avatar_internal.test.tsx.snap
@@ -15,7 +15,6 @@ exports[`removes aria-label when instructed not to announce the space name 1`] =
     aria-label=""
     color="#DA8B45"
     data-test-subj="space-avatar-"
-    imageUrl=""
     initials=""
     initialsLength={2}
     name=""
@@ -30,12 +29,15 @@ exports[`removes aria-label when instructed not to announce the space name 1`] =
       style={
         Object {
           "backgroundColor": "#DA8B45",
-          "backgroundImage": "none",
           "color": "#000000",
         }
       }
       title=""
-    />
+    >
+      <span
+        aria-hidden="true"
+      />
+    </div>
   </EuiAvatar>
 </SpaceAvatarInternal>
 `;
@@ -44,7 +46,6 @@ exports[`renders with a space name entirely made of whitespace 1`] = `
 <EuiAvatar
   color="#D36086"
   data-test-subj="space-avatar-"
-  imageUrl=""
   initials=""
   initialsLength={2}
   name=""
@@ -57,7 +58,6 @@ exports[`renders without crashing 1`] = `
 <EuiAvatar
   color="#DA8B45"
   data-test-subj="space-avatar-"
-  imageUrl=""
   initials=""
   initialsLength={2}
   name=""
diff --git a/x-pack/plugins/spaces/public/space_avatar/space_avatar_internal.tsx b/x-pack/plugins/spaces/public/space_avatar/space_avatar_internal.tsx
index dab670c07d562..9a3a112110bbf 100644
--- a/x-pack/plugins/spaces/public/space_avatar/space_avatar_internal.tsx
+++ b/x-pack/plugins/spaces/public/space_avatar/space_avatar_internal.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import type { EuiAvatarProps } from '@elastic/eui';
 import { EuiAvatar, isValidHex } from '@elastic/eui';
 import type { FC } from 'react';
 import React from 'react';
@@ -28,6 +29,14 @@ export const SpaceAvatarInternal: FC<Props> = (props: Props) => {
 
   const spaceColor = getSpaceColor(space);
 
+  const spaceInitials = getSpaceInitials(space);
+
+  const spaceImageUrl = getSpaceImageUrl(space);
+
+  const avatarConfig: Partial<EuiAvatarProps> = spaceImageUrl
+    ? { imageUrl: spaceImageUrl }
+    : { initials: spaceInitials, initialsLength: MAX_SPACE_INITIALS };
+
   return (
     <EuiAvatar
       type="space"
@@ -39,10 +48,8 @@ export const SpaceAvatarInternal: FC<Props> = (props: Props) => {
         'aria-hidden': true,
       })}
       size={size || 'm'}
-      initialsLength={MAX_SPACE_INITIALS}
-      initials={getSpaceInitials(space)}
       color={isValidHex(spaceColor) ? spaceColor : ''}
-      imageUrl={getSpaceImageUrl(space)}
+      {...avatarConfig}
       {...rest}
     />
   );
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/location_status_tags.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/location_status_tags.test.tsx.snap
index 8e2a4b1bd1777..44a2021cce611 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/location_status_tags.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/location_status_tags.test.tsx.snap
@@ -996,7 +996,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
                   aria-controls="generated-id"
                   aria-current="true"
                   aria-label="Page 1 of 2"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-0"
                   disabled=""
                   type="button"
@@ -1018,7 +1018,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
                 <a
                   aria-controls="generated-id"
                   aria-label="Page 2 of 2"
-                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton--hideOnMobile"
+                  class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiPaginationButton euiPaginationButton--hideOnMobile"
                   data-test-subj="pagination-button-1"
                   href="#generated-id"
                   rel="noreferrer"
diff --git a/yarn.lock b/yarn.lock
index a51609512910e..65fb8e3531fc4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1417,10 +1417,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@31.10.0":
-  version "31.10.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-31.10.0.tgz#07c1ca88bc042d124e0a4d3bc38b05bb0c6dd697"
-  integrity sha512-OsFs3WyFNWM1Uvs0y/h1MA50Pnf1c9KBX8A7sBmcFbMRpbD033AKOzH67crK8xmqRHB3vD23Yc+IVQdB6SMEGg==
+"@elastic/eui@32.0.4":
+  version "32.0.4"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-32.0.4.tgz#46c001abb162e494e2c11ea48def840b5520f1dc"
+  integrity sha512-NL+bzzxAB6t/BPwaXqELIAWT0wZMcHyciAq+dGS44n7ZYbGzlDgTf77hlvwUsdDhFPhpMyFHJ55rE6ZtqBX/+w==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"
@@ -1433,7 +1433,7 @@
     chroma-js "^2.1.0"
     classnames "^2.2.6"
     highlight.js "^9.18.5"
-    lodash "^4.17.20"
+    lodash "^4.17.21"
     numeral "^2.0.6"
     prop-types "^15.6.0"
     react-ace "^7.0.5"
@@ -1454,7 +1454,7 @@
     tabbable "^3.0.0"
     text-diff "^1.0.1"
     unified "^9.2.0"
-    url-parse "^1.4.7"
+    url-parse "^1.5.0"
     uuid "^8.3.0"
     vfile "^4.2.0"
 
@@ -28665,7 +28665,7 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
-url-parse@^1.4.3, url-parse@^1.4.7:
+url-parse@^1.4.3, url-parse@^1.5.0:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"
   integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==