Convert styled-component usage to Emotion vanilla CSS (elastic#186849)

## Summary

Follow up to
elastic@9125e17
- move away from using `euiStyled` (which throws errors if plugin(s)
using the component aren't wrapped in
`KibanaStyledComponentsThemeProvider`.

See EUI's Emotion FAQ for more information:
elastic/eui#6828

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- ~[ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard
accessibility](https://webaim.org/techniques/keyboard/))~
- [x] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_notify_when.tsx

@@ -7,9 +7,9 @@
 
 import { RuleAction, RuleNotifyWhen } from '@kbn/alerting-plugin/common';
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import { css } from '@emotion/css'; // We can't use @emotion/react - this component gets used with plugins that use both styled-components and Emotion
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -23,6 +23,7 @@ import {
   EuiButtonEmpty,
   EuiContextMenuPanel,
   EuiContextMenuItem,
+  useEuiTheme,
 } from '@elastic/eui';
 import { some, filter, map } from 'fp-ts/lib/Option';
 import { pipe } from 'fp-ts/lib/pipeable';
@@ -242,28 +243,39 @@ export const ActionNotifyWhen = ({
     [onSummaryChange, selectedOptionDoesNotExist, onNotifyWhenChange, getDefaultNotifyWhenOption]
   );
 
+  const { euiTheme } = useEuiTheme();
+  const summaryContextMenuOptionStyles = useMemo(
+    () => css`
+      min-width: 300px;
+      padding: ${euiTheme.size.s};
+    `,
+    [euiTheme]
+  );
+
   const summaryOptions = useMemo(
     () => [
-      <SummaryContextMenuOption
+      <EuiContextMenuItem
         key="summary"
         onClick={() => selectSummaryOption(true)}
         icon={frequency.summary ? 'check' : 'empty'}
         id="actionNotifyWhen-option-summary"
         data-test-subj="actionNotifyWhen-option-summary"
+        className={summaryContextMenuOptionStyles}
       >
         {SUMMARY_OF_ALERTS}
-      </SummaryContextMenuOption>,
-      <SummaryContextMenuOption
+      </EuiContextMenuItem>,
+      <EuiContextMenuItem
         key="for_each"
         onClick={() => selectSummaryOption(false)}
         icon={!frequency.summary ? 'check' : 'empty'}
         id="actionNotifyWhen-option-for_each"
         data-test-subj="actionNotifyWhen-option-for_each"
+        className={summaryContextMenuOptionStyles}
       >
         {FOR_EACH_ALERT}
-      </SummaryContextMenuOption>,
+      </EuiContextMenuItem>,
     ],
-    [frequency.summary, selectSummaryOption]
+    [frequency.summary, selectSummaryOption, summaryContextMenuOptionStyles]
   );
 
   const summaryOrPerRuleSelect = (
@@ -387,8 +399,3 @@ const SUMMARY_OF_ALERTS = i18n.translate(
   'xpack.triggersActionsUI.sections.ruleForm.actionNotifyWhen.summaryOption',
   { defaultMessage: 'Summary of alerts' }
 );
-
-const SummaryContextMenuOption = euiStyled(EuiContextMenuItem)`
-  min-width: 300px;
-  padding: ${({ theme }) => theme.eui.euiSizeS};
-`;

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/action_type_form.test.tsx

@@ -18,7 +18,6 @@ import {
 } from '../../../types';
 import { act } from 'react-dom/test-utils';
 import { EuiFieldText } from '@elastic/eui';
-import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import { I18nProvider, __IntlProvider as IntlProvider } from '@kbn/i18n-react';
 import { render, waitFor, screen } from '@testing-library/react';
 import { DEFAULT_FREQUENCY } from '../../../common/constants';
@@ -414,21 +413,19 @@ describe('action_type_form', () => {
       frequency: DEFAULT_FREQUENCY,
     };
     const wrapper = render(
-      <EuiThemeProvider>
-        <IntlProvider locale="en">
-          {getActionTypeForm({
-            index: 1,
-            actionItem,
-            setActionFrequencyProperty: () => {
-              actionItem.frequency = {
-                notifyWhen: RuleNotifyWhen.ACTIVE,
-                throttle: null,
-                summary: true,
-              };
-            },
-          })}
-        </IntlProvider>
-      </EuiThemeProvider>
+      <IntlProvider locale="en">
+        {getActionTypeForm({
+          index: 1,
+          actionItem,
+          setActionFrequencyProperty: () => {
+            actionItem.frequency = {
+              notifyWhen: RuleNotifyWhen.ACTIVE,
+              throttle: null,
+              summary: true,
+            };
+          },
+        })}
+      </IntlProvider>
     );
 
     const summaryOrPerRuleSelect = wrapper.getByTestId('summaryOrPerRuleSelect');