diff --git a/package.json b/package.json
index 932a6d0300019..3c3d5892eb01b 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "@elastic/datemath": "link:packages/elastic-datemath",
     "@elastic/elasticsearch": "7.10.0",
     "@elastic/ems-client": "7.11.0",
-    "@elastic/eui": "30.2.0",
+    "@elastic/eui": "30.5.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/node-crypto": "1.2.1",
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 ee2fcbd5078af..16f48836cab54 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
@@ -4753,12 +4753,11 @@ exports[`Header renders 1`] = `
                         hasArrow={true}
                         id="headerHelpMenu"
                         isOpen={false}
-                        ownFocus={true}
+                        ownFocus={false}
                         panelPaddingSize="m"
                         repositionOnScroll={true}
                       >
                         <EuiOutsideClickDetector
-                          isDisabled={true}
                           onOutsideClick={[Function]}
                         >
                           <div
diff --git a/src/core/public/chrome/ui/header/header_help_menu.tsx b/src/core/public/chrome/ui/header/header_help_menu.tsx
index 6d2938e3345a6..c7dd8c7e8bb1c 100644
--- a/src/core/public/chrome/ui/header/header_help_menu.tsx
+++ b/src/core/public/chrome/ui/header/header_help_menu.tsx
@@ -319,7 +319,6 @@ class HeaderHelpMenuUI extends Component<Props, State> {
         data-test-subj="helpMenuButton"
         id="headerHelpMenu"
         isOpen={this.state.isOpen}
-        ownFocus
         repositionOnScroll
       >
         <EuiPopoverTitle>
diff --git a/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap b/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
index dac84c87faf97..4fb061ec816ad 100644
--- a/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
+++ b/src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap
@@ -304,7 +304,7 @@ exports[`DashboardEmptyScreen renders correctly with readonly mode 1`] = `
                         url="/plugins/home/assets/welcome_graphic_light_2x.png"
                       >
                         <figure
-                          className="euiImage "
+                          className="euiImage euiImage--original"
                         >
                           <img
                             alt=""
@@ -1023,7 +1023,7 @@ exports[`DashboardEmptyScreen renders correctly without visualize paragraph 1`]
                         url="/plugins/home/assets/welcome_graphic_light_2x.png"
                       >
                         <figure
-                          className="euiImage "
+                          className="euiImage euiImage--original"
                         >
                           <img
                             alt=""
diff --git a/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx b/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx
index 6ec5b0d637556..e46851a85a67f 100644
--- a/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx
+++ b/src/plugins/dashboard/public/application/actions/library_notification_popover.tsx
@@ -50,7 +50,6 @@ export function LibraryNotificationPopover({
 
   return (
     <EuiPopover
-      ownFocus
       button={
         <EuiButtonIcon
           data-test-subj={`embeddablePanelNotification-${id}`}
diff --git a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
index 780986e02be93..bc710637b8f84 100644
--- a/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
+++ b/src/plugins/data/public/ui/filter_bar/filter_bar.tsx
@@ -110,7 +110,6 @@ function FilterBarUI(props: Props) {
           closePopover={() => setIsAddFilterPopoverOpen(false)}
           anchorPosition="downLeft"
           panelPaddingSize="none"
-          ownFocus={true}
           initialFocus=".filterEditor__hiddenItem"
           repositionOnScroll
         >
diff --git a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
index 3957e59388acf..63bf47671a84a 100644
--- a/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
+++ b/src/plugins/data/public/ui/query_string_input/language_switcher.tsx
@@ -71,7 +71,6 @@ export function QueryLanguageSwitcher(props: Props) {
     <EuiPopover
       id="queryLanguageSwitcherPopover"
       anchorClassName="euiFormControlLayout__append"
-      ownFocus
       anchorPosition={props.anchorPosition || 'downRight'}
       button={button}
       isOpen={isPopoverOpen}
diff --git a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
index 8582f4a12fa38..536a79899c5ee 100644
--- a/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
+++ b/src/plugins/data/public/ui/saved_query_management/saved_query_management_component.tsx
@@ -206,7 +206,6 @@ export function SavedQueryManagementComponent({
         anchorPosition="downLeft"
         panelPaddingSize="none"
         buffer={-8}
-        ownFocus
         repositionOnScroll
       >
         <div
diff --git a/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx b/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx
index b997bd961ea7d..f4c24c9d30bc1 100644
--- a/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/change_indexpattern.tsx
@@ -75,7 +75,6 @@ export function ChangeIndexPattern({
       closePopover={() => setPopoverIsOpen(false)}
       display="block"
       panelPaddingSize="s"
-      ownFocus
     >
       <div style={{ width: 320 }}>
         <EuiPopoverTitle>
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
index c10d1fba5ad62..f95e512dfb66e 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field.tsx
@@ -197,7 +197,6 @@ export function DiscoverField({
 
   return (
     <EuiPopover
-      ownFocus
       display="block"
       button={
         <FieldButton
diff --git a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
index 31928fd367951..bd31f313ac26c 100644
--- a/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
+++ b/src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { EventHandler, MouseEvent as ReactMouseEvent } from 'react';
+import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from '@kbn/test/jest';
 import { findTestSubject } from '@elastic/eui/lib/test';
@@ -146,33 +146,4 @@ describe('DiscoverFieldSearch', () => {
     popover = component.find(EuiPopover);
     expect(popover.prop('isOpen')).toBe(false);
   });
-
-  test('click outside popover should close popover', () => {
-    const triggerDocumentMouseDown: EventHandler<any> = (e: ReactMouseEvent<any>) => {
-      const event = new Event('mousedown');
-      // @ts-ignore
-      event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
-      document.dispatchEvent(event);
-    };
-    const triggerDocumentMouseUp: EventHandler<any> = (e: ReactMouseEvent<any>) => {
-      const event = new Event('mouseup');
-      // @ts-ignore
-      event.euiGeneratedBy = e.nativeEvent.euiGeneratedBy;
-      document.dispatchEvent(event);
-    };
-    const component = mountWithIntl(
-      <div onMouseDown={triggerDocumentMouseDown} onMouseUp={triggerDocumentMouseUp} id="wrapperId">
-        <DiscoverFieldSearch {...defaultProps} />
-      </div>
-    );
-    const btn = findTestSubject(component, 'toggleFieldFilterButton');
-    btn.simulate('click');
-    let popover = component.find(EuiPopover);
-    expect(popover.length).toBe(1);
-    expect(popover.prop('isOpen')).toBe(true);
-    component.find('#wrapperId').simulate('mousedown');
-    component.find('#wrapperId').simulate('mouseup');
-    popover = component.find(EuiPopover);
-    expect(popover.prop('isOpen')).toBe(false);
-  });
 });
diff --git a/src/plugins/home/public/application/components/recently_accessed.js b/src/plugins/home/public/application/components/recently_accessed.js
index 181968a2e063a..80119a5063f14 100644
--- a/src/plugins/home/public/application/components/recently_accessed.js
+++ b/src/plugins/home/public/application/components/recently_accessed.js
@@ -99,7 +99,6 @@ export class RecentlyAccessed extends Component {
     return (
       <EuiPopover
         id="popover"
-        ownFocus
         button={openPopoverComponent}
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover}
diff --git a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
index 7fb00fe8d40c4..1d110c235d5f9 100644
--- a/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
+++ b/src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap
@@ -240,12 +240,11 @@ exports[`InspectorPanel should render as expected 1`] = `
                     hasArrow={true}
                     id="inspectorViewChooser"
                     isOpen={false}
-                    ownFocus={true}
+                    ownFocus={false}
                     panelPaddingSize="none"
                     repositionOnScroll={true}
                   >
                     <EuiOutsideClickDetector
-                      isDisabled={true}
                       onOutsideClick={[Function]}
                     >
                       <div
diff --git a/src/plugins/inspector/public/ui/inspector_view_chooser.tsx b/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
index e1502e5e912e6..be84488589423 100644
--- a/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
+++ b/src/plugins/inspector/public/ui/inspector_view_chooser.tsx
@@ -121,7 +121,6 @@ export class InspectorViewChooser extends Component<Props, State> {
     return (
       <EuiPopover
         id="inspectorViewChooser"
-        ownFocus
         button={triggerButton}
         isOpen={this.state.isSelectorOpen}
         closePopover={this.closeSelector}
diff --git a/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx b/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
index 80a8668a8a5b6..9684c14a9987c 100644
--- a/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
+++ b/src/plugins/ui_actions/public/context_menu/open_context_menu.tsx
@@ -186,7 +186,6 @@ export function openContextMenu(
       closePopover={onClose}
       panelPaddingSize="none"
       anchorPosition="downRight"
-      ownFocus={true}
     >
       <EuiContextMenu
         initialPanelId="mainMenu"
diff --git a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
index ba09f12cfab2b..39e6fb2d2aff4 100644
--- a/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
+++ b/src/plugins/vis_type_vislib/public/vislib/components/legend/legend_item.tsx
@@ -152,7 +152,6 @@ const VisLegendItemComponent = ({
 
   const renderDetails = () => (
     <EuiPopover
-      ownFocus
       display="block"
       button={button}
       isOpen={selected}
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
index 1f34a0cef1ccf..4b332b6904282 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap
@@ -94,11 +94,6 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
               >
                 <div
                   className="euiPopover euiPopover--anchorDownRight"
-                  onKeyDown={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
                 >
                   <div
                     className="euiPopover__anchor"
@@ -518,11 +513,6 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
               >
                 <div
                   className="euiPopover euiPopover--anchorDownRight"
-                  onKeyDown={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchStart={[Function]}
                 >
                   <div
                     className="euiPopover__anchor"
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
index d0902c427aac8..95373113695f4 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
@@ -24,7 +24,7 @@ const ItemRow = styled.div`
 
 const SubduedDescriptionListTitle = styled(EuiDescriptionListTitle)`
   &&& {
-    color: ${({ theme }) => theme.eui.textColors.subdued};
+    color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   }
 `;
 
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
index adbcf897669ae..cc41c254ffb50 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
@@ -20,7 +20,7 @@ export const ItemRow = styled('tr')`
 `;
 
 export const ItemTitle = styled('td')`
-  color: ${({ theme }) => theme.eui.textColors.subdued};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   padding-right: 1rem;
 `;
 
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts b/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts
index e2a54f6048682..f2f51496fcca8 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/cytoscape_options.ts
@@ -129,7 +129,7 @@ const getStyle = (theme: EuiTheme): cytoscape.Stylesheet[] => {
         color: (el: cytoscape.NodeSingular) =>
           el.hasClass('primary') || el.selected()
             ? theme.eui.euiColorPrimaryText
-            : theme.eui.textColors.text,
+            : theme.eui.euiTextColor,
         // theme.euiFontFamily doesn't work here for some reason, so we're just
         // specifying a subset of the fonts for the label text.
         'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
diff --git a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx b/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
index 50f87184f8ee7..a36980d49db3a 100644
--- a/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
+++ b/x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
@@ -22,7 +22,7 @@ const CausedByContainer = styled('h5')`
 `;
 
 const CausedByHeading = styled('span')`
-  color: ${({ theme }) => theme.eui.textColors.subdued};
+  color: ${({ theme }) => theme.eui.euiTextSubduedColor};
   display: block;
   font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
   font-weight: ${({ theme }) => theme.eui.euiFontWeightBold};
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
index 3fba41069253e..59771973f2aa5 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot
@@ -23,11 +23,6 @@ exports[`Storyshots renderers/TimeFilter default 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -109,11 +104,6 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -152,11 +142,6 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = `
             >
               <div
                 className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiSuperDatePicker__startPopoverButton"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
@@ -183,11 +168,6 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = `
               </div>
               <div
                 className="euiPopover euiPopover--anchorDownRight euiPopover--displayBlock"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
@@ -235,11 +215,6 @@ exports[`Storyshots renderers/TimeFilter with commonlyUsedRanges 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -321,11 +296,6 @@ exports[`Storyshots renderers/TimeFilter with dateFormat 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -407,11 +377,6 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = `
           <div
             className="euiPopover euiPopover--anchorDownLeft"
             id="QuickSelectPopover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor euiQuickSelectPopover__anchor"
@@ -450,11 +415,6 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = `
             >
               <div
                 className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiSuperDatePicker__startPopoverButton"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
@@ -481,11 +441,6 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = `
               </div>
               <div
                 className="euiPopover euiPopover--anchorDownRight euiPopover--displayBlock"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
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 320ec7733e197..f0d673eaf316d 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
@@ -10,7 +10,7 @@ exports[`Storyshots arguments/Palette default 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -19,66 +19,7 @@ exports[`Storyshots arguments/Palette default 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="paul_tor_14"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: 
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
-            , is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset.stories.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset.stories.storyshot
index 05339ca558562..8194d923f34a5 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset.stories.storyshot
@@ -18,7 +18,7 @@ exports[`Storyshots components/Assets/Asset airplane 1`] = `
         className="canvasAsset__thumb canvasCheckered"
       >
         <figure
-          className="euiImage canvasAsset__img "
+          className="euiImage canvasAsset__img euiImage--original"
         >
           <img
             alt="Asset thumbnail"
@@ -196,7 +196,7 @@ exports[`Storyshots components/Assets/Asset marker 1`] = `
         className="canvasAsset__thumb canvasCheckered"
       >
         <figure
-          className="euiImage canvasAsset__img "
+          className="euiImage canvasAsset__img euiImage--original"
         >
           <img
             alt="Asset thumbnail"
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
index 70bed1c1679bb..b2ac3740e5110 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
@@ -302,7 +302,7 @@ exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
                   className="canvasAsset__thumb canvasCheckered"
                 >
                   <figure
-                    className="euiImage canvasAsset__img "
+                    className="euiImage canvasAsset__img euiImage--original"
                   >
                     <img
                       alt="Asset thumbnail"
@@ -469,7 +469,7 @@ exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
                   className="canvasAsset__thumb canvasCheckered"
                 >
                   <figure
-                    className="euiImage canvasAsset__img "
+                    className="euiImage canvasAsset__img euiImage--original"
                   >
                     <img
                       alt="Asset thumbnail"
diff --git a/x-pack/plugins/canvas/public/components/color_picker_popover/__stories__/__snapshots__/color_picker_popover.stories.storyshot b/x-pack/plugins/canvas/public/components/color_picker_popover/__stories__/__snapshots__/color_picker_popover.stories.storyshot
index 6cab47734039b..b6e0a30d7f542 100644
--- a/x-pack/plugins/canvas/public/components/color_picker_popover/__stories__/__snapshots__/color_picker_popover.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/color_picker_popover/__stories__/__snapshots__/color_picker_popover.stories.storyshot
@@ -5,11 +5,6 @@ exports[`Storyshots components/Color/ColorPickerPopover interactive 1`] = `
   <div
     className="euiPopover euiPopover--anchorDownCenter"
     id="color-picker-popover"
-    onKeyDown={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    onTouchEnd={[Function]}
-    onTouchStart={[Function]}
   >
     <div
       className="euiPopover__anchor"
@@ -66,11 +61,6 @@ exports[`Storyshots components/Color/ColorPickerPopover six colors 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
   id="color-picker-popover"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -110,11 +100,6 @@ exports[`Storyshots components/Color/ColorPickerPopover six colors, value missin
 <div
   className="euiPopover euiPopover--anchorDownCenter"
   id="color-picker-popover"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -154,11 +139,6 @@ exports[`Storyshots components/Color/ColorPickerPopover three colors 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
   id="color-picker-popover"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
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 12daa9c98377d..560ac717913f7 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
@@ -2,7 +2,7 @@
 
 exports[`Storyshots components/FontPicker default 1`] = `
 <div
-  className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+  className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
   onKeyDown={[Function]}
   onMouseDown={[Function]}
   onMouseUp={[Function]}
@@ -11,54 +11,13 @@ exports[`Storyshots components/FontPicker default 1`] = `
 >
   <div
     className="euiPopover__anchor"
-  >
-    <input
-      defaultValue=""
-      type="hidden"
-    />
-    <div
-      className="euiFormControlLayout euiFormControlLayout--compressed"
-    >
-      <div
-        className="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          className="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: 
-          , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          className="euiSuperSelectControl 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"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+  />
 </div>
 `;
 
 exports[`Storyshots components/FontPicker with value 1`] = `
 <div
-  className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+  className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
   onKeyDown={[Function]}
   onMouseDown={[Function]}
   onMouseUp={[Function]}
@@ -67,66 +26,6 @@ exports[`Storyshots components/FontPicker with value 1`] = `
 >
   <div
     className="euiPopover__anchor"
-  >
-    <input
-      type="hidden"
-      value="'American Typewriter', 'Courier New', Courier, Monaco, mono"
-    />
-    <div
-      className="euiFormControlLayout euiFormControlLayout--compressed"
-    >
-      <div
-        className="euiFormControlLayout__childrenWrapper"
-      >
-        <span
-          className="euiScreenReaderOnly"
-          id="generated-id"
-        >
-          Select an option: 
-          <div
-            style={
-              Object {
-                "fontFamily": "'American Typewriter', 'Courier New', Courier, Monaco, mono",
-              }
-            }
-          >
-            American Typewriter
-          </div>
-          , is selected
-        </span>
-        <button
-          aria-haspopup="true"
-          aria-labelledby="undefined generated-id"
-          className="euiSuperSelectControl 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"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
+  />
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
index d5990d3dbfd53..680f792f4d1b9 100644
--- a/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/palette_picker/__stories__/__snapshots__/palette_picker.stories.storyshot
@@ -9,7 +9,7 @@ exports[`Storyshots components/Color/PalettePicker clearable 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -18,50 +18,7 @@ exports[`Storyshots components/Color/PalettePicker clearable 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="clear"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: None, is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            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"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -75,7 +32,7 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -84,66 +41,7 @@ exports[`Storyshots components/Color/PalettePicker default 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="paul_tor_14"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: 
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
-            , is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
@@ -157,7 +55,7 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
   }
 >
   <div
-    className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+    className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
     onKeyDown={[Function]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
@@ -166,66 +64,7 @@ exports[`Storyshots components/Color/PalettePicker interactive 1`] = `
   >
     <div
       className="euiPopover__anchor"
-    >
-      <input
-        type="hidden"
-        value="paul_tor_14"
-      />
-      <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          className="euiFormControlLayout__childrenWrapper"
-        >
-          <span
-            className="euiScreenReaderOnly"
-            id="generated-id"
-          >
-            Select an option: 
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
-            , is selected
-          </span>
-          <button
-            aria-haspopup="true"
-            aria-labelledby="undefined generated-id"
-            className="euiSuperSelectControl euiSuperSelectControl--compressed"
-            onClick={[Function]}
-            onKeyDown={[Function]}
-            readOnly={false}
-            type="button"
-          >
-            <div
-              className="euiColorPalettePicker__itemGradient"
-              style={
-                Object {
-                  "background": "linear-gradient(to right, #882E72 0%, #882E72 7%, #B178A6 7%, #B178A6 14%, #D6C1DE 14%, #D6C1DE 21%, #1965B0 21%, #1965B0 28%, #5289C7 28%, #5289C7 35%, #7BAFDE 35%, #7BAFDE 42%, #4EB265 42%, #4EB265 50%, #90C987 50%, #90C987 57%, #CAE0AB 57%, #CAE0AB 64%, #F7EE55 64%, #F7EE55 71%, #F6C141 71%, #F6C141 78%, #F1932D 78%, #F1932D 85%, #E8601C 85%, #E8601C 92%, #DC050C 92%, #DC050C 100%)",
-                }
-              }
-            />
-          </button>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                className="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="arrowDown"
-              />
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
   </div>
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/shape_picker_popover/__stories__/__snapshots__/shape_picker_popover.stories.storyshot b/x-pack/plugins/canvas/public/components/shape_picker_popover/__stories__/__snapshots__/shape_picker_popover.stories.storyshot
index 1d292c94436e3..548c441680c55 100644
--- a/x-pack/plugins/canvas/public/components/shape_picker_popover/__stories__/__snapshots__/shape_picker_popover.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/shape_picker_popover/__stories__/__snapshots__/shape_picker_popover.stories.storyshot
@@ -3,11 +3,6 @@
 exports[`Storyshots components/Shapes/ShapePickerPopover default 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -37,11 +32,6 @@ exports[`Storyshots components/Shapes/ShapePickerPopover default 1`] = `
 exports[`Storyshots components/Shapes/ShapePickerPopover interactive 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -78,11 +68,6 @@ exports[`Storyshots components/Shapes/ShapePickerPopover interactive 1`] = `
 exports[`Storyshots components/Shapes/ShapePickerPopover shape selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownCenter"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
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 5f4f5ead13641..0dd682a534899 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
@@ -18,7 +18,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
         className="euiFlexItem"
       >
         <div
-          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+          className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseUp={[Function]}
@@ -27,48 +27,7 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
         >
           <div
             className="euiPopover__anchor"
-          >
-            <input
-              defaultValue=""
-              type="hidden"
-            />
-            <div
-              className="euiFormControlLayout euiFormControlLayout--compressed"
-            >
-              <div
-                className="euiFormControlLayout__childrenWrapper"
-              >
-                <span
-                  className="euiScreenReaderOnly"
-                  id="generated-id"
-                >
-                  Select an option: 
-                  , is selected
-                </span>
-                <button
-                  aria-haspopup="true"
-                  aria-labelledby="undefined generated-id"
-                  className="euiSuperSelectControl 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"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -216,11 +175,6 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
         <div
           className="euiPopover euiPopover--anchorDownCenter"
           id="color-picker-popover"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
         >
           <div
             className="euiPopover__anchor"
@@ -496,7 +450,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
         className="euiFlexItem"
       >
         <div
-          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+          className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
           onKeyDown={[Function]}
           onMouseDown={[Function]}
           onMouseUp={[Function]}
@@ -505,48 +459,7 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
         >
           <div
             className="euiPopover__anchor"
-          >
-            <input
-              defaultValue=""
-              type="hidden"
-            />
-            <div
-              className="euiFormControlLayout euiFormControlLayout--compressed"
-            >
-              <div
-                className="euiFormControlLayout__childrenWrapper"
-              >
-                <span
-                  className="euiScreenReaderOnly"
-                  id="generated-id"
-                >
-                  Select an option: 
-                  , is selected
-                </span>
-                <button
-                  aria-haspopup="true"
-                  aria-labelledby="undefined generated-id"
-                  className="euiSuperSelectControl 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"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+          />
         </div>
       </div>
       <div
@@ -694,11 +607,6 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
         <div
           className="euiPopover euiPopover--anchorDownCenter"
           id="color-picker-popover"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
         >
           <div
             className="euiPopover__anchor"
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 8b0d2e84cff11..4779c2e217dda 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
@@ -79,7 +79,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -88,86 +88,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="boolean"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenBoolean"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Boolean
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis7 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenBoolean"
-                          size="m"
-                        />
-                      </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"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -442,7 +363,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -451,86 +372,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="number"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenNumber"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        Number
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis0 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenNumber"
-                          size="m"
-                        />
-                      </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"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -746,7 +588,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -755,86 +597,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="string"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </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"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -1026,7 +789,7 @@ Array [
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -1035,86 +798,7 @@ Array [
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="string"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </span>
-                       
-                      <span>
-                        String
-                      </span>
-                    </div>
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    type="button"
-                  >
-                    <div
-                      className="canvasEditVar__typeOption"
-                    >
-                      <span
-                        className="euiToken euiToken--euiColorVis1 euiToken--square euiToken--light euiToken--small canvasEditVar__tokenIcon"
-                        style={Object {}}
-                      >
-                        <span
-                          data-euiicon-type="tokenString"
-                          size="m"
-                        />
-                      </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"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
index 93f4db664d1db..a242747f74362 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot
@@ -3,11 +3,6 @@
 exports[`Storyshots components/WorkpadHeader/EditMenu 2 elements selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -36,11 +31,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 2 elements selected 1`] =
 exports[`Storyshots components/WorkpadHeader/EditMenu 3+ elements selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -69,11 +59,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 3+ elements selected 1`] =
 exports[`Storyshots components/WorkpadHeader/EditMenu clipboard data exists 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -102,11 +87,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu clipboard data exists 1`]
 exports[`Storyshots components/WorkpadHeader/EditMenu default 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -135,11 +115,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu default 1`] = `
 exports[`Storyshots components/WorkpadHeader/EditMenu single element selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -168,11 +143,6 @@ exports[`Storyshots components/WorkpadHeader/EditMenu single element selected 1`
 exports[`Storyshots components/WorkpadHeader/EditMenu single grouped element selected 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot
index de78772bcb124..0d1505b6aa72e 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot
@@ -3,11 +3,6 @@
 exports[`Storyshots components/WorkpadHeader/ElementMenu default 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
index a016912a51cd2..2f56046b2b768 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot
@@ -4,11 +4,6 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu default 1`] = `
 <div>
   <div
     className="euiPopover euiPopover--anchorDownLeft"
-    onKeyDown={[Function]}
-    onMouseDown={[Function]}
-    onMouseUp={[Function]}
-    onTouchEnd={[Function]}
-    onTouchStart={[Function]}
   >
     <div
       className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
index 41b3f44f0842f..a8f3f6566ddaa 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot
@@ -3,11 +3,6 @@
 exports[`Storyshots components/WorkpadHeader/ViewMenu edit mode 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -35,11 +30,6 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu edit mode 1`] = `
 exports[`Storyshots components/WorkpadHeader/ViewMenu read only mode 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -67,11 +57,6 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu read only mode 1`] = `
 exports[`Storyshots components/WorkpadHeader/ViewMenu with autoplay enabled 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
@@ -99,11 +84,6 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu with autoplay enabled 1`]
 exports[`Storyshots components/WorkpadHeader/ViewMenu with refresh enabled 1`] = `
 <div
   className="euiPopover euiPopover--anchorDownLeft"
-  onKeyDown={[Function]}
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
 >
   <div
     className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
index 50664789eddae..0b39ecd5f9dd5 100644
--- a/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot
@@ -53,11 +53,6 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
         <div
           className="euiPopover euiPopover--anchorDownCenter"
           id="field_value_selection_0"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
         >
           <div
             className="euiPopover__anchor"
@@ -117,11 +112,6 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
             >
               <div
                 className="euiPopover euiPopover--anchorDownRight"
-                onKeyDown={[Function]}
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
               >
                 <div
                   className="euiPopover__anchor"
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 755cfc343eef0..9e0e5544fa7a0 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
@@ -293,7 +293,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+              className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseUp={[Function]}
@@ -302,68 +302,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             >
               <div
                 className="euiPopover__anchor"
-              >
-                <input
-                  id="generated-id"
-                  type="hidden"
-                  value="solid"
-                />
-                <div
-                  className="euiFormControlLayout euiFormControlLayout--compressed"
-                >
-                  <div
-                    className="euiFormControlLayout__childrenWrapper"
-                  >
-                    <span
-                      className="euiScreenReaderOnly"
-                      id="generated-id"
-                    >
-                      Select an option: 
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                      , is selected
-                    </span>
-                    <button
-                      aria-haspopup="true"
-                      aria-labelledby="generated-id generated-id"
-                      className="euiSuperSelectControl 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"
-                        />
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              />
             </div>
           </div>
         </div>
@@ -436,11 +375,6 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             <div
               className="euiPopover euiPopover--anchorUpCenter"
               id="color-picker-popover"
-              onKeyDown={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchStart={[Function]}
             >
               <div
                 className="euiPopover__anchor"
@@ -762,7 +696,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             onMouseUp={[Function]}
@@ -771,68 +705,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           >
             <div
               className="euiPopover__anchor"
-            >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="dotted"
-              />
-              <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
-              >
-                <div
-                  className="euiFormControlLayout__childrenWrapper"
-                >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      style={
-                        Object {
-                          "border": "4px dotted",
-                          "height": 16,
-                        }
-                      }
-                    />
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    className="euiSuperSelectControl 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"
-                      />
-                    </span>
-                  </div>
-                </div>
-              </div>
-            </div>
+            />
           </div>
         </div>
       </div>
@@ -905,11 +778,6 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           <div
             className="euiPopover euiPopover--anchorUpCenter"
             id="color-picker-popover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
           >
             <div
               className="euiPopover__anchor"
@@ -1243,7 +1111,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+              className="euiPopover euiPopover--anchorDownLeft euiPopover--displayBlock euiInputPopover euiSuperSelect"
               onKeyDown={[Function]}
               onMouseDown={[Function]}
               onMouseUp={[Function]}
@@ -1252,68 +1120,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             >
               <div
                 className="euiPopover__anchor"
-              >
-                <input
-                  id="generated-id"
-                  type="hidden"
-                  value="solid"
-                />
-                <div
-                  className="euiFormControlLayout euiFormControlLayout--compressed"
-                >
-                  <div
-                    className="euiFormControlLayout__childrenWrapper"
-                  >
-                    <span
-                      className="euiScreenReaderOnly"
-                      id="generated-id"
-                    >
-                      Select an option: 
-                      <div
-                        style={
-                          Object {
-                            "border": "4px solid",
-                            "height": 16,
-                          }
-                        }
-                      />
-                      , is selected
-                    </span>
-                    <button
-                      aria-haspopup="true"
-                      aria-labelledby="generated-id generated-id"
-                      className="euiSuperSelectControl 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"
-                        />
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
+              />
             </div>
           </div>
         </div>
@@ -1386,11 +1193,6 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             <div
               className="euiPopover euiPopover--anchorUpCenter"
               id="color-picker-popover"
-              onKeyDown={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchStart={[Function]}
             >
               <div
                 className="euiPopover__anchor"
diff --git a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/simple_template.stories.storyshot b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/simple_template.stories.storyshot
index 9eeffde84ffac..ba4c6cc113bd3 100644
--- a/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/simple_template.stories.storyshot
+++ b/x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/simple_template.stories.storyshot
@@ -29,11 +29,6 @@ exports[`Storyshots arguments/ContainerStyle simple 1`] = `
       <div
         className="euiPopover euiPopover--anchorLeftCenter"
         id="color-picker-popover"
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchStart={[Function]}
       >
         <div
           className="euiPopover__anchor"
@@ -101,11 +96,6 @@ exports[`Storyshots arguments/ContainerStyle/components simple template 1`] = `
       <div
         className="euiPopover euiPopover--anchorLeftCenter"
         id="color-picker-popover"
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchStart={[Function]}
       >
         <div
           className="euiPopover__anchor"
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx
index 54dc8ab6188b7..b90b2fd5441b5 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/danger_eui_context_menu_item.tsx
@@ -8,5 +8,5 @@ import styled from 'styled-components';
 import { EuiContextMenuItem } from '@elastic/eui';
 
 export const DangerEuiContextMenuItem = styled(EuiContextMenuItem)`
-  color: ${(props) => props.theme.eui.textColors.danger};
+  color: ${(props) => props.theme.eui.euiTextColors.danger};
 `;
diff --git a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
index 4cf759f4882ef..db180d027b228 100644
--- a/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
+++ b/x-pack/plugins/global_search_bar/public/components/search_bar.tsx
@@ -252,6 +252,7 @@ export function SearchBar({
 
   return (
     <EuiSelectableTemplateSitewide
+      isPreFiltered
       onChange={onChange}
       options={options}
       popoverButtonBreakpoints={['xs', 's']}
@@ -267,7 +268,6 @@ export function SearchBar({
         </EuiHeaderSectionItemButton>
       }
       searchProps={{
-        onSearch: () => undefined,
         onKeyUpCapture: (e: React.KeyboardEvent<HTMLInputElement>) =>
           setSearchValue(e.currentTarget.value),
         'data-test-subj': 'nav-search-input',
diff --git a/x-pack/plugins/graph/public/components/settings/use_list_keys.test.tsx b/x-pack/plugins/graph/public/components/settings/use_list_keys.test.tsx
index c80296feccdd4..aa17ef6153f92 100644
--- a/x-pack/plugins/graph/public/components/settings/use_list_keys.test.tsx
+++ b/x-pack/plugins/graph/public/components/settings/use_list_keys.test.tsx
@@ -8,6 +8,10 @@ import React from 'react';
 import { mount, ReactWrapper } from 'enzyme';
 import { useListKeys } from './use_list_keys';
 
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => () => `id-${Math.random()}`,
+}));
+
 describe('use_list_keys', () => {
   function ListingComponent({ items }: { items: object[] }) {
     const getListKey = useListKeys(items);
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 6106503566c2f..b7c1044754b31 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
@@ -349,7 +349,6 @@ exports[`extend index management ilm summary extension should return extension w
             panelPaddingSize="m"
           >
             <EuiOutsideClickDetector
-              isDisabled={true}
               onOutsideClick={[Function]}
             >
               <div
@@ -598,7 +597,6 @@ exports[`extend index management ilm summary extension should return extension w
                     panelPaddingSize="m"
                   >
                     <EuiOutsideClickDetector
-                      isDisabled={true}
                       onOutsideClick={[Function]}
                     >
                       <div
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
index 4bee9d9a5209b..458fdbfcd4916 100644
--- a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
@@ -47,7 +47,7 @@ TimeRuler.displayName = 'TimeRuler';
 const TimeRulerTickLabel = euiStyled.text`
   font-size: 9px;
   line-height: ${(props) => props.theme.eui.euiLineHeight};
-  fill: ${(props) => props.theme.eui.textColors.subdued};
+  fill: ${(props) => props.theme.eui.euiTextSubduedColor};
   user-select: none;
   pointer-events: none;
 `;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
index cc41a3a4b4e22..32b0d2eaee632 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
@@ -1373,12 +1373,16 @@ exports[`UploadLicense should display an error when ES says license is expired 1
                         token="euiForm.addressFormErrors"
                       >
                         <EuiCallOut
+                          aria-live="assertive"
                           className="euiForm__errors"
                           color="danger"
+                          role="alert"
                           title="Please address the highlighted errors."
                         >
                           <div
+                            aria-live="assertive"
                             className="euiCallOut euiCallOut--danger euiForm__errors"
+                            role="alert"
                           >
                             <div
                               className="euiCallOutHeader"
@@ -2091,12 +2095,16 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
                         token="euiForm.addressFormErrors"
                       >
                         <EuiCallOut
+                          aria-live="assertive"
                           className="euiForm__errors"
                           color="danger"
+                          role="alert"
                           title="Please address the highlighted errors."
                         >
                           <div
+                            aria-live="assertive"
                             className="euiCallOut euiCallOut--danger euiForm__errors"
+                            role="alert"
                           >
                             <div
                               className="euiCallOutHeader"
@@ -2809,12 +2817,16 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
                         token="euiForm.addressFormErrors"
                       >
                         <EuiCallOut
+                          aria-live="assertive"
                           className="euiForm__errors"
                           color="danger"
+                          role="alert"
                           title="Please address the highlighted errors."
                         >
                           <div
+                            aria-live="assertive"
                             className="euiCallOut euiCallOut--danger euiForm__errors"
+                            role="alert"
                           >
                             <div
                               className="euiCallOutHeader"
@@ -3527,12 +3539,16 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
                         token="euiForm.addressFormErrors"
                       >
                         <EuiCallOut
+                          aria-live="assertive"
                           className="euiForm__errors"
                           color="danger"
+                          role="alert"
                           title="Please address the highlighted errors."
                         >
                           <div
+                            aria-live="assertive"
                             className="euiCallOut euiCallOut--danger euiForm__errors"
+                            role="alert"
                           >
                             <div
                               className="euiCallOutHeader"
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
index 8fa69e1a5b467..c0505426d1f63 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
@@ -44,6 +44,7 @@ exports[`Should render icon select 1`] = `
     clickOutsideDisables={true}
   >
     <EuiSelectable
+      isPreFiltered={false}
       onChange={[Function]}
       options={
         Array [
diff --git a/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap b/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap
index be362c2ae0422..84534515dfa57 100644
--- a/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap
+++ b/x-pack/plugins/maps/public/components/tooltip_selector/__snapshots__/add_tooltip_field_popover.test.tsx.snap
@@ -26,6 +26,7 @@ exports[`Should remove selected fields from selectable 1`] = `
   panelPaddingSize="none"
 >
   <EuiSelectable
+    isPreFiltered={false}
     onChange={[Function]}
     options={
       Array [
@@ -96,6 +97,7 @@ exports[`Should render 1`] = `
   panelPaddingSize="none"
 >
   <EuiSelectable
+    isPreFiltered={false}
     onChange={[Function]}
     options={
       Array [
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx
index 18be614afb5c3..0ec441918beba 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/job_map/components/cytoscape_options.tsx
@@ -89,8 +89,7 @@ export const cytoscapeOptions: cytoscape.CytoscapeOptions = {
         // @ts-ignore
         'background-image': (el: cytoscape.NodeSingular) => iconForNode(el),
         'border-width': (el: cytoscape.NodeSingular) => (el.selected() ? 2 : 1),
-        // @ts-ignore
-        color: theme.textColors.default,
+        color: theme.euiTextColors.default,
         'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif',
         'font-size': theme.euiFontSizeXS,
         'min-zoomed-font-size': parseInt(theme.euiSizeL, 10),
diff --git a/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap b/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
index ab554e05ace2d..a79b6080ed12e 100644
--- a/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
@@ -50,7 +50,7 @@ Array [
       />
     </EuiOverlayMask>
     <EuiFocusTrap
-      clickOutsideDisables={true}
+      clickOutsideDisables={false}
     >
       <div
         data-eui="EuiFocusTrap"
@@ -251,7 +251,7 @@ Array [
       />
     </EuiOverlayMask>
     <EuiFocusTrap
-      clickOutsideDisables={true}
+      clickOutsideDisables={false}
     >
       <div
         data-eui="EuiFocusTrap"
diff --git a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
index 6d114258224d1..55e60f545e642 100644
--- a/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "gutterExtraSmall": "4px",
           "gutterSmall": "8px",
         },
+        "euiBodyLineHeight": 1,
         "euiBorderColor": "#343741",
         "euiBorderEditable": "2px dotted #343741",
         "euiBorderRadius": "4px",
@@ -68,7 +69,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiButtonHeightSmall": "32px",
         "euiButtonIconTypes": Object {
           "accent": "#f990c0",
-          "danger": "#ff7575",
+          "danger": "#ff6666",
           "disabled": "#4c4e51",
           "ghost": "#ffffff",
           "primary": "#1ba9f5",
@@ -139,6 +140,8 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiCodeBlockTitleColor": "#da8b45",
         "euiCodeBlockTypeColor": "#6092c0",
         "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace",
+        "euiCodeFontWeightBold": 700,
+        "euiCodeFontWeightRegular": 400,
         "euiCollapsibleNavGroupDarkBackgroundColor": "#131317",
         "euiCollapsibleNavGroupDarkHighContrastColor": "#1ba9f5",
         "euiCollapsibleNavGroupLightBackgroundColor": "#1a1b20",
@@ -148,9 +151,11 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiColorChartBand": "#2a2b33",
         "euiColorChartLines": "#343741",
         "euiColorDanger": "#ff6666",
-        "euiColorDangerText": "#ff7575",
+        "euiColorDangerText": "#ff6666",
         "euiColorDarkShade": "#98a2b3",
         "euiColorDarkestShade": "#d4dae5",
+        "euiColorDisabled": "#434548",
+        "euiColorDisabledText": "#4c4e51",
         "euiColorEmptyShade": "#1d1e24",
         "euiColorFullShade": "#ffffff",
         "euiColorGhost": "#ffffff",
@@ -159,6 +164,11 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiColorLightShade": "#343741",
         "euiColorLightestShade": "#25262e",
         "euiColorMediumShade": "#535966",
+        "euiColorPaletteDisplaySizes": Object {
+          "sizeExtraSmall": "4px",
+          "sizeMedium": "16px",
+          "sizeSmall": "8px",
+        },
         "euiColorPickerIndicatorSize": "12px",
         "euiColorPickerSaturationRange0": "#000000",
         "euiColorPickerSaturationRange1": "rgba(0, 0, 0, 0)",
@@ -220,7 +230,7 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         },
         "euiExpressionColors": Object {
           "accent": "#f990c0",
-          "danger": "#ff7575",
+          "danger": "#ff6666",
           "primary": "#1ba9f5",
           "secondary": "#7de2d1",
           "subdued": "#81858f",
@@ -234,13 +244,14 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         },
         "euiFilePickerTallHeight": "128px",
         "euiFlyoutBorder": "1px solid #343741",
-        "euiFocusBackgroundColor": "#232635",
+        "euiFocusBackgroundColor": "#08334a",
         "euiFocusRingAnimStartColor": "rgba(27, 169, 245, 0)",
         "euiFocusRingAnimStartSize": "6px",
         "euiFocusRingAnimStartSizeLarge": "10px",
         "euiFocusRingColor": "rgba(27, 169, 245, 0.3)",
         "euiFocusRingSize": "3px",
         "euiFocusRingSizeLarge": "4px",
+        "euiFocusTransparency": 0.3,
         "euiFontFamily": "'Inter UI', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
         "euiFontFeatureSettings": "calt 1 kern 1 liga 1",
         "euiFontSize": "16px",
@@ -314,6 +325,16 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiKeyPadMenuSize": "96px",
         "euiLineHeight": 1.5,
         "euiLinkColor": "#1ba9f5",
+        "euiLinkColors": Object {
+          "accent": "#f990c0",
+          "danger": "#ff6666",
+          "ghost": "#ffffff",
+          "primary": "#1ba9f5",
+          "secondary": "#7de2d1",
+          "subdued": "#81858f",
+          "text": "#dfe5ef",
+          "warning": "#ffce7a",
+        },
         "euiListGroupGutterTypes": Object {
           "gutterMedium": "16px",
           "gutterSmall": "8px",
@@ -524,8 +545,8 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         "euiTableFocusClickableColor": "rgba(27, 169, 245, 0.09999999999999998)",
         "euiTableHoverClickableColor": "rgba(27, 169, 245, 0.050000000000000044)",
         "euiTableHoverColor": "#1e1e25",
-        "euiTableHoverSelectedColor": "#202230",
-        "euiTableSelectedColor": "#232635",
+        "euiTableHoverSelectedColor": "#072e43",
+        "euiTableSelectedColor": "#08334a",
         "euiTextColor": "#dfe5ef",
         "euiTextColors": Object {
           "accent": "#f990c0",
@@ -721,16 +742,6 @@ exports[`Paginated Table Component rendering it renders the default load more ta
           "xs": "4px",
           "xxl": "40px",
         },
-        "textColors": Object {
-          "accent": "#f990c0",
-          "danger": "#ff7575",
-          "ghost": "#ffffff",
-          "primary": "#1ba9f5",
-          "secondary": "#7de2d1",
-          "subdued": "#81858f",
-          "text": "#dfe5ef",
-          "warning": "#ffce7a",
-        },
         "textareaResizing": Object {
           "both": "resizeBoth",
           "horizontal": "resizeHorizontal",
diff --git a/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx b/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx
index 1b7e042e90dbf..a5e39860a7c0f 100644
--- a/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/subtitle/index.tsx
@@ -12,7 +12,7 @@ const Wrapper = styled.div`
     margin-top: ${theme.eui.euiSizeS};
 
     .siemSubtitle__item {
-      color: ${theme.eui.textColors.subdued};
+      color: ${theme.eui.euiTextSubduedColor};
       font-size: ${theme.eui.euiFontSizeXS};
       line-height: ${theme.eui.euiLineHeight};
 
diff --git a/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx b/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx
index 0efd27c6ecbc6..ef1e36bd79e40 100644
--- a/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/utility_bar/styles.tsx
@@ -115,7 +115,7 @@ export const BarText = styled.p.attrs({
   className: 'siemUtilityBar__text',
 })`
   ${({ theme }) => css`
-    color: ${theme.eui.textColors.subdued};
+    color: ${theme.eui.euiTextSubduedColor};
     font-size: ${theme.eui.euiFontSizeXS};
     line-height: ${theme.eui.euiLineHeight};
     white-space: nowrap;
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
index a3d6cbea3ddc7..09c1fc1915d02 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx
@@ -67,7 +67,7 @@ const NO_WRAP_TRUNCATE_STYLE: CSSProperties = Object.freeze({
 });
 
 const DangerEuiContextMenuItem = styled(EuiContextMenuItem)`
-  color: ${(props) => props.theme.eui.textColors.danger};
+  color: ${(props) => props.theme.eui.euiColorDangerText};
 `;
 
 // eslint-disable-next-line react/display-name
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
index 03dc2afc625cd..58cf0ae1e9f8f 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/__snapshots__/note_card_body.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
           "gutterExtraSmall": "4px",
           "gutterSmall": "8px",
         },
+        "euiBodyLineHeight": 1,
         "euiBorderColor": "#343741",
         "euiBorderEditable": "2px dotted #343741",
         "euiBorderRadius": "4px",
@@ -68,7 +69,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiButtonHeightSmall": "32px",
         "euiButtonIconTypes": Object {
           "accent": "#f990c0",
-          "danger": "#ff7575",
+          "danger": "#ff6666",
           "disabled": "#4c4e51",
           "ghost": "#ffffff",
           "primary": "#1ba9f5",
@@ -139,6 +140,8 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiCodeBlockTitleColor": "#da8b45",
         "euiCodeBlockTypeColor": "#6092c0",
         "euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace",
+        "euiCodeFontWeightBold": 700,
+        "euiCodeFontWeightRegular": 400,
         "euiCollapsibleNavGroupDarkBackgroundColor": "#131317",
         "euiCollapsibleNavGroupDarkHighContrastColor": "#1ba9f5",
         "euiCollapsibleNavGroupLightBackgroundColor": "#1a1b20",
@@ -148,9 +151,11 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiColorChartBand": "#2a2b33",
         "euiColorChartLines": "#343741",
         "euiColorDanger": "#ff6666",
-        "euiColorDangerText": "#ff7575",
+        "euiColorDangerText": "#ff6666",
         "euiColorDarkShade": "#98a2b3",
         "euiColorDarkestShade": "#d4dae5",
+        "euiColorDisabled": "#434548",
+        "euiColorDisabledText": "#4c4e51",
         "euiColorEmptyShade": "#1d1e24",
         "euiColorFullShade": "#ffffff",
         "euiColorGhost": "#ffffff",
@@ -159,6 +164,11 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiColorLightShade": "#343741",
         "euiColorLightestShade": "#25262e",
         "euiColorMediumShade": "#535966",
+        "euiColorPaletteDisplaySizes": Object {
+          "sizeExtraSmall": "4px",
+          "sizeMedium": "16px",
+          "sizeSmall": "8px",
+        },
         "euiColorPickerIndicatorSize": "12px",
         "euiColorPickerSaturationRange0": "#000000",
         "euiColorPickerSaturationRange1": "rgba(0, 0, 0, 0)",
@@ -220,7 +230,7 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         },
         "euiExpressionColors": Object {
           "accent": "#f990c0",
-          "danger": "#ff7575",
+          "danger": "#ff6666",
           "primary": "#1ba9f5",
           "secondary": "#7de2d1",
           "subdued": "#81858f",
@@ -234,13 +244,14 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         },
         "euiFilePickerTallHeight": "128px",
         "euiFlyoutBorder": "1px solid #343741",
-        "euiFocusBackgroundColor": "#232635",
+        "euiFocusBackgroundColor": "#08334a",
         "euiFocusRingAnimStartColor": "rgba(27, 169, 245, 0)",
         "euiFocusRingAnimStartSize": "6px",
         "euiFocusRingAnimStartSizeLarge": "10px",
         "euiFocusRingColor": "rgba(27, 169, 245, 0.3)",
         "euiFocusRingSize": "3px",
         "euiFocusRingSizeLarge": "4px",
+        "euiFocusTransparency": 0.3,
         "euiFontFamily": "'Inter UI', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
         "euiFontFeatureSettings": "calt 1 kern 1 liga 1",
         "euiFontSize": "16px",
@@ -314,6 +325,16 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiKeyPadMenuSize": "96px",
         "euiLineHeight": 1.5,
         "euiLinkColor": "#1ba9f5",
+        "euiLinkColors": Object {
+          "accent": "#f990c0",
+          "danger": "#ff6666",
+          "ghost": "#ffffff",
+          "primary": "#1ba9f5",
+          "secondary": "#7de2d1",
+          "subdued": "#81858f",
+          "text": "#dfe5ef",
+          "warning": "#ffce7a",
+        },
         "euiListGroupGutterTypes": Object {
           "gutterMedium": "16px",
           "gutterSmall": "8px",
@@ -524,8 +545,8 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
         "euiTableFocusClickableColor": "rgba(27, 169, 245, 0.09999999999999998)",
         "euiTableHoverClickableColor": "rgba(27, 169, 245, 0.050000000000000044)",
         "euiTableHoverColor": "#1e1e25",
-        "euiTableHoverSelectedColor": "#202230",
-        "euiTableSelectedColor": "#232635",
+        "euiTableHoverSelectedColor": "#072e43",
+        "euiTableSelectedColor": "#08334a",
         "euiTextColor": "#dfe5ef",
         "euiTextColors": Object {
           "accent": "#f990c0",
@@ -721,16 +742,6 @@ exports[`NoteCardBody renders correctly against snapshot 1`] = `
           "xs": "4px",
           "xxl": "40px",
         },
-        "textColors": Object {
-          "accent": "#f990c0",
-          "danger": "#ff7575",
-          "ghost": "#ffffff",
-          "primary": "#1ba9f5",
-          "secondary": "#7de2d1",
-          "subdued": "#81858f",
-          "text": "#dfe5ef",
-          "warning": "#ffce7a",
-        },
         "textareaResizing": Object {
           "both": "resizeBoth",
           "horizontal": "resizeHorizontal",
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
index eec3696a5a8cc..dab28fb03f4e0 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/components/connected_flyout_manage_drilldowns/connected_flyout_manage_drilldowns.test.tsx
@@ -21,6 +21,10 @@ import { coreMock } from '../../../../../../../src/core/public/mocks';
 import { NotificationsStart } from 'kibana/public';
 import { toastDrilldownsCRUDError } from '../../hooks/i18n';
 
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => () => `id-${Math.random()}`,
+}));
+
 const storage = new Storage(new StubBrowserStorage());
 const toasts = coreMock.createStart().notifications.toasts;
 const FlyoutManageDrilldowns = createFlyoutManageDrilldowns({
diff --git a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx
index a30c880c3d430..a6fcd77d75040 100644
--- a/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx
+++ b/x-pack/plugins/ui_actions_enhanced/public/drilldowns/url_drilldown/components/url_drilldown_collect_config/url_drilldown_collect_config.test.tsx
@@ -8,6 +8,10 @@ import { Demo } from './test_samples/demo';
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
 
+jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => () => `id-${Math.random()}`,
+}));
+
 test('configure valid URL template', () => {
   const screen = render(<Demo />);
 
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx
index 735e79f565797..3bec9116ef99f 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/__tests__/step_screenshot_display.test.tsx
@@ -56,7 +56,6 @@ describe('StepScreenshotDisplayProps', () => {
         panelPaddingSize="m"
       >
         <EuiOutsideClickDetector
-          isDisabled={true}
           onOutsideClick={[Function]}
         >
           <div
@@ -129,7 +128,6 @@ describe('StepScreenshotDisplayProps', () => {
         panelPaddingSize="m"
       >
         <EuiOutsideClickDetector
-          isDisabled={true}
           onOutsideClick={[Function]}
         >
           <div
diff --git a/x-pack/test/functional/services/uptime/alerts.ts b/x-pack/test/functional/services/uptime/alerts.ts
index 6ade7dc485a88..fa0c035b9183e 100644
--- a/x-pack/test/functional/services/uptime/alerts.ts
+++ b/x-pack/test/functional/services/uptime/alerts.ts
@@ -8,6 +8,7 @@ import { FtrProviderContext } from '../../ftr_provider_context';
 
 export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
+  const find = getService('find');
   const browser = getService('browser');
 
   return {
@@ -46,7 +47,7 @@ export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
     ) {
       await testSubjects.click(expressionAttribute);
       await testSubjects.setValue(fieldAttribute, value);
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return await testSubjects.click(expressionAttribute);
     },
     async setAlertStatusNumTimes(value: string) {
       return this.setAlertExpressionValue(
@@ -72,7 +73,7 @@ export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
       for (let i = 0; i < optionAttributes.length; i += 1) {
         await testSubjects.click(optionAttributes[i], 5000);
       }
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return testSubjects.click(expressionAttribute, 5000);
     },
     async setMonitorStatusSelectableToHours() {
       return this.setAlertExpressionSelectable(
@@ -99,17 +100,17 @@ export function UptimeAlertsProvider({ getService }: FtrProviderContext) {
     async clickLocationExpression(filter: string) {
       await testSubjects.click('uptimeCreateStatusAlert.filter_location');
       await testSubjects.click(`filter-popover-item_${filter}`);
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return find.clickByCssSelector('body');
     },
     async clickPortExpression(filter: string) {
       await testSubjects.click('uptimeCreateStatusAlert.filter_port');
       await testSubjects.click(`filter-popover-item_${filter}`);
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return find.clickByCssSelector('body');
     },
     async clickTypeExpression(filter: string) {
       await testSubjects.click('uptimeCreateStatusAlert.filter_scheme');
       await testSubjects.click(`filter-popover-item_${filter}`);
-      return browser.pressKeys(browser.keys.ESCAPE);
+      return find.clickByCssSelector('body');
     },
     async clickSaveAlertButton() {
       return testSubjects.click('saveAlertButton');
diff --git a/yarn.lock b/yarn.lock
index 2770290203894..ea01ae31fefa1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1477,10 +1477,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@30.2.0":
-  version "30.2.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.2.0.tgz#17bc630eb1a03e05d453b9934568cfbf3a82b736"
-  integrity sha512-VUmy7Qz49kN8a3f58bilfMwBo9zCJvHyBOUdDA1O77jFYv3+Hg7e/+uGb7Q1k6kSmCfv4r99eZWrcxVroYU4nQ==
+"@elastic/eui@30.5.1":
+  version "30.5.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-30.5.1.tgz#c9782c2f4763d563de6afcc2fc56d81c1e5b183c"
+  integrity sha512-W8rW49prYG0XHNdMWGTxNW50Kef3/fh+IL5mzMOKLao1W4h0F45efIDbnIHyjGl//akknIIEa6bwdTU4dmLBgA==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"
@@ -1492,7 +1492,7 @@
     "@types/vfile-message" "^2.0.0"
     chroma-js "^2.1.0"
     classnames "^2.2.6"
-    highlight.js "^9.12.0"
+    highlight.js "^9.18.5"
     lodash "^4.17.20"
     numeral "^2.0.6"
     prop-types "^15.6.0"
@@ -15807,11 +15807,16 @@ heap@^0.2.6:
   resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.6.tgz#087e1f10b046932fc8594dd9e6d378afc9d1e5ac"
   integrity sha1-CH4fELBGky/IWU3Z5tN4r8nR5aw=
 
-highlight.js@9.15.10, highlight.js@^9.12.0, highlight.js@~9.15.0, highlight.js@~9.15.1:
+highlight.js@9.15.10, highlight.js@~9.15.0, highlight.js@~9.15.1:
   version "9.15.10"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2"
   integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==
 
+highlight.js@^9.18.5:
+  version "9.18.5"
+  resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.18.5.tgz#d18a359867f378c138d6819edfc2a8acd5f29825"
+  integrity sha512-a5bFyofd/BHCX52/8i8uJkjr9DYwXIPnM/plwI6W7ezItLGqzt7X2G2nXuYSfsIJdkwwj/g9DG1LkcGJI/dDoA==
+
 highlight.js@~9.12.0:
   version "9.12.0"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.12.0.tgz#e6d9dbe57cbefe60751f02af336195870c90c01e"