Chore: Finish converting emotion styles to object syntax (#95399)

* convert some emotion styles to object syntax * convert more styles to object syntax * fix placeholder content
2024-10-25 14:50:28 +01:00
parent 2788817107
commit 94bbc081c8
111 changed files with 2044 additions and 2582 deletions
@@ -3709,33 +3709,17 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
    ],
    "public/app/features/logs/components/log-context/LogRowContextModal.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"],
      [0, 0, 0, "Styles should be written using objects.", "11"],
      [0, 0, 0, "Styles should be written using objects.", "12"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "14"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "15"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "16"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "17"]
    ],
    "public/app/features/logs/utils.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/features/manage-dashboards/DashboardImportPage.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"]
    ],
    "public/app/features/manage-dashboards/components/ImportDashboardForm.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -3743,9 +3727,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
    ],
    "public/app/features/manage-dashboards/components/ImportDashboardLibraryPanelsList.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/features/manage-dashboards/components/ImportDashboardOverview.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -3753,18 +3735,8 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
    ],
    "public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
+      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"]
    ],
    "public/app/features/manage-dashboards/state/actions.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -3839,13 +3811,6 @@ exports[`better eslint`] = {
    "public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx:5381": [
      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
    ],
    "public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"]
    ],
    "public/app/features/panel/components/VizTypePicker/VisualizationSuggestions.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
@@ -3882,8 +3847,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
    ],
    "public/app/features/plugins/admin/components/Badges/PluginUpdateAvailableBadge.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/features/plugins/admin/components/Badges/index.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./PluginDisabledBadge\`)", "0"],
@@ -3893,9 +3857,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not re-export imported variable (\`./PluginAngularBadge\`)", "4"],
      [0, 0, 0, "Do not re-export imported variable (\`./PluginDeprecatedBadge\`)", "5"]
    ],
    "public/app/features/plugins/admin/components/Badges/sharedStyles.ts:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithApp.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
@@ -3907,9 +3868,6 @@ exports[`better eslint`] = {
    "public/app/features/plugins/admin/components/GetStartedWithPlugin/index.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./GetStartedWithPlugin\`)", "0"]
    ],
    "public/app/features/plugins/admin/components/HorizontalGroup.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/features/plugins/admin/components/InstallControls/ExternallyManagedButton.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@@ -3929,8 +3887,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not re-export imported variable (\`./InstallControlsButton\`)", "1"]
    ],
    "public/app/features/plugins/admin/components/PluginActions.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/features/plugins/admin/components/PluginDashboards.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -3958,13 +3915,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
    ],
    "public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/features/plugins/admin/components/PluginDetailsHeaderSignature.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/features/plugins/admin/components/PluginDetailsPage.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -3982,21 +3933,12 @@ exports[`better eslint`] = {
    ],
    "public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"]
    ],
    "public/app/features/plugins/admin/components/PluginSubtitle.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/features/plugins/admin/components/PluginUsage.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"]
    ],
    "public/app/features/plugins/admin/components/VersionList.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -4004,13 +3946,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"]
    ],
    "public/app/features/plugins/admin/hooks/usePluginInfo.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/features/plugins/admin/pages/Browse.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -4105,15 +4041,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"],
      [0, 0, 0, "Styles should be written using objects.", "11"]
    ],
    "public/app/features/query/components/QueryErrorAlert.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -4124,16 +4052,9 @@ exports[`better eslint`] = {
      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
+      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"],
      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "12"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"]
    ],
    "public/app/features/query/components/QueryGroupOptions.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -4227,20 +4148,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
    ],
    "public/app/features/search/page/components/SearchResultsTable.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"],
      [0, 0, 0, "Styles should be written using objects.", "11"],
      [0, 0, 0, "Styles should be written using objects.", "12"],
      [0, 0, 0, "Styles should be written using objects.", "13"]
    ],
    "public/app/features/search/page/components/columns.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -4294,12 +4202,10 @@ exports[`better eslint`] = {
    ],
    "public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/features/serviceaccounts/components/ServiceAccountProfileRow.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -4308,14 +4214,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"],
      [0, 0, 0, "Styles should be written using objects.", "11"],
      [0, 0, 0, "Styles should be written using objects.", "12"],
      [0, 0, 0, "Styles should be written using objects.", "13"]
    ],
    "public/app/features/serviceaccounts/components/ServiceAccountsListItem.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -4329,9 +4228,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
    ],
    "public/app/features/storage/Breadcrumb.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/features/storage/CreateNewFolderModal.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
    ],
@@ -4339,23 +4235,11 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"]
    ],
    "public/app/features/storage/FolderView.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"]
    ],
    "public/app/features/storage/RootView.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -4366,19 +4250,12 @@ exports[`better eslint`] = {
    ],
    "public/app/features/storage/StoragePage.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"]
    ],
    "public/app/features/storage/UploadButton.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
      [0, 0, 0, "Styles should be written using objects.", "3"]
    ],
    "public/app/features/storage/storage.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -4526,9 +4403,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"]
    ],
    "public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/features/transformers/editors/CalculateFieldTransformerEditor/CumulativeOptionsEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
@@ -4568,10 +4442,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
    ],
    "public/app/features/transformers/editors/GroupByTransformerEditor.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"]
    ],
    "public/app/features/transformers/editors/MergeTransformerEditor.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -4595,9 +4466,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"]
    ],
    "public/app/features/transformers/extractFields/extractFields.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -4612,10 +4481,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "Do not use any type assertions.", "5"],
+      [0, 0, 0, "Do not use any type assertions.", "5"]
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"]
    ],
    "public/app/features/transformers/fieldToConfigMapping/fieldToConfigMapping.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -4653,8 +4519,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "12"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"]
      [0, 0, 0, "Styles should be written using objects.", "14"]
    ],
    "public/app/features/transformers/prepareTimeSeries/prepareTimeSeries.test.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -4663,10 +4528,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
    "public/app/features/transformers/spatial/SpatialTransformerEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/features/transformers/spatial/optionsHelper.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -4689,10 +4550,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"]
    ],
    "public/app/features/users/UsersActionBar.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -4731,21 +4589,13 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
      [0, 0, 0, "Styles should be written using objects.", "5"]
    ],
    "public/app/features/variables/editor/VariableEditorListRow.tsx:5381": [
      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"],
      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "2"],
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"],
+      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"]
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"]
    ],
    "public/app/features/variables/editor/getVariableQueryEditor.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -4779,12 +4629,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"]
    ],
    "public/app/features/variables/inspect/utils.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -4917,8 +4762,7 @@ exports[`better eslint`] = {
    ],
    "public/app/features/visualization/data-hover/DataHoverRows.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/features/visualization/data-hover/DataHoverView.tsx:5381": [
      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -4997,9 +4841,6 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx:5381": [
      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
    ],
@@ -5009,9 +4850,6 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/cloud-monitoring/components/index.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./Project\`)", "0"],
      [0, 0, 0, "Do not re-export imported variable (\`./GroupBy\`)", "1"],
@@ -5080,15 +4918,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not re-export imported variable (\`./thirdArgAfterSearchQuery\`)", "4"],
      [0, 0, 0, "Do not re-export imported variable (\`./withinStringQuery\`)", "5"]
    ],
    "public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx:5381": [
      [0, 0, 0, "* import is invalid because \'Layout,HorizontalGroup,VerticalGroup\' from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
    ],
@@ -5098,9 +4927,6 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.test.tsx:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./MetricsQueryEditor/SQLCodeEditor\`)", "0"]
    ],
    "public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupNamesSelection.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/index.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./MetricStatEditor\`)", "0"]
    ],
@@ -5195,23 +5021,12 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "8"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
@@ -5224,59 +5039,16 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Do not use any type assertions.", "1"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/aggregations.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/state/reducer.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/elasticsearch/components/QueryEditor/styles.ts:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/elasticsearch/configuration/DataLink.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"]
    ],
    "public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/datasource/elasticsearch/datasource.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -5295,10 +5067,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not re-export imported variable (\`./dataquery.gen\`)", "1"],
      [0, 0, 0, "Do not re-export imported variable (\`ElasticsearchQuery\`)", "2"]
    ],
    "public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/grafana-pyroscope-datasource/utils.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
@@ -5320,8 +5088,7 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
    ],
    "public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/grafana-testdata-datasource/components/index.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./StreamingClientEditor\`)", "0"],
@@ -5340,18 +5107,7 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/grafana/components/QueryEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "2"]
      [0, 0, 0, "Styles should be written using objects.", "3"]
    ],
    "public/app/plugins/datasource/grafana/components/TimePickerInput.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"]
    ],
    "public/app/plugins/datasource/grafana/components/TimeRegionEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/grafana/datasource.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -5364,35 +5120,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "7"],
      [0, 0, 0, "Do not use any type assertions.", "8"]
    ],
    "public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/datasource/graphite/components/MetricTankMetaInspector.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"]
    ],
    "public/app/plugins/datasource/graphite/components/TagsSection.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/graphite/components/helpers.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
@@ -5497,18 +5224,6 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/datasource/influxdb/components/editor/query/fsql/FSQLEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/influxdb/datasource.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -5562,10 +5277,6 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/influxdb/response_parser.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
    "public/app/plugins/datasource/jaeger/CheatSheet.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/jaeger/_importedDependencies/model/transform-trace-data.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
@@ -5575,10 +5286,6 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/jaeger/components/QueryEditor.tsx:5381": [
      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
    ],
    "public/app/plugins/datasource/jaeger/configuration/TraceIdTimeParams.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/jaeger/datasource.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -5586,84 +5293,16 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/loki/LanguageProvider.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
    "public/app/plugins/datasource/loki/components/LokiContextUi.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"]
    ],
    "public/app/plugins/datasource/loki/components/LokiLabelBrowser.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"],
      [0, 0, 0, "Styles should be written using objects.", "11"],
      [0, 0, 0, "Styles should be written using objects.", "12"],
      [0, 0, 0, "Styles should be written using objects.", "13"]
    ],
    "public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/loki/configuration/ConfigEditor.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
    "public/app/plugins/datasource/loki/configuration/DerivedField.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"]
    ],
    "public/app/plugins/datasource/loki/configuration/DerivedFields.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"]
    ],
    "public/app/plugins/datasource/loki/datasource.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
    "public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/datasource/loki/querybuilder/components/QueryPattern.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"]
    ],
    "public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/datasource/loki/types.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`LokiQueryDirection\`)", "0"],
      [0, 0, 0, "Do not re-export imported variable (\`LokiQueryType\`)", "1"],
@@ -5673,10 +5312,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not re-export imported variable (\`MixedDatasource\`)", "0"],
      [0, 0, 0, "Do not re-export imported variable (\`Datasource\`)", "1"]
    ],
    "public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/opentsdb/datasource.d.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
@@ -5700,10 +5335,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "16"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "17"]
    ],
    "public/app/plugins/datasource/parca/QueryEditor/LabelsEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/datasource/parca/webpack.config.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"]
    ],
@@ -5792,38 +5423,6 @@ exports[`better eslint`] = {
    "public/app/plugins/datasource/zipkin/webpack.config.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"]
    ],
    "public/app/plugins/panel/alertlist/AlertInstances.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/panel/alertlist/UnifiedAlertList.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Styles should be written using objects.", "10"],
      [0, 0, 0, "Styles should be written using objects.", "11"],
      [0, 0, 0, "Styles should be written using objects.", "12"],
      [0, 0, 0, "Styles should be written using objects.", "13"],
      [0, 0, 0, "Styles should be written using objects.", "14"],
      [0, 0, 0, "Styles should be written using objects.", "15"],
      [0, 0, 0, "Styles should be written using objects.", "16"]
    ],
    "public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"]
    ],
    "public/app/plugins/panel/annolist/AnnoListPanel.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
@@ -5850,11 +5449,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not re-export imported variable (\`CandlestickFieldMap\`)", "6"],
      [0, 0, 0, "Do not re-export imported variable (\`FieldConfig\`)", "7"]
    ],
    "public/app/plugins/panel/datagrid/utils.ts:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/panel/debug/CursorView.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -5921,24 +5515,6 @@ exports[`better eslint`] = {
    "public/app/plugins/panel/geomap/utils/tooltip.ts:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/panel/gettingstarted/components/DocsCard.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"]
    ],
    "public/app/plugins/panel/gettingstarted/components/TutorialCard.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"]
    ],
    "public/app/plugins/panel/gettingstarted/components/sharedStyles.ts:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/panel/heatmap/HeatmapPanel.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -5973,18 +5549,8 @@ exports[`better eslint`] = {
      [0, 0, 0, "Do not use any type assertions.", "15"],
      [0, 0, 0, "Do not use any type assertions.", "16"]
    ],
    "public/app/plugins/panel/live/LiveChannelEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/panel/live/LivePanel.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"]
    ],
    "public/app/plugins/panel/logs/LogsPanel.test.tsx:5381": [
      [0, 0, 0, "* import is invalid because \'Layout,HorizontalGroup,VerticalGroup\' from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
@@ -5995,55 +5561,16 @@ exports[`better eslint`] = {
    "public/app/plugins/panel/nodeGraph/Edge.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
    "public/app/plugins/panel/nodeGraph/EdgeLabel.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/panel/nodeGraph/Legend.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/panel/nodeGraph/Marker.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"]
    ],
    "public/app/plugins/panel/nodeGraph/Node.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"]
    ],
    "public/app/plugins/panel/nodeGraph/NodeGraph.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
+      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
+      [0, 0, 0, "Do not use any type assertions.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
+      [0, 0, 0, "Do not use any type assertions.", "3"]
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"],
      [0, 0, 0, "Styles should be written using objects.", "8"],
      [0, 0, 0, "Styles should be written using objects.", "9"],
      [0, 0, 0, "Do not use any type assertions.", "10"],
      [0, 0, 0, "Do not use any type assertions.", "11"],
      [0, 0, 0, "Do not use any type assertions.", "12"],
      [0, 0, 0, "Do not use any type assertions.", "13"]
    ],
    "public/app/plugins/panel/nodeGraph/ViewControls.tsx:5381": [
      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
    ],
    "public/app/plugins/panel/nodeGraph/editor/ArcOptionsEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/panel/nodeGraph/index.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./NodeGraph\`)", "0"]
@@ -6054,17 +5581,6 @@ exports[`better eslint`] = {
    "public/app/plugins/panel/nodeGraph/types.ts:5381": [
      [0, 0, 0, "Do not re-export imported variable (\`./panelcfg.gen\`)", "0"]
    ],
    "public/app/plugins/panel/nodeGraph/useContextMenu.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/panel/piechart/PieChart.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"]
    ],
    "public/app/plugins/panel/piechart/migrations.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
@@ -6076,13 +5592,8 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
    "public/app/plugins/panel/table/TablePanel.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/panel/table/cells/SparklineCellOptionsEditor.tsx:5381": [
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
+      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/panel/table/migrations.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -6090,13 +5601,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Unexpected any. Specify a different type.", "2"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "3"]
    ],
    "public/app/plugins/panel/text/TextPanel.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/panel/text/TextPanelEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/panel/text/textPanelMigrationHandler.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
@@ -6124,15 +5628,6 @@ exports[`better eslint`] = {
    "public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
    "public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"],
      [0, 0, 0, "Styles should be written using objects.", "6"]
    ],
    "public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationEditor2.tsx:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
@@ -6143,21 +5638,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
    ],
    "public/app/plugins/panel/traces/TracesPanel.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"]
    ],
    "public/app/plugins/panel/welcome/Welcome.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"],
      [0, 0, 0, "Styles should be written using objects.", "2"],
      [0, 0, 0, "Styles should be written using objects.", "3"],
      [0, 0, 0, "Styles should be written using objects.", "4"],
      [0, 0, 0, "Styles should be written using objects.", "5"]
    ],
    "public/app/plugins/panel/xychart/AutoEditor.tsx:5381": [
      [0, 0, 0, "Styles should be written using objects.", "0"],
      [0, 0, 0, "Styles should be written using objects.", "1"]
    ],
    "public/app/plugins/panel/xychart/ManualEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
@@ -34,91 +34,91 @@ import { LogContextButtons } from './LogContextButtons';
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    modal: css`
+    modal: css({
-      width: 85vw;
+      width: '85vw',
-      ${theme.breakpoints.down('md')} {
+      [theme.breakpoints.down('md')]: {
-        width: 100%;
+        width: '100%',
-      }
+      },
-      top: 50%;
+      top: '50%',
-      left: 50%;
+      left: '50%',
-      transform: translate(-50%, -50%);
+      transform: 'translate(-50%, -50%)',
-    `,
+    }),
-    sticky: css`
+    sticky: css({
-      position: sticky;
+      position: 'sticky',
-      z-index: 1;
+      zIndex: 1,
-      top: -1px;
+      top: '-1px',
-      bottom: -1px;
+      bottom: '-1px',
-    `,
+    }),
-    entry: css`
+    entry: css({
-      & > td {
+      '& > td': {
-        padding: ${theme.spacing(1)} 0 ${theme.spacing(1)} 0;
+        padding: theme.spacing(1, 0, 1, 0),
-      }
+      },
-      background: ${theme.colors.emphasize(theme.colors.background.secondary)};
+      background: theme.colors.emphasize(theme.colors.background.secondary),
-      & > table {
+      '& > table': {
-        margin-bottom: 0;
+        marginBottom: 0,
-      }
+      },
-      & .log-row-menu {
+      '& .log-row-menu': {
-        margin-top: -6px;
+        marginTop: '-6px',
-      }
+      },
-    `,
+    }),
-    datasourceUi: css`
+    datasourceUi: css({
-      padding-bottom: ${theme.spacing(1.25)};
+      paddingBottom: theme.spacing(1.25),
-      display: flex;
+      display: 'flex',
-      align-items: center;
+      alignItems: 'center',
-    `,
+    }),
-    logRowGroups: css`
+    logRowGroups: css({
-      overflow: auto;
+      overflow: 'auto',
-      max-height: 75%;
+      maxHeight: '75%',
-      align-self: stretch;
+      alignSelf: 'stretch',
-      display: inline-block;
+      display: 'inline-block',
-      border: 1px solid ${theme.colors.border.weak};
+      border: `1px solid ${theme.colors.border.weak}`,
-      border-radius: ${theme.shape.radius.default};
+      borderRadius: theme.shape.radius.default,
-      & > table {
+      '& > table': {
-        min-width: 100%;
+        minWidth: '100%',
-      }
+      },
-    `,
+    }),
-    flexColumn: css`
+    flexColumn: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-      padding: 0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)};
+      padding: theme.spacing(0, 3, 3, 3),
-    `,
+    }),
-    flexRow: css`
+    flexRow: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: row;
+      flexDirection: 'row',
-      align-items: center;
+      alignItems: 'center',
-      & > div:last-child {
+      '& > div:last-child': {
-        margin-left: auto;
+        marginLeft: 'auto',
-      }
+      },
-    `,
+    }),
-    noMarginBottom: css`
+    noMarginBottom: css({
-      & > table {
+      '& > table': {
-        margin-bottom: 0;
+        marginBottom: 0,
-      }
+      },
-    `,
+    }),
-    hidden: css`
+    hidden: css({
-      display: none;
+      display: 'none',
-    `,
+    }),
-    paddingTop: css`
+    paddingTop: css({
-      padding-top: ${theme.spacing(1)};
+      paddingTop: theme.spacing(1),
-    `,
+    }),
-    paddingBottom: css`
+    paddingBottom: css({
-      padding-bottom: ${theme.spacing(1)};
+      paddingBottom: theme.spacing(1),
-    `,
+    }),
-    link: css`
+    link: css({
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      font-size: ${theme.typography.bodySmall.fontSize};
+      fontSize: theme.typography.bodySmall.fontSize,
-      :hover {
+      ':hover': {
-        color: ${theme.colors.text.link};
+        color: theme.colors.text.link,
-      }
+      },
-    `,
+    }),
-    loadingCell: css`
+    loadingCell: css({
-      position: sticky;
+      position: 'sticky',
-      left: 50%;
+      left: '50%',
-      display: inline-block;
+      display: 'inline-block',
-      transform: translateX(-50%);
+      transform: 'translateX(-50%)',
-    `,
+    }),
  };
 };
@@ -256,15 +256,15 @@ export default DashboardImport;
 const importStyles = stylesFactory((theme: GrafanaTheme2) => {
  return {
-    option: css`
+    option: css({
-      margin-bottom: ${theme.spacing(4)};
+      marginBottom: theme.spacing(4),
-      max-width: 600px;
+      maxWidth: '600px',
-    `,
+    }),
-    labelWithLink: css`
+    labelWithLink: css({
-      max-width: 100%;
+      maxWidth: '100%',
-    `,
+    }),
-    linkWithinLabel: css`
+    linkWithinLabel: css({
-      font-size: inherit;
+      fontSize: 'inherit',
-    `,
+    }),
  };
 });
@@ -52,11 +52,11 @@ export function ImportDashboardLibraryPanelsList({
 function getStyles(theme: GrafanaTheme2) {
  return {
-    spacer: css`
+    spacer: css({
-      margin-bottom: ${theme.spacing(2)};
+      marginBottom: theme.spacing(2),
-    `,
+    }),
-    item: css`
+    item: css({
-      margin-bottom: ${theme.spacing(1)};
+      marginBottom: theme.spacing(1),
-    `,
+    }),
  };
 }
@@ -47,10 +47,10 @@ export const DeletePublicDashboardModal = ({
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  title: css`
+  title: css({
-    margin-bottom: ${theme.spacing(1)};
+    marginBottom: theme.spacing(1),
-  `,
+  }),
-  description: css`
+  description: css({
-    font-size: ${theme.typography.body.fontSize};
+    fontSize: theme.typography.body.fontSize,
-  `,
+  }),
 });
@@ -209,46 +209,46 @@ export const PublicDashboardListTable = () => {
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  list: css`
+  list: css({
-    list-style-type: none;
+    listStyleType: 'none',
-    margin-bottom: ${theme.spacing(2)};
+    marginBottom: theme.spacing(2),
-  `,
+  }),
-  card: css`
+  card: css({
-    ${theme.breakpoints.up('sm')} {
+    [theme.breakpoints.up('sm')]: {
-      display: flex;
+      display: 'flex',
-    }
+    },
-  `,
+  }),
-  heading: css`
+  heading: css({
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    gap: ${theme.spacing(1)};
+    gap: theme.spacing(1),
-    flex: 1;
+    flex: 1,
-  `,
+  }),
-  orphanedTitle: css`
+  orphanedTitle: css({
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    gap: ${theme.spacing(1)};
+    gap: theme.spacing(1),
-  `,
+  }),
-  actions: css`
+  actions: css({
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    position: relative;
+    position: 'relative',
-    gap: ${theme.spacing(0.5)};
+    gap: theme.spacing(0.5),
-    ${theme.breakpoints.up('sm')} {
+    [theme.breakpoints.up('sm')]: {
-      gap: ${theme.spacing(1)};
+      gap: theme.spacing(1),
-    }
+    },
-  `,
+  }),
-  pauseSwitch: css`
+  pauseSwitch: css({
-    display: flex;
+    display: 'flex',
-    gap: ${theme.spacing(1)};
+    gap: theme.spacing(1),
-    align-items: center;
+    alignItems: 'center',
-    font-size: ${theme.typography.bodySmall.fontSize};
+    fontSize: theme.typography.bodySmall.fontSize,
-    margin-bottom: 0;
+    marginBottom: 0,
-    flex: 1;
+    flex: 1,
-    ${theme.breakpoints.up('sm')} {
+    [theme.breakpoints.up('sm')]: {
-      padding-right: ${theme.spacing(2)};
+      paddingRight: theme.spacing(2),
-    }
+    },
-  `,
+  }),
 });
@@ -83,55 +83,56 @@ const getStyles = (theme: GrafanaTheme2) => {
      borderRadius: theme.spacing(2),
      bottom: 0,
    }),
-    vizBox: css`
+    vizBox: css({
-      position: relative;
+      position: 'relative',
-      background: none;
+      background: 'none',
-      border-radius: ${theme.shape.radius.default};
+      borderRadius: theme.shape.radius.default,
-      cursor: pointer;
+      cursor: 'pointer',
-      border: 1px solid ${theme.colors.border.medium};
+      border: `1px solid ${theme.colors.border.medium}`,
-      transition: ${theme.transitions.create(['background'], {
+      [theme.transitions.handleMotion('no-preference', 'reduce')]: {
-        duration: theme.transitions.duration.short,
+        transition: theme.transitions.create(['background'], {
-      })};
+          duration: theme.transitions.duration.short,
        }),
      },
-      &:hover {
+      '&:hover': {
-        background: ${theme.colors.background.secondary};
+        background: theme.colors.background.secondary,
-      }
+      },
-    `,
+    }),
-    imgBox: css`
+    imgBox: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-      height: 100%;
+      height: '100%',
-      justify-self: center;
+      justifySelf: 'center',
-      color: ${theme.colors.text.primary};
+      color: theme.colors.text.primary,
-      width: 100%;
+      width: '100%',
      display: flex;
-      justify-content: center;
+      justifyContent: 'center',
-      align-items: center;
+      alignItems: 'center',
-      text-align: center;
+      textAlign: 'center',
-    `,
+    }),
-    name: css`
+    name: css({
-      padding-bottom: ${theme.spacing(0.5)};
+      paddingBottom: theme.spacing(0.5),
-      margin-top: ${theme.spacing(-1)};
+      marginTop: theme.spacing(-1),
-      font-size: ${theme.typography.bodySmall.fontSize};
+      fontSize: theme.typography.bodySmall.fontSize,
-      white-space: nowrap;
+      whiteSpace: 'nowrap',
-      overflow: hidden;
+      overflow: 'hidden',
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      font-weight: ${theme.typography.fontWeightMedium};
+      fontWeight: theme.typography.fontWeightMedium,
-      text-overflow: ellipsis;
+      textOverflow: 'ellipsis',
-    `,
+    }),
-    img: css`
+    img: css({
-      max-width: ${theme.spacing(8)};
+      maxWidth: theme.spacing(8),
-      max-height: ${theme.spacing(8)};
+      maxHeight: theme.spacing(8),
-    `,
+    }),
-    renderContainer: css`
+    renderContainer: css({
-      position: absolute;
+      position: 'absolute',
-      transform-origin: left top;
+      transformOrigin: 'left top',
-      top: 6px;
+      top: '6px',
-      left: 6px;
+      left: '6px',
-    `,
+    }),
  };
 };
@@ -17,10 +17,10 @@ export function PluginUpdateAvailableBadge({ plugin }: Props): React.ReactElemen
 export const getStyles = (theme: GrafanaTheme2) => {
  return {
-    hasUpdate: css`
+    hasUpdate: css({
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      font-size: ${theme.typography.bodySmall.fontSize};
+      fontSize: theme.typography.bodySmall.fontSize,
-      margin-bottom: 0;
+      marginBottom: 0,
-    `,
+    }),
  };
 };
@@ -2,8 +2,9 @@ import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
-export const getBadgeColor = (theme: GrafanaTheme2) => css`
+export const getBadgeColor = (theme: GrafanaTheme2) =>
-  background: ${theme.colors.background.primary};
+  css({
-  border-color: ${theme.colors.border.strong};
+    background: theme.colors.background.primary,
-  color: ${theme.colors.text.secondary};
+    borderColor: theme.colors.border.strong,
-`;
+    color: theme.colors.text.secondary,
  });
@@ -18,16 +18,16 @@ export const HorizontalGroup = ({ children, wrap, className }: HorizontalGroupPr
 };
 const getStyles = (theme: GrafanaTheme2, wrap?: boolean) => ({
-  container: css`
+  container: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: row;
+    flexDirection: 'row',
-    flex-wrap: ${wrap ? 'wrap' : 'no-wrap'};
+    flexWrap: wrap ? 'wrap' : 'nowrap',
-    & > * {
+    '& > *': {
-      margin-bottom: ${theme.spacing()};
+      marginBottom: theme.spacing(),
-      margin-right: ${theme.spacing()};
+      marginRight: theme.spacing(),
-    }
+    },
-    & > *:last-child {
+    '& > *:last-child': {
-      margin-right: 0;
+      marginRight: 0,
-    }
+    },
-  `,
+  }),
 });
@@ -73,8 +73,8 @@ export const PluginActions = ({ plugin }: Props) => {
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    message: css`
+    message: css({
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-    `,
+    }),
  };
 };
@@ -50,21 +50,21 @@ export function PluginDetailsHeaderDependencies({ plugin, grafanaDependency }: P
 export const getStyles = (theme: GrafanaTheme2) => {
  return {
-    dependencyTitle: css`
+    dependencyTitle: css({
-      margin-right: ${theme.spacing(0.5)};
+      marginRight: theme.spacing(0.5),
-      &::after {
+      '&::after': {
-        content: '';
+        content: "''",
-        padding: 0;
+        padding: 0,
-      }
+      },
-    `,
+    }),
    depBadge: css({
      display: 'flex',
      alignItems: 'flex-start',
    }),
-    icon: css`
+    icon: css({
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      margin-right: ${theme.spacing(0.5)};
+      marginRight: theme.spacing(0.5),
-    `,
+    }),
  };
 };
@@ -34,14 +34,14 @@ export function PluginDetailsHeaderSignature({ plugin }: Props): React.ReactElem
 export const getStyles = (theme: GrafanaTheme2) => {
  return {
-    container: css`
+    container: css({
-      display: flex;
+      display: 'flex',
-      flex-wrap: wrap;
+      flexWrap: 'wrap',
-      gap: ${theme.spacing(0.5)};
+      gap: theme.spacing(0.5),
-    `,
+    }),
-    link: css`
+    link: css({
-      display: inline-flex;
+      display: 'inline-flex',
-      align-items: center;
+      alignItems: 'center',
-    `,
+    }),
  };
 };
@@ -53,20 +53,20 @@ export const DetailsBadge = ({ children }: React.PropsWithChildren<{}>) => {
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  badge: css`
+  badge: css({
-    background-color: ${theme.colors.background.canvas};
+    backgroundColor: theme.colors.background.canvas,
-    border-color: ${theme.colors.border.strong};
+    borderColor: theme.colors.border.strong,
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-  `,
+  }),
-  detailsWrapper: css`
+  detailsWrapper: css({
-    align-items: center;
+    alignItems: 'center',
-    display: flex;
+    display: 'flex',
-  `,
+  }),
-  strong: css`
+  strong: css({
-    color: ${theme.colors.text.primary};
+    color: theme.colors.text.primary,
-  `,
+  }),
-  icon: css`
+  icon: css({
-    margin-right: ${theme.spacing(0.5)};
+    marginRight: theme.spacing(0.5),
-  `,
+  }),
 });
@@ -76,10 +76,10 @@ export const PluginSubtitle = ({ plugin }: Props) => {
 export const getStyles = (theme: GrafanaTheme2) => {
  return {
-    subtitle: css`
+    subtitle: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-      gap: ${theme.spacing(1)};
+      gap: theme.spacing(1),
-    `,
+    }),
  };
 };
@@ -86,12 +86,12 @@ export function PluginUsage({ plugin }: Props) {
 export const getStyles = (theme: GrafanaTheme2) => {
  return {
-    wrap: css`
+    wrap: css({
-      width: 100%;
+      width: '100%',
-      height: 100%;
+      height: '100%',
-    `,
+    }),
-    info: css`
+    info: css({
-      padding-bottom: 30px;
+      paddingBottom: '30px',
-    `,
+    }),
  };
 };
@@ -57,21 +57,20 @@ export const VersionList = ({ versions = [], installedVersion }: Props) => {
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
+  container: css({
-    padding: ${theme.spacing(2, 4, 3)};
+    padding: theme.spacing(2, 4, 3),
-  `,
+  }),
-  table: css`
+  table: css({
-    table-layout: fixed;
+    tableLayout: 'fixed',
-    width: 100%;
+    width: '100%',
-    td,
+    'td, th': {
-    th {
+      padding: `${theme.spacing()} 0`,
-      padding: ${theme.spacing()} 0;
+    },
-    }
+    th: {
-    th {
+      fontSize: theme.typography.h5.fontSize,
-      font-size: ${theme.typography.h5.fontSize};
+    },
-    }
+  }),
-  `,
+  currentVersion: css({
-  currentVersion: css`
+    fontWeight: theme.typography.fontWeightBold,
-    font-weight: ${theme.typography.fontWeightBold};
+  }),
  `,
 });
@@ -88,10 +88,10 @@ export const usePluginInfo = (plugin?: CatalogPlugin): PageInfoItem[] => {
 export const getStyles = (theme: GrafanaTheme2) => {
  return {
-    subtitle: css`
+    subtitle: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-      gap: ${theme.spacing(1)};
+      gap: theme.spacing(1),
-    `,
+    }),
  };
 };
@@ -146,79 +146,78 @@ const renderDataSource = <TQuery extends DataQuery>(
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    wrapper: css`
+    wrapper: css({
-      label: Wrapper;
+      label: 'Wrapper',
-      display: flex;
+      display: 'flex',
-      align-items: center;
+      alignItems: 'center',
-      margin-left: ${theme.spacing(0.5)};
+      marginLeft: theme.spacing(0.5),
-      overflow: hidden;
+      overflow: 'hidden',
-    `,
+    }),
-    queryNameWrapper: css`
+    queryNameWrapper: css({
-      display: flex;
+      display: 'flex',
-      cursor: pointer;
+      cursor: 'pointer',
-      border: 1px solid transparent;
+      border: '1px solid transparent',
-      border-radius: ${theme.shape.borderRadius(2)};
+      borderRadius: theme.shape.radius.default,
-      align-items: center;
+      alignItems: 'center',
-      padding: 0 0 0 ${theme.spacing(0.5)};
+      padding: theme.spacing(0, 0, 0, 0.5),
-      margin: 0;
+      margin: 0,
-      background: transparent;
+      background: 'transparent',
-      overflow: hidden;
+      overflow: 'hidden',
-      &:hover {
+      '&:hover': {
-        background: ${theme.colors.action.hover};
+        background: theme.colors.action.hover,
-        border: 1px dashed ${theme.colors.border.strong};
+        border: `1px dashed ${theme.colors.border.strong}`,
-      }
+      },
-      &:focus {
+      '&:focus': {
-        border: 2px solid ${theme.colors.primary.border};
+        border: `2px solid ${theme.colors.primary.border}`,
-      }
+      },
-      &:hover,
+      '&:hover, &:focus': {
-      &:focus {
+        '.query-name-edit-icon': {
-        .query-name-edit-icon {
+          visibility: 'visible',
-          visibility: visible;
+        },
-        }
+      },
-      }
+    }),
-    `,
+    queryName: css({
-    queryName: css`
+      fontWeight: theme.typography.fontWeightMedium,
-      font-weight: ${theme.typography.fontWeightMedium};
+      color: theme.colors.primary.text,
-      color: ${theme.colors.primary.text};
+      cursor: 'pointer',
-      cursor: pointer;
+      overflow: 'hidden',
-      overflow: hidden;
+      marginLeft: theme.spacing(0.5),
-      margin-left: ${theme.spacing(0.5)};
+    }),
    `,
    queryEditIcon: cx(
-      css`
+      css({
-        margin-left: ${theme.spacing(2)};
+        marginLeft: theme.spacing(2),
-        visibility: hidden;
+        visibility: 'hidden',
-      `,
+      }),
      'query-name-edit-icon'
    ),
-    queryNameInput: css`
+    queryNameInput: css({
-      max-width: 300px;
+      maxWidth: '300px',
-      margin: -4px 0;
+      margin: '-4px 0',
-    `,
+    }),
-    collapsedText: css`
+    collapsedText: css({
-      font-weight: ${theme.typography.fontWeightRegular};
+      fontWeight: theme.typography.fontWeightRegular,
-      font-size: ${theme.typography.bodySmall.fontSize};
+      fontSize: theme.typography.bodySmall.fontSize,
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      padding-left: ${theme.spacing(1)};
+      paddingLeft: theme.spacing(1),
-      align-items: center;
+      alignItems: 'center',
-      overflow: hidden;
+      overflow: 'hidden',
-      font-style: italic;
+      fontStyle: 'italic',
-      white-space: nowrap;
+      whiteSpace: 'nowrap',
-      text-overflow: ellipsis;
+      textOverflow: 'ellipsis',
-    `,
+    }),
-    contextInfo: css`
+    contextInfo: css({
-      font-size: ${theme.typography.bodySmall.fontSize};
+      fontSize: theme.typography.bodySmall.fontSize,
-      font-style: italic;
+      fontStyle: 'italic',
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      padding-left: 10px;
+      paddingLeft: '10px',
-      padding-right: 10px;
+      paddingRight: '10px',
-    `,
+    }),
-    itemWrapper: css`
+    itemWrapper: css({
-      display: flex;
+      display: 'flex',
-      margin-left: 4px;
+      marginLeft: '4px',
-    `,
+    }),
  };
 };
@@ -355,29 +355,29 @@ const getStyles = stylesFactory(() => {
  const { theme } = config;
  return {
-    innerWrapper: css`
+    innerWrapper: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-      padding: ${theme.spacing.md};
+      padding: theme.spacing.md,
-    `,
+    }),
-    dataSourceRow: css`
+    dataSourceRow: css({
-      display: flex;
+      display: 'flex',
-      margin-bottom: ${theme.spacing.md};
+      marginBottom: theme.spacing.md,
-    `,
+    }),
-    dataSourceRowItem: css`
+    dataSourceRowItem: css({
-      margin-right: ${theme.spacing.inlineFormMargin};
+      marginRight: theme.spacing.inlineFormMargin,
-    `,
+    }),
-    dataSourceRowItemOptions: css`
+    dataSourceRowItemOptions: css({
-      flex-grow: 1;
+      flexGrow: 1,
-      margin-right: ${theme.spacing.inlineFormMargin};
+      marginRight: theme.spacing.inlineFormMargin,
-    `,
+    }),
-    queriesWrapper: css`
+    queriesWrapper: css({
-      padding-bottom: 16px;
+      paddingBottom: '16px',
-    `,
+    }),
-    expressionWrapper: css``,
+    expressionWrapper: css({}),
-    expressionButton: css`
+    expressionButton: css({
-      margin-right: ${theme.spacing.sm};
+      marginRight: theme.spacing.sm,
-    `,
+    }),
  };
 });
@@ -228,44 +228,44 @@ const getStyles = (theme: GrafanaTheme2) => {
  const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03);
  return {
-    noData: css`
+    noData: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-      align-items: center;
+      alignItems: 'center',
-      justify-content: center;
+      justifyContent: 'center',
-      height: 100%;
+      height: '100%',
-    `,
+    }),
-    headerCell: css`
+    headerCell: css({
-      align-items: center;
+      alignItems: 'center',
-      display: flex;
+      display: 'flex',
-      overflo: hidden;
+      overflo: 'hidden',
-      padding: ${theme.spacing(1)};
+      padding: theme.spacing(1),
-    `,
+    }),
-    headerRow: css`
+    headerRow: css({
-      background-color: ${theme.colors.background.secondary};
+      backgroundColor: theme.colors.background.secondary,
-      display: flex;
+      display: 'flex',
-      gap: ${theme.spacing(1)};
+      gap: theme.spacing(1),
-      height: ${ROW_HEIGHT}px;
+      height: `${ROW_HEIGHT}px`,
-    `,
+    }),
-    selectedRow: css`
+    selectedRow: css({
-      background-color: ${rowHoverBg};
+      backgroundColor: rowHoverBg,
-      box-shadow: inset 3px 0px ${theme.colors.primary.border};
+      boxShadow: `inset 3px 0px ${theme.colors.primary.border}`,
-    `,
+    }),
-    rowContainer: css`
+    rowContainer: css({
-      display: flex;
+      display: 'flex',
-      gap: ${theme.spacing(1)};
+      gap: theme.spacing(1),
-      height: ${ROW_HEIGHT}px;
+      height: `${ROW_HEIGHT}px`,
-      label: row;
+      label: 'row',
-      &:hover {
+      '&:hover': {
-        background-color: ${rowHoverBg};
+        backgroundColor: rowHoverBg,
-      }
+      },
-      &:not(:hover) div[role='cell'] {
+      "&:not(:hover) div[role='cell']": {
-        white-space: nowrap;
+        whiteSpace: 'nowrap',
-        overflow: hidden;
+        overflow: 'hidden',
-        text-overflow: ellipsis;
+        textOverflow: 'ellipsis',
-      }
+      },
-    `,
+    }),
  };
 };
@@ -278,53 +278,53 @@ const getColumnStyles = (theme: GrafanaTheme2) => {
      display: 'flex',
      alignItems: 'center',
    }),
-    nameCellStyle: css`
+    nameCellStyle: css({
-      overflow: hidden;
+      overflow: 'hidden',
-      text-overflow: ellipsis;
+      textOverflow: 'ellipsis',
-      user-select: text;
+      userSelect: 'text',
-      white-space: nowrap;
+      whiteSpace: 'nowrap',
-    `,
+    }),
    typeCell: css({
      gap: theme.spacing(0.5),
    }),
-    typeIcon: css`
+    typeIcon: css({
-      fill: ${theme.colors.text.secondary};
+      fill: theme.colors.text.secondary,
-    `,
+    }),
-    datasourceItem: css`
+    datasourceItem: css({
-      span {
+      span: {
-        &:hover {
+        '&:hover': {
-          color: ${theme.colors.text.link};
+          color: theme.colors.text.link,
-        }
+        },
-      }
+      },
-    `,
+    }),
-    missingTitleText: css`
+    missingTitleText: css({
-      color: ${theme.colors.text.disabled};
+      color: theme.colors.text.disabled,
-      font-style: italic;
+      fontStyle: 'italic',
-    `,
+    }),
-    invalidDatasourceItem: css`
+    invalidDatasourceItem: css({
-      color: ${theme.colors.error.main};
+      color: theme.colors.error.main,
-      text-decoration: line-through;
+      textDecoration: 'line-through',
-    `,
+    }),
    locationContainer: css({
      display: 'flex',
      flexWrap: 'nowrap',
      gap: theme.spacing(1),
      overflow: 'hidden',
    }),
-    locationItem: css`
+    locationItem: css({
-      align-items: center;
+      alignItems: 'center',
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      display: flex;
+      display: 'flex',
-      flex-wrap: nowrap;
+      flexWrap: 'nowrap',
-      gap: 4px;
+      gap: '4px',
-      overflow: hidden;
+      overflow: 'hidden',
-    `,
+    }),
-    explainItem: css`
+    explainItem: css({
-      cursor: pointer;
+      cursor: 'pointer',
-    `,
+    }),
-    tagList: css`
+    tagList: css({
-      justify-content: flex-start;
+      justifyContent: 'flex-start',
-      flex-wrap: nowrap;
+      flexWrap: 'nowrap',
-    `,
+    }),
  };
 };
@@ -85,7 +85,7 @@ export function ServiceAccountProfile({ serviceAccount, timeZone, onChange }: Pr
 }
 export const getStyles = (theme: GrafanaTheme2) => ({
-  section: css`
+  section: css({
-    margin-bottom: ${theme.spacing(4)};
+    marginBottom: theme.spacing(4),
-  `,
+  }),
 });
@@ -100,8 +100,8 @@ export const ServiceAccountProfileRow = ({ label, value, inputType, disabled, on
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    disabled: css`
+    disabled: css({
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-    `,
+    }),
  };
 };
@@ -121,25 +121,26 @@ const TokenExpiration = ({ timeZone, token }: TokenExpirationProps) => {
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  tableRow: (hasExpired: boolean | undefined) => css`
+  tableRow: (hasExpired: boolean | undefined) =>
-    color: ${hasExpired ? theme.colors.text.secondary : theme.colors.text.primary};
+    css({
-  `,
+      color: hasExpired ? theme.colors.text.secondary : theme.colors.text.primary,
-  tooltipContainer: css`
+    }),
-    margin-left: ${theme.spacing(1)};
+  tooltipContainer: css({
-  `,
+    marginLeft: theme.spacing(1),
-  toolTipIcon: css`
+  }),
-    color: ${theme.colors.error.text};
+  toolTipIcon: css({
-  `,
+    color: theme.colors.error.text,
-  secondsUntilExpiration: css`
+  }),
-    color: ${theme.colors.warning.text};
+  secondsUntilExpiration: css({
-  `,
+    color: theme.colors.warning.text,
-  hasExpired: css`
+  }),
-    color: ${theme.colors.error.text};
+  hasExpired: css({
-  `,
+    color: theme.colors.error.text,
-  neverExpire: css`
+  }),
-    color: ${theme.colors.text.secondary};
+  neverExpire: css({
-  `,
+    color: theme.colors.text.secondary,
-  section: css`
+  }),
-    margin-bottom: ${theme.spacing(4)};
+  section: css({
-  `,
+    marginBottom: theme.spacing(4),
  }),
 });
@@ -39,23 +39,23 @@ export function Breadcrumb({ pathName, onPathChange, rootIcon }: Props) {
 function getStyles(theme: GrafanaTheme2) {
  return {
-    breadCrumb: css`
+    breadCrumb: css({
-      list-style: none;
+      listStyle: 'none',
-      padding: ${theme.spacing(2, 1)};
+      padding: theme.spacing(2, 1),
-      li {
+      li: {
-        display: inline;
+        display: 'inline',
-        :not(:last-child) {
+        ':not(:last-child)': {
-          color: ${theme.colors.text.link};
+          color: theme.colors.text.link,
-          cursor: pointer;
+          cursor: 'pointer',
-        }
+        },
-        + li:before {
+        '+ li:before': {
-          content: '>';
+          content: "'>'",
-          padding: ${theme.spacing(1)};
+          padding: theme.spacing(1),
-          color: ${theme.colors.text.secondary};
+          color: theme.colors.text.secondary,
-        }
+        },
-      }
+      },
-    `,
+    }),
  };
 }
@@ -125,37 +125,31 @@ function getFileDisplayInfo(path: string): FileDisplayInfo {
 const getStyles = (theme: GrafanaTheme2) => ({
  // TODO: remove `height: 90%`
-  wrapper: css`
+  wrapper: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: column;
+    flexDirection: 'column',
-    height: 100%;
+    height: '100%',
-  `,
+  }),
-  tableControlRowWrapper: css`
+  tableControlRowWrapper: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: row;
+    flexDirection: 'row',
-    align-items: center;
+    alignItems: 'center',
-    margin-bottom: ${theme.spacing(2)};
+    marginBottom: theme.spacing(2),
-  `,
+  }),
  // TODO: remove `height: 100%`
-  tableWrapper: css`
+  tableWrapper: css({
-    border: 1px solid ${theme.colors.border.medium};
+    border: `1px solid ${theme.colors.border.medium}`,
-    height: 100%;
+    height: '100%',
-  `,
+  }),
-  uploadSpot: css`
+  uploadSpot: css({
-    margin-left: ${theme.spacing(2)};
+    marginLeft: theme.spacing(2),
-  `,
+  }),
-  border: css`
+  border: css({
-    border: 1px solid ${theme.colors.border.medium};
+    border: `1px solid ${theme.colors.border.medium}`,
-    padding: ${theme.spacing(2)};
+    padding: theme.spacing(2),
-  `,
+  }),
-  img: css`
+  img: css({
-    max-width: 100%;
+    maxWidth: '100%',
-    // max-height: 147px;
+  }),
-    // fill: ${theme.colors.text.primary};
+  icon: css({}),
  `,
  icon: css`
    // max-width: 100%;
    // max-height: 147px;
    // fill: ${theme.colors.text.primary};
  `,
 });
@@ -43,27 +43,27 @@ export function FolderView({ listing, view }: Props) {
 const getStyles = (theme: GrafanaTheme2) => ({
  // TODO: remove `height: 90%`
-  wrapper: css`
+  wrapper: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: column;
+    flexDirection: 'column',
-    height: 100%;
+    height: '100%',
-  `,
+  }),
-  tableControlRowWrapper: css`
+  tableControlRowWrapper: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: row;
+    flexDirection: 'row',
-    align-items: center;
+    alignItems: 'center',
-    margin-bottom: ${theme.spacing(2)};
+    marginBottom: theme.spacing(2),
-  `,
+  }),
  // TODO: remove `height: 100%`
-  tableWrapper: css`
+  tableWrapper: css({
-    border: 1px solid ${theme.colors.border.medium};
+    border: `1px solid ${theme.colors.border.medium}`,
-    height: 100%;
+    height: '100%',
-  `,
+  }),
-  uploadSpot: css`
+  uploadSpot: css({
-    margin-left: ${theme.spacing(2)};
+    marginLeft: theme.spacing(2),
-  `,
+  }),
-  border: css`
+  border: css({
-    border: 1px solid ${theme.colors.border.medium};
+    border: `1px solid ${theme.colors.border.medium}`,
-    padding: ${theme.spacing(2)};
+    padding: theme.spacing(2),
-  `,
+  }),
 });
@@ -267,30 +267,30 @@ export default function StoragePage(props: Props) {
 const getStyles = (theme: GrafanaTheme2) => ({
  // TODO: remove `height: 90%`
-  wrapper: css`
+  wrapper: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: column;
+    flexDirection: 'column',
-    height: 100%;
+    height: '100%',
-  `,
+  }),
-  tableControlRowWrapper: css`
+  tableControlRowWrapper: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: row;
+    flexDirection: 'row',
-    align-items: center;
+    alignItems: 'center',
-    margin-bottom: ${theme.spacing(2)};
+    marginBottom: theme.spacing(2),
-  `,
+  }),
  // TODO: remove `height: 100%`
-  tableWrapper: css`
+  tableWrapper: css({
-    border: 1px solid ${theme.colors.border.medium};
+    border: `1px solid ${theme.colors.border.medium}`,
-    height: 100%;
+    height: '100%',
-  `,
+  }),
-  border: css`
+  border: css({
-    border: 1px solid ${theme.colors.border.medium};
+    border: `1px solid ${theme.colors.border.medium}`,
-    padding: ${theme.spacing(2)};
+    padding: theme.spacing(2),
-  `,
+  }),
-  errorAlert: css`
+  errorAlert: css({
-    padding-top: 20px;
+    paddingTop: '20px',
-  `,
+  }),
-  uploadButton: css`
+  uploadButton: css({
-    margin-right: ${theme.spacing(2)};
+    marginRight: theme.spacing(2),
-  `,
+  }),
 });
@@ -112,7 +112,7 @@ export function UploadButton({ setErrorMessages, setPath, path, fileNames }: Pro
 }
 const getStyles = (theme: GrafanaTheme2) => ({
-  uploadButton: css`
+  uploadButton: css({
-    margin-right: ${theme.spacing(2)};
+    marginRight: theme.spacing(2),
-  `,
+  }),
 });
@@ -99,7 +99,7 @@ export const configFromQueryTransformRegistryItem: TransformerRegistryItem<Confi
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  matcherOptions: css`
+  matcherOptions: css({
-    min-width: 404px;
+    minWidth: '404px',
-  `,
+  }),
 });
@@ -127,19 +127,19 @@ export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }:
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    label: css`
+    label: css({
-      label {
+      label: {
-        min-width: ${theme.spacing(32)};
+        minWidth: theme.spacing(32),
-      }
+      },
-    `,
+    }),
-    operation: css`
+    operation: css({
-      flex-shrink: 0;
+      flexShrink: 0,
-      height: 100%;
+      height: '100%',
-      width: ${theme.spacing(24)};
+      width: theme.spacing(24),
-    `,
+    }),
-    aggregations: css`
+    aggregations: css({
-      flex-grow: 1;
+      flexGrow: 1,
-    `,
+    }),
  };
 };
@@ -120,12 +120,12 @@ const getTooltips = () => {
 function getStyle() {
  return {
-    list: css`
+    list: css({
-      margin-left: 20px;
+      marginLeft: '20px',
-    `,
+    }),
-    removeIcon: css`
+    removeIcon: css({
-      margin: 0 0 0 4px;
+      margin: '0 0 0 4px',
-      align-items: center;
+      alignItems: 'center',
-    `,
+    }),
  };
 }
@@ -202,32 +202,31 @@ function configHandlerToSelectOption(
 }
 const getStyles = (theme: GrafanaTheme2) => ({
-  table: css`
+  table: css({
-    margin-top: ${theme.spacing(1)};
+    marginTop: theme.spacing(1),
-    td,
+    'td, th': {
-    th {
+      borderRight: `4px solid ${theme.colors.background.primary}`,
-      border-right: 4px solid ${theme.colors.background.primary};
+      borderBottom: `4px solid ${theme.colors.background.primary}`,
-      border-bottom: 4px solid ${theme.colors.background.primary};
+      whiteSpace: 'nowrap',
-      white-space: nowrap;
+    },
-    }
+    th: {
-    th {
+      fontSize: theme.typography.bodySmall.fontSize,
-      font-size: ${theme.typography.bodySmall.fontSize};
+      lineHeight: theme.spacing(4),
-      line-height: ${theme.spacing(4)};
+      padding: theme.spacing(0, 1),
-      padding: ${theme.spacing(0, 1)};
+    },
-    }
+  }),
-  `,
+  labelCell: css({
-  labelCell: css`
+    fontSize: theme.typography.bodySmall.fontSize,
-    font-size: ${theme.typography.bodySmall.fontSize};
+    background: theme.colors.background.secondary,
-    background: ${theme.colors.background.secondary};
+    padding: theme.spacing(0, 1),
-    padding: ${theme.spacing(0, 1)};
+    maxWidth: '400px',
-    max-width: 400px;
+    overflow: 'hidden',
-    overflow: hidden;
+    textOverflow: 'ellipsis',
-    text-overflow: ellipsis;
+    minWidth: '140px',
-    min-width: 140px;
+  }),
-  `,
+  selectCell: css({
-  selectCell: css`
+    padding: 0,
-    padding: 0;
+    minWidth: '161px',
-    min-width: 161px;
+  }),
  `,
 });
@@ -110,9 +110,9 @@ export function PrepareTimeSeriesEditor(props: TransformerUIProps<PrepareTimeSer
 }
 const getStyles = (theme: GrafanaTheme2) => ({
-  info: css`
+  info: css({
-    margin-left: 20px;
+    marginLeft: '20px',
-  `,
+  }),
 });
 export const prepareTimeseriesTransformerRegistryItem: TransformerRegistryItem<PrepareTimeSeriesOptions> = {
@@ -149,13 +149,13 @@ export const SetGeometryTransformerEditor = (props: Props) => {
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    wrap: css`
+    wrap: css({
-      margin-bottom: 20px;
+      marginBottom: '20px',
-    `,
+    }),
-    item: css`
+    item: css({
-      border-left: 4px solid ${theme.colors.border.strong};
+      borderLeft: `4px solid ${theme.colors.border.strong}`,
-      padding-left: 10px;
+      paddingLeft: '10px',
-    `,
+    }),
  };
 };
@@ -50,14 +50,14 @@ export const TokenRevokedModal = (props: Props) => {
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  infobox: css`
+  infobox: css({
-    margin-bottom: 0;
+    marginBottom: 0,
-  `,
+  }),
-  text: css`
+  text: css({
-    margin: ${theme.spacing(1, 0, 2)};
+    margin: theme.spacing(1, 0, 2),
-  `,
+  }),
-  backdrop: css`
+  backdrop: css({
-    background-color: ${theme.colors.background.canvas};
+    backgroundColor: theme.colors.background.canvas,
-    opacity: 0.8;
+    opacity: 0.8,
-  `,
+  }),
 });
@@ -143,8 +143,8 @@ function EmptyVariablesList({ onAdd }: { onAdd: () => void }): ReactElement {
 }
 const getStyles = () => ({
-  tableContainer: css`
+  tableContainer: css({
-    overflow: scroll;
+    overflow: 'scroll',
-    width: 100%;
+    width: '100%',
-  `,
+  }),
 });
@@ -154,38 +154,38 @@ function VariableCheckIndicator({ passed }: VariableCheckIndicatorProps): ReactE
 function getStyles(theme: GrafanaTheme2) {
  return {
-    dragHandle: css`
+    dragHandle: css({
-      cursor: grab;
+      cursor: 'grab',
-      margin-left: ${theme.spacing(1)};
+      marginLeft: theme.spacing(1),
-    `,
+    }),
-    column: css`
+    column: css({
-      width: 1%;
+      width: '1%',
-    `,
+    }),
-    nameLink: css`
+    nameLink: css({
-      cursor: pointer;
+      cursor: 'pointer',
-      color: ${theme.colors.primary.text};
+      color: theme.colors.primary.text,
-    `,
+    }),
-    definitionColumn: css`
+    definitionColumn: css({
-      width: 100%;
+      width: '100%',
-      max-width: 200px;
+      maxWidth: '200px',
-      cursor: pointer;
+      cursor: 'pointer',
-      overflow: hidden;
+      overflow: 'hidden',
-      text-overflow: ellipsis;
+      textOverflow: 'ellipsis',
-      -o-text-overflow: ellipsis;
+      OTextOverflow: 'ellipsis',
-      white-space: nowrap;
+      whiteSpace: 'nowrap',
-    `,
+    }),
-    iconPassed: css`
+    iconPassed: css({
-      color: ${theme.v1.palette.greenBase};
+      color: theme.v1.palette.greenBase,
-      margin-right: ${theme.spacing(2)};
+      marginRight: theme.spacing(2),
-    `,
+    }),
-    iconFailed: css`
+    iconFailed: css({
-      color: ${theme.v1.palette.orange};
+      color: theme.v1.palette.orange,
-      margin-right: ${theme.spacing(2)};
+      marginRight: theme.spacing(2),
-    `,
+    }),
-    icons: css`
+    icons: css({
-      display: flex;
+      display: 'flex',
-      gap: ${theme.spacing(2)};
+      gap: theme.spacing(2),
-      align-items: center;
+      alignItems: 'center',
-    `,
+    }),
  };
 }
@@ -123,26 +123,26 @@ function UnknownTable({ usages }: { usages: UsagesToNetwork[] }): ReactElement {
 }
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
+  container: css({
-    margin-top: ${theme.spacing(4)};
+    marginTop: theme.spacing(4),
-    padding-top: ${theme.spacing(4)};
+    paddingTop: theme.spacing(4),
-  `,
+  }),
-  infoIcon: css`
+  infoIcon: css({
-    margin-left: ${theme.spacing(1)};
+    marginLeft: theme.spacing(1),
-  `,
+  }),
-  defaultColumn: css`
+  defaultColumn: css({
-    width: 1%;
+    width: '1%',
-  `,
+  }),
-  firstColumn: css`
+  firstColumn: css({
-    width: 1%;
+    width: '1%',
-    vertical-align: top;
+    verticalAlign: 'top',
-    color: ${theme.colors.text.maxContrast};
+    color: theme.colors.text.maxContrast,
-  `,
+  }),
-  lastColumn: css`
+  lastColumn: css({
-    overflow: hidden;
+    overflow: 'hidden',
-    text-overflow: ellipsis;
+    textOverflow: 'ellipsis',
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-    width: 100%;
+    width: '100%',
-    text-align: right;
+    textAlign: 'right',
-  `,
+  }),
 });
@@ -108,7 +108,7 @@ export const generateLabel = (feature: FeatureLike, idx: number): string | React
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  collapsibleRow: css`
+  collapsibleRow: css({
-    margin-bottom: 0;
+    marginBottom: 0,
-  `,
+  }),
 });
@@ -27,9 +27,9 @@ export default class CloudMonitoringCheatSheet extends PureComponent<
          <span>Patterns:</span>
          <br />
          <ul
-            className={css`
+            className={css({
-              list-style: none;
+              listStyle: 'none',
-            `}
+            })}
          >
            <li>
              <code>{`${'{{metric.type}}'}`}</code> = metric type e.g. compute.googleapis.com/instance/cpu/usage_time
@@ -312,11 +312,12 @@ export function Editor({
  );
 }
-const getStyles = (theme: GrafanaTheme2) => css`
+const getStyles = (theme: GrafanaTheme2) =>
-  label: grafana-select-option-description;
+  css({
-  font-weight: normal;
+    label: 'grafana-select-option-description',
-  font-style: italic;
+    fontWeight: 'normal',
-  color: ${theme.colors.text.secondary};
+    fontStyle: 'italic',
-`;
+    color: theme.colors.text.secondary,
  });
 export const VisualMetricQueryEditor = React.memo(Editor);
@@ -6,10 +6,10 @@ import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime';
 import { Alert, Field, InlineField, useStyles2 } from '@grafana/ui';
 const getStyles = (theme: GrafanaTheme2) => ({
-  infoText: css`
+  infoText: css({
-    padding-bottom: ${theme.spacing(2)};
+    paddingBottom: theme.spacing(2),
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-  `,
+  }),
 });
 interface Props {
@@ -14,10 +14,10 @@ type Props = QueryEditorProps<CloudWatchDatasource, CloudWatchQuery, CloudWatchJ
  query: CloudWatchLogsQuery;
 };
-const labelClass = css`
+const labelClass = css({
-  margin-left: 3px;
+  marginLeft: '3px',
-  flex-grow: 0;
+  flexGrow: 0,
-`;
+});
 export const CloudWatchLogsQueryEditor = memo(function CloudWatchLogsQueryEditor(props: Props) {
  const { query, data, datasource } = props;
@@ -38,12 +38,12 @@ export function DynamicLabelsField({ label, width, onChange }: Props) {
  return (
    <div ref={containerRef} className={cx(styles.wrapper)}>
      <CodeEditor
-        containerStyles={css`
+        containerStyles={css({
-          border: 1px solid ${theme.colors.action.disabledBackground};
+          border: `1px solid ${theme.colors.action.disabledBackground}`,
-          &:hover {
+          '&:hover': {
-            border-color: ${theme.components.input.borderColor};
+            borderColor: theme.components.input.borderColor,
-          }
+          },
-        `}
+        })}
        monacoOptions={{
          // without this setting, the auto-resize functionality causes an infinite loop, don't remove it!
          scrollBeyondLastLine: false,
@@ -11,9 +11,9 @@ type Props = {
  legacyLogGroupNames: string[];
 };
-const rowGap = css`
+const rowGap = css({
-  gap: 3px;
+  gap: '3px',
-`;
+});
 export const LegacyLogGroupSelection = ({ datasource, region, legacyLogGroupNames, onChange }: Props) => {
  return (
@@ -16,9 +16,9 @@ interface Props {
 export const AddRemove = ({ index, onAdd, onRemove, elements }: Props) => {
  return (
    <div
-      className={css`
+      className={css({
-        display: flex;
+        display: 'flex',
-      `}
+      })}
    >
      {index === 0 && (
        <Button variant="secondary" fill="text" icon="plus" onClick={onAdd} tooltip="Add" aria-label="Add" />
@@ -6,9 +6,9 @@ import { Segment } from '@grafana/ui';
 import { MetricAggregation } from '../types';
 import { describeMetric } from '../utils';
-const noWrap = css`
+const noWrap = css({
-  white-space: nowrap;
+  whiteSpace: 'nowrap',
-`;
+});
 const toOption = (metric: MetricAggregation) => ({
  label: describeMetric(metric),
@@ -38,23 +38,23 @@ export const FiltersSettingsEditor = ({ bucketAgg }: Props) => {
  return (
    <>
      <div
-        className={css`
+        className={css({
-          display: flex;
+          display: 'flex',
-          flex-direction: column;
+          flexDirection: 'column',
-        `}
+        })}
      >
        {bucketAgg.settings?.filters!.map((filter, index) => (
          <div
            key={index}
-            className={css`
+            className={css({
-              display: flex;
+              display: 'flex',
-            `}
+            })}
          >
            <InlineField label="Query" labelWidth={8}>
              <div
-                className={css`
+                className={css({
-                  width: 150px;
+                  width: '150px',
-                `}
+                })}
              >
                <QueryField
                  placeholder="Lucene Query"
@@ -45,18 +45,18 @@ export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) =>
  return (
    <>
      <div
-        className={css`
+        className={css({
-          display: flex;
+          display: 'flex',
-        `}
+        })}
      >
        <InlineLabel width={16}>Variables</InlineLabel>
        <div
-          className={css`
+          className={css({
-            display: grid;
+            display: 'grid',
-            grid-template-columns: 1fr auto;
+            gridTemplateColumns: '1fr auto',
-            row-gap: 4px;
+            rowGap: '4px',
-            margin-bottom: 4px;
+            marginBottom: '4px',
-          `}
+          })}
        >
          {value.pipelineVariables!.map((pipelineVar, index) => (
            // index as a key doesn't work here since removing an element
@@ -68,11 +68,11 @@ export const BucketScriptSettingsEditor = ({ value, previousMetrics }: Props) =>
            // ensures the UI is in a correct state. We might want to optimize this if we see perf issue in the future.
            <Fragment key={uniqueId('es-bs-')}>
              <div
-                className={css`
+                className={css({
-                  display: grid;
+                  display: 'grid',
-                  column-gap: 4px;
+                  columnGap: '4px',
-                  grid-template-columns: auto auto;
+                  gridTemplateColumns: 'auto auto',
-                `}
+                })}
              >
                <Input
                  aria-label="Variable name"
@@ -49,16 +49,16 @@ export const TopMetricsSettingsEditor = ({ metric }: Props) => {
      <InlineField
        label="Order By"
        labelWidth={16}
-        className={css`
+        className={css({
-          & > div {
+          '& > div': {
-            width: 100%;
+            width: '100%',
-          }
+          },
-        `}
+        })}
      >
        <SegmentAsync
-          className={css`
+          className={css({
-            margin-right: 0;
+            marginRight: 0,
-          `}
+          })}
          loadOptions={getOrderByOptions}
          onChange={(e) => dispatch(changeMetricSetting({ metric, settingName: 'orderBy', newValue: e.value }))}
          placeholder="Select Field"
@@ -6,13 +6,10 @@ export const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
  return {
    color:
      hidden &&
-      css`
+      css({
-        &,
+        '&, &:hover, label, a': {
-        &:hover,
+          color: hidden ? theme.colors.text.disabled : theme.colors.text.primary,
-        label,
+        },
-        a {
+      }),
          color: ${hidden ? theme.colors.text.disabled : theme.colors.text.primary};
        }
      `,
  };
 };
@@ -55,12 +55,12 @@ export const QueryEditorRow = ({
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    iconWrapper: css`
+    iconWrapper: css({
-      display: flex;
+      display: 'flex',
-    `,
+    }),
-    icon: css`
+    icon: css({
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      margin-left: ${theme.spacing(0.25)};
+      marginLeft: theme.spacing(0.25),
-    `,
+    }),
  };
 };
@@ -8,24 +8,25 @@ import { segmentStyles } from './styles';
 const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
  return {
-    wrapper: css`
+    wrapper: css({
-      max-width: 500px;
+      maxWidth: '500px',
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-    `,
+    }),
-    settingsWrapper: css`
+    settingsWrapper: css({
-      padding-top: ${theme.spacing(0.5)};
+      paddingTop: theme.spacing(0.5),
-    `,
+    }),
-    icon: css`
+    icon: css({
-      margin-right: ${theme.spacing(0.5)};
+      marginRight: theme.spacing(0.5),
-    `,
+    }),
-    button: css`
+    button: css(
-      justify-content: start;
+      {
-      ${hidden &&
+        justifyContent: 'start',
-      css`
+      },
-        color: ${theme.colors.text.disabled};
+      hidden && {
-      `}
+        color: theme.colors.text.disabled,
-    `,
+      }
    ),
  };
 };
@@ -64,13 +64,13 @@ export const QueryEditor = ({ query, onChange, onRunQuery, datasource, range }:
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  root: css`
+  root: css({
-    display: flex;
+    display: 'flex',
-  `,
+  }),
-  queryItem: css`
+  queryItem: css({
-    flex-grow: 1;
+    flexGrow: 1,
-    margin: 0 ${theme.spacing(0.5)} ${theme.spacing(0.5)} 0;
+    margin: theme.spacing(0, 0.5, 0.5, 0),
-  `,
+  }),
 });
 interface Props {
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-export const segmentStyles = css`
+export const segmentStyles = css({
-  min-width: 150px;
+  minWidth: '150px',
-`;
+});
@@ -154,24 +154,24 @@ function useInternalLink(datasourceUid?: string): [boolean, Dispatch<SetStateAct
 }
 const getStyles = () => ({
-  firstRow: css`
+  firstRow: css({
-    display: flex;
+    display: 'flex',
-  `,
+  }),
-  nameField: css`
+  nameField: css({
-    flex: 2;
+    flex: 2,
-  `,
+  }),
-  regexField: css`
+  regexField: css({
-    flex: 3;
+    flex: 3,
-  `,
+  }),
-  row: css`
+  row: css({
-    display: flex;
+    display: 'flex',
-    align-items: baseline;
+    alignItems: 'baseline',
-  `,
+  }),
-  urlField: css`
+  urlField: css({
-    display: flex;
+    display: 'flex',
-    flex: 1;
+    flex: 1,
-  `,
+  }),
-  urlDisplayLabelField: css`
+  urlDisplayLabelField: css({
-    flex: 1;
+    flex: 1,
-  `,
+  }),
 });
@@ -10,15 +10,15 @@ import { DataLink } from './DataLink';
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    addButton: css`
+    addButton: css({
-      margin-right: 10px;
+      marginRight: '10px',
-    `,
+    }),
-    container: css`
+    container: css({
-      margin-bottom: ${theme.spacing(2)};
+      marginBottom: theme.spacing(2),
-    `,
+    }),
-    dataLink: css`
+    dataLink: css({
-      margin-bottom: ${theme.spacing(1)};
+      marginBottom: theme.spacing(1),
-    `,
+    }),
  };
 };
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { useEffect, useRef } from 'react';
 import { useAsync, useLatest } from 'react-use';
 import { GrafanaTheme2 } from '@grafana/data';
 import { CodeEditor, Monaco, useStyles2, monacoTypes } from '@grafana/ui';
 import { languageDefinition } from '../pyroscopeql';
@@ -138,22 +139,22 @@ function ensurePyroscopeQL(monaco: Monaco) {
  }
 }
-const getStyles = () => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
-    queryField: css`
+    queryField: css({
-      label: LabelsEditorQueryField;
+      label: 'LabelsEditorQueryField',
-      flex: 1;
+      flex: 1,
      // Not exactly sure but without this the editor does not shrink after resizing (so you can make it bigger but not
      // smaller). At the same time this does not actually make the editor 100px because it has flex 1 so I assume
      // this should sort of act as a flex-basis (but flex-basis does not work for this). So yeah CSS magic.
-      width: 100px;
+      width: '100px',
-    `,
+    }),
-    wrapper: css`
+    wrapper: css({
-      label: LabelsEditorWrapper;
+      label: 'LabelsEditorWrapper',
-      display: flex;
+      display: 'flex',
-      flex: 1;
+      flex: 1,
-      border: 1px solid rgba(36, 41, 46, 0.3);
+      border: '1px solid rgba(36, 41, 46, 0.3)',
-      border-radius: 2px;
+      borderRadius: theme.shape.radius.default,
-    `,
+    }),
  };
 };
@@ -50,9 +50,9 @@ const renderInput = (field: FieldSchema, onChange: SchemaFormProps['onChange'],
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    jsonView: css`
+    jsonView: css({
-      margin-bottom: ${theme.spacing(1)};
+      marginBottom: theme.spacing(1),
-    `,
+    }),
  };
 };
@@ -504,16 +504,16 @@ export const QueryEditor = withTheme2(UnthemedQueryEditor);
 function getStyles(theme: GrafanaTheme2) {
  return {
-    file: css`
+    file: css({
-      width: 100%;
+      width: '100%',
-      display: flex;
+      display: 'flex',
-      flex-direction: row;
+      flexDirection: 'row',
-      align-items: center;
+      alignItems: 'center',
-      justify-content: space-between;
+      justifyContent: 'space-between',
-      padding: ${theme.spacing(2)};
+      padding: theme.spacing(2),
-      border: 1px dashed ${theme.colors.border.medium};
+      border: `1px dashed ${theme.colors.border.medium}`,
-      background-color: ${theme.colors.background.secondary};
+      backgroundColor: theme.colors.background.secondary,
-      margin-top: ${theme.spacing(1)};
+      marginTop: theme.spacing(1),
-    `,
+    }),
  };
 }
@@ -5,7 +5,7 @@ import TimePicker from 'rc-time-picker';
 import { GrafanaTheme2 } from '@grafana/data';
 import { FormInputSize, Icon, useStyles2 } from '@grafana/ui';
 import { inputSizes } from '@grafana/ui/src/components/Forms/commonStyles';
-import { focusCss } from '@grafana/ui/src/themes/mixins';
+import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
 export interface Props {
  onChange: (value: Moment) => void;
@@ -49,9 +49,9 @@ export const TimePickerInput = ({
  const getWidth = () => {
    if (width) {
-      return css`
+      return css({
-        width: ${width}px;
+        width: `${width}px`,
-      `;
+      });
    }
    return inputSizes()[size];
@@ -99,90 +99,87 @@ const getStyles = (theme: GrafanaTheme2) => {
  const borderColor = theme.components.input.borderColor;
  return {
-    caretWrapper: css`
+    caretWrapper: css({
-      position: absolute;
+      position: 'absolute',
-      right: 8px;
+      right: '8px',
-      top: 50%;
+      top: '50%',
-      transform: translateY(-50%);
+      transform: 'translateY(-50%)',
-      display: inline-block;
+      display: 'inline-block',
-      text-align: right;
+      textAlign: 'right',
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-    `,
+    }),
-    picker: css`
+    picker: css({
-      .rc-time-picker-panel-select {
+      '.rc-time-picker-panel-select': {
-        font-size: 14px;
+        fontSize: '14px',
-        background-color: ${bgColor};
+        backgroundColor: bgColor,
-        border-color: ${borderColor};
+        borderColor: borderColor,
-        li {
+        li: {
-          outline-width: 2px;
+          outlineWidth: '2px',
-          &.rc-time-picker-panel-select-option-selected {
+          '&.rc-time-picker-panel-select-option-selected': {
-            background-color: inherit;
+            backgroundColor: 'inherit',
-            border: 1px solid ${theme.v1.palette.orange};
+            border: `1px solid ${theme.v1.palette.orange}`,
-            border-radius: ${borderRadius};
+            borderRadius: borderRadius,
-          }
+          },
-          &:hover {
+          '&:hover': {
-            background: ${optionBgHover};
+            background: optionBgHover,
-          }
+          },
-          &.rc-time-picker-panel-select-option-disabled {
+          '&.rc-time-picker-panel-select-option-disabled': {
-            color: ${theme.colors.action.disabledText};
+            color: theme.colors.action.disabledText,
-          }
+          },
-        }
+        },
-      }
+      },
-      .rc-time-picker-panel-inner {
+      '.rc-time-picker-panel-inner': {
-        box-shadow: 0px 4px 4px ${menuShadowColor};
+        boxShadow: `0px 4px 4px ${menuShadowColor}`,
-        background-color: ${bgColor};
+        backgroundColor: bgColor,
-        border-color: ${borderColor};
+        borderColor: borderColor,
-        border-radius: ${borderRadius};
+        borderRadius: borderRadius,
-        margin-top: 3px;
+        marginTop: '3px',
-        .rc-time-picker-panel-input-wrap {
+        '.rc-time-picker-panel-input-wrap': {
-          margin-right: 2px;
+          marginRight: '2px',
-          &,
+          '&, .rc-time-picker-panel-input': {
-          .rc-time-picker-panel-input {
+            backgroundColor: bgColor,
-            background-color: ${bgColor};
+            paddingTop: '2px',
-            padding-top: 2px;
+          },
-          }
+        },
        }
-        .rc-time-picker-panel-combobox {
+        '.rc-time-picker-panel-combobox': {
-          display: flex;
+          display: 'flex',
-        }
+        },
-      }
+      },
-    `,
+    }),
-    input: css`
+    input: css({
-      .rc-time-picker-input {
+      '.rc-time-picker-input': {
-        background-color: ${bgColor};
+        backgroundColor: bgColor,
-        border-radius: ${borderRadius};
+        borderRadius: borderRadius,
-        border-color: ${borderColor};
+        borderColor: borderColor,
-        height: ${theme.spacing(4)};
+        height: theme.spacing(4),
-        &:focus {
+        '&:focus': getFocusStyles(theme),
          ${focusCss(theme)}
        }
-        &:disabled {
+        '&:disabled': {
-          background-color: ${theme.colors.action.disabledBackground};
+          backgroundColor: theme.colors.action.disabledBackground,
-          color: ${theme.colors.action.disabledText};
+          color: theme.colors.action.disabledText,
-          border: 1px solid ${theme.colors.action.disabledBackground};
+          border: `1px solid ${theme.colors.action.disabledBackground}`,
-          &:focus {
+          '&:focus': {
-            box-shadow: none;
+            boxShadow: 'none',
-          }
+          },
-        }
+        },
-      }
+      },
-      .rc-time-picker-clear {
+      '.rc-time-picker-clear': {
-        position: absolute;
+        position: 'absolute',
-        right: 20px;
+        right: '20px',
-        top: 50%;
+        top: '50%',
-        cursor: pointer;
+        cursor: 'pointer',
-        overflow: hidden;
+        overflow: 'hidden',
-        transform: translateY(-50%);
+        transform: 'translateY(-50%)',
-        color: ${theme.colors.text.secondary};
+        color: theme.colors.text.secondary,
-      }
+      },
-    `,
+    }),
  };
 };
@@ -175,16 +175,16 @@ const getStyles = (theme: GrafanaTheme2) => {
      maxWidth: theme.spacing(60),
      marginBottom: theme.spacing(2),
    }),
-    timezoneContainer: css`
+    timezoneContainer: css({
-      padding: 5px;
+      padding: '5px',
-      display: flex;
+      display: 'flex',
-      flex-direction: row;
+      flexDirection: 'row',
-      justify-content: space-between;
+      justifyContent: 'space-between',
-      align-items: center;
+      alignItems: 'center',
-      font-size: 12px;
+      fontSize: '12px',
-    `,
+    }),
-    timezone: css`
+    timezone: css({
-      margin-right: 5px;
+      marginRight: '5px',
-    `,
+    }),
  };
 };
@@ -50,8 +50,8 @@ export function AddGraphiteFunction({ funcDefs }: Props) {
 function getStyles(theme: GrafanaTheme2) {
  return {
-    button: css`
+    button: css({
-      margin-right: ${theme.spacing(0.5)};
+      marginRight: theme.spacing(0.5),
-    `,
+    }),
  };
 }
@@ -66,11 +66,11 @@ const getStyles = (theme: GrafanaTheme2) => ({
    margin: 0,
    padding: 0,
  }),
-  input: css`
+  input: css({
-    margin: 0;
+    margin: 0,
-    padding: 0;
+    padding: 0,
-    input {
+    input: {
-      height: 25px;
+      height: '25px',
    },
-  `,
+  }),
 });
@@ -93,9 +93,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
    padding: `0 ${theme.spacing(1)}`,
    height: `${theme.v1.spacing.formInputHeight}px`,
  }),
-  error: css`
+  error: css({
-    border: 1px solid ${theme.colors.error.main};
+    border: `1px solid ${theme.colors.error.main}`,
-  `,
+  }),
  label: css({
    padding: 0,
    margin: 0,
@@ -63,14 +63,14 @@ function GraphiteQueryEditorContent() {
 function getStyles(theme: GrafanaTheme2) {
  return {
-    container: css`
+    container: css({
-      display: flex;
+      display: 'flex',
-    `,
+    }),
-    visualEditor: css`
+    visualEditor: css({
-      flex-grow: 1;
+      flexGrow: 1,
-    `,
+    }),
-    toggleButton: css`
+    toggleButton: css({
-      margin-left: ${theme.spacing(0.5)};
+      marginLeft: theme.spacing(0.5),
-    `,
+    }),
  };
 }
@@ -131,54 +131,54 @@ const getStyles = stylesFactory(() => {
  const headerBg = theme.isDark ? theme.palette.gray15 : theme.palette.gray85;
  return {
-    metaItem: css`
+    metaItem: css({
-      background: ${background};
+      background: background,
-      border: 1px solid ${borderColor};
+      border: `1px solid ${borderColor}`,
-      margin-bottom: ${theme.spacing.md};
+      marginBottom: theme.spacing.md,
-    `,
+    }),
-    metaItemHeader: css`
+    metaItemHeader: css({
-      background: ${headerBg};
+      background: headerBg,
-      padding: ${theme.spacing.xs} ${theme.spacing.md};
+      padding: `${theme.spacing.xs} ${theme.spacing.md}`,
-      font-size: ${theme.typography.size.md};
+      fontSize: theme.typography.size.md,
-      display: flex;
+      display: 'flex',
-      justify-content: space-between;
+      justifyContent: 'space-between',
-    `,
+    }),
-    metaItemBody: css`
+    metaItemBody: css({
-      padding: ${theme.spacing.md};
+      padding: theme.spacing.md,
-    `,
+    }),
-    stepHeading: css`
+    stepHeading: css({
-      font-size: ${theme.typography.size.md};
+      fontSize: theme.typography.size.md,
-    `,
+    }),
-    stepDescription: css`
+    stepDescription: css({
-      font-size: ${theme.typography.size.sm};
+      fontSize: theme.typography.size.sm,
-      color: ${theme.colors.textWeak};
+      color: theme.colors.textWeak,
-      margin-bottom: ${theme.spacing.sm};
+      marginBottom: theme.spacing.sm,
-    `,
+    }),
-    step: css`
+    step: css({
-      margin-bottom: ${theme.spacing.lg};
+      marginBottom: theme.spacing.lg,
-      &:last-child {
+      '&:last-child': {
-        margin-bottom: 0;
+        marginBottom: 0,
-      }
+      },
-    `,
+    }),
-    bucket: css`
+    bucket: css({
-      display: flex;
+      display: 'flex',
-      margin-bottom: ${theme.spacing.sm};
+      marginBottom: theme.spacing.sm,
-      border-radius: ${theme.border.radius.sm};
+      borderRadius: theme.border.radius.sm,
-    `,
+    }),
-    bucketInterval: css`
+    bucketInterval: css({
-      flex-grow: 0;
+      flexGrow: 0,
-      width: 60px;
+      width: '60px',
-    `,
+    }),
-    bucketRetention: css`
+    bucketRetention: css({
-      background: linear-gradient(0deg, ${theme.palette.blue85}, ${theme.palette.blue95});
+      background: `linear-gradient(0deg, ${theme.palette.blue85}, ${theme.palette.blue95})`,
-      text-align: center;
+      textAlign: 'center',
-      color: ${theme.palette.white};
+      color: theme.palette.white,
-      margin-right: ${theme.spacing.md};
+      marginRight: theme.spacing.md,
-      border-radius: ${theme.border.radius.sm};
+      borderRadius: theme.border.radius.sm,
-    `,
+    }),
-    bucketRetentionActive: css`
+    bucketRetentionActive: css({
-      background: linear-gradient(0deg, ${theme.palette.greenBase}, ${theme.palette.greenShade});
+      background: `linear-gradient(0deg, ${theme.palette.greenBase}, ${theme.palette.greenShade})`,
-    `,
+    }),
  };
 });
@@ -66,8 +66,8 @@ export function TagsSection({ tags, state }: Props) {
 function getStyles(theme: GrafanaTheme2) {
  return {
-    button: css`
+    button: css({
-      margin-right: ${theme.spacing(0.5)};
+      marginRight: theme.spacing(0.5),
-    `,
+    }),
  };
 }
@@ -200,10 +200,10 @@ class UnthemedFluxQueryEditor extends PureComponent<Props> {
            options={samples}
            value="Sample query"
            onChange={this.onSampleChange}
-            className={css`
+            className={css({
-              margin-top: -${theme.spacing(0.5)};
+              marginTop: theme.spacing(-0.5),
-              margin-left: ${theme.spacing(0.5)};
+              marginLeft: theme.spacing(0.5),
-            `}
+            })}
          />
          <div className="gf-form gf-form--grow">
            <div className="gf-form-label gf-form-label--grow"></div>
@@ -218,17 +218,17 @@ class UnthemedFluxQueryEditor extends PureComponent<Props> {
 }
 const getStyles = (theme: GrafanaTheme2) => ({
-  editorContainerStyles: css`
+  editorContainerStyles: css({
-    height: 200px;
+    height: '200px',
-    max-width: 100%;
+    maxWidth: '100%',
-    resize: vertical;
+    resize: 'vertical',
-    overflow: auto;
+    overflow: 'auto',
-    background-color: ${theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary};
+    backgroundColor: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
-    padding-bottom: ${theme.spacing(1)};
+    paddingBottom: theme.spacing(1),
-  `,
+  }),
-  editorActions: css`
+  editorActions: css({
-    margin-top: 6px;
+    marginTop: '6px',
-  `,
+  }),
 });
 export const FluxQueryEditor = withTheme2(UnthemedFluxQueryEditor);
@@ -118,17 +118,17 @@ class UnthemedSQLQueryEditor extends PureComponent<Props> {
 }
 const getStyles = (theme: GrafanaTheme2) => ({
-  editorContainerStyles: css`
+  editorContainerStyles: css({
-    height: 200px;
+    height: '200px',
-    max-width: 100%;
+    maxWidth: '100%',
-    resize: vertical;
+    resize: 'vertical',
-    overflow: auto;
+    overflow: 'auto',
-    background-color: ${theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary};
+    backgroundColor: theme.isDark ? theme.colors.background.canvas : theme.colors.background.primary,
-    padding-bottom: ${theme.spacing(1)};
+    paddingBottom: theme.spacing(1),
-  `,
+  }),
-  editorActions: css`
+  editorActions: css({
-    margin-top: 6px;
+    marginTop: '6px',
-  `,
+  }),
 });
 export const FSQLEditor = withTheme2(UnthemedSQLQueryEditor);
@@ -247,8 +247,8 @@ export const VisualInfluxQLEditor = (props: Props): JSX.Element => {
 function getStyles(theme: GrafanaTheme2) {
  return {
-    inlineLabel: css`
+    inlineLabel: css({
-      color: ${theme.colors.primary.text};
+      color: theme.colors.primary.text,
-    `,
+    }),
  };
 }
@@ -48,10 +48,10 @@ export default function CheatSheet() {
 }
 const getStyles = (theme: GrafanaTheme2) => ({
-  anchorTag: css`
+  anchorTag: css({
-    color: ${theme.colors.text.link};
+    color: theme.colors.text.link,
-  `,
+  }),
-  unorderedList: css`
+  unorderedList: css({
-    list-style-type: none;
+    listStyleType: 'none',
-  `,
+  }),
 });
@@ -45,12 +45,12 @@ export function TraceIdTimeParams({ options, onOptionsChange }: Props) {
 }
 const styles = {
-  container: css`
+  container: css({
-    label: container;
+    label: 'container',
-    width: 100%;
+    width: '100%',
-  `,
+  }),
-  row: css`
+  row: css({
-    label: row;
+    label: 'row',
-    align-items: baseline;
+    alignItems: 'baseline',
-  `,
+  }),
 };
@@ -42,71 +42,71 @@ export interface LokiContextUiProps {
 function getStyles(theme: GrafanaTheme2) {
  return {
-    labels: css`
+    labels: css({
-      display: flex;
+      display: 'flex',
-      gap: ${theme.spacing(0.5)};
+      gap: theme.spacing(0.5),
-    `,
+    }),
-    wrapper: css`
+    wrapper: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-      flex: 1;
+      flex: 1,
-      gap: ${theme.spacing(0.5)};
+      gap: theme.spacing(0.5),
-      position: relative;
+      position: 'relative',
-    `,
+    }),
-    textWrapper: css`
+    textWrapper: css({
-      display: flex;
+      display: 'flex',
-      align-items: center;
+      alignItems: 'center',
-    `,
+    }),
-    hidden: css`
+    hidden: css({
-      visibility: hidden;
+      visibility: 'hidden',
-    `,
+    }),
-    label: css`
+    label: css({
-      max-width: 100%;
+      maxWidth: '100%',
-      &:first-of-type {
+      '&:first-of-type': {
-        margin-bottom: ${theme.spacing(2)};
+        marginBottom: theme.spacing(2),
-      }
+      },
-      &:not(:first-of-type) {
+      '&:not(:first-of-type)': {
-        margin: ${theme.spacing(2)} 0;
+        margin: theme.spacing(2, 0),
-      }
+      },
-    `,
+    }),
-    rawQueryContainer: css`
+    rawQueryContainer: css({
-      text-align: start;
+      textAlign: 'start',
-      line-break: anywhere;
+      lineBreak: 'anywhere',
-      margin-top: -${theme.spacing(0.25)};
+      marginTop: theme.spacing(-0.25),
-      margin-right: ${theme.spacing(6)};
+      marginRight: theme.spacing(6),
-      min-height: ${theme.spacing(4)};
+      minHeight: theme.spacing(4),
-    `,
+    }),
-    ui: css`
+    ui: css({
-      background-color: ${theme.colors.background.secondary};
+      backgroundColor: theme.colors.background.secondary,
-      padding: ${theme.spacing(2)};
+      padding: theme.spacing(2),
-    `,
+    }),
    notification: css({
      position: 'absolute',
      zIndex: theme.zIndex.portal,
      top: 0,
      right: 0,
    }),
-    rawQuery: css`
+    rawQuery: css({
-      display: inline;
+      display: 'inline',
-    `,
+    }),
-    queryDescription: css`
+    queryDescription: css({
-      margin-left: ${theme.spacing(0.5)};
+      marginLeft: theme.spacing(0.5),
-    `,
+    }),
-    iconButton: css`
+    iconButton: css({
-      position: absolute;
+      position: 'absolute',
-      top: ${theme.spacing(1)};
+      top: theme.spacing(1),
-      right: ${theme.spacing(1)};
+      right: theme.spacing(1),
-      z-index: ${theme.zIndex.navbarFixed};
+      zIndex: theme.zIndex.navbarFixed,
-    `,
+    }),
-    operationsToggle: css`
+    operationsToggle: css({
-      margin: ${theme.spacing(1)} 0 ${theme.spacing(-1)} 0;
+      margin: theme.spacing(1, 0, -1, 0),
-      & > div {
+      '& > div': {
-        margin: 0;
+        margin: 0,
-        & > label {
+        '& > label': {
-          padding: 0;
+          padding: 0,
-        }
+        },
-      }
+      },
-    `,
+    }),
  };
 }
@@ -108,82 +108,84 @@ export function facetLabels(
 }
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
+  wrapper: css({
-    background-color: ${theme.colors.background.secondary};
+    backgroundColor: theme.colors.background.secondary,
-    width: 100%;
+    width: '100%',
-  `,
+  }),
-  wrapperPadding: css`
+  wrapperPadding: css({
-    padding: ${theme.spacing(2)};
+    padding: theme.spacing(2),
-  `,
+  }),
-  list: css`
+  list: css({
-    margin-top: ${theme.spacing(1)};
+    marginTop: theme.spacing(1),
-    display: flex;
+    display: 'flex',
-    flex-wrap: wrap;
+    flexWrap: 'wrap',
-    max-height: 200px;
+    maxHeight: '200px',
-    overflow: auto;
+    overflow: 'auto',
-  `,
+  }),
-  section: css`
+  section: css({
-    & + & {
+    '& + &': {
-      margin: ${theme.spacing(2, 0)};
+      margin: theme.spacing(2, 0),
-    }
+    },
-    position: relative;
+    position: 'relative',
-  `,
+  }),
-  footerSectionStyles: css`
+  footerSectionStyles: css({
-    padding: ${theme.spacing(1)};
+    padding: theme.spacing(1),
-    background-color: ${theme.colors.background.primary};
+    backgroundColor: theme.colors.background.primary,
-    position: sticky;
+    position: 'sticky',
-    bottom: -${theme.spacing(3)}; /* offset the padding on modal */
+    bottom: theme.spacing(-3) /* offset the padding on modal */,
-    left: 0;
+    left: 0,
-  `,
+  }),
-  selector: css`
+  selector: css({
-    font-family: ${theme.typography.fontFamilyMonospace};
+    fontFamily: theme.typography.fontFamilyMonospace,
-    margin-bottom: ${theme.spacing(1)};
+    marginBottom: theme.spacing(1),
-    width: 100%;
+    width: '100%',
-  `,
+  }),
-  status: css`
+  status: css({
-    margin-bottom: ${theme.spacing(1)};
+    marginBottom: theme.spacing(1),
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-    overflow: hidden;
+    overflow: 'hidden',
-    text-overflow: ellipsis;
+    textOverflow: 'ellipsis',
-    transition: opacity 100ms linear;
+    [theme.transitions.handleMotion('no-preference', 'reduce')]: {
-    opacity: 0;
+      transition: 'opacity 100ms linear',
-    font-size: ${theme.typography.bodySmall.fontSize};
+    },
-    height: calc(${theme.typography.bodySmall.fontSize} + 10px);
+    opacity: 0,
-  `,
+    fontSize: theme.typography.bodySmall.fontSize,
-  statusShowing: css`
+    height: `calc(${theme.typography.bodySmall.fontSize} + 10px)`,
-    opacity: 1;
+  }),
-  `,
+  statusShowing: css({
-  error: css`
+    opacity: 1,
-    color: ${theme.colors.error.main};
+  }),
-  `,
+  error: css({
-  valueList: css`
+    color: theme.colors.error.main,
-    margin-right: ${theme.spacing(1)};
+  }),
-    resize: horizontal;
+  valueList: css({
-  `,
+    marginRight: theme.spacing(1),
-  valueListWrapper: css`
+    resize: 'horizontal',
-    border-left: 1px solid ${theme.colors.border.medium};
+  }),
-    margin: ${theme.spacing(1, 0)};
+  valueListWrapper: css({
-    padding: ${theme.spacing(1, 0, 1, 1)};
+    borderLeft: `1px solid ${theme.colors.border.medium}`,
-  `,
+    margin: theme.spacing(1, 0),
-  valueListArea: css`
+    padding: theme.spacing(1, 0, 1, 1),
-    display: flex;
+  }),
-    flex-wrap: wrap;
+  valueListArea: css({
-    margin-top: ${theme.spacing(1)};
+    display: 'flex',
-  `,
+    flexWrap: 'wrap',
-  valueTitle: css`
+    marginTop: theme.spacing(1),
-    margin-left: -${theme.spacing(0.5)};
+  }),
-    margin-bottom: ${theme.spacing(1)};
+  valueTitle: css({
-  `,
+    marginLeft: theme.spacing(-0.5),
-  validationStatus: css`
+    marginBottom: theme.spacing(1),
-    padding: ${theme.spacing(0.5)};
+  }),
-    margin-bottom: ${theme.spacing(1)};
+  validationStatus: css({
-    color: ${theme.colors.text.maxContrast};
+    padding: theme.spacing(0.5),
-    white-space: nowrap;
+    marginBottom: theme.spacing(1),
-    overflow: hidden;
+    color: theme.colors.text.maxContrast,
-    text-overflow: ellipsis;
+    whiteSpace: 'nowrap',
-  `,
+    overflow: 'hidden',
    textOverflow: 'ellipsis',
  }),
 });
 export class UnthemedLokiLabelBrowser extends React.Component<BrowserProps, BrowserState> {
@@ -82,21 +82,21 @@ function ensureLogQL(monaco: Monaco) {
 const getStyles = (theme: GrafanaTheme2, placeholder: string) => {
  return {
-    container: css`
+    container: css({
-      border-radius: ${theme.shape.radius.default};
+      borderRadius: theme.shape.radius.default,
-      border: 1px solid ${theme.components.input.borderColor};
+      border: `1px solid ${theme.components.input.borderColor}`,
-      width: 100%;
+      width: '100%',
-      .monaco-editor .suggest-widget {
+      '.monaco-editor .suggest-widget': {
-        min-width: 50%;
+        minWidth: '50%',
-      }
+      },
-    `,
+    }),
-    placeholder: css`
+    placeholder: css({
-      ::after {
+      '::after': {
-        content: '${placeholder}';
+        content: `'${placeholder}'`,
-        font-family: ${theme.typography.fontFamilyMonospace};
+        fontFamily: theme.typography.fontFamilyMonospace,
-        opacity: 0.3;
+        opacity: 0.3,
-      }
+      },
-    `,
+    }),
  };
 };
@@ -12,29 +12,29 @@ import { DerivedFieldConfig } from '../types';
 type MatcherType = 'label' | 'regex';
 const getStyles = (theme: GrafanaTheme2) => ({
-  row: css`
+  row: css({
-    display: flex;
+    display: 'flex',
-    align-items: baseline;
+    alignItems: 'baseline',
-  `,
+  }),
-  nameField: css`
+  nameField: css({
-    flex: 2;
+    flex: 2,
-    margin-right: ${theme.spacing(0.5)};
+    marginRight: theme.spacing(0.5),
-  `,
+  }),
-  regexField: css`
+  regexField: css({
-    flex: 3;
+    flex: 3,
-    margin-right: ${theme.spacing(0.5)};
+    marginRight: theme.spacing(0.5),
-  `,
+  }),
-  urlField: css`
+  urlField: css({
-    flex: 1;
+    flex: 1,
-    margin-right: ${theme.spacing(0.5)};
+    marginRight: theme.spacing(0.5),
-  `,
+  }),
-  urlDisplayLabelField: css`
+  urlDisplayLabelField: css({
-    flex: 1;
+    flex: 1,
-  `,
+  }),
-  internalLink: css`
+  internalLink: css({
-    margin-right: ${theme.spacing(1)};
+    marginRight: theme.spacing(1),
-  `,
+  }),
-  dataSource: css``,
+  dataSource: css({}),
  nameMatcherField: css({
    width: theme.spacing(20),
    marginRight: theme.spacing(0.5),
@@ -11,18 +11,18 @@ import { DebugSection } from './DebugSection';
 import { DerivedField } from './DerivedField';
 const getStyles = (theme: GrafanaTheme2) => ({
-  addButton: css`
+  addButton: css({
-    margin-right: 10px;
+    marginRight: '10px',
-  `,
+  }),
-  derivedField: css`
+  derivedField: css({
-    margin-bottom: ${theme.spacing(1)};
+    marginBottom: theme.spacing(1),
-  `,
+  }),
-  container: css`
+  container: css({
-    margin-bottom: ${theme.spacing(4)};
+    marginBottom: theme.spacing(4),
-  `,
+  }),
-  debugSection: css`
+  debugSection: css({
-    margin-top: ${theme.spacing(4)};
+    marginTop: theme.spacing(4),
-  `,
+  }),
 });
 type Props = {
@@ -114,9 +114,9 @@ export const DerivedFields = ({ fields = [], onChange }: Props) => {
        {showDebug && (
          <div className={styles.debugSection}>
            <DebugSection
-              className={css`
+              className={css({
-                margin-bottom: 10px;
+                marginBottom: '10px',
-              `}
+              })}
              derivedFields={fields}
            />
          </div>
@@ -86,11 +86,11 @@ export const LabelBrowserModal = (props: Props) => {
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    modal: css`
+    modal: css({
-      width: 85vw;
+      width: '85vw',
-      ${theme.breakpoints.down('md')} {
+      [theme.breakpoints.down('md')]: {
-        width: 100%;
+        width: '100%',
-      }
+      },
-    `,
+    }),
  };
 };
@@ -46,26 +46,26 @@ export function LokiQueryCodeEditor({
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    wrapper: css`
+    wrapper: css({
-      max-width: 100%;
+      maxWidth: '100%',
-      .gf-form {
+      '.gf-form': {
-        margin-bottom: 0.5;
+        marginBottom: 0.5,
-      }
+      },
-    `,
+    }),
-    buttonGroup: css`
+    buttonGroup: css({
-      border: 1px solid ${theme.colors.border.medium};
+      border: `1px solid ${theme.colors.border.medium}`,
-      border-top: none;
+      borderTop: 'none',
-      padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};
+      padding: theme.spacing(0.5, 0.5, 0.5, 0.5),
-      margin-bottom: ${theme.spacing(0.5)};
+      marginBottom: theme.spacing(0.5),
-      display: flex;
+      display: 'flex',
-      flex-grow: 1;
+      flexGrow: 1,
-      justify-content: end;
+      justifyContent: 'end',
-      font-size: ${theme.typography.bodySmall.fontSize};
+      fontSize: theme.typography.bodySmall.fontSize,
-    `,
+    }),
-    hint: css`
+    hint: css({
-      color: ${theme.colors.text.disabled};
+      color: theme.colors.text.disabled,
-      white-space: nowrap;
+      whiteSpace: 'nowrap',
-      cursor: help;
+      cursor: 'help',
-    `,
+    }),
  };
 };
@@ -88,21 +88,21 @@ export const QueryPattern = (props: Props) => {
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    card: css`
+    card: css({
-      width: 49.5%;
+      width: '49.5%',
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-    `,
+    }),
-    rawQueryContainer: css`
+    rawQueryContainer: css({
-      flex-grow: 1;
+      flexGrow: 1,
-    `,
+    }),
-    rawQuery: css`
+    rawQuery: css({
-      background-color: ${theme.colors.background.primary};
+      backgroundColor: theme.colors.background.primary,
-      padding: ${theme.spacing(1)};
+      padding: theme.spacing(1),
-      margin-top: ${theme.spacing(1)};
+      marginTop: theme.spacing(1),
-    `,
+    }),
-    spacing: css`
+    spacing: css({
-      margin-bottom: ${theme.spacing(1)};
+      marginBottom: theme.spacing(1),
-    `,
+    }),
  };
 };
@@ -135,20 +135,20 @@ export const QueryPatternsModal = (props: Props) => {
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    cardsContainer: css`
+    cardsContainer: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: row;
+      flexDirection: 'row',
-      flex-wrap: wrap;
+      flexWrap: 'wrap',
-      justify-content: space-between;
+      justifyContent: 'space-between',
-    `,
+    }),
-    spacing: css`
+    spacing: css({
-      margin-bottom: ${theme.spacing(1)};
+      marginBottom: theme.spacing(1),
-    `,
+    }),
-    modal: css`
+    modal: css({
-      width: 85vw;
+      width: '85vw',
-      ${theme.breakpoints.down('md')} {
+      [theme.breakpoints.down('md')]: {
-        width: 100%;
+        width: '100%',
-      }
+      },
-    `,
+    }),
  };
 };
@@ -154,12 +154,12 @@ export function OpenTsdbQueryEditor({
 function getStyles(theme: GrafanaTheme2) {
  return {
-    container: css`
+    container: css({
-      display: flex;
+      display: 'flex',
-    `,
+    }),
-    toggleButton: css`
+    toggleButton: css({
-      margin-left: ${theme.spacing(0.5)};
+      marginLeft: theme.spacing(0.5),
-    `,
+    }),
  };
 }
@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import { useEffect, useRef } from 'react';
 import { useLatest } from 'react-use';
 import { GrafanaTheme2 } from '@grafana/data';
 import { CodeEditor, Monaco, useStyles2, monacoTypes } from '@grafana/ui';
 import { ParcaDataSource } from '../datasource';
@@ -125,20 +126,20 @@ function ensureParcaQL(monaco: Monaco) {
  }
 }
-const getStyles = () => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
-    queryField: css`
+    queryField: css({
-      flex: 1;
+      flex: 1,
      // Not exactly sure but without this the editor doe not shrink after resizing (so you can make it bigger but not
      // smaller). At the same time this does not actually make the editor 100px because it has flex 1 so I assume
      // this should sort of act as a flex-basis (but flex-basis does not work for this). So yeah CSS magic.
-      width: 100px;
+      width: '100px',
-    `,
+    }),
-    wrapper: css`
+    wrapper: css({
-      display: flex;
+      display: 'flex',
-      flex: 1;
+      flex: 1,
-      border: 1px solid rgba(36, 41, 46, 0.3);
+      border: '1px solid rgba(36, 41, 46, 0.3)',
-      border-radius: 2px;
+      borderRadius: theme.shape.radius.default,
-    `,
+    }),
  };
 };
@@ -138,15 +138,15 @@ export const AlertInstances = ({
 };
 const getStyles = (theme: GrafanaTheme2) => ({
-  clickable: css`
+  clickable: css({
-    cursor: pointer;
+    cursor: 'pointer',
-  `,
+  }),
-  footerRow: css`
+  footerRow: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: column;
+    flexDirection: 'column',
-    gap: ${theme.spacing(1)};
+    gap: theme.spacing(1),
-    justify-content: space-between;
+    justifyContent: 'space-between',
-    align-items: center;
+    alignItems: 'center',
-    width: 100%;
+    width: '100%',
-  `,
+  }),
 });
@@ -351,102 +351,102 @@ function filterRules(props: PanelProps<UnifiedAlertListOptions>, rules: Combined
 }
 export const getStyles = (theme: GrafanaTheme2) => ({
-  cardContainer: css`
+  cardContainer: css({
-    padding: ${theme.spacing(0.5)} 0 ${theme.spacing(0.25)} 0;
+    padding: theme.spacing(0.5, 0, 0.25, 0),
-    line-height: ${theme.typography.body.lineHeight};
+    lineHeight: theme.typography.body.lineHeight,
-    margin-bottom: 0px;
+    marginBottom: 0,
-  `,
+  }),
-  container: css`
+  container: css({
-    overflow-y: auto;
+    overflowY: 'auto',
-    height: 100%;
+    height: '100%',
-  `,
+  }),
-  alertRuleList: css`
+  alertRuleList: css({
-    display: flex;
+    display: 'flex',
-    flex-wrap: wrap;
+    flexWrap: 'wrap',
-    justify-content: space-between;
+    justifyContent: 'space-between',
-    list-style-type: none;
+    listStyleType: 'none',
-  `,
+  }),
-  alertRuleItem: css`
+  alertRuleItem: css({
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    width: 100%;
+    width: '100%',
-    height: 100%;
+    height: '100%',
-    background: ${theme.colors.background.secondary};
+    background: theme.colors.background.secondary,
-    padding: ${theme.spacing(0.5)} ${theme.spacing(1)};
+    padding: theme.spacing(0.5, 1),
-    border-radius: ${theme.shape.radius.default};
+    borderRadius: theme.shape.radius.default,
-    margin-bottom: ${theme.spacing(0.5)};
+    marginBottom: theme.spacing(0.5),
-    gap: ${theme.spacing(2)};
+    gap: theme.spacing(2),
-  `,
+  }),
-  alertName: css`
+  alertName: css({
-    font-size: ${theme.typography.h6.fontSize};
+    fontSize: theme.typography.h6.fontSize,
-    font-weight: ${theme.typography.fontWeightBold};
+    fontWeight: theme.typography.fontWeightBold,
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-    overflow: hidden;
+    overflow: 'hidden',
-    text-overflow: ellipsis;
+    textOverflow: 'ellipsis',
-  `,
+  }),
-  alertNameWrapper: css`
+  alertNameWrapper: css({
-    display: flex;
+    display: 'flex',
-    flex: 1;
+    flex: 1,
-    flex-wrap: nowrap;
+    flexWrap: 'nowrap',
-    flex-direction: column;
+    flexDirection: 'column',
-    min-width: 100px;
+    minWidth: '100px',
-  `,
+  }),
-  alertLabels: css`
+  alertLabels: css({
-    > * {
+    '> *': {
-      margin-right: ${theme.spacing(0.5)};
+      marginRight: theme.spacing(0.5),
-    }
+    },
-  `,
+  }),
-  alertDuration: css`
+  alertDuration: css({
-    font-size: ${theme.typography.bodySmall.fontSize};
+    fontSize: theme.typography.bodySmall.fontSize,
-  `,
+  }),
-  alertRuleItemText: css`
+  alertRuleItemText: css({
-    font-weight: ${theme.typography.fontWeightBold};
+    fontWeight: theme.typography.fontWeightBold,
-    font-size: ${theme.typography.bodySmall.fontSize};
+    fontSize: theme.typography.bodySmall.fontSize,
-    margin: 0;
+    margin: 0,
-  `,
+  }),
-  alertRuleItemTime: css`
+  alertRuleItemTime: css({
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-    font-weight: normal;
+    fontWeight: 'normal',
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-  `,
+  }),
-  alertRuleItemInfo: css`
+  alertRuleItemInfo: css({
-    font-weight: normal;
+    fontWeight: 'normal',
-    flex-grow: 2;
+    flexGrow: 2,
-    display: flex;
+    display: 'flex',
-    align-items: flex-end;
+    alignItems: 'flex-end',
-  `,
+  }),
-  noAlertsMessage: css`
+  noAlertsMessage: css({
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    justify-content: center;
+    justifyContent: 'center',
-    width: 100%;
+    width: '100%',
-    height: 100%;
+    height: '100%',
-  `,
+  }),
-  alertIcon: css`
+  alertIcon: css({
-    margin-right: ${theme.spacing(0.5)};
+    marginRight: theme.spacing(0.5),
-  `,
+  }),
-  instanceDetails: css`
+  instanceDetails: css({
-    min-width: 1px;
+    minWidth: '1px',
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-    overflow: hidden;
+    overflow: 'hidden',
-    text-overflow: ellipsis;
+    textOverflow: 'ellipsis',
-  `,
+  }),
-  customGroupDetails: css`
+  customGroupDetails: css({
-    margin-bottom: ${theme.spacing(0.5)};
+    marginBottom: theme.spacing(0.5),
-  `,
+  }),
-  link: css`
+  link: css({
-    word-break: break-all;
+    wordBreak: 'break-all',
-    color: ${theme.colors.primary.text};
+    color: theme.colors.primary.text,
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    gap: ${theme.spacing(1)};
+    gap: theme.spacing(1),
-  `,
+  }),
-  hidden: css`
+  hidden: css({
-    display: none;
+    display: 'none',
-  `,
+  }),
 });
 export function UnifiedAlertListPanel(props: PanelProps<UnifiedAlertListOptions>) {
@@ -139,42 +139,25 @@ const UngroupedModeView = ({ rules, options, handleInstancesLimit, limitInstance
 };
 const getStateTagStyles = (theme: GrafanaTheme2) => ({
-  common: css`
+  icon: css({
-    width: 70px;
+    marginTop: theme.spacing(2.5),
-    text-align: center;
+    alignSelf: 'flex-start',
-    align-self: stretch;
+  }),
-
+  good: css({
-    display: inline-block;
+    color: theme.colors.success.main,
-    color: white;
+  }),
-    border-radius: ${theme.shape.radius.default};
+  bad: css({
-    font-size: ${theme.typography.bodySmall.fontSize};
+    color: theme.colors.error.main,
-    text-transform: capitalize;
+  }),
-    line-height: 1.2;
+  warning: css({
-    flex-shrink: 0;
+    color: theme.colors.warning.main,
-
+  }),
-    display: flex;
+  neutral: css({
-    flex-direction: column;
+    color: theme.colors.secondary.main,
-    justify-content: center;
+  }),
-  `,
+  info: css({
-  icon: css`
+    color: theme.colors.primary.main,
-    margin-top: ${theme.spacing(2.5)};
+  }),
    align-self: flex-start;
  `,
  good: css`
    color: ${theme.colors.success.main};
  `,
  bad: css`
    color: ${theme.colors.error.main};
  `,
  warning: css`
    color: ${theme.colors.warning.main};
  `,
  neutral: css`
    color: ${theme.colors.secondary.main};
  `,
  info: css`
    color: ${theme.colors.primary.main};
  `,
 });
 export default UngroupedModeView;
@@ -248,61 +248,63 @@ export const getGridCellKind = (field: Field, row: number, hasGridSelection = fa
 export const getStyles = (theme: GrafanaTheme2, isResizeInProgress: boolean) => {
  return {
-    dataEditor: css`
+    dataEditor: css({
-      .dvn-scroll-inner > div:nth-child(2) {
+      '.dvn-scroll-inner > div:nth-child(2)': {
-        pointer-events: none !important;
+        // can't avoid type assertion here due to '!important'
-      }
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      scrollbar-color: ${theme.colors.background.secondary} ${theme.colors.background.primary};
+        pointerEvents: 'none !important' as 'none',
-      ::-webkit-scrollbar {
+      },
-        width: 10px;
+      scrollbarColor: `${theme.colors.background.secondary} ${theme.colors.background.primary}`,
-        height: 10px;
+      '::-webkit-scrollbar': {
-      }
+        width: '10px',
-      ::-webkit-scrollbar-track {
+        height: '10px',
-        background: ${theme.colors.background.primary};
+      },
-      }
+      '::-webkit-scrollbar-track': {
-      ::-webkit-scrollbar-thumb {
+        background: theme.colors.background.primary,
-        border-radius: 10px;
+      },
-      }
+      '::-webkit-scrollbar-thumb': {
-      ::-webkit-scrollbar-corner {
+        borderRadius: '10px',
-        display: none;
+      },
-      }
+      '::-webkit-scrollbar-corner': {
-    `,
+        display: 'none',
-    addColumnDiv: css`
+      },
-      width: 120px;
+    }),
-      display: flex;
+    addColumnDiv: css({
-      flex-direction: column;
+      width: '120px',
-      background-color: ${theme.colors.background.primary};
+      display: 'flex',
-      button {
+      flexDirection: 'column',
-        pointer-events: ${isResizeInProgress ? 'none' : 'auto'};
+      backgroundColor: theme.colors.background.primary,
-        border: none;
+      button: {
-        outline: none;
+        pointerEvents: isResizeInProgress ? 'none' : 'auto',
-        height: 37px;
+        border: 'none',
-        font-size: 20px;
+        outline: 'none',
-        background-color: ${theme.colors.background.primary};
+        height: '37px',
-        color: ${theme.colors.text.primary};
+        fontSize: '20px',
-        border-right: 1px solid ${theme.components.panel.borderColor};
+        backgroundColor: theme.colors.background.primary,
-        border-bottom: 1px solid ${theme.components.panel.borderColor};
+        color: theme.colors.text.primary,
-        transition: background-color 200ms;
+        borderRight: `1px solid ${theme.components.panel.borderColor}`,
-        cursor: pointer;
+        borderBottom: `1px solid ${theme.components.panel.borderColor}`,
-        :hover {
+        transition: 'background-color 200ms',
-          background-color: ${theme.colors.background.secondary};
+        cursor: 'pointer',
-        }
+        ':hover': {
-      }
+          backgroundColor: theme.colors.background.secondary,
-      input {
+        },
-        height: 37px;
+      },
-        border: 1px solid ${theme.colors.primary.main};
+      input: {
-        :focus {
+        height: '37px',
-          outline: none;
+        border: `1px solid ${theme.colors.primary.main}`,
-        }
+        ':focus': {
-      }
+          outline: 'none',
-    `,
+        },
-    renameColumnInput: css`
+      },
-      height: 37px;
+    }),
-      border: 1px solid ${theme.colors.primary.main};
+    renameColumnInput: css({
-      :focus {
+      height: '37px',
-        outline: none;
+      border: `1px solid ${theme.colors.primary.main}`,
-      }
+      ':focus': {
-    `,
+        outline: 'none',
      },
    }),
  };
 };
@@ -42,32 +42,32 @@ export const DocsCard = ({ card }: Props) => {
 const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
  return {
-    card: css`
+    card: css({
-      ${cardStyle(theme, complete)}
+      ...cardStyle(theme, complete),
-      min-width: 230px;
+      minWidth: '230px',
-      ${theme.breakpoints.down('md')} {
+      [theme.breakpoints.down('md')]: {
-        min-width: 192px;
+        minWidth: '192px',
-      }
+      },
-    `,
+    }),
-    heading: css`
+    heading: css({
-      text-transform: uppercase;
+      textTransform: 'uppercase',
-      color: ${complete ? theme.v1.palette.blue95 : '#FFB357'};
+      color: complete ? theme.v1.palette.blue95 : '#FFB357',
-      margin-bottom: ${theme.spacing(2)};
+      marginBottom: theme.spacing(2),
-    `,
+    }),
-    title: css`
+    title: css({
-      margin-bottom: ${theme.spacing(2)};
+      marginBottom: theme.spacing(2),
-    `,
+    }),
-    url: css`
+    url: css({
-      display: inline-block;
+      display: 'inline-block',
-    `,
+    }),
-    learnUrl: css`
+    learnUrl: css({
-      border-top: 1px solid ${theme.colors.border.weak};
+      borderTop: `1px solid ${theme.colors.border.weak}`,
-      position: absolute;
+      position: 'absolute',
-      bottom: 0;
+      bottom: 0,
-      padding: 8px 16px;
+      padding: theme.spacing(1, 2),
-      width: 100%;
+      width: '100%',
-    `,
+    }),
  };
 };
@@ -45,37 +45,37 @@ const handleTutorialClick = (event: MouseEvent<HTMLAnchorElement>, card: Tutoria
 const getStyles = (theme: GrafanaTheme2, complete: boolean) => {
  return {
-    card: css`
+    card: css({
-      ${cardStyle(theme, complete)}
+      ...cardStyle(theme, complete),
-      width: 460px;
+      width: '460px',
-      min-width: 460px;
+      minWidth: '460px',
-      ${theme.breakpoints.down('xl')} {
+      [theme.breakpoints.down('xl')]: {
-        min-width: 368px;
+        minWidth: '368px',
-      }
+      },
-      ${theme.breakpoints.down('lg')} {
+      [theme.breakpoints.down('lg')]: {
-        min-width: 272px;
+        minWidth: '272px',
-      }
+      },
-    `,
+    }),
-    type: css`
+    type: css({
-      color: ${theme.colors.primary.text};
+      color: theme.colors.primary.text,
-      text-transform: uppercase;
+      textTransform: 'uppercase',
-    `,
+    }),
-    heading: css`
+    heading: css({
-      text-transform: uppercase;
+      textTransform: 'uppercase',
-      color: ${theme.colors.primary.text};
+      color: theme.colors.primary.text,
-      margin-bottom: ${theme.spacing(1)};
+      marginBottom: theme.spacing(1),
-    `,
+    }),
-    cardTitle: css`
+    cardTitle: css({
-      margin-bottom: ${theme.spacing(2)};
+      marginBottom: theme.spacing(2),
-    `,
+    }),
-    info: css`
+    info: css({
-      margin-bottom: ${theme.spacing(2)};
+      marginBottom: theme.spacing(2),
-    `,
+    }),
-    status: css`
+    status: css({
-      display: flex;
+      display: 'flex',
-      justify-content: flex-end;
+      justifyContent: 'flex-end',
-    `,
+    }),
  };
 };
@@ -9,31 +9,31 @@ export const cardStyle = (theme: GrafanaTheme2, complete: boolean) => {
  const borderGradient = theme.isDark ? darkThemeGradients : lightThemeGradients;
-  return `
+  return {
-      background-color: ${theme.colors.background.secondary};
+    backgroundColor: theme.colors.background.secondary,
-      margin-right: ${theme.spacing(4)};
+    marginRight: theme.spacing(4),
-      border: 1px solid ${theme.colors.border.weak};
+    border: `1px solid ${theme.colors.border.weak}`,
-      border-bottom-left-radius: ${theme.shape.borderRadius(2)};
+    borderBottomLeftRadius: theme.shape.borderRadius(2),
-      border-bottom-right-radius: ${theme.shape.borderRadius(2)};
+    borderBottomRightRadius: theme.shape.borderRadius(2),
-      position: relative;
+    position: 'relative',
-      max-height: 230px;
+    maxHeight: '230px',
-      ${theme.breakpoints.down('xxl')} {
+    [theme.breakpoints.down('xxl')]: {
-        margin-right: ${theme.spacing(2)};
+      marginRight: theme.spacing(2),
-      }
+    },
-      &::before {
+    '&::before': {
-        display: block;
+      display: 'block',
-        content: ' ';
+      content: "' '",
-        position: absolute;
+      position: 'absolute',
-        left: 0;
+      left: 0,
-        right: 0;
+      right: 0,
-        height: 2px;
+      height: '2px',
-        top: 0;
+      top: 0,
-        background-image: ${borderGradient};
+      backgroundImage: borderGradient,
-      }
+    },
-`;
+  } as const;
 };
-export const cardContent = css`
+export const cardContent = css({
-  padding: 16px;
+  padding: '16px',
-`;
+});
@@ -156,7 +156,7 @@ function findPathOption(paths: Array<SelectableValue<string>>, path?: string): S
 }
 const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  dropWrap: css`
+  dropWrap: css({
-    margin-bottom: ${theme.spacing(1)};
+    marginBottom: theme.spacing(1),
-  `,
+  }),
 }));
@@ -269,33 +269,33 @@ export class LivePanel extends PureComponent<Props, State> {
 }
 const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
-  statusWrap: css`
+  statusWrap: css({
-    margin: auto;
+    margin: 'auto',
-    position: absolute;
+    position: 'absolute',
-    top: 0;
+    top: 0,
-    right: 0;
+    right: 0,
-    background: ${theme.components.panel.background};
+    background: theme.components.panel.background,
-    padding: 10px;
+    padding: '10px',
-    z-index: ${theme.zIndex.modal};
+    zIndex: theme.zIndex.modal,
-  `,
+  }),
  status: {
-    [LiveChannelConnectionState.Pending]: css`
+    [LiveChannelConnectionState.Pending]: css({
-      border: 1px solid ${theme.v1.palette.orange};
+      border: `1px solid ${theme.v1.palette.orange}`,
-    `,
+    }),
-    [LiveChannelConnectionState.Connected]: css`
+    [LiveChannelConnectionState.Connected]: css({
-      border: 1px solid ${theme.colors.success.main};
+      border: `1px solid ${theme.colors.success.main}`,
-    `,
+    }),
-    [LiveChannelConnectionState.Connecting]: css`
+    [LiveChannelConnectionState.Connecting]: css({
-      border: 1px solid ${theme.v1.palette.brandWarning};
+      border: `1px solid ${theme.v1.palette.brandWarning}`,
-    `,
+    }),
-    [LiveChannelConnectionState.Disconnected]: css`
+    [LiveChannelConnectionState.Disconnected]: css({
-      border: 1px solid ${theme.colors.warning.main};
+      border: `1px solid ${theme.colors.warning.main}`,
-    `,
+    }),
-    [LiveChannelConnectionState.Shutdown]: css`
+    [LiveChannelConnectionState.Shutdown]: css({
-      border: 1px solid ${theme.colors.error.main};
+      border: `1px solid ${theme.colors.error.main}`,
-    `,
+    }),
-    [LiveChannelConnectionState.Invalid]: css`
+    [LiveChannelConnectionState.Invalid]: css({
-      border: 1px solid red;
+      border: '1px solid red',
-    `,
+    }),
  },
 }));
@@ -10,18 +10,18 @@ import { shortenLine } from './utils';
 const getStyles = (theme: GrafanaTheme2) => {
  return {
-    mainGroup: css`
+    mainGroup: css({
-      pointer-events: none;
+      pointerEvents: 'none',
-      font-size: 8px;
+      fontSize: '8px',
-    `,
+    }),
-    background: css`
+    background: css({
-      fill: ${theme.components.tooltip.background};
+      fill: theme.components.tooltip.background,
-    `,
+    }),
-    text: css`
+    text: css({
-      fill: ${theme.components.tooltip.text};
+      fill: theme.components.tooltip.text,
-    `,
+    }),
  };
 };
@@ -10,15 +10,15 @@ import { NodeDatum } from './types';
 function getStyles() {
  return {
-    item: css`
+    item: css({
-      label: LegendItem;
+      label: 'LegendItem',
-      flex-grow: 0;
+      flexGrow: 0,
-    `,
+    }),
-    legend: css`
+    legend: css({
-      label: Legend;
+      label: 'Legend',
-      pointer-events: all;
+      pointerEvents: 'all',
-    `,
+    }),
  };
 }
@@ -9,23 +9,23 @@ import { NodesMarker } from './types';
 const nodeR = 40;
 const getStyles = (theme: GrafanaTheme2) => ({
-  mainGroup: css`
+  mainGroup: css({
-    cursor: pointer;
+    cursor: 'pointer',
-    font-size: 10px;
+    fontSize: '10px',
-  `,
+  }),
-  mainCircle: css`
+  mainCircle: css({
-    fill: ${theme.components.panel.background};
+    fill: theme.components.panel.background,
-    stroke: ${theme.colors.border.strong};
+    stroke: theme.colors.border.strong,
-  `,
+  }),
-  text: css`
+  text: css({
-    width: 50px;
+    width: '50px',
-    height: 50px;
+    height: '50px',
-    text-align: center;
+    textAlign: 'center',
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    justify-content: center;
+    justifyContent: 'center',
-  `,
+  }),
 });
 export const Marker = memo(function Marker(props: {
@@ -14,61 +14,63 @@ export const nodeR = 40;
 export const highlightedNodeColor = '#a00';
 const getStyles = (theme: GrafanaTheme2, hovering: HoverState) => ({
-  mainGroup: css`
+  mainGroup: css({
-    cursor: pointer;
+    cursor: 'pointer',
-    font-size: 10px;
+    fontSize: '10px',
-    transition: opacity 300ms;
+    [theme.transitions.handleMotion('no-preference', 'reduce')]: {
-    opacity: ${hovering === 'inactive' ? 0.5 : 1};
+      transition: 'opacity 300ms',
-  `,
+    },
    opacity: hovering === 'inactive' ? 0.5 : 1,
  }),
-  mainCircle: css`
+  mainCircle: css({
-    fill: ${theme.components.panel.background};
+    fill: theme.components.panel.background,
-  `,
+  }),
-  filledCircle: css`
+  filledCircle: css({
-    fill: ${highlightedNodeColor};
+    fill: highlightedNodeColor,
-  `,
+  }),
-  hoverCircle: css`
+  hoverCircle: css({
-    opacity: 0.5;
+    opacity: 0.5,
-    fill: transparent;
+    fill: 'transparent',
-    stroke: ${theme.colors.primary.text};
+    stroke: theme.colors.primary.text,
-  `,
+  }),
-  text: css`
+  text: css({
-    fill: ${theme.colors.text.primary};
+    fill: theme.colors.text.primary,
-    pointer-events: none;
+    pointerEvents: 'none',
-  `,
+  }),
-  titleText: css`
+  titleText: css({
-    text-align: center;
+    textAlign: 'center',
-    text-overflow: ellipsis;
+    textOverflow: 'ellipsis',
-    overflow: hidden;
+    overflow: 'hidden',
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-    background-color: ${tinycolor(theme.colors.background.primary).setAlpha(0.6).toHex8String()};
+    backgroundColor: tinycolor(theme.colors.background.primary).setAlpha(0.6).toHex8String(),
-    width: 140px;
+    width: '140px',
-  `,
+  }),
-  statsText: css`
+  statsText: css({
-    text-align: center;
+    textAlign: 'center',
-    text-overflow: ellipsis;
+    textOverflow: 'ellipsis',
-    overflow: hidden;
+    overflow: 'hidden',
-    white-space: nowrap;
+    whiteSpace: 'nowrap',
-    width: 70px;
+    width: '70px',
-  `,
+  }),
-  textHovering: css`
+  textHovering: css({
-    width: 200px;
+    width: '200px',
-    & span {
+    '& span': {
-      background-color: ${tinycolor(theme.colors.background.primary).setAlpha(0.8).toHex8String()};
+      backgroundColor: tinycolor(theme.colors.background.primary).setAlpha(0.8).toHex8String(),
-    }
+    },
-  `,
+  }),
-  clickTarget: css`
+  clickTarget: css({
-    fill: none;
+    fill: 'none',
-    stroke: none;
+    stroke: 'none',
-    pointer-events: fill;
+    pointerEvents: 'fill',
-  `,
+  }),
 });
 export const computeNodeCircumferenceStrokeWidth = (nodeRadius: number) => Math.ceil(nodeRadius * 0.075);
@@ -23,83 +23,83 @@ import { useZoom } from './useZoom';
 import { processNodes, Bounds, findConnectedNodesForEdge, findConnectedNodesForNode } from './utils';
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
+  wrapper: css({
-    label: wrapper;
+    label: 'wrapper',
-    height: 100%;
+    height: '100%',
-    width: 100%;
+    width: '100%',
-    overflow: hidden;
+    overflow: 'hidden',
-    position: relative;
+    position: 'relative',
-  `,
+  }),
-  svg: css`
+  svg: css({
-    label: svg;
+    label: 'svg',
-    height: 100%;
+    height: '100%',
-    width: 100%;
+    width: '100%',
-    overflow: visible;
+    overflow: 'visible',
-    font-size: 10px;
+    fontSize: '10px',
-    cursor: move;
+    cursor: 'move',
-  `,
+  }),
-  svgPanning: css`
+  svgPanning: css({
-    label: svgPanning;
+    label: 'svgPanning',
-    user-select: none;
+    userSelect: 'none',
-  `,
+  }),
-  noDataMsg: css`
+  noDataMsg: css({
-    height: 100%;
+    height: '100%',
-    width: 100%;
+    width: '100%',
-    display: grid;
+    display: 'grid',
-    place-items: center;
+    placeItems: 'center',
-    font-size: ${theme.typography.h4.fontSize};
+    fontSize: theme.typography.h4.fontSize,
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-  `,
+  }),
-  mainGroup: css`
+  mainGroup: css({
-    label: mainGroup;
+    label: 'mainGroup',
-    will-change: transform;
+    willChange: 'transform',
-  `,
+  }),
-  viewControls: css`
+  viewControls: css({
-    label: viewControls;
+    label: 'viewControls',
-    position: absolute;
+    position: 'absolute',
-    left: 2px;
+    left: '2px',
-    bottom: 3px;
+    bottom: '3px',
-    right: 0;
+    right: 0,
-    display: flex;
+    display: 'flex',
-    align-items: flex-end;
+    alignItems: 'flex-end',
-    justify-content: space-between;
+    justifyContent: 'space-between',
-    pointer-events: none;
+    pointerEvents: 'none',
-  `,
+  }),
-  legend: css`
+  legend: css({
-    label: legend;
+    label: 'legend',
-    background: ${theme.colors.background.secondary};
+    background: theme.colors.background.secondary,
-    box-shadow: ${theme.shadows.z1};
+    boxShadow: theme.shadows.z1,
-    padding-bottom: 5px;
+    paddingBottom: '5px',
-    margin-right: 10px;
+    marginRight: '10px',
-  `,
+  }),
-  viewControlsWrapper: css`
+  viewControlsWrapper: css({
-    margin-left: auto;
+    marginLeft: 'auto',
-  `,
+  }),
-  alert: css`
+  alert: css({
-    label: alert;
+    label: 'alert',
-    padding: 5px 8px;
+    padding: '5px 8px',
-    font-size: 10px;
+    fontSize: '10px',
-    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
+    textShadow: '0 1px 0 rgba(0, 0, 0, 0.2)',
-    border-radius: ${theme.shape.radius.default};
+    borderRadius: theme.shape.radius.default,
-    align-items: center;
+    alignItems: 'center',
-    position: absolute;
+    position: 'absolute',
-    top: 0;
+    top: 0,
-    right: 0;
+    right: 0,
-    background: ${theme.colors.warning.main};
+    background: theme.colors.warning.main,
-    color: ${theme.colors.warning.contrastText};
+    color: theme.colors.warning.contrastText,
-  `,
+  }),
-  loadingWrapper: css`
+  loadingWrapper: css({
-    label: loadingWrapper;
+    label: 'loadingWrapper',
-    height: 100%;
+    height: '100%',
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    justify-content: center;
+    justifyContent: 'center',
-  `,
+  }),
 });
 // Limits the number of visible nodes, mainly for performance reasons. Nodes above the limit are accessible by expanding
@@ -5,10 +5,10 @@ import { Button, HorizontalGroup, useStyles2, VerticalGroup } from '@grafana/ui'
 function getStyles() {
  return {
-    wrapper: css`
+    wrapper: css({
-      label: wrapper;
+      label: 'wrapper',
-      pointer-events: all;
+      pointerEvents: 'all',
-    `,
+    }),
  };
 }
--- a/Show More
+++ b/Show More