diff --git a/package.json b/package.json
index c0effd409918ac..6165c836a54b5b 100644
--- a/package.json
+++ b/package.json
@@ -109,7 +109,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.3.0-canary.1",
     "@elastic/ems-client": "8.3.3",
-    "@elastic/eui": "62.0.3",
+    "@elastic/eui": "62.2.4",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
index a75ef5540fd896..a1691641dcab26 100644
--- a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
+++ b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiBottomBar.customScreenReaderAnnouncement": [Function],
           "euiBottomBar.screenReaderAnnouncement": "There is a new region landmark with page level controls at the end of the document.",
           "euiBottomBar.screenReaderHeading": "Page level controls",
-          "euiBreadcrumbs.collapsedBadge.ariaLabel": "See collapsed breadcrumbs",
+          "euiBreadcrumb.collapsedBadge.ariaLabel": "See collapsed breadcrumbs",
           "euiBreadcrumbs.nav.ariaLabel": "Breadcrumbs",
           "euiCardSelect.select": "Select",
           "euiCardSelect.selected": "Selected",
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
index 93e73d5272d5d1..15c323ca4036d5 100644
--- a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
+++ b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -103,11 +103,10 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       defaultMessage: 'Page level controls',
       description: 'Screen reader announcement about heading controls',
     }),
-    'euiBreadcrumbs.collapsedBadge.ariaLabel': i18n.translate(
-      'core.euiBreadcrumbs.collapsedBadge.ariaLabel',
+    'euiBreadcrumb.collapsedBadge.ariaLabel': i18n.translate(
+      'core.euiBreadcrumb.collapsedBadge.ariaLabel',
       {
         defaultMessage: 'See collapsed breadcrumbs',
-        description: 'Displayed when one or more breadcrumbs are hidden.',
       }
     ),
     'euiBreadcrumbs.nav.ariaLabel': i18n.translate('core.euiBreadcrumbs.nav.ariaLabel', {
diff --git a/packages/core/notifications/core-notifications-browser-internal/src/toasts/__snapshots__/global_toast_list.test.tsx.snap b/packages/core/notifications/core-notifications-browser-internal/src/toasts/__snapshots__/global_toast_list.test.tsx.snap
index 0ed32a1dbccb2b..558f0f19080e6b 100644
--- a/packages/core/notifications/core-notifications-browser-internal/src/toasts/__snapshots__/global_toast_list.test.tsx.snap
+++ b/packages/core/notifications/core-notifications-browser-internal/src/toasts/__snapshots__/global_toast_list.test.tsx.snap
@@ -5,7 +5,6 @@ exports[`renders matching snapshot 1`] = `
   aria-label="Notification message list"
   data-test-subj="globalToastList"
   dismissToast={[Function]}
-  side="right"
   toastLifeTimeMs={Infinity}
   toasts={Array []}
 />
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 ac0743939d75af..d00e26bfcfe999 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
@@ -145,18 +145,18 @@ exports[`Header renders 1`] = `
       </div>
       <nav
         aria-label="Breadcrumbs"
-        class="euiBreadcrumbs euiHeaderBreadcrumbs euiBreadcrumbs--truncate"
+        class="euiBreadcrumbs euiHeaderBreadcrumbs emotion-euiHeaderBreadcrumbs"
         data-test-subj="breadcrumbs"
       >
         <ol
-          class="euiBreadcrumbs__list"
+          class="euiBreadcrumbs__list emotion-euiBreadcrumbs__list-isTruncated"
         >
           <li
-            class="euiBreadcrumb euiBreadcrumb--last"
+            class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
           >
             <span
               aria-current="page"
-              class="euiBreadcrumb__content"
+              class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-onlyChild-euiTextColor-default"
               data-test-subj="breadcrumb first last"
               title="test"
             >
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
index d6922693ab23a7..fc55d75fcd6e57 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
@@ -2,70 +2,118 @@
 
 exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 1`] = `
 <li
-  className="euiBreadcrumb euiBreadcrumb--last"
-  key="0"
+  class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
 >
-  <EuiInnerText>
-    <span
-      aria-current="page"
-      className="euiBreadcrumb__content"
-      data-test-subj="breadcrumb first last"
-      title="First"
-    >
-      First
-    </span>
-  </EuiInnerText>
+  <span
+    aria-current="page"
+    class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-onlyChild-euiTextColor-default"
+    data-test-subj="breadcrumb first last"
+    title="First"
+  >
+    First
+  </span>
 </li>
 `;
 
 exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 2`] = `
-Array [
-  <li
-    className="euiBreadcrumb"
-    key="0"
-  >
-    <EuiInnerText>
-      <span
-        className="euiBreadcrumb__content"
-        data-test-subj="breadcrumb first"
-        title="First"
-      >
-        First
-      </span>
-    </EuiInnerText>
-  </li>,
-  <li
-    className="euiBreadcrumb euiBreadcrumb--last"
-    key="1"
+<li
+  class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
+>
+  <span
+    aria-current="page"
+    class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-onlyChild-euiTextColor-default"
+    data-test-subj="breadcrumb first last"
+    title="First"
   >
-    <EuiInnerText>
-      <span
-        aria-current="page"
-        className="euiBreadcrumb__content"
-        data-test-subj="breadcrumb last"
-        title="Second"
-      >
-        Second
-      </span>
-    </EuiInnerText>
-  </li>,
-]
+    First
+  </span>
+</li>
 `;
 
 exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 3`] = `
 <li
-  className="euiBreadcrumb euiBreadcrumb--last"
-  key="0"
+  class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
+>
+  <span
+    class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncated-firstChild-euiTextColor-subdued"
+    data-test-subj="breadcrumb first"
+    title="First"
+  >
+    First
+  </span>
+</li>
+`;
+
+exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 4`] = `
+<li
+  class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
+>
+  <span
+    class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncated-firstChild-euiTextColor-subdued"
+    data-test-subj="breadcrumb first"
+    title="First"
+  >
+    First
+  </span>
+</li>
+`;
+
+exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 5`] = `
+<li
+  class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
+>
+  <span
+    aria-current="page"
+    class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-lastChild-euiTextColor-default"
+    data-test-subj="breadcrumb last"
+    title="Second"
+  >
+    Second
+  </span>
+</li>
+`;
+
+exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 6`] = `
+<li
+  class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
+>
+  <span
+    aria-current="page"
+    class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-lastChild-euiTextColor-default"
+    data-test-subj="breadcrumb last"
+    title="Second"
+  >
+    Second
+  </span>
+</li>
+`;
+
+exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 7`] = `
+<li
+  class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
 >
-  <EuiInnerText>
-    <span
-      aria-current="page"
-      className="euiBreadcrumb__content"
-      data-test-subj="breadcrumb first"
-      title="First"
-    >
-      Kibana
-    </span>
-  </EuiInnerText>
+  <span
+    aria-current="page"
+    class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-onlyChild-euiTextColor-default"
+    data-test-subj="breadcrumb first"
+    title="First"
+  >
+    Kibana
+  </span>
+</li>
+`;
+
+exports[`HeaderBreadcrumbs renders updates to the breadcrumbs$ observable 8`] = `
+<li
+  class="euiBreadcrumb emotion-euiBreadcrumb-application-isTruncated"
+>
+  <span
+    aria-current="page"
+    class="euiBreadcrumb__content emotion-euiBreadcrumb__content-application-isTruncatedLast-onlyChild-euiTextColor-default"
+    data-test-subj="breadcrumb first"
+    title="First"
+  >
+    Kibana
+  </span>
 </li>
 `;
diff --git a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
index 7d40bd77e2548b..285d6c4f90a1c7 100644
--- a/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
+++ b/src/core/public/chrome/ui/header/header_breadcrumbs.test.tsx
@@ -16,14 +16,14 @@ describe('HeaderBreadcrumbs', () => {
   it('renders updates to the breadcrumbs$ observable', () => {
     const breadcrumbs$ = new BehaviorSubject([{ text: 'First' }]);
     const wrapper = mount(<HeaderBreadcrumbs breadcrumbs$={breadcrumbs$} />);
-    expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot();
+    wrapper.find('.euiBreadcrumb').forEach((el) => expect(el.render()).toMatchSnapshot());
 
     act(() => breadcrumbs$.next([{ text: 'First' }, { text: 'Second' }]));
     wrapper.update();
-    expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot();
+    wrapper.find('.euiBreadcrumb').forEach((el) => expect(el.render()).toMatchSnapshot());
 
     act(() => breadcrumbs$.next([]));
     wrapper.update();
-    expect(wrapper.find('.euiBreadcrumb')).toMatchSnapshot();
+    wrapper.find('.euiBreadcrumb').forEach((el) => expect(el.render()).toMatchSnapshot());
   });
 });
diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
index fea4d101c64ea5..6b455b28166add 100644
--- a/src/dev/license_checker/config.ts
+++ b/src/dev/license_checker/config.ts
@@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.3.3': ['Elastic License 2.0'],
-  '@elastic/eui@62.0.3': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@62.2.4': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };
diff --git a/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap b/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap
index f965246048ccfa..d0bb6ae9e44894 100644
--- a/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap
+++ b/src/plugins/discover/public/components/field_name/__snapshots__/field_name.test.tsx.snap
@@ -6,7 +6,7 @@ Array [
     class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldIcon"
   >
     <span
-      class="euiToken euiToken--euiColorVis5 euiToken--square euiToken--light euiToken--small kbnFieldIcon"
+      class="euiToken kbnFieldIcon emotion-euiToken-square-light-s-euiColorVis5"
     >
       <span
         data-euiicon-type="tokenGeo"
@@ -40,7 +40,7 @@ Array [
     class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldIcon"
   >
     <span
-      class="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small kbnFieldIcon"
+      class="euiToken kbnFieldIcon emotion-euiToken-square-light-s-euiColorVis0"
     >
       <span
         data-euiicon-type="tokenNumber"
@@ -74,7 +74,7 @@ Array [
     class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldIcon"
   >
     <span
-      class="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small kbnFieldIcon"
+      class="euiToken kbnFieldIcon emotion-euiToken-square-light-s-euiColorVis1"
     >
       <span
         data-euiicon-type="tokenString"
@@ -108,7 +108,7 @@ Array [
     class="euiFlexItem euiFlexItem--flexGrowZero kbnDocViewer__fieldIcon"
   >
     <span
-      class="euiToken euiToken--gray euiToken--circle euiToken--light euiToken--small kbnFieldIcon"
+      class="euiToken kbnFieldIcon emotion-euiToken-circle-light-s-gray"
     >
       <span
         data-euiicon-type="questionInCircle"
diff --git a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
index 6b152b42b1f867..6c556228aff9ff 100644
--- a/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/__snapshots__/page_template.test.tsx.snap
@@ -192,7 +192,195 @@ exports[`KibanaPageTemplate render solutionNav 1`] = `
 >
   <div
     class="euiPageSideBar euiPageSideBar--sticky kbnPageTemplate__pageSideBar"
-  />
+  >
+    <nav
+      aria-hidden="false"
+      aria-labelledby="euiSideNav_generated-id_heading"
+      class="euiSideNav kbnPageTemplateSolutionNav"
+    >
+      <h2
+        class="euiTitle euiSideNav__heading emotion-euiTitle-xs"
+        id="euiSideNav_generated-id_heading"
+      >
+        <div
+          aria-label="Solution"
+          class="euiAvatar euiAvatar--m euiAvatar--user kbnPageTemplateSolutionNavAvatar emotion-euiAvatar-m-user-plain"
+          role="img"
+          title="Solution"
+        >
+          <span
+            class="euiAvatar__icon"
+            data-euiicon-type="solution"
+          />
+        </div>
+        <strong>
+          Solution
+        </strong>
+      </h2>
+      <div
+        class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+        id="euiSideNav_generated-id_content"
+      >
+        <div
+          class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+        >
+          <div
+            class="euiSideNavItemButton"
+          >
+            <span
+              class="euiSideNavItemButton__content"
+            >
+              <span
+                class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+              >
+                Ingest
+              </span>
+            </span>
+          </div>
+          <div
+            class="euiSideNavItem__items"
+          >
+            <div
+              class="euiSideNavItem euiSideNavItem--trunk"
+            >
+              <div
+                class="euiSideNavItemButton"
+              >
+                <span
+                  class="euiSideNavItemButton__content"
+                >
+                  <span
+                    class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                  >
+                    Ingest Node Pipelines
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div
+              class="euiSideNavItem euiSideNavItem--trunk"
+            >
+              <div
+                class="euiSideNavItemButton"
+              >
+                <span
+                  class="euiSideNavItemButton__content"
+                >
+                  <span
+                    class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                  >
+                    Logstash Pipelines
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div
+              class="euiSideNavItem euiSideNavItem--trunk"
+            >
+              <div
+                class="euiSideNavItemButton"
+              >
+                <span
+                  class="euiSideNavItemButton__content"
+                >
+                  <span
+                    class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                  >
+                    Beats Central Management
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+        >
+          <div
+            class="euiSideNavItemButton"
+          >
+            <span
+              class="euiSideNavItemButton__content"
+            >
+              <span
+                class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+              >
+                Data
+              </span>
+            </span>
+          </div>
+          <div
+            class="euiSideNavItem__items"
+          >
+            <div
+              class="euiSideNavItem euiSideNavItem--trunk"
+            >
+              <div
+                class="euiSideNavItemButton"
+              >
+                <span
+                  class="euiSideNavItemButton__content"
+                >
+                  <span
+                    class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                  >
+                    Index Management
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div
+              class="euiSideNavItem euiSideNavItem--trunk"
+            >
+              <div
+                class="euiSideNavItemButton"
+              >
+                <span
+                  class="euiSideNavItemButton__content"
+                >
+                  <span
+                    class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                  >
+                    Index Lifecycle Policies
+                  </span>
+                </span>
+              </div>
+            </div>
+            <div
+              class="euiSideNavItem euiSideNavItem--trunk"
+            >
+              <div
+                class="euiSideNavItemButton"
+              >
+                <span
+                  class="euiSideNavItemButton__content"
+                >
+                  <span
+                    class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                  >
+                    Snapshot and Restore
+                  </span>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+    <button
+      aria-label="Collapse side navigation"
+      class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small kbnPageTemplateSolutionNavCollapseButton"
+      title="Collapse side navigation"
+      type="button"
+    >
+      <span
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        color="inherit"
+        data-euiicon-type="menuLeft"
+      />
+    </button>
+  </div>
   <div
     class="euiPanel euiPanel--plain euiPageBody euiPageBody--borderRadiusNone emotion-euiPanel-grow-none-plain-hasShadow"
   >
diff --git a/src/plugins/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap b/src/plugins/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
index 906220597cd241..5e7c8fe4618c81 100644
--- a/src/plugins/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
+++ b/src/plugins/kibana_react/public/page_template/solution_nav/__snapshots__/solution_nav.test.tsx.snap
@@ -1,7 +1,292 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `<Fragment />`;
+exports[`KibanaPageTemplateSolutionNav accepts EuiSideNavProps 1`] = `
+<Fragment>
+  <EuiSideNav
+    aria-hidden={true}
+    className="kbnPageTemplateSolutionNav kbnPageTemplateSolutionNav--hidden"
+    data-test-subj="DTS"
+    heading={
+      <React.Fragment>
+        <strong>
+          Solution
+        </strong>
+      </React.Fragment>
+    }
+    isOpenOnMobile={false}
+    items={
+      Array [
+        Object {
+          "id": "1",
+          "items": Array [
+            Object {
+              "id": "1.1",
+              "items": undefined,
+              "name": "Ingest Node Pipelines",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "1.2",
+              "items": undefined,
+              "name": "Logstash Pipelines",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "1.3",
+              "items": undefined,
+              "name": "Beats Central Management",
+              "tabIndex": -1,
+            },
+          ],
+          "name": "Ingest",
+          "tabIndex": -1,
+        },
+        Object {
+          "id": "2",
+          "items": Array [
+            Object {
+              "id": "2.1",
+              "items": undefined,
+              "name": "Index Management",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "2.2",
+              "items": undefined,
+              "name": "Index Lifecycle Policies",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "2.3",
+              "items": undefined,
+              "name": "Snapshot and Restore",
+              "tabIndex": -1,
+            },
+          ],
+          "name": "Data",
+          "tabIndex": -1,
+        },
+      ]
+    }
+    mobileBreakpoints={
+      Array [
+        "xs",
+        "s",
+      ]
+    }
+    mobileTitle={
+      <React.Fragment>
+        <FormattedMessage
+          defaultMessage="{solutionName} Menu"
+          id="kibana-react.solutionNav.mobileTitleText"
+          values={
+            Object {
+              "solutionName": "Solution",
+            }
+          }
+        />
+      </React.Fragment>
+    }
+    toggleOpenOnMobile={[Function]}
+  />
+  <KibanaPageTemplateSolutionNavCollapseButton
+    isCollapsed={true}
+  />
+</Fragment>
+`;
 
-exports[`KibanaPageTemplateSolutionNav renders 1`] = `<Fragment />`;
+exports[`KibanaPageTemplateSolutionNav renders 1`] = `
+<Fragment>
+  <EuiSideNav
+    aria-hidden={true}
+    className="kbnPageTemplateSolutionNav kbnPageTemplateSolutionNav--hidden"
+    heading={
+      <React.Fragment>
+        <strong>
+          Solution
+        </strong>
+      </React.Fragment>
+    }
+    isOpenOnMobile={false}
+    items={
+      Array [
+        Object {
+          "id": "1",
+          "items": Array [
+            Object {
+              "id": "1.1",
+              "items": undefined,
+              "name": "Ingest Node Pipelines",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "1.2",
+              "items": undefined,
+              "name": "Logstash Pipelines",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "1.3",
+              "items": undefined,
+              "name": "Beats Central Management",
+              "tabIndex": -1,
+            },
+          ],
+          "name": "Ingest",
+          "tabIndex": -1,
+        },
+        Object {
+          "id": "2",
+          "items": Array [
+            Object {
+              "id": "2.1",
+              "items": undefined,
+              "name": "Index Management",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "2.2",
+              "items": undefined,
+              "name": "Index Lifecycle Policies",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "2.3",
+              "items": undefined,
+              "name": "Snapshot and Restore",
+              "tabIndex": -1,
+            },
+          ],
+          "name": "Data",
+          "tabIndex": -1,
+        },
+      ]
+    }
+    mobileBreakpoints={
+      Array [
+        "xs",
+        "s",
+      ]
+    }
+    mobileTitle={
+      <React.Fragment>
+        <FormattedMessage
+          defaultMessage="{solutionName} Menu"
+          id="kibana-react.solutionNav.mobileTitleText"
+          values={
+            Object {
+              "solutionName": "Solution",
+            }
+          }
+        />
+      </React.Fragment>
+    }
+    toggleOpenOnMobile={[Function]}
+  />
+  <KibanaPageTemplateSolutionNavCollapseButton
+    isCollapsed={true}
+  />
+</Fragment>
+`;
 
-exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `<Fragment />`;
+exports[`KibanaPageTemplateSolutionNav renders with icon 1`] = `
+<Fragment>
+  <EuiSideNav
+    aria-hidden={true}
+    className="kbnPageTemplateSolutionNav kbnPageTemplateSolutionNav--hidden"
+    heading={
+      <React.Fragment>
+        <KibanaPageTemplateSolutionNavAvatar
+          iconType="logoElastic"
+          name="Solution"
+        />
+        <strong>
+          Solution
+        </strong>
+      </React.Fragment>
+    }
+    isOpenOnMobile={false}
+    items={
+      Array [
+        Object {
+          "id": "1",
+          "items": Array [
+            Object {
+              "id": "1.1",
+              "items": undefined,
+              "name": "Ingest Node Pipelines",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "1.2",
+              "items": undefined,
+              "name": "Logstash Pipelines",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "1.3",
+              "items": undefined,
+              "name": "Beats Central Management",
+              "tabIndex": -1,
+            },
+          ],
+          "name": "Ingest",
+          "tabIndex": -1,
+        },
+        Object {
+          "id": "2",
+          "items": Array [
+            Object {
+              "id": "2.1",
+              "items": undefined,
+              "name": "Index Management",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "2.2",
+              "items": undefined,
+              "name": "Index Lifecycle Policies",
+              "tabIndex": -1,
+            },
+            Object {
+              "id": "2.3",
+              "items": undefined,
+              "name": "Snapshot and Restore",
+              "tabIndex": -1,
+            },
+          ],
+          "name": "Data",
+          "tabIndex": -1,
+        },
+      ]
+    }
+    mobileBreakpoints={
+      Array [
+        "xs",
+        "s",
+      ]
+    }
+    mobileTitle={
+      <React.Fragment>
+        <KibanaPageTemplateSolutionNavAvatar
+          iconType="logoElastic"
+          name="Solution"
+        />
+        <FormattedMessage
+          defaultMessage="{solutionName} Menu"
+          id="kibana-react.solutionNav.mobileTitleText"
+          values={
+            Object {
+              "solutionName": "Solution",
+            }
+          }
+        />
+      </React.Fragment>
+    }
+    toggleOpenOnMobile={[Function]}
+  />
+  <KibanaPageTemplateSolutionNavCollapseButton
+    isCollapsed={true}
+  />
+</Fragment>
+`;
diff --git a/test/functional/page_objects/common_page.ts b/test/functional/page_objects/common_page.ts
index 91b852849c0cea..71594370680df4 100644
--- a/test/functional/page_objects/common_page.ts
+++ b/test/functional/page_objects/common_page.ts
@@ -414,9 +414,9 @@ export class CommonPageObject extends FtrService {
   async closeToast() {
     const toast = await this.find.byCssSelector('.euiToast', 6 * this.defaultFindTimeout);
     await toast.moveMouseTo();
-    const title = await (await this.find.byCssSelector('.euiToastHeader__title')).getVisibleText();
+    const title = await (await this.testSubjects.find('euiToastHeader__title')).getVisibleText();
 
-    await this.find.clickByCssSelector('.euiToast__closeButton');
+    await this.testSubjects.click('toastCloseButton');
     return title;
   }
 
@@ -424,7 +424,7 @@ export class CommonPageObject extends FtrService {
     const toastShown = await this.find.existsByCssSelector('.euiToast');
     if (toastShown) {
       try {
-        await this.find.clickByCssSelector('.euiToast__closeButton');
+        await this.testSubjects.click('toastCloseButton');
       } catch (err) {
         // ignore errors, toast clear themselves after timeout
       }
@@ -436,7 +436,7 @@ export class CommonPageObject extends FtrService {
     for (const toastElement of toasts) {
       try {
         await toastElement.moveMouseTo();
-        const closeBtn = await toastElement.findByCssSelector('.euiToast__closeButton');
+        const closeBtn = await toastElement.findByTestSubject('toastCloseButton');
         await closeBtn.click();
       } catch (err) {
         // ignore errors, toast clear themselves after timeout
diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/cloud_details.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/cloud_details.tsx
index b5e4013d08ecb6..f84c0c09cee3be 100644
--- a/x-pack/plugins/apm/public/components/shared/service_icons/cloud_details.tsx
+++ b/x-pack/plugins/apm/public/components/shared/service_icons/cloud_details.tsx
@@ -5,8 +5,11 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiDescriptionList } from '@elastic/eui';
-import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
+import {
+  EuiBadge,
+  EuiDescriptionList,
+  EuiDescriptionListProps,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { APIReturnType } from '../../../services/rest/create_call_apm_api';
diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/container_details.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/container_details.tsx
index 2bc3fddfb7590e..aff1a6d9c053f8 100644
--- a/x-pack/plugins/apm/public/components/shared/service_icons/container_details.tsx
+++ b/x-pack/plugins/apm/public/components/shared/service_icons/container_details.tsx
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import { EuiDescriptionList } from '@elastic/eui';
-import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
+import { EuiDescriptionList, EuiDescriptionListProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { asInteger } from '../../../../common/utils/formatters';
diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/serverless_details.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/serverless_details.tsx
index d05abab6d674ab..5d6e3f5df0b66d 100644
--- a/x-pack/plugins/apm/public/components/shared/service_icons/serverless_details.tsx
+++ b/x-pack/plugins/apm/public/components/shared/service_icons/serverless_details.tsx
@@ -5,8 +5,11 @@
  * 2.0.
  */
 
-import { EuiBadge, EuiDescriptionList } from '@elastic/eui';
-import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
+import {
+  EuiBadge,
+  EuiDescriptionList,
+  EuiDescriptionListProps,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { APIReturnType } from '../../../services/rest/create_call_apm_api';
diff --git a/x-pack/plugins/apm/public/components/shared/service_icons/service_details.tsx b/x-pack/plugins/apm/public/components/shared/service_icons/service_details.tsx
index 5ddb9a422c37c7..2c6e900822103a 100644
--- a/x-pack/plugins/apm/public/components/shared/service_icons/service_details.tsx
+++ b/x-pack/plugins/apm/public/components/shared/service_icons/service_details.tsx
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import { EuiDescriptionList } from '@elastic/eui';
-import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
+import { EuiDescriptionList, EuiDescriptionListProps } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { APIReturnType } from '../../../services/rest/create_call_apm_api';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
index a2f91fed539747..3652e294e7ea31 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/__stories__/__snapshots__/palette.stories.storyshot
@@ -19,7 +19,308 @@ exports[`Storyshots arguments/Palette default 1`] = `
   >
     <div
       className="euiPopover__anchor css-zih94u-render"
-    />
+    >
+      <div>
+        <input
+          readOnly={false}
+          type="hidden"
+          value="paul_tor_14"
+        />
+        <div
+          className="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <span
+              className="emotion-euiScreenReaderOnly"
+              id="euiSuperSelect__generated-id__screenreaderLabelId"
+            >
+              Select an option: 
+              <span
+                className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+              >
+                <span
+                  className="emotion-euiScreenReaderOnly"
+                >
+                  Paul Tor 14
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="euiColorPaletteDisplayFixed__bleedArea"
+                >
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#882E72",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#B178A6",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#D6C1DE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#1965B0",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#5289C7",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#7BAFDE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#4EB265",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#90C987",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#CAE0AB",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F7EE55",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F6C141",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F1932D",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#E8601C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#DC050C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                </span>
+              </span>
+              , is selected
+            </span>
+            <button
+              aria-haspopup="listbox"
+              className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+              disabled={false}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              readOnly={false}
+              type="button"
+            >
+              <span
+                className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+              >
+                <span
+                  className="emotion-euiScreenReaderOnly"
+                >
+                  Paul Tor 14
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="euiColorPaletteDisplayFixed__bleedArea"
+                >
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#882E72",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#B178A6",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#D6C1DE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#1965B0",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#5289C7",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#7BAFDE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#4EB265",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#90C987",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#CAE0AB",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F7EE55",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F6C141",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F1932D",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#E8601C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#DC050C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                </span>
+              </span>
+            </button>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <span
+                className="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  className="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                  size="s"
+                >
+                  
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
index 0be0910d5eaeb1..0e26992ede1e4c 100644
--- a/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/font_picker/__stories__/__snapshots__/font_picker.stories.storyshot
@@ -11,7 +11,51 @@ exports[`Storyshots components/FontPicker default 1`] = `
 >
   <div
     className="euiPopover__anchor css-zih94u-render"
-  />
+  >
+    <div>
+      <input
+        defaultValue=""
+        type="hidden"
+      />
+      <div
+        className="euiFormControlLayout euiFormControlLayout--compressed"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <span
+            className="emotion-euiScreenReaderOnly"
+            id="euiSuperSelect__generated-id__screenreaderLabelId"
+          >
+            Select an option: , is selected
+          </span>
+          <button
+            aria-haspopup="listbox"
+            className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          />
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          >
+            <span
+              className="euiFormControlLayoutCustomIcon"
+            >
+              <span
+                aria-hidden="true"
+                className="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="arrowDown"
+                size="s"
+              >
+                
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
@@ -26,6 +70,70 @@ exports[`Storyshots components/FontPicker with value 1`] = `
 >
   <div
     className="euiPopover__anchor css-zih94u-render"
-  />
+  >
+    <div>
+      <input
+        type="hidden"
+        value="'American Typewriter', 'Courier New', Courier, Monaco, mono"
+      />
+      <div
+        className="euiFormControlLayout euiFormControlLayout--compressed"
+      >
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+        >
+          <span
+            className="emotion-euiScreenReaderOnly"
+            id="euiSuperSelect__generated-id__screenreaderLabelId"
+          >
+            Select an option: 
+            <div
+              style={
+                Object {
+                  "fontFamily": "'American Typewriter', 'Courier New', Courier, Monaco, mono",
+                }
+              }
+            >
+              American Typewriter
+            </div>
+            , is selected
+          </span>
+          <button
+            aria-haspopup="listbox"
+            className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            type="button"
+          >
+            <div
+              style={
+                Object {
+                  "fontFamily": "'American Typewriter', 'Courier New', Courier, Monaco, mono",
+                }
+              }
+            >
+              American Typewriter
+            </div>
+          </button>
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+          >
+            <span
+              className="euiFormControlLayoutCustomIcon"
+            >
+              <span
+                aria-hidden="true"
+                className="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="arrowDown"
+                size="s"
+              >
+                
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
index 75f379bf944f73..25f046151c0351 100644
--- a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
@@ -42,15 +42,16 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
             className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall emotion-euiHorizontalRule-full-s"
           />
           <dl
-            className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
+            className="euiDescriptionList emotion-euiDescriptionList-column-left"
+            data-type="column"
           >
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Cut
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -63,12 +64,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Copy
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -81,12 +82,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Paste
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -99,12 +100,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Clone
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -117,12 +118,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Delete
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -141,12 +142,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Bring to front
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -159,12 +160,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Bring forward
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -181,12 +182,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Send backward
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -199,12 +200,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Send to back
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -221,12 +222,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Group
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -235,12 +236,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Ungroup
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -249,12 +250,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Shift up by 10px
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -263,12 +264,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Shift down by 10px
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -277,12 +278,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Shift left by 10px
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -291,12 +292,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Shift right by 10px
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -305,12 +306,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Shift up by 1px
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -323,12 +324,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Shift down by 1px
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -341,12 +342,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Shift left by 1px
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -359,12 +360,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Shift right by 1px
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -393,15 +394,16 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
             className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall emotion-euiHorizontalRule-full-s"
           />
           <dl
-            className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
+            className="euiDescriptionList emotion-euiDescriptionList-column-left"
+            data-type="column"
           >
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Run whole expression
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -430,15 +432,16 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
             className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall emotion-euiHorizontalRule-full-s"
           />
           <dl
-            className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
+            className="euiDescriptionList emotion-euiDescriptionList-column-left"
+            data-type="column"
           >
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Select multiple elements
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -451,12 +454,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Resize from center
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -469,12 +472,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Move, resize, and rotate without snapping
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -487,12 +490,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Select element below
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -505,12 +508,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Undo last action
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -523,12 +526,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Redo last action
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -545,12 +548,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Go to previous page
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -563,12 +566,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Go to next page
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -581,12 +584,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Toggle edit mode
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -599,12 +602,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Show grid
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -617,12 +620,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Refresh workpad
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -635,12 +638,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Zoom in
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -657,12 +660,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Zoom out
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -679,12 +682,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Reset zoom to 100%
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -701,12 +704,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Enter presentation mode
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -749,15 +752,16 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
             className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall emotion-euiHorizontalRule-full-s"
           />
           <dl
-            className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
+            className="euiDescriptionList emotion-euiDescriptionList-column-left"
+            data-type="column"
           >
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Enter presentation mode
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -784,12 +788,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Exit presentation mode
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -798,12 +802,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Go to previous page
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -836,12 +840,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Go to next page
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -874,12 +878,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Refresh workpad
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
@@ -892,12 +896,12 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
               </span>
             </dd>
             <dt
-              className="euiDescriptionList__title"
+              className="euiDescriptionList__title emotion-euiDescriptionList__title-column-reverse"
             >
               Toggle page cycling
             </dt>
             <dd
-              className="euiDescriptionList__description"
+              className="euiDescriptionList__description emotion-euiDescriptionList__description-column-compressed"
             >
               <span>
                 <code>
diff --git a/x-pack/plugins/canvas/public/components/palette_picker/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/palette_picker/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
index 2748b58f72e995..3fd216db15dbb0 100644
--- a/x-pack/plugins/canvas/public/components/palette_picker/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/palette_picker/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
@@ -18,7 +18,56 @@ exports[`Storyshots components/Color/PalettePicker clearable 1`] = `
   >
     <div
       className="euiPopover__anchor css-zih94u-render"
-    />
+    >
+      <div>
+        <input
+          readOnly={false}
+          type="hidden"
+          value="clear"
+        />
+        <div
+          className="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <span
+              className="emotion-euiScreenReaderOnly"
+              id="euiSuperSelect__generated-id__screenreaderLabelId"
+            >
+              Select an option: None, is selected
+            </span>
+            <button
+              aria-haspopup="listbox"
+              className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+              disabled={false}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              readOnly={false}
+              type="button"
+            >
+              None
+            </button>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <span
+                className="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  className="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                  size="s"
+                >
+                  
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -41,7 +90,308 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
   >
     <div
       className="euiPopover__anchor css-zih94u-render"
-    />
+    >
+      <div>
+        <input
+          readOnly={false}
+          type="hidden"
+          value="paul_tor_14"
+        />
+        <div
+          className="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <span
+              className="emotion-euiScreenReaderOnly"
+              id="euiSuperSelect__generated-id__screenreaderLabelId"
+            >
+              Select an option: 
+              <span
+                className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+              >
+                <span
+                  className="emotion-euiScreenReaderOnly"
+                >
+                  Paul Tor 14
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="euiColorPaletteDisplayFixed__bleedArea"
+                >
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#882E72",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#B178A6",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#D6C1DE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#1965B0",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#5289C7",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#7BAFDE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#4EB265",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#90C987",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#CAE0AB",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F7EE55",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F6C141",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F1932D",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#E8601C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#DC050C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                </span>
+              </span>
+              , is selected
+            </span>
+            <button
+              aria-haspopup="listbox"
+              className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+              disabled={false}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              readOnly={false}
+              type="button"
+            >
+              <span
+                className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+              >
+                <span
+                  className="emotion-euiScreenReaderOnly"
+                >
+                  Paul Tor 14
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="euiColorPaletteDisplayFixed__bleedArea"
+                >
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#882E72",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#B178A6",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#D6C1DE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#1965B0",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#5289C7",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#7BAFDE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#4EB265",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#90C987",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#CAE0AB",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F7EE55",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F6C141",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F1932D",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#E8601C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#DC050C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                </span>
+              </span>
+            </button>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <span
+                className="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  className="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                  size="s"
+                >
+                  
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
@@ -64,7 +414,308 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
   >
     <div
       className="euiPopover__anchor css-zih94u-render"
-    />
+    >
+      <div>
+        <input
+          readOnly={false}
+          type="hidden"
+          value="paul_tor_14"
+        />
+        <div
+          className="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <span
+              className="emotion-euiScreenReaderOnly"
+              id="euiSuperSelect__generated-id__screenreaderLabelId"
+            >
+              Select an option: 
+              <span
+                className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+              >
+                <span
+                  className="emotion-euiScreenReaderOnly"
+                >
+                  Paul Tor 14
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="euiColorPaletteDisplayFixed__bleedArea"
+                >
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#882E72",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#B178A6",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#D6C1DE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#1965B0",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#5289C7",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#7BAFDE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#4EB265",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#90C987",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#CAE0AB",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F7EE55",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F6C141",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F1932D",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#E8601C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#DC050C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                </span>
+              </span>
+              , is selected
+            </span>
+            <button
+              aria-haspopup="listbox"
+              className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+              disabled={false}
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              readOnly={false}
+              type="button"
+            >
+              <span
+                className="euiColorPaletteDisplay euiColorPaletteDisplay--sizeSmall"
+              >
+                <span
+                  className="emotion-euiScreenReaderOnly"
+                >
+                  Paul Tor 14
+                </span>
+                <span
+                  aria-hidden="true"
+                  className="euiColorPaletteDisplayFixed__bleedArea"
+                >
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#882E72",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#B178A6",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#D6C1DE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#1965B0",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#5289C7",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#7BAFDE",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#4EB265",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#90C987",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#CAE0AB",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F7EE55",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F6C141",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#F1932D",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#E8601C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                  <span
+                    style={
+                      Object {
+                        "backgroundColor": "#DC050C",
+                        "width": "7.142857142857143%",
+                      }
+                    }
+                  />
+                </span>
+              </span>
+            </button>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+            >
+              <span
+                className="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  className="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                  size="s"
+                >
+                  
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </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 b6f38d3c13fb8b..bac458e4b3e4df 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
@@ -27,7 +27,51 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
         >
           <div
             className="euiPopover__anchor css-zih94u-render"
-          />
+          >
+            <div>
+              <input
+                defaultValue=""
+                type="hidden"
+              />
+              <div
+                className="euiFormControlLayout euiFormControlLayout--compressed"
+              >
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
+                >
+                  <span
+                    className="emotion-euiScreenReaderOnly"
+                    id="euiSuperSelect__generated-id__screenreaderLabelId"
+                  >
+                    Select an option: , is selected
+                  </span>
+                  <button
+                    aria-haspopup="listbox"
+                    className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    type="button"
+                  />
+                  <div
+                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  >
+                    <span
+                      className="euiFormControlLayoutCustomIcon"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="euiFormControlLayoutCustomIcon__icon"
+                        data-euiicon-type="arrowDown"
+                        size="s"
+                      >
+                        
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -487,7 +531,51 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
         >
           <div
             className="euiPopover__anchor css-zih94u-render"
-          />
+          >
+            <div>
+              <input
+                defaultValue=""
+                type="hidden"
+              />
+              <div
+                className="euiFormControlLayout euiFormControlLayout--compressed"
+              >
+                <div
+                  className="euiFormControlLayout__childrenWrapper"
+                >
+                  <span
+                    className="emotion-euiScreenReaderOnly"
+                    id="euiSuperSelect__generated-id__screenreaderLabelId"
+                  >
+                    Select an option: , is selected
+                  </span>
+                  <button
+                    aria-haspopup="listbox"
+                    className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+                    onClick={[Function]}
+                    onKeyDown={[Function]}
+                    type="button"
+                  />
+                  <div
+                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  >
+                    <span
+                      className="euiFormControlLayoutCustomIcon"
+                    >
+                      <span
+                        aria-hidden="true"
+                        className="euiFormControlLayoutCustomIcon__icon"
+                        data-euiicon-type="arrowDown"
+                        size="s"
+                      >
+                        
+                      </span>
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
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 9a15157e91fedf..cb5265d15e428e 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
@@ -90,7 +90,94 @@ Array [
           >
             <div
               className="euiPopover__anchor css-zih94u-render"
-            />
+            >
+              <div>
+                <input
+                  id="generated-id"
+                  type="hidden"
+                  value="boolean"
+                />
+                <div
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <span
+                      className="emotion-euiScreenReaderOnly"
+                      id="euiSuperSelect__generated-id__screenreaderLabelId"
+                    >
+                      Select an option: 
+                      <div
+                        className="canvasEditVar__typeOption"
+                      >
+                        <span
+                          className="euiToken canvasEditVar__tokenIcon emotion-euiToken-square-light-s-euiColorVis7"
+                          style={Object {}}
+                        >
+                          <span
+                            data-euiicon-type="tokenBoolean"
+                            size="m"
+                          >
+                            
+                          </span>
+                        </span>
+                         
+                        <span>
+                          Boolean
+                        </span>
+                      </div>
+                      , is selected
+                    </span>
+                    <button
+                      aria-haspopup="listbox"
+                      className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      type="button"
+                    >
+                      <div
+                        className="canvasEditVar__typeOption"
+                      >
+                        <span
+                          className="euiToken canvasEditVar__tokenIcon emotion-euiToken-square-light-s-euiColorVis7"
+                          style={Object {}}
+                        >
+                          <span
+                            data-euiicon-type="tokenBoolean"
+                            size="m"
+                          >
+                            
+                          </span>
+                        </span>
+                         
+                        <span>
+                          Boolean
+                        </span>
+                      </div>
+                    </button>
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <span
+                        className="euiFormControlLayoutCustomIcon"
+                      >
+                        <span
+                          aria-hidden="true"
+                          className="euiFormControlLayoutCustomIcon__icon"
+                          data-euiicon-type="arrowDown"
+                          size="s"
+                        >
+                          
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -383,7 +470,94 @@ Array [
           >
             <div
               className="euiPopover__anchor css-zih94u-render"
-            />
+            >
+              <div>
+                <input
+                  id="generated-id"
+                  type="hidden"
+                  value="number"
+                />
+                <div
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <span
+                      className="emotion-euiScreenReaderOnly"
+                      id="euiSuperSelect__generated-id__screenreaderLabelId"
+                    >
+                      Select an option: 
+                      <div
+                        className="canvasEditVar__typeOption"
+                      >
+                        <span
+                          className="euiToken canvasEditVar__tokenIcon emotion-euiToken-square-light-s-euiColorVis0"
+                          style={Object {}}
+                        >
+                          <span
+                            data-euiicon-type="tokenNumber"
+                            size="m"
+                          >
+                            
+                          </span>
+                        </span>
+                         
+                        <span>
+                          Number
+                        </span>
+                      </div>
+                      , is selected
+                    </span>
+                    <button
+                      aria-haspopup="listbox"
+                      className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      type="button"
+                    >
+                      <div
+                        className="canvasEditVar__typeOption"
+                      >
+                        <span
+                          className="euiToken canvasEditVar__tokenIcon emotion-euiToken-square-light-s-euiColorVis0"
+                          style={Object {}}
+                        >
+                          <span
+                            data-euiicon-type="tokenNumber"
+                            size="m"
+                          >
+                            
+                          </span>
+                        </span>
+                         
+                        <span>
+                          Number
+                        </span>
+                      </div>
+                    </button>
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <span
+                        className="euiFormControlLayoutCustomIcon"
+                      >
+                        <span
+                          aria-hidden="true"
+                          className="euiFormControlLayoutCustomIcon__icon"
+                          data-euiicon-type="arrowDown"
+                          size="s"
+                        >
+                          
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -617,7 +791,94 @@ Array [
           >
             <div
               className="euiPopover__anchor css-zih94u-render"
-            />
+            >
+              <div>
+                <input
+                  id="generated-id"
+                  type="hidden"
+                  value="string"
+                />
+                <div
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <span
+                      className="emotion-euiScreenReaderOnly"
+                      id="euiSuperSelect__generated-id__screenreaderLabelId"
+                    >
+                      Select an option: 
+                      <div
+                        className="canvasEditVar__typeOption"
+                      >
+                        <span
+                          className="euiToken canvasEditVar__tokenIcon emotion-euiToken-square-light-s-euiColorVis1"
+                          style={Object {}}
+                        >
+                          <span
+                            data-euiicon-type="tokenString"
+                            size="m"
+                          >
+                            
+                          </span>
+                        </span>
+                         
+                        <span>
+                          String
+                        </span>
+                      </div>
+                      , is selected
+                    </span>
+                    <button
+                      aria-haspopup="listbox"
+                      className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      type="button"
+                    >
+                      <div
+                        className="canvasEditVar__typeOption"
+                      >
+                        <span
+                          className="euiToken canvasEditVar__tokenIcon emotion-euiToken-square-light-s-euiColorVis1"
+                          style={Object {}}
+                        >
+                          <span
+                            data-euiicon-type="tokenString"
+                            size="m"
+                          >
+                            
+                          </span>
+                        </span>
+                         
+                        <span>
+                          String
+                        </span>
+                      </div>
+                    </button>
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <span
+                        className="euiFormControlLayoutCustomIcon"
+                      >
+                        <span
+                          aria-hidden="true"
+                          className="euiFormControlLayoutCustomIcon__icon"
+                          data-euiicon-type="arrowDown"
+                          size="s"
+                        >
+                          
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -828,7 +1089,94 @@ Array [
           >
             <div
               className="euiPopover__anchor css-zih94u-render"
-            />
+            >
+              <div>
+                <input
+                  id="generated-id"
+                  type="hidden"
+                  value="string"
+                />
+                <div
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <span
+                      className="emotion-euiScreenReaderOnly"
+                      id="euiSuperSelect__generated-id__screenreaderLabelId"
+                    >
+                      Select an option: 
+                      <div
+                        className="canvasEditVar__typeOption"
+                      >
+                        <span
+                          className="euiToken canvasEditVar__tokenIcon emotion-euiToken-square-light-s-euiColorVis1"
+                          style={Object {}}
+                        >
+                          <span
+                            data-euiicon-type="tokenString"
+                            size="m"
+                          >
+                            
+                          </span>
+                        </span>
+                         
+                        <span>
+                          String
+                        </span>
+                      </div>
+                      , is selected
+                    </span>
+                    <button
+                      aria-haspopup="listbox"
+                      className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      type="button"
+                    >
+                      <div
+                        className="canvasEditVar__typeOption"
+                      >
+                        <span
+                          className="euiToken canvasEditVar__tokenIcon emotion-euiToken-square-light-s-euiColorVis1"
+                          style={Object {}}
+                        >
+                          <span
+                            data-euiicon-type="tokenString"
+                            size="m"
+                          >
+                            
+                          </span>
+                        </span>
+                         
+                        <span>
+                          String
+                        </span>
+                      </div>
+                    </button>
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <span
+                        className="euiFormControlLayoutCustomIcon"
+                      >
+                        <span
+                          aria-hidden="true"
+                          className="euiFormControlLayoutCustomIcon__icon"
+                          data-euiicon-type="arrowDown"
+                          size="s"
+                        >
+                          
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/var_config.stories.storyshot b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/var_config.stories.storyshot
index fef7845af74f27..208d358405f191 100644
--- a/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/var_config.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/var_config.stories.storyshot
@@ -92,7 +92,656 @@ exports[`Storyshots components/Variables/VarConfig default 1`] = `
         id="accordion-variables"
         role="region"
         tabIndex={-1}
-      />
+      >
+        <div>
+          <div
+            className=" emotion-euiAccordion__children"
+          >
+            <div
+              className="canvasSidebar__accordionContent"
+            >
+              <div
+                className="euiBasicTable canvasVarConfig__list"
+              >
+                <div>
+                  <div
+                    className="euiTableHeaderMobile"
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      />
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <div
+                          className="euiTableSortMobile"
+                        >
+                          <div
+                            className="euiPopover emotion-euiPopover"
+                          >
+                            <div
+                              className="euiPopover__anchor css-16vtueo-render"
+                            >
+                              <button
+                                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                                disabled={false}
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                                >
+                                  <span
+                                    className="euiButtonContent__icon"
+                                    color="inherit"
+                                    data-euiicon-type="arrowDown"
+                                    size="s"
+                                  >
+                                    
+                                  </span>
+                                  <span
+                                    className="euiButtonEmpty__text"
+                                  >
+                                    Sorting
+                                  </span>
+                                </span>
+                              </button>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <table
+                    className="euiTable euiTable--compressed euiTable--responsive"
+                    id="__table_generated-id"
+                    tabIndex={-1}
+                  >
+                    <caption
+                      className="euiTableCaption emotion-euiScreenReaderOnly"
+                    />
+                    <thead>
+                      <tr>
+                        <th
+                          aria-live="polite"
+                          aria-sort="none"
+                          className="euiTableHeaderCell"
+                          data-test-subj="tableHeaderCell_type_0"
+                          role="columnheader"
+                          scope="col"
+                          style={
+                            Object {
+                              "width": "50px",
+                            }
+                          }
+                        >
+                          <button
+                            className="euiTableHeaderButton"
+                            data-test-subj="tableHeaderSortButton"
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <span
+                              className="euiTableCellContent"
+                            >
+                              <span
+                                className="euiTableCellContent__text"
+                              >
+                                Type
+                              </span>
+                            </span>
+                          </button>
+                        </th>
+                        <th
+                          aria-live="polite"
+                          aria-sort="none"
+                          className="euiTableHeaderCell"
+                          data-test-subj="tableHeaderCell_name_1"
+                          role="columnheader"
+                          scope="col"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <button
+                            className="euiTableHeaderButton"
+                            data-test-subj="tableHeaderSortButton"
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <span
+                              className="euiTableCellContent"
+                            >
+                              <span
+                                className="euiTableCellContent__text"
+                              >
+                                Name
+                              </span>
+                            </span>
+                          </button>
+                        </th>
+                        <th
+                          aria-live="polite"
+                          aria-sort="none"
+                          className="euiTableHeaderCell"
+                          data-test-subj="tableHeaderCell_value_2"
+                          role="columnheader"
+                          scope="col"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <button
+                            className="euiTableHeaderButton"
+                            data-test-subj="tableHeaderSortButton"
+                            onClick={[Function]}
+                            type="button"
+                          >
+                            <span
+                              className="euiTableCellContent"
+                            >
+                              <span
+                                className="euiTableCellContent__text"
+                              >
+                                Value
+                              </span>
+                            </span>
+                          </button>
+                        </th>
+                        <td
+                          className="euiTableHeaderCell"
+                          role="columnheader"
+                          style={
+                            Object {
+                              "width": "60px",
+                            }
+                          }
+                        >
+                          <span
+                            className="euiTableCellContent euiTableCellContent--alignRight"
+                          >
+                            <span
+                              className="euiTableCellContent__text"
+                            />
+                          </span>
+                        </td>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr
+                        className="euiTableRow euiTableRow-hasActions"
+                      >
+                        <td
+                          className="euiTableRowCell euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": "50px",
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                          >
+                            Type
+                          </div>
+                          <div
+                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                          >
+                            <span
+                              className="euiToken emotion-euiToken-square-light-s-euiColorVis1"
+                              style={Object {}}
+                            >
+                              <span
+                                data-euiicon-type="tokenString"
+                                size="m"
+                              >
+                                
+                              </span>
+                            </span>
+                          </div>
+                        </td>
+                        <td
+                          className="euiTableRowCell euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                          >
+                            Name
+                          </div>
+                          <div
+                            className="euiTableCellContent"
+                          >
+                            <span
+                              className="euiTableCellContent__text"
+                            >
+                              homeUrl
+                            </span>
+                          </div>
+                        </td>
+                        <td
+                          className="euiTableRowCell euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                          >
+                            Value
+                          </div>
+                          <div
+                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                          >
+                            https://elastic.co
+                          </div>
+                        </td>
+                        <td
+                          className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+                          >
+                            <span
+                              className="euiToolTipAnchor"
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                            >
+                              <button
+                                aria-labelledby="generated-id"
+                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiTableCellContent__hoverItem"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  className="euiButtonIcon__icon"
+                                  color="inherit"
+                                  data-euiicon-type="copyClipboard"
+                                  size="m"
+                                >
+                                  
+                                </span>
+                              </button>
+                              <span
+                                className="emotion-euiScreenReaderOnly"
+                                id="generated-id"
+                              >
+                                Copy snippet
+                              </span>
+                            </span>
+                            <div
+                              className="euiTableCellContent__hoverItem"
+                            >
+                              <div
+                                className="euiPopover emotion-euiPopover"
+                                id="0-actions"
+                              >
+                                <div
+                                  className="euiPopover__anchor css-16vtueo-render"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <button
+                                      aria-label="All actions"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="euiCollapsedItemActionsButton"
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      type="button"
+                                    >
+                                      <span
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        data-euiicon-type="boxesHorizontal"
+                                        size="m"
+                                      >
+                                        
+                                      </span>
+                                    </button>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr
+                        className="euiTableRow euiTableRow-hasActions"
+                      >
+                        <td
+                          className="euiTableRowCell euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": "50px",
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                          >
+                            Type
+                          </div>
+                          <div
+                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                          >
+                            <span
+                              className="euiToken emotion-euiToken-square-light-s-euiColorVis0"
+                              style={Object {}}
+                            >
+                              <span
+                                data-euiicon-type="tokenNumber"
+                                size="m"
+                              >
+                                
+                              </span>
+                            </span>
+                          </div>
+                        </td>
+                        <td
+                          className="euiTableRowCell euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                          >
+                            Name
+                          </div>
+                          <div
+                            className="euiTableCellContent"
+                          >
+                            <span
+                              className="euiTableCellContent__text"
+                            >
+                              bigNumber
+                            </span>
+                          </div>
+                        </td>
+                        <td
+                          className="euiTableRowCell euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                          >
+                            Value
+                          </div>
+                          <div
+                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                          >
+                            1000
+                          </div>
+                        </td>
+                        <td
+                          className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+                          >
+                            <span
+                              className="euiToolTipAnchor"
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                            >
+                              <button
+                                aria-labelledby="generated-id"
+                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiTableCellContent__hoverItem"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  className="euiButtonIcon__icon"
+                                  color="inherit"
+                                  data-euiicon-type="copyClipboard"
+                                  size="m"
+                                >
+                                  
+                                </span>
+                              </button>
+                              <span
+                                className="emotion-euiScreenReaderOnly"
+                                id="generated-id"
+                              >
+                                Copy snippet
+                              </span>
+                            </span>
+                            <div
+                              className="euiTableCellContent__hoverItem"
+                            >
+                              <div
+                                className="euiPopover emotion-euiPopover"
+                                id="1-actions"
+                              >
+                                <div
+                                  className="euiPopover__anchor css-16vtueo-render"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <button
+                                      aria-label="All actions"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="euiCollapsedItemActionsButton"
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      type="button"
+                                    >
+                                      <span
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        data-euiicon-type="boxesHorizontal"
+                                        size="m"
+                                      >
+                                        
+                                      </span>
+                                    </button>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                      <tr
+                        className="euiTableRow euiTableRow-hasActions"
+                      >
+                        <td
+                          className="euiTableRowCell euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": "50px",
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                          >
+                            Type
+                          </div>
+                          <div
+                            className="euiTableCellContent euiTableCellContent--overflowingContent"
+                          >
+                            <span
+                              className="euiToken emotion-euiToken-square-light-s-euiColorVis7"
+                              style={Object {}}
+                            >
+                              <span
+                                data-euiicon-type="tokenBoolean"
+                                size="m"
+                              >
+                                
+                              </span>
+                            </span>
+                          </div>
+                        </td>
+                        <td
+                          className="euiTableRowCell euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                          >
+                            Name
+                          </div>
+                          <div
+                            className="euiTableCellContent"
+                          >
+                            <span
+                              className="euiTableCellContent__text"
+                            >
+                              zenMode
+                            </span>
+                          </div>
+                        </td>
+                        <td
+                          className="euiTableRowCell euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                          >
+                            Value
+                          </div>
+                          <div
+                            className="euiTableCellContent euiTableCellContent--truncateText euiTableCellContent--overflowingContent"
+                          >
+                            true
+                          </div>
+                        </td>
+                        <td
+                          className="euiTableRowCell euiTableRowCell--hasActions euiTableRowCell--middle"
+                          style={
+                            Object {
+                              "width": undefined,
+                            }
+                          }
+                        >
+                          <div
+                            className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+                          >
+                            <span
+                              className="euiToolTipAnchor"
+                              onMouseOut={[Function]}
+                              onMouseOver={[Function]}
+                            >
+                              <button
+                                aria-labelledby="generated-id"
+                                className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiTableCellContent__hoverItem"
+                                onClick={[Function]}
+                                type="button"
+                              >
+                                <span
+                                  aria-hidden="true"
+                                  className="euiButtonIcon__icon"
+                                  color="inherit"
+                                  data-euiicon-type="copyClipboard"
+                                  size="m"
+                                >
+                                  
+                                </span>
+                              </button>
+                              <span
+                                className="emotion-euiScreenReaderOnly"
+                                id="generated-id"
+                              >
+                                Copy snippet
+                              </span>
+                            </span>
+                            <div
+                              className="euiTableCellContent__hoverItem"
+                            >
+                              <div
+                                className="euiPopover emotion-euiPopover"
+                                id="2-actions"
+                              >
+                                <div
+                                  className="euiPopover__anchor css-16vtueo-render"
+                                >
+                                  <span
+                                    className="euiToolTipAnchor"
+                                    onMouseOut={[Function]}
+                                    onMouseOver={[Function]}
+                                  >
+                                    <button
+                                      aria-label="All actions"
+                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      data-test-subj="euiCollapsedItemActionsButton"
+                                      onClick={[Function]}
+                                      onFocus={[Function]}
+                                      type="button"
+                                    >
+                                      <span
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        color="inherit"
+                                        data-euiicon-type="boxesHorizontal"
+                                        size="m"
+                                      >
+                                        
+                                      </span>
+                                    </button>
+                                  </span>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       className="canvasVarConfig__editView canvasSidebar__accordion"
diff --git a/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/filter.component.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/filter.component.stories.storyshot
index f27063266ecad7..3cc3a8a5ca889c 100644
--- a/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/filter.component.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/filter.component.stories.storyshot
@@ -5,10 +5,11 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent default 1`] = `
   className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
 >
   <dl
-    className="euiDescriptionList euiDescriptionList--column euiDescriptionList--compressed workpadFilter"
+    className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+    data-type="column"
   >
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -24,7 +25,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent default 1`] = `
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -38,7 +39,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent default 1`] = `
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -54,7 +55,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent default 1`] = `
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -68,7 +69,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent default 1`] = `
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -84,7 +85,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent default 1`] = `
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -98,7 +99,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent default 1`] = `
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -114,7 +115,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent default 1`] = `
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -136,10 +137,11 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with component fie
   className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
 >
   <dl
-    className="euiDescriptionList euiDescriptionList--column euiDescriptionList--compressed workpadFilter"
+    className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+    data-type="column"
   >
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -155,7 +157,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with component fie
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -169,7 +171,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with component fie
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -185,7 +187,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with component fie
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -199,7 +201,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with component fie
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -215,7 +217,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with component fie
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -240,7 +242,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with component fie
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -256,7 +258,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with component fie
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -278,10 +280,11 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
   className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
 >
   <dl
-    className="euiDescriptionList euiDescriptionList--column euiDescriptionList--compressed workpadFilter"
+    className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+    data-type="column"
   >
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -297,7 +300,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -311,7 +314,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -327,7 +330,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -341,7 +344,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -357,7 +360,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -371,7 +374,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -387,7 +390,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
@@ -401,7 +404,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
       </div>
     </dd>
     <dt
-      className="euiDescriptionList__title eui-textBreakWord"
+      className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
       style={
         Object {
           "width": "30%",
@@ -417,7 +420,7 @@ exports[`Storyshots components/WorkpadFilters/FilterComponent with custom filter
       </div>
     </dt>
     <dd
-      className="euiDescriptionList__description eui-textBreakWord"
+      className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
       style={
         Object {
           "width": "70%",
diff --git a/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/filters_group.component.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/filters_group.component.stories.storyshot
index 2961b643a2f54a..cc3140aa50c1e5 100644
--- a/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/filters_group.component.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/filters_group.component.stories.storyshot
@@ -58,7 +58,598 @@ exports[`Storyshots components/WorkpadFilters/FiltersGroupComponent default 1`]
         id="canvas-filter-group-0"
         role="region"
         tabIndex={-1}
-      />
+      >
+        <div>
+          <div
+            className=" emotion-euiAccordion__children"
+          >
+            <div
+              style={
+                Object {
+                  "paddingTop": "15px",
+                }
+              }
+            >
+              <div
+                className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+              >
+                <dl
+                  className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                  data-type="column"
+                >
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Column
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      project
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Value
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      kibana
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Type
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      Dropdown
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Filter group
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      Group 1
+                    </div>
+                  </dd>
+                </dl>
+              </div>
+              <div
+                className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+              >
+                <dl
+                  className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                  data-type="column"
+                >
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Column
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      @timestamp
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        From
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      2021-01-01 08:15:00
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        To
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      2021-02-01 17:22:00
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Type
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      Time
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Filter group
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      Group 1
+                    </div>
+                  </dd>
+                </dl>
+              </div>
+              <div
+                className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+              >
+                <dl
+                  className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                  data-type="column"
+                >
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Column
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      country
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Value
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      US
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Type
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      Dropdown
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Filter group
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      Group 1
+                    </div>
+                  </dd>
+                </dl>
+              </div>
+              <div
+                className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+              >
+                <dl
+                  className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                  data-type="column"
+                >
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Column
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      time
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        From
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      2021-05-01 10:50:00
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        To
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      2021-05-01 04:40:00
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Type
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      Time
+                    </div>
+                  </dd>
+                  <dt
+                    className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                    style={
+                      Object {
+                        "width": "30%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      <h4>
+                        Filter group
+                      </h4>
+                    </div>
+                  </dt>
+                  <dd
+                    className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                    style={
+                      Object {
+                        "width": "70%",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiText emotion-euiText-s"
+                    >
+                      Group 1
+                    </div>
+                  </dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -122,7 +713,21 @@ exports[`Storyshots components/WorkpadFilters/FiltersGroupComponent empty group
         id="canvas-filter-group-0"
         role="region"
         tabIndex={-1}
-      />
+      >
+        <div>
+          <div
+            className=" emotion-euiAccordion__children"
+          >
+            <div
+              style={
+                Object {
+                  "paddingTop": "15px",
+                }
+              }
+            />
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/workpad_filters.component.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/workpad_filters.component.stories.storyshot
index 8edc8979476df2..7cc8edb5e69c96 100644
--- a/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/workpad_filters.component.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_filters/__stories__/__snapshots__/workpad_filters.component.stories.storyshot
@@ -223,7 +223,598 @@ exports[`Storyshots components/WorkpadFilters/WorkpadFiltersComponent Filters gr
             id="canvas-filter-group-0"
             role="region"
             tabIndex={-1}
-          />
+          >
+            <div>
+              <div
+                className=" emotion-euiAccordion__children"
+              >
+                <div
+                  style={
+                    Object {
+                      "paddingTop": "15px",
+                    }
+                  }
+                >
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          project
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Value
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          kibana
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Dropdown
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 1
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          @timestamp
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            From
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-01-01 08:15:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            To
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-02-01 17:22:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Time
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 1
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          country
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Value
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          US
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Dropdown
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 2
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          time
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            From
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-05-01 10:50:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            To
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-05-01 04:40:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Time
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 2
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -367,7 +958,598 @@ exports[`Storyshots components/WorkpadFilters/WorkpadFiltersComponent Filters gr
             id="canvas-filter-group-0"
             role="region"
             tabIndex={-1}
-          />
+          >
+            <div>
+              <div
+                className=" emotion-euiAccordion__children"
+              >
+                <div
+                  style={
+                    Object {
+                      "paddingTop": "15px",
+                    }
+                  }
+                >
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          project
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Value
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          kibana
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Dropdown
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 1
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          @timestamp
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            From
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-01-01 08:15:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            To
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-02-01 17:22:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Time
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 1
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          country
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Value
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          US
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Dropdown
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 2
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          time
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            From
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-05-01 10:50:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            To
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-05-01 04:40:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Time
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 2
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -511,7 +1693,21 @@ exports[`Storyshots components/WorkpadFilters/WorkpadFiltersComponent Filters gr
             id="canvas-filter-group-0"
             role="region"
             tabIndex={-1}
-          />
+          >
+            <div>
+              <div
+                className=" emotion-euiAccordion__children"
+              >
+                <div
+                  style={
+                    Object {
+                      "paddingTop": "15px",
+                    }
+                  }
+                />
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -655,7 +1851,310 @@ exports[`Storyshots components/WorkpadFilters/WorkpadFiltersComponent default 1`
             id="canvas-filter-group-0"
             role="region"
             tabIndex={-1}
-          />
+          >
+            <div>
+              <div
+                className=" emotion-euiAccordion__children"
+              >
+                <div
+                  style={
+                    Object {
+                      "paddingTop": "15px",
+                    }
+                  }
+                >
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          project
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Value
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          kibana
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Dropdown
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 1
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          @timestamp
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            From
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-01-01 08:15:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            To
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-02-01 17:22:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Time
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 1
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       <div
@@ -712,7 +2211,310 @@ exports[`Storyshots components/WorkpadFilters/WorkpadFiltersComponent default 1`
             id="canvas-filter-group-1"
             role="region"
             tabIndex={-1}
-          />
+          >
+            <div>
+              <div
+                className=" emotion-euiAccordion__children"
+              >
+                <div
+                  style={
+                    Object {
+                      "paddingTop": "15px",
+                    }
+                  }
+                >
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          country
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Value
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          US
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Dropdown
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 2
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                  <div
+                    className="euiPanel euiPanel--plain euiPanel--paddingMedium emotion-euiPanel-m-m-plain"
+                  >
+                    <dl
+                      className="euiDescriptionList workpadFilter emotion-euiDescriptionList-column-left"
+                      data-type="column"
+                    >
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Column
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          time
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            From
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-05-01 10:50:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            To
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          2021-05-01 04:40:00
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Type
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Time
+                        </div>
+                      </dd>
+                      <dt
+                        className="euiDescriptionList__title eui-textBreakWord emotion-euiDescriptionList__title-column-compressed"
+                        style={
+                          Object {
+                            "width": "30%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          <h4>
+                            Filter group
+                          </h4>
+                        </div>
+                      </dt>
+                      <dd
+                        className="euiDescriptionList__description eui-textBreakWord emotion-euiDescriptionList__description-column-normal"
+                        style={
+                          Object {
+                            "width": "70%",
+                          }
+                        }
+                      >
+                        <div
+                          className="euiText emotion-euiText-s"
+                        >
+                          Group 2
+                        </div>
+                      </dd>
+                    </dl>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
index 03665f2d0c82af..74e1b5e7e48585 100644
--- a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
+++ b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot
@@ -313,7 +313,72 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             >
               <div
                 className="euiPopover__anchor css-zih94u-render"
-              />
+              >
+                <div>
+                  <input
+                    id="generated-id"
+                    type="hidden"
+                    value="solid"
+                  />
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--compressed"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <span
+                        className="emotion-euiScreenReaderOnly"
+                        id="euiSuperSelect__generated-id__screenreaderLabelId"
+                      >
+                        Select an option: 
+                        <div
+                          style={
+                            Object {
+                              "border": "4px solid",
+                              "height": 16,
+                            }
+                          }
+                        />
+                        , is selected
+                      </span>
+                      <button
+                        aria-haspopup="listbox"
+                        className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <div
+                          style={
+                            Object {
+                              "border": "4px solid",
+                              "height": 16,
+                            }
+                          }
+                        />
+                      </button>
+                      <div
+                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                      >
+                        <span
+                          className="euiFormControlLayoutCustomIcon"
+                        >
+                          <span
+                            aria-hidden="true"
+                            className="euiFormControlLayoutCustomIcon__icon"
+                            data-euiicon-type="arrowDown"
+                            size="s"
+                          >
+                            
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -730,7 +795,72 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           >
             <div
               className="euiPopover__anchor css-zih94u-render"
-            />
+            >
+              <div>
+                <input
+                  id="generated-id"
+                  type="hidden"
+                  value="dotted"
+                />
+                <div
+                  className="euiFormControlLayout euiFormControlLayout--compressed"
+                >
+                  <div
+                    className="euiFormControlLayout__childrenWrapper"
+                  >
+                    <span
+                      className="emotion-euiScreenReaderOnly"
+                      id="euiSuperSelect__generated-id__screenreaderLabelId"
+                    >
+                      Select an option: 
+                      <div
+                        style={
+                          Object {
+                            "border": "4px dotted",
+                            "height": 16,
+                          }
+                        }
+                      />
+                      , is selected
+                    </span>
+                    <button
+                      aria-haspopup="listbox"
+                      className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      type="button"
+                    >
+                      <div
+                        style={
+                          Object {
+                            "border": "4px dotted",
+                            "height": 16,
+                          }
+                        }
+                      />
+                    </button>
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <span
+                        className="euiFormControlLayoutCustomIcon"
+                      >
+                        <span
+                          aria-hidden="true"
+                          className="euiFormControlLayoutCustomIcon__icon"
+                          data-euiicon-type="arrowDown"
+                          size="s"
+                        >
+                          
+                        </span>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -1159,7 +1289,72 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             >
               <div
                 className="euiPopover__anchor css-zih94u-render"
-              />
+              >
+                <div>
+                  <input
+                    id="generated-id"
+                    type="hidden"
+                    value="solid"
+                  />
+                  <div
+                    className="euiFormControlLayout euiFormControlLayout--compressed"
+                  >
+                    <div
+                      className="euiFormControlLayout__childrenWrapper"
+                    >
+                      <span
+                        className="emotion-euiScreenReaderOnly"
+                        id="euiSuperSelect__generated-id__screenreaderLabelId"
+                      >
+                        Select an option: 
+                        <div
+                          style={
+                            Object {
+                              "border": "4px solid",
+                              "height": 16,
+                            }
+                          }
+                        />
+                        , is selected
+                      </span>
+                      <button
+                        aria-haspopup="listbox"
+                        className="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelectControl--compressed"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        onKeyDown={[Function]}
+                        type="button"
+                      >
+                        <div
+                          style={
+                            Object {
+                              "border": "4px solid",
+                              "height": 16,
+                            }
+                          }
+                        />
+                      </button>
+                      <div
+                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                      >
+                        <span
+                          className="euiFormControlLayoutCustomIcon"
+                        >
+                          <span
+                            aria-hidden="true"
+                            className="euiFormControlLayoutCustomIcon__icon"
+                            data-euiicon-type="arrowDown"
+                            size="s"
+                          >
+                            
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_configure_package.test.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_configure_package.test.tsx
index 9a6dcf32864128..a7722524fc3033 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_configure_package.test.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/create_package_policy_page/components/steps/step_configure_package.test.tsx
@@ -129,20 +129,22 @@ describe('StepConfigurePackage', () => {
     testRenderer = createFleetTestRendererMock();
   });
 
-  it('should show nothing to configure if no matching integration', () => {
+  it('should show nothing to configure if no matching integration', async () => {
     packageInfo.policy_templates = [];
     render();
 
-    waitFor(() => {
-      expect(renderResult.getByText('Nothing to configure')).toBeInTheDocument();
+    await waitFor(async () => {
+      expect(await renderResult.findByText('Nothing to configure')).toBeInTheDocument();
     });
   });
 
   it('should show inputs of policy templates and update package policy with input enabled: false', async () => {
     render();
 
-    waitFor(() => {
-      expect(renderResult.getByText('Collect logs from Nginx instances')).toBeInTheDocument();
+    await waitFor(async () => {
+      expect(
+        await renderResult.findByText('Collect logs from Nginx instances')
+      ).toBeInTheDocument();
     });
     act(() => {
       fireEvent.click(renderResult.getByRole('switch'));
diff --git a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/details.tsx b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/details.tsx
index 83631c674f7545..162c9cb0d9efea 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/details.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/sections/epm/screens/detail/overview/details.tsx
@@ -6,6 +6,7 @@
  */
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n-react';
+import type { EuiDescriptionListProps } from '@elastic/eui';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -16,7 +17,6 @@ import {
   EuiLink,
   EuiPortal,
 } from '@elastic/eui';
-import type { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
 
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 
diff --git a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
index 961b0184747215..21ed71d001f39a 100644
--- a/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
+++ b/x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap
@@ -134,17 +134,18 @@ Array [
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--column"
+        class="euiDescriptionList emotion-euiDescriptionList-column-left"
+        data-type="column"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Lifecycle policy
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           <a
             class="euiLink emotion-euiLink-primary"
@@ -155,26 +156,26 @@ Array [
           </a>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Current action
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           rollover
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Failed step
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           check-rollover-ready
         </dd>
@@ -184,41 +185,42 @@ Array [
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--column"
+        class="euiDescriptionList emotion-euiDescriptionList-column-left"
+        data-type="column"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Current phase
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           hot
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Current action time
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           2018-12-07 13:02:55
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Phase definition
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           <div
             class="euiPopover emotion-euiPopover"
@@ -259,17 +261,18 @@ Array [
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--column"
+        class="euiDescriptionList emotion-euiDescriptionList-column-left"
+        data-type="column"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Lifecycle policy
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           <a
             class="euiLink emotion-euiLink-primary"
@@ -280,26 +283,26 @@ Array [
           </a>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Current action
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           complete
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Failed step
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           -
         </dd>
@@ -309,29 +312,30 @@ Array [
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--column"
+        class="euiDescriptionList emotion-euiDescriptionList-column-left"
+        data-type="column"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Current phase
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           new
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-column-normal"
         >
           <strong>
             Current action time
           </strong>
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-column-normal"
         >
           2018-12-07 13:02:55
         </dd>
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/controls.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/controls.tsx
index 8bac15adb2afb6..5df043792a7a58 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/controls.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/controls.tsx
@@ -16,6 +16,7 @@ import {
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiDescriptionList,
+  EuiDescriptionListProps,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -26,7 +27,6 @@ import {
   EuiPortal,
   EuiTitle,
 } from '@elastic/eui';
-import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
 import { CytoscapeContext } from './cytoscape';
 import { formatHumanReadableDateTimeSeconds } from '../../../../../../common/util/date_utils';
 import { JOB_MAP_NODE_TYPES } from '../../../../../../common/constants/data_frame_analytics';
diff --git a/x-pack/plugins/ml/public/application/trained_models/models_management/expanded_row.tsx b/x-pack/plugins/ml/public/application/trained_models/models_management/expanded_row.tsx
index 6c1fbbf495f94f..f2aec5b7684617 100644
--- a/x-pack/plugins/ml/public/application/trained_models/models_management/expanded_row.tsx
+++ b/x-pack/plugins/ml/public/application/trained_models/models_management/expanded_row.tsx
@@ -11,6 +11,7 @@ import {
   EuiBadge,
   EuiCodeBlock,
   EuiDescriptionList,
+  EuiDescriptionListProps,
   EuiFlexGrid,
   EuiFlexItem,
   EuiNotificationBadge,
@@ -20,7 +21,6 @@ import {
   EuiTabbedContentTab,
   EuiTitle,
 } from '@elastic/eui';
-import type { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
 import { isPopulatedObject } from '@kbn/ml-is-populated-object';
diff --git a/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/checker_errors.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/checker_errors.test.js.snap
index 231efe85916727..cc078f6db3a178 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/checker_errors.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/__snapshots__/checker_errors.test.js.snap
@@ -22,25 +22,26 @@ Array [
         There were some errors encountered in trying to check Elasticsearch settings. You need administrator rights to check the settings and, if needed, to enable the monitoring collection setting.
       </p>
       <dl
-        class="euiDescriptionList euiDescriptionList--row"
+        class="euiDescriptionList emotion-euiDescriptionList-row-left"
+        data-type="row"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           403 Forbidden
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           no access for you
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           500 Internal Server Error
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           An internal server error occurred
         </dd>
diff --git a/x-pack/plugins/security_solution/cypress/screens/alerts_detection_rules.ts b/x-pack/plugins/security_solution/cypress/screens/alerts_detection_rules.ts
index 950655e850a73f..37f69755c653e1 100644
--- a/x-pack/plugins/security_solution/cypress/screens/alerts_detection_rules.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/alerts_detection_rules.ts
@@ -116,7 +116,7 @@ export const INPUT_FILE = 'input[type=file]';
 
 export const TOASTER = '[data-test-subj="euiToastHeader"]';
 
-export const TOASTER_BODY = '[data-test-subj="globalToastList"] .euiToastBody';
+export const TOASTER_BODY = '[data-test-subj="globalToastList"] [data-test-subj="euiToastBody"]';
 
 export const RULE_IMPORT_OVERWRITE_CHECKBOX = '[id="import-data-modal-checkbox-label"]';
 
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap
index 5d052ef028e0f3..feacb3b45ac914 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/__snapshots__/create_descriptions_list.test.tsx.snap
@@ -1,207 +1,219 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`create_description_list renders correctly against snapshot 1`] = `
-<dl
-  className="euiDescriptionList euiDescriptionList--row"
+<ContextProvider
+  value={
+    Object {
+      "align": "left",
+      "compressed": false,
+      "textStyle": "normal",
+      "type": "row",
+    }
+  }
 >
-  <EuiDescriptionListTitle
-    key="title-0"
+  <dl
+    css="unknown styles"
+    data-type="row"
   >
-    Max Anomaly Score
-  </EuiDescriptionListTitle>
-  <EuiDescriptionListDescription
-    key="description-0"
-  >
-    <EuiSpacer
-      size="m"
-    />
-    <LargeScore>
-      17
-    </LargeScore>
-  </EuiDescriptionListDescription>
-  <EuiDescriptionListTitle
-    key="title-1"
-  >
-    <EuiSpacer
-      size="m"
-    />
-    Job
-  </EuiDescriptionListTitle>
-  <EuiDescriptionListDescription
-    key="description-1"
-  >
-    <EuiFlexGroup
-      direction="column"
-      gutterSize="none"
-      responsive={false}
+    <EuiDescriptionListTitle
+      key="title-0"
     >
-      <EuiFlexItem
-        grow={false}
-      >
-        job-1
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
+      Max Anomaly Score
+    </EuiDescriptionListTitle>
+    <EuiDescriptionListDescription
+      key="description-0"
+    >
+      <EuiSpacer
+        size="m"
+      />
+      <LargeScore>
+        17
+      </LargeScore>
+    </EuiDescriptionListDescription>
+    <EuiDescriptionListTitle
+      key="title-1"
+    >
+      <EuiSpacer
+        size="m"
+      />
+      Job
+    </EuiDescriptionListTitle>
+    <EuiDescriptionListDescription
+      key="description-1"
+    >
+      <EuiFlexGroup
+        direction="column"
+        gutterSize="none"
+        responsive={false}
       >
-        <ExplorerLink
-          endDate="3000-01-01T00:00:00.000Z"
-          linkName="View in Machine Learning"
-          score={
-            Object {
-              "detectorIndex": 0,
-              "entityName": "process.name",
-              "entityValue": "du",
-              "influencers": Array [
-                Object {
-                  "host.name": "zeek-iowa",
-                },
-                Object {
-                  "process.name": "du",
-                },
-                Object {
-                  "user.name": "root",
-                },
-              ],
-              "jobId": "job-1",
-              "rowId": "1561157194802_0",
-              "severity": 16.193669439507826,
-              "source": Object {
-                "actual": Array [
-                  1,
-                ],
-                "bucket_span": 900,
-                "by_field_name": "process.name",
-                "by_field_value": "du",
-                "detector_index": 0,
-                "function": "rare",
-                "function_description": "rare",
+        <EuiFlexItem
+          grow={false}
+        >
+          job-1
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <ExplorerLink
+            endDate="3000-01-01T00:00:00.000Z"
+            linkName="View in Machine Learning"
+            score={
+              Object {
+                "detectorIndex": 0,
+                "entityName": "process.name",
+                "entityValue": "du",
                 "influencers": Array [
                   Object {
-                    "influencer_field_name": "user.name",
-                    "influencer_field_values": Array [
-                      "root",
-                    ],
+                    "host.name": "zeek-iowa",
                   },
                   Object {
-                    "influencer_field_name": "process.name",
-                    "influencer_field_values": Array [
-                      "du",
-                    ],
+                    "process.name": "du",
                   },
                   Object {
-                    "influencer_field_name": "host.name",
-                    "influencer_field_values": Array [
-                      "zeek-iowa",
-                    ],
+                    "user.name": "root",
                   },
                 ],
-                "initial_record_score": 16.193669439507826,
-                "is_interim": false,
-                "job_id": "job-1",
-                "multi_bucket_impact": 0,
-                "partition_field_name": "host.name",
-                "partition_field_value": "zeek-iowa",
-                "probability": 0.024041164411288146,
-                "record_score": 16.193669439507826,
-                "result_type": "record",
-                "timestamp": 1560664800000,
-                "typical": Array [
-                  0.024041164411288146,
-                ],
-              },
-              "time": 1560664800000,
+                "jobId": "job-1",
+                "rowId": "1561157194802_0",
+                "severity": 16.193669439507826,
+                "source": Object {
+                  "actual": Array [
+                    1,
+                  ],
+                  "bucket_span": 900,
+                  "by_field_name": "process.name",
+                  "by_field_value": "du",
+                  "detector_index": 0,
+                  "function": "rare",
+                  "function_description": "rare",
+                  "influencers": Array [
+                    Object {
+                      "influencer_field_name": "user.name",
+                      "influencer_field_values": Array [
+                        "root",
+                      ],
+                    },
+                    Object {
+                      "influencer_field_name": "process.name",
+                      "influencer_field_values": Array [
+                        "du",
+                      ],
+                    },
+                    Object {
+                      "influencer_field_name": "host.name",
+                      "influencer_field_values": Array [
+                        "zeek-iowa",
+                      ],
+                    },
+                  ],
+                  "initial_record_score": 16.193669439507826,
+                  "is_interim": false,
+                  "job_id": "job-1",
+                  "multi_bucket_impact": 0,
+                  "partition_field_name": "host.name",
+                  "partition_field_value": "zeek-iowa",
+                  "probability": 0.024041164411288146,
+                  "record_score": 16.193669439507826,
+                  "result_type": "record",
+                  "timestamp": 1560664800000,
+                  "typical": Array [
+                    0.024041164411288146,
+                  ],
+                },
+                "time": 1560664800000,
+              }
             }
-          }
-          startDate="2020-07-07T08:20:18.966Z"
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiDescriptionListDescription>
-  <EuiDescriptionListTitle
-    key="title-2"
-  >
-    Detected
-  </EuiDescriptionListTitle>
-  <EuiDescriptionListDescription
-    key="description-2"
-  >
-    <EuiFlexGroup
-      direction="column"
-      gutterSize="none"
-      responsive={false}
+            startDate="2020-07-07T08:20:18.966Z"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiDescriptionListDescription>
+    <EuiDescriptionListTitle
+      key="title-2"
     >
-      <EuiFlexItem
-        grow={false}
-      >
-        <PreferenceFormattedDate
-          value={2019-06-16T06:00:00.000Z}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
+      Detected
+    </EuiDescriptionListTitle>
+    <EuiDescriptionListDescription
+      key="description-2"
+    >
+      <EuiFlexGroup
+        direction="column"
+        gutterSize="none"
+        responsive={false}
       >
-        <EuiLink
-          data-test-subj="anomaly-description-narrow-range-link"
-          onClick={[Function]}
-          target="_blank"
+        <EuiFlexItem
+          grow={false}
         >
-          Narrow to this date range
-        </EuiLink>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiDescriptionListDescription>
-  <EuiDescriptionListTitle
-    key="title-3"
-  >
-    Anomalous Entity
-  </EuiDescriptionListTitle>
-  <EuiDescriptionListDescription
-    key="description-3"
-  >
-    <EuiFlexGroup
-      direction="column"
-      gutterSize="none"
-      responsive={false}
+          <PreferenceFormattedDate
+            value={2019-06-16T06:00:00.000Z}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+        >
+          <EuiLink
+            data-test-subj="anomaly-description-narrow-range-link"
+            onClick={[Function]}
+            target="_blank"
+          >
+            Narrow to this date range
+          </EuiLink>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiDescriptionListDescription>
+    <EuiDescriptionListTitle
+      key="title-3"
     >
-      <EuiFlexItem
-        grow={false}
-      >
-        process.name: "du"
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiDescriptionListDescription>
-  <EuiDescriptionListTitle
-    key="title-4"
-  >
-    Influenced By
-  </EuiDescriptionListTitle>
-  <EuiDescriptionListDescription
-    key="description-4"
-  >
-    <EuiFlexGroup
-      direction="column"
-      gutterSize="none"
-      responsive={false}
+      Anomalous Entity
+    </EuiDescriptionListTitle>
+    <EuiDescriptionListDescription
+      key="description-3"
     >
-      <EuiFlexItem
-        grow={false}
-        key="host.name: \\"zeek-iowa\\""
-      >
-        host.name: "zeek-iowa"
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-        key="process.name: \\"du\\""
+      <EuiFlexGroup
+        direction="column"
+        gutterSize="none"
+        responsive={false}
       >
-        process.name: "du"
-      </EuiFlexItem>
-      <EuiFlexItem
-        grow={false}
-        key="user.name: \\"root\\""
+        <EuiFlexItem
+          grow={false}
+        >
+          process.name: "du"
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiDescriptionListDescription>
+    <EuiDescriptionListTitle
+      key="title-4"
+    >
+      Influenced By
+    </EuiDescriptionListTitle>
+    <EuiDescriptionListDescription
+      key="description-4"
+    >
+      <EuiFlexGroup
+        direction="column"
+        gutterSize="none"
+        responsive={false}
       >
-        user.name: "root"
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiDescriptionListDescription>
-</dl>
+        <EuiFlexItem
+          grow={false}
+          key="host.name: \\"zeek-iowa\\""
+        >
+          host.name: "zeek-iowa"
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+          key="process.name: \\"du\\""
+        >
+          process.name: "du"
+        </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+          key="user.name: \\"root\\""
+        >
+          user.name: "root"
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiDescriptionListDescription>
+  </dl>
+</ContextProvider>
 `;
diff --git a/x-pack/plugins/security_solution/public/common/components/toasters/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/toasters/index.test.tsx
index bf2249fac5c832..17a2ebe192a440 100644
--- a/x-pack/plugins/security_solution/public/common/components/toasters/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/toasters/index.test.tsx
@@ -121,7 +121,9 @@ describe('Toaster', () => {
       wrapper.find('[data-test-subj="add-toast"]').simulate('click');
 
       expect(wrapper.find('.euiGlobalToastList').exists()).toBe(true);
-      expect(wrapper.find('.euiToastHeader__title').text()).toBe('Test & Test');
+      expect(wrapper.find('[data-test-subj="euiToastHeader__title"]').at(1).text()).toBe(
+        'Test & Test'
+      );
     });
 
     test('Render an error toaster', () => {
@@ -153,7 +155,9 @@ describe('Toaster', () => {
       wrapper.find('[data-test-subj="add-toast"]').simulate('click');
 
       expect(wrapper.find('.euiGlobalToastList').exists()).toBe(true);
-      expect(wrapper.find('.euiToastHeader__title').text()).toBe('Test & Test ERROR');
+      expect(wrapper.find('[data-test-subj="euiToastHeader__title"]').at(1).text()).toBe(
+        'Test & Test ERROR'
+      );
       expect(wrapper.find('button[data-test-subj="toaster-show-all-error-modal"]').exists()).toBe(
         true
       );
@@ -198,10 +202,14 @@ describe('Toaster', () => {
       wrapper.find('[data-test-subj="add-toast"]').simulate('click');
 
       expect(wrapper.find('button[data-test-subj="toastCloseButton"]').length).toBe(1);
-      expect(wrapper.find('.euiToastHeader__title').text()).toBe('Test & Test');
+      expect(wrapper.find('[data-test-subj="euiToastHeader__title"]').at(1).text()).toBe(
+        'Test & Test'
+      );
       wrapper.find('button[data-test-subj="delete-toast"]').simulate('click');
-      expect(wrapper.find('.euiToast').length).toBe(1);
-      expect(wrapper.find('.euiToastHeader__title').text()).toBe('Test & Test II');
+      expect(wrapper.find('div.euiToast').length).toBe(1);
+      expect(wrapper.find('[data-test-subj="euiToastHeader__title"]').at(1).text()).toBe(
+        'Test & Test II'
+      );
     });
 
     test('Do not show anymore toaster when modal error is open', () => {
@@ -270,14 +278,18 @@ describe('Toaster', () => {
         </ManageGlobalToaster>
       );
       wrapper.find('[data-test-subj="add-toast"]').simulate('click');
-      expect(wrapper.find('.euiToastHeader__title').text()).toBe('Test & Test II');
+      expect(wrapper.find('[data-test-subj="euiToastHeader__title"]').at(1).text()).toBe(
+        'Test & Test II'
+      );
 
       wrapper.find('button[data-test-subj="toaster-show-all-error-modal"]').simulate('click');
       expect(wrapper.find('.euiToast').length).toBe(0);
 
       wrapper.find('button[data-test-subj="modal-all-errors-close"]').simulate('click');
-      expect(wrapper.find('.euiToast').length).toBe(1);
-      expect(wrapper.find('.euiToastHeader__title').text()).toBe('Test & Test');
+      expect(wrapper.find('div.euiToast').length).toBe(1);
+      expect(wrapper.find('[data-test-subj="euiToastHeader__title"]').at(1).text()).toBe(
+        'Test & Test'
+      );
     });
   });
 
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx
index c2ebad459241bc..2c4181add11cbf 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/node_detail.tsx
@@ -11,10 +11,10 @@ import type { HTMLAttributes } from 'react';
 import React, { memo, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { i18n } from '@kbn/i18n';
+import type { EuiDescriptionListProps } from '@elastic/eui';
 import { htmlIdGenerator, EuiSpacer, EuiTitle, EuiText, EuiTextColor, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import styled from 'styled-components';
-import type { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
 import { StyledDescriptionList, StyledTitle } from './styles';
 import * as selectors from '../../store/selectors';
 import * as eventModel from '../../../../common/endpoint/models/event';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
index cece572fdb839e..824748f14be388 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
@@ -320,15 +320,16 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--row c2"
+        class="euiDescriptionList c2 emotion-euiDescriptionList-row-left"
+        data-type="row"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Host ID
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -337,12 +338,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           First seen
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             aria-label="Loading"
@@ -352,12 +353,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           />
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Last seen
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             aria-label="Loading"
@@ -372,15 +373,16 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--row c2"
+        class="euiDescriptionList c2 emotion-euiDescriptionList-row-left"
+        data-type="row"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           IP addresses
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -389,12 +391,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           MAC addresses
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -403,12 +405,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Platform
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -422,15 +424,16 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--row c2"
+        class="euiDescriptionList c2 emotion-euiDescriptionList-row-left"
+        data-type="row"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Operating system
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -439,12 +442,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Family
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -453,12 +456,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Version
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -467,12 +470,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Architecture
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -486,15 +489,16 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--row c2"
+        class="euiDescriptionList c2 emotion-euiDescriptionList-row-left"
+        data-type="row"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Cloud provider
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -503,12 +507,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Region
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -517,12 +521,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Instance ID
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -531,12 +535,12 @@ exports[`Details Panel Component DetailsPanel:HostDetails: rendering it should r
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Machine type
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -659,15 +663,16 @@ exports[`Details Panel Component DetailsPanel:NetworkDetails: rendering it shoul
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--row c2"
+        class="euiDescriptionList c2 emotion-euiDescriptionList-row-left"
+        data-type="row"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Location
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -676,12 +681,12 @@ exports[`Details Panel Component DetailsPanel:NetworkDetails: rendering it shoul
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Autonomous system
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -695,15 +700,16 @@ exports[`Details Panel Component DetailsPanel:NetworkDetails: rendering it shoul
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--row c2"
+        class="euiDescriptionList c2 emotion-euiDescriptionList-row-left"
+        data-type="row"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           First seen
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             aria-label="Loading"
@@ -713,12 +719,12 @@ exports[`Details Panel Component DetailsPanel:NetworkDetails: rendering it shoul
           />
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Last seen
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             aria-label="Loading"
@@ -733,15 +739,16 @@ exports[`Details Panel Component DetailsPanel:NetworkDetails: rendering it shoul
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--row c2"
+        class="euiDescriptionList c2 emotion-euiDescriptionList-row-left"
+        data-type="row"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Host ID
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -750,12 +757,12 @@ exports[`Details Panel Component DetailsPanel:NetworkDetails: rendering it shoul
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Host name
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="c3"
@@ -769,15 +776,16 @@ exports[`Details Panel Component DetailsPanel:NetworkDetails: rendering it shoul
       class="euiFlexItem"
     >
       <dl
-        class="euiDescriptionList euiDescriptionList--row c2"
+        class="euiDescriptionList c2 emotion-euiDescriptionList-row-left"
+        data-type="row"
       >
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           WhoIs
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         >
           <span
             class="euiToolTipAnchor"
@@ -805,12 +813,12 @@ exports[`Details Panel Component DetailsPanel:NetworkDetails: rendering it shoul
           </span>
         </dd>
         <dt
-          class="euiDescriptionList__title"
+          class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
         >
           Reputation
         </dt>
         <dd
-          class="euiDescriptionList__description"
+          class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
         />
       </dl>
     </div>
diff --git a/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/copy_to_space_flyout_internal.test.tsx b/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/copy_to_space_flyout_internal.test.tsx
index d00ae8349e62c2..775e93c6008fdb 100644
--- a/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/copy_to_space_flyout_internal.test.tsx
+++ b/x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/copy_to_space_flyout_internal.test.tsx
@@ -120,6 +120,8 @@ describe('CopyToSpaceFlyout', () => {
     expect(wrapper.find(EuiEmptyPrompt)).toHaveLength(0);
     expect(wrapper.find(EuiLoadingSpinner)).toHaveLength(1);
 
+    // Wait for loading spinner to clear
+    await act(async () => {});
     wrapper.update();
 
     expect(wrapper.find(CopyToSpaceForm)).toHaveLength(1);
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/ping_list/__snapshots__/expanded_row.test.tsx.snap b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/ping_list/__snapshots__/expanded_row.test.tsx.snap
index 261a4845525e2a..1e3f7b0edafb8b 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/ping_list/__snapshots__/expanded_row.test.tsx.snap
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/ping_list/__snapshots__/expanded_row.test.tsx.snap
@@ -146,15 +146,16 @@ exports[`PingListExpandedRow renders link to docs if body is not recorded but it
         class="euiText emotion-euiText-s-euiTextColor-default-euiCallOut__description"
       >
         <dl
-          class="euiDescriptionList euiDescriptionList--row"
+          class="euiDescriptionList emotion-euiDescriptionList-row-left"
+          data-type="row"
         >
           <dt
-            class="euiDescriptionList__title"
+            class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
           >
             Response Body
           </dt>
           <dd
-            class="euiDescriptionList__description"
+            class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
           >
             <div
               class="euiText emotion-euiText-m"
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap
index 08abe62dce472f..61ce98e3ee6768 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/__snapshots__/monitor_status.bar.test.tsx.snap
@@ -23,46 +23,47 @@ Array [
 }
 
 <dl
-    class="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
+    class="euiDescriptionList emotion-euiDescriptionList-column-left"
+    data-type="column"
   >
     <dt
-      class="euiDescriptionList__title c0"
+      class="euiDescriptionList__title c0 emotion-euiDescriptionList__title-column-reverse"
     >
       Overall availability
     </dt>
     <dd
-      class="euiDescriptionList__description c1"
+      class="euiDescriptionList__description c1 emotion-euiDescriptionList__description-column-compressed"
       data-test-subj="uptimeOverallAvailability"
     >
       0.00 %
     </dd>
     <dt
-      class="euiDescriptionList__title c0"
+      class="euiDescriptionList__title c0 emotion-euiDescriptionList__title-column-reverse"
     >
       Url
     </dt>
     <dd
-      class="euiDescriptionList__description c1"
+      class="euiDescriptionList__description c1 emotion-euiDescriptionList__description-column-compressed"
       data-test-subj="monitor-page-url"
     >
       --
     </dd>
     <dt
-      class="euiDescriptionList__title c0"
+      class="euiDescriptionList__title c0 emotion-euiDescriptionList__title-column-reverse"
     >
       Monitor ID
     </dt>
     <dd
-      class="euiDescriptionList__description c1"
+      class="euiDescriptionList__description c1 emotion-euiDescriptionList__description-column-compressed"
       data-test-subj="monitor-page-title"
     />
     <dt
-      class="euiDescriptionList__title c0"
+      class="euiDescriptionList__title c0 emotion-euiDescriptionList__title-column-reverse"
     >
       Tags
     </dt>
     <dd
-      class="euiDescriptionList__description c1"
+      class="euiDescriptionList__description c1 emotion-euiDescriptionList__description-column-compressed"
     >
       <a
         class="euiLink emotion-euiLink-primary"
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap
index c0b4f59953a2f5..06b22d70423821 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/status_details/__snapshots__/ssl_certificate.test.tsx.snap
@@ -8,7 +8,7 @@ Array [
 }
 
 <dt
-    class="euiDescriptionList__title c0"
+    class="euiDescriptionList__title c0 emotion-euiDescriptionList__title-row-normal"
   >
     TLS Certificate
   </dt>,
@@ -27,7 +27,7 @@ Array [
 }
 
 <dd
-    class="euiDescriptionList__description c0"
+    class="euiDescriptionList__description c0 emotion-euiDescriptionList__description-row-normal"
   >
     <a
       class="eui-displayInline"
@@ -63,7 +63,7 @@ Array [
 }
 
 <dt
-    class="euiDescriptionList__title c0"
+    class="euiDescriptionList__title c0 emotion-euiDescriptionList__title-row-normal"
   >
     TLS Certificate
   </dt>,
@@ -76,7 +76,7 @@ Array [
 }
 
 <dd
-    class="euiDescriptionList__description c0"
+    class="euiDescriptionList__description c0 emotion-euiDescriptionList__description-row-normal"
   >
     <a
       class="eui-displayInline"
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/monitor_list_drawer/__snapshots__/most_recent_error.test.tsx.snap b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/monitor_list_drawer/__snapshots__/most_recent_error.test.tsx.snap
index 3754c2fa58cb92..898e789b76e583 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/monitor_list_drawer/__snapshots__/most_recent_error.test.tsx.snap
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/overview/monitor_list/monitor_list_drawer/__snapshots__/most_recent_error.test.tsx.snap
@@ -2,15 +2,16 @@
 
 exports[`MostRecentError component renders properly with mock data 1`] = `
 <dl
-  class="euiDescriptionList euiDescriptionList--row"
+  class="euiDescriptionList emotion-euiDescriptionList-row-left"
+  data-type="row"
 >
   <dt
-    class="euiDescriptionList__title"
+    class="euiDescriptionList__title emotion-euiDescriptionList__title-row-normal"
   >
     Most recent error (5 days ago)
   </dt>
   <dd
-    class="euiDescriptionList__description"
+    class="euiDescriptionList__description emotion-euiDescriptionList__description-row-normal"
   >
     <button
       class="euiLink emotion-euiLink-primary"
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index d7053e47a137ad..7b89ea63eb466a 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -540,7 +540,6 @@
     "core.euiBasicTable.selectThisRow": "Sélectionner cette ligne",
     "core.euiBottomBar.screenReaderAnnouncement": "Il y a un nouveau repère de région avec des commandes de niveau de page à la fin du document.",
     "core.euiBottomBar.screenReaderHeading": "Commandes de niveau de page",
-    "core.euiBreadcrumbs.collapsedBadge.ariaLabel": "Voir le fil d’Ariane réduit",
     "core.euiBreadcrumbs.nav.ariaLabel": "Fil d’Ariane",
     "core.euiCardSelect.select": "Sélectionner",
     "core.euiCardSelect.selected": "Sélectionné",
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index f5361e3c867bd9..c63e2c118d8e1b 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -538,7 +538,6 @@
     "core.euiBasicTable.selectThisRow": "この行を選択",
     "core.euiBottomBar.screenReaderAnnouncement": "ドキュメントの最後には、新しいリージョンランドマークとページレベルのコントロールがあります。",
     "core.euiBottomBar.screenReaderHeading": "ページレベルのコントロール",
-    "core.euiBreadcrumbs.collapsedBadge.ariaLabel": "折りたたまれたブレッドクラムを表示",
     "core.euiBreadcrumbs.nav.ariaLabel": "ブレッドクラム",
     "core.euiCardSelect.select": "選択してください",
     "core.euiCardSelect.selected": "利用不可",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 3082af48e77afe..944064892238cb 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -540,7 +540,6 @@
     "core.euiBasicTable.selectThisRow": "选择此行",
     "core.euiBottomBar.screenReaderAnnouncement": "有页面级别控件位于文档结尾的新地区地标。",
     "core.euiBottomBar.screenReaderHeading": "页面级别控件",
-    "core.euiBreadcrumbs.collapsedBadge.ariaLabel": "查看折叠的痕迹导航",
     "core.euiBreadcrumbs.nav.ariaLabel": "痕迹导航",
     "core.euiCardSelect.select": "选择",
     "core.euiCardSelect.selected": "已选定",
diff --git a/x-pack/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown_map/__snapshots__/map_tooltip.test.tsx.snap b/x-pack/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown_map/__snapshots__/map_tooltip.test.tsx.snap
index f97371c3d1ae1a..32148a9e28fa51 100644
--- a/x-pack/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown_map/__snapshots__/map_tooltip.test.tsx.snap
+++ b/x-pack/plugins/ux/public/components/app/rum_dashboard/visitor_breakdown_map/__snapshots__/map_tooltip.test.tsx.snap
@@ -14,16 +14,17 @@ Array [
 }
 
 <dl
-    class="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
+    class="euiDescriptionList emotion-euiDescriptionList-column-left"
+    data-type="column"
     style="width:300px"
   >
     <dt
-      class="euiDescriptionList__title c0 eui-textNoWrap"
+      class="euiDescriptionList__title c0 eui-textNoWrap emotion-euiDescriptionList__title-column-reverse"
     >
       Average page load duration
     </dt>
     <dd
-      class="euiDescriptionList__description c1"
+      class="euiDescriptionList__description c1 emotion-euiDescriptionList__description-column-compressed"
     />
   </dl>,
 ]
diff --git a/x-pack/test/examples/search_examples/search_example.ts b/x-pack/test/examples/search_examples/search_example.ts
index f78b2ffbdf5454..6dd9c6e125b181 100644
--- a/x-pack/test/examples/search_examples/search_example.ts
+++ b/x-pack/test/examples/search_examples/search_example.ts
@@ -89,7 +89,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           return toastCount > 1;
         });
         const warningToast = await toasts.getToastElement(2);
-        const textEl = await warningToast.findByClassName('euiToastBody');
+        const textEl = await warningToast.findByTestSubject('euiToastBody');
         const text: string = await textEl.getVisibleText();
         expect(text).to.contain('Watch out!');
       });
diff --git a/x-pack/test/functional_with_es_ssl/apps/discover/search_source_alert.ts b/x-pack/test/functional_with_es_ssl/apps/discover/search_source_alert.ts
index 88bcbfa725cc32..088ed138fba6ec 100644
--- a/x-pack/test/functional_with_es_ssl/apps/discover/search_source_alert.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/discover/search_source_alert.ts
@@ -170,10 +170,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
   const getLastToast = async () => {
     const toastList = await testSubjects.find('globalToastList');
-    const titles = await toastList.findAllByCssSelector('.euiToastHeader');
+    const titles = await toastList.findAllByTestSubject('euiToastHeader');
     const lastTitleElement = last(titles)!;
     const title = await lastTitleElement.getVisibleText();
-    const messages = await toastList.findAllByCssSelector('.euiToastBody');
+    const messages = await toastList.findAllByTestSubject('euiToastBody');
     const lastMessageElement = last(messages)!;
     const message = await lastMessageElement.getVisibleText();
     return { message, title };
@@ -182,7 +182,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const getErrorToastTitle = async () => {
     const toastList = await testSubjects.find('globalToastList');
     const title = await (
-      await toastList.findByCssSelector('.euiToast--danger > .euiToastHeader')
+      await toastList.findByCssSelector(
+        '[class*="euiToast-danger"] > [data-test-subj="euiToastHeader"]'
+      )
     ).getVisibleText();
     return title;
   };
diff --git a/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts b/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts
index d0a8c16f957a44..f8d93ff180f5d9 100644
--- a/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts
+++ b/x-pack/test/security_solution_endpoint/apps/endpoint/policy_details.ts
@@ -209,7 +209,6 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await pageObjects.policy.confirmAndSave();
 
         await testSubjects.existOrFail('policyDetailsSuccessMessage');
-        await testSubjects.waitForHidden('toastCloseButton');
 
         const agentFullPolicy = await policyTestResources.getFullAgentPolicy(
           policyInfo.agentPolicy.id
diff --git a/yarn.lock b/yarn.lock
index 2781871209895d..deae3cba33bb9e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1553,10 +1553,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@62.0.3":
-  version "62.0.3"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-62.0.3.tgz#502f031e20bb67f544965c69d22532aa5ec273c2"
-  integrity sha512-CAAM73oRpkVAv/BVvgu4eTQOPZJCTOYu+omLG3OxhPLCSLlcxnESvlbKueMEBztOEipBbAEfjcydALLcGCmMmw==
+"@elastic/eui@62.2.4":
+  version "62.2.4"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-62.2.4.tgz#364b0d91a64e06815c72aa405a263e0bb817e3eb"
+  integrity sha512-76P1o5C1GgwGTV6cDuXJGRB2hhtnOnF8yrM1zMWiv3HIJ+8ML/VeN5QpWXTy/pMV8vfBzgElVbYsot7dBQm2HQ==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"