moved away from style-component

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/components/empty_view.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { isEmpty } from 'lodash';
 import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSpacer, EuiText } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { i18n } from '@kbn/i18n';
 import { LOADING_VIEW } from '../series_editor/series_editor';
 import { ReportViewType, SeriesUrl } from '../types';

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/embeddable.tsx

@@ -17,7 +17,7 @@ import {
 } from '@kbn/lens-plugin/public';
 import { ViewMode } from '@kbn/embeddable-plugin/common';
 import { observabilityFeatureId } from '@kbn/observability-shared-plugin/public';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { AnalyticsServiceSetup } from '@kbn/core-analytics-browser';
 import { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
 import { useEBTTelemetry } from '../hooks/use_ebt_telemetry';

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/embeddable/index.tsx

@@ -11,7 +11,7 @@ import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
 import type { AnalyticsServiceSetup, CoreStart } from '@kbn/core/public';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { EuiErrorBoundary } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { DataView } from '@kbn/data-views-plugin/common';
 import { FormulaPublicApi } from '@kbn/lens-plugin/public';
 import { i18n } from '@kbn/i18n';

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/exploratory_view.tsx

@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import {
   EuiButtonEmpty,
   EuiResizableContainer,

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/header/last_updated.tsx

@@ -7,7 +7,7 @@
 
 import React, { useEffect, useState } from 'react';
 import moment from 'moment';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { EuiIcon, EuiText, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ChartCreationInfo } from './chart_creation_info';

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/lens_embeddable.tsx

@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { LensEmbeddableInput, TypedLensByValueInput } from '@kbn/lens-plugin/public';
 import { useUiTracker } from '@kbn/observability-shared-plugin/public';
 import { useSeriesStorage } from './hooks/use_series_storage';

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/breakdown/breakdowns.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useEffect } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { EuiSuperSelect, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useSeriesStorage } from '../../hooks/use_series_storage';

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/date_picker_col.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useSeriesStorage } from '../../hooks/use_series_storage';

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/filter_value_btn.tsx

@@ -7,7 +7,7 @@
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 import { EuiFilterButton, hexToRgb } from '@elastic/eui';
-import { euiStyled } from '@kbn/kibana-react-plugin/common';
+import styled from '@emotion/styled';
 import { FieldValueSuggestions } from '@kbn/observability-shared-plugin/public';
 import { useAppDataViewContext } from '../../hooks/use_app_data_view';
 import { useSeriesFilters } from '../../hooks/use_series_filters';
@@ -112,13 +112,15 @@ export function FilterValueButton({
   );
 }
 
-const FilterButton = euiStyled(EuiFilterButton)`
-  background-color: rgba(${(props) => {
-    const color = props.hasActiveFilters
-      ? props.color === 'danger'
-        ? hexToRgb(props.theme.eui.euiColorDanger)
-        : hexToRgb(props.theme.eui.euiColorPrimary)
-      : 'initial';
-    return `${color[0]}, ${color[1]}, ${color[2]}, 0.1`;
-  }});
+const FilterButton = styled(EuiFilterButton)`
+  background-color: rgba(
+    ${(props) => {
+      const color = props.hasActiveFilters
+        ? props.color === 'danger'
+          ? hexToRgb(props.theme.euiTheme.colors.danger)
+          : hexToRgb(props.theme.euiTheme.colors.primary)
+        : 'initial';
+      return `${color[0]}, ${color[1]}, ${color[2]}, 0.1`;
+    }}
+  );
 `;

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useState, ChangeEvent, useEffect, useRef, KeyboardEventHandler } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { i18n } from '@kbn/i18n';
 import {
   EuiFieldText,

x-pack/solutions/observability/plugins/exploratory_view/public/components/shared/exploratory_view/series_editor/series.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { i18n } from '@kbn/i18n';
 import { EuiFlexItem, EuiFlexGroup, EuiPanel, EuiAccordion, EuiSpacer } from '@elastic/eui';
 import { BuilderItem } from '../types';