diff --git a/packages/kbn-babel-preset/common_preset.js b/packages/kbn-babel-preset/common_preset.js
index 5786001446499..c51390a42455e 100644
--- a/packages/kbn-babel-preset/common_preset.js
+++ b/packages/kbn-babel-preset/common_preset.js
@@ -60,6 +60,8 @@ module.exports = () => ({
       },
     ],
 
+    require.resolve('@emotion/babel-preset-css-prop'),
+
     // need to run before the typescript preset, else the param decorators
     // are stripped from the imports
     {
diff --git a/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/index.test.tsx b/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/index.test.tsx
index 2b22170c7e22e..76e8da58022c8 100644
--- a/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/index.test.tsx
+++ b/src/platform/packages/shared/kbn-event-annotation-components/components/annotation_editor_controls/index.test.tsx
@@ -19,7 +19,8 @@ import type {
 import { QueryInputServices } from '@kbn/visualization-ui-components';
 import moment from 'moment';
 import { act } from 'react-dom/test-utils';
-import { EuiButtonGroup } from '@elastic/eui';
+import { EuiButtonGroup, EuiThemeProvider } from '@elastic/eui';
+import { render, screen } from '@testing-library/react';
 
 jest.mock('@kbn/unified-search-plugin/public', () => ({
   QueryStringInput: () => {
@@ -70,18 +71,25 @@ describe('AnnotationsPanel', () => {
     data: {},
   } as QueryInputServices;
 
-  describe('Dimension Editor', () => {
-    test('shows correct options for line annotations', () => {
-      const component = mount(
+  const mountWithThemeProvider = (propsOverrides: Partial<typeof AnnotationEditorControls> = {}) => {
+    return mount(
+      <EuiThemeProvider>
         <AnnotationEditorControls
           annotation={customLineStaticAnnotation}
           onAnnotationChange={() => {}}
-          dataView={{} as DataView}
+          dataView={mockDataView}
           getDefaultRangeEnd={() => ''}
           queryInputServices={mockQueryInputServices}
           appName="myApp"
+          {...propsOverrides}
         />
-      );
+      </EuiThemeProvider>)
+  }
+
+  describe('Dimension Editor', () => {
+    test('shows correct options for line annotations', () => {
+
+      const component = mountWithThemeProvider();
 
       expect(
         component.find('EuiDatePicker[data-test-subj="lns-xyAnnotation-time"]').prop('selected')
@@ -124,16 +132,7 @@ describe('AnnotationsPanel', () => {
         lineWidth: 3,
       };
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={rangeAnnotation}
-          onAnnotationChange={() => {}}
-          dataView={{} as DataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({annotation: rangeAnnotation});
 
       expect(
         component.find('EuiDatePicker[data-test-subj="lns-xyAnnotation-fromTime"]').prop('selected')
@@ -156,57 +155,71 @@ describe('AnnotationsPanel', () => {
       expect(component.find('[data-test-subj="lns-xyAnnotation-fillStyle"]').exists()).toBeTruthy();
     });
 
-    test('calculates correct endTimstamp and transparent color when switching for range annotation and back', async () => {
+    test.only('calculates correct endTimestamp and transparent color when switching for range annotation and back', async () => {
       const onAnnotationChange = jest.fn();
       const rangeEndTimestamp = new Date().toISOString();
-      const component = mount(
+
+      const { rerender } = render(
+      <EuiThemeProvider>
         <AnnotationEditorControls
-          annotation={customLineStaticAnnotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={{} as DataView}
-          getDefaultRangeEnd={() => rangeEndTimestamp}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
+        annotation={customLineStaticAnnotation}
+        onAnnotationChange={onAnnotationChange}
+        dataView={mockDataView}
+        getDefaultRangeEnd={() => rangeEndTimestamp}
+        queryInputServices={mockQueryInputServices}
+        appName="myApp"
         />
+      </EuiThemeProvider>
       );
 
-      component.find('button[data-test-subj="lns-xyAnnotation-rangeSwitch"]').simulate('click');
+      act(() => {
+      screen.getByTestId('lns-xyAnnotation-rangeSwitch').click();
+      });
 
       const expectedRangeAnnotation: RangeEventAnnotationConfig = {
-        color: '#FF00001A',
-        id: 'ann1',
-        isHidden: undefined,
-        label: 'Event range',
-        type: 'manual',
-        key: {
-          endTimestamp: rangeEndTimestamp,
-          timestamp: '2022-03-18T08:25:00.000Z',
-          type: 'range',
-        },
+      color: '#FF00001A',
+      id: 'ann1',
+      isHidden: undefined,
+      label: 'Event range',
+      type: 'manual',
+      key: {
+        endTimestamp: rangeEndTimestamp,
+        timestamp: '2022-03-18T08:25:00.000Z',
+        type: 'range',
+      },
       };
 
-      expect(onAnnotationChange).toBeCalledWith<EventAnnotationConfig[]>(expectedRangeAnnotation);
+      expect(onAnnotationChange).toHaveBeenCalledWith(expectedRangeAnnotation);
 
-      act(() => {
-        component.setProps({ annotation: expectedRangeAnnotation });
-      });
+      rerender(
+      <EuiThemeProvider>
+        <AnnotationEditorControls
+        annotation={expectedRangeAnnotation}
+        onAnnotationChange={onAnnotationChange}
+        dataView={mockDataView}
+        getDefaultRangeEnd={() => rangeEndTimestamp}
+        queryInputServices={mockQueryInputServices}
+        appName="myApp"
+        />
+      </EuiThemeProvider>
+      );
 
-      expect(
-        component.find('EuiSwitch[data-test-subj="lns-xyAnnotation-rangeSwitch"]').prop('checked')
-      ).toEqual(true);
+      expect(screen.getByTestId('lns-xyAnnotation-rangeSwitch').getAttribute('aria-checked')).toBe('true');
 
-      component.find('button[data-test-subj="lns-xyAnnotation-rangeSwitch"]').simulate('click');
+      act(() => {
+      screen.getByTestId('lns-xyAnnotation-rangeSwitch').click();
+      });
 
-      expect(onAnnotationChange).toBeCalledWith<EventAnnotationConfig[]>({
-        color: '#FF0000',
-        id: 'ann1',
-        isHidden: undefined,
-        key: {
-          timestamp: '2022-03-18T08:25:00.000Z',
-          type: 'point_in_time',
-        },
-        label: 'Event',
-        type: 'manual',
+      expect(onAnnotationChange).toHaveBeenCalledWith({
+      color: '#FF0000',
+      id: 'ann1',
+      isHidden: undefined,
+      key: {
+        timestamp: '2022-03-18T08:25:00.000Z',
+        type: 'point_in_time',
+      },
+      label: 'Event',
+      type: 'manual',
       });
     });
 
@@ -227,16 +240,7 @@ describe('AnnotationsPanel', () => {
         filter: { type: 'kibana_query', query: '', language: 'kuery' },
       };
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={annotation}
-          onAnnotationChange={() => {}}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({ annotation });
 
       expect(
         component.find('[data-test-subj="lnsXY-annotation-query-based-field-picker"]').exists()
@@ -264,16 +268,10 @@ describe('AnnotationsPanel', () => {
     test('should prefill timeField with the default time field when switching to query based annotations', () => {
       const onAnnotationChange = jest.fn();
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={customLineStaticAnnotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({
+        annotation: customLineStaticAnnotation,
+        onAnnotationChange,
+      });
 
       act(() => {
         component
@@ -291,16 +289,10 @@ describe('AnnotationsPanel', () => {
     test('should avoid to retain specific manual configurations when switching to query based annotations', () => {
       const onAnnotationChange = jest.fn();
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={customLineStaticAnnotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({
+        annotation: customLineStaticAnnotation,
+        onAnnotationChange,
+      });
 
       act(() => {
         component
@@ -336,16 +328,7 @@ describe('AnnotationsPanel', () => {
 
       const onAnnotationChange = jest.fn();
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={annotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({ annotation, onAnnotationChange });
 
       act(() => {
         component
@@ -379,16 +362,7 @@ describe('AnnotationsPanel', () => {
 
       const onAnnotationChange = jest.fn();
 
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={annotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={mockDataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({ annotation, onAnnotationChange });
 
       act(() => {
         component
@@ -412,16 +386,11 @@ describe('AnnotationsPanel', () => {
 
     test('should fallback to the first date field available in the dataView if not time-based', () => {
       const onAnnotationChange = jest.fn();
-      const component = mount(
-        <AnnotationEditorControls
-          annotation={customLineStaticAnnotation}
-          onAnnotationChange={onAnnotationChange}
-          dataView={{ ...mockDataView, timeFieldName: '' } as DataView}
-          getDefaultRangeEnd={() => ''}
-          queryInputServices={mockQueryInputServices}
-          appName="myApp"
-        />
-      );
+      const component = mountWithThemeProvider({
+        annotation: customLineStaticAnnotation,
+        onAnnotationChange,
+        dataView: { ...mockDataView, timeFieldName: '' } as DataView,
+      });
 
       act(() => {
         component
diff --git a/src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json b/src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json
index e99d5f528df85..bb6799d573f02 100644
--- a/src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json
+++ b/src/platform/packages/shared/kbn-event-annotation-components/tsconfig.json
@@ -1,12 +1,7 @@
 {
   "extends": "../../../../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "target/types",
-    "types": [
-      "jest",
-      "node",
-      "@emotion/react/types/css-prop",
-    ]
+    "outDir": "target/types"
   },
   "include": [
     "**/*",