Grafana UI: Use package.json exports for internal code (#101815)

* feat(grafana-ui): introduce development exports to prevent importing from grafana/ui/src

* refactor(theme-generation): move theme templates into scripts so themes continue to build

* refactor(frontend): replace  grafana/ui paths that use nested src with /internal or /unstable

* chore(betterer): update better results file

* feat(grafana-ui): support enterprise, remove Text component from internal

* docs(packages): update readme with exporting code conventions

packages/README.md

@@ -1,6 +1,14 @@
 # Grafana frontend packages
 
-This document contains information about Grafana frontend package versioning and releases.
+## Exporting code conventions
+
+`@grafana/ui` makes use of `exports` in package.json to define three entrypoints that Grafana core and Grafana plugins can access. Before exposing anything in this package please consider the table below.
+
+| Entrypoint Name | Import Path            | Description                                                                                                                                                                     | Available to Grafana | Available to plugins |
+| --------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -------------------- |
+| `./`            | `@grafana/ui`          | The public API entrypoint. If the code is stable and you want to share it everywhere, this is the place to export it.                                                           | ✅                   | ✅                   |
+| `./unstable`    | `@grafana/ui/unstable` | The public API entrypoint for all experimental code. If you want to iterate and test code from Grafana and plugins, this is the place to export it.                             | ✅                   | ✅                   |
+| `./internal`    | `@grafana/ui/internal` | The private API entrypoint for internal code shared with Grafana. If you need to import code in Grafana but don't want to expose it to plugins, this is the place to export it. | ✅                   | ❌                   |
 
 ## Versioning
 

packages/grafana-plugin-configs/tsconfig.json

@@ -3,12 +3,14 @@
     "jsx": "react-jsx",
     "alwaysStrict": true,
     "declaration": false,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler"
   },
   "ts-node": {
     "compilerOptions": {
       "module": "commonjs",
       "target": "es5",
+      "moduleResolution": "Node",
       "esModuleInterop": true
     },
     "transpileOnly": true

packages/grafana-ui/package.json

@@ -18,6 +18,22 @@
   },
   "main": "src/index.ts",
   "types": "src/index.ts",
+  "module": "src/index.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./src/index.ts",
+      "require": "./src/index.ts"
+    },
+    "./internal": {
+      "import": "./src/internal/index.ts",
+      "require": "./src/internal/index.ts"
+    },
+    "./unstable": {
+      "import": "./src/unstable.ts",
+      "require": "./src/unstable.ts"
+    }
+  },
   "publishConfig": {
     "main": "./dist/cjs/index.cjs",
     "module": "./dist/esm/index.mjs",

packages/grafana-ui/src/internal/index.ts

@@ -0,0 +1,104 @@
+/**
+ * This file is used to share internal grafana/ui code with Grafana core.
+ * Note that these exports are also used within Enterprise.
+ *
+ * Through the exports declared in package.json we can import this code in core Grafana and the grafana/ui
+ * package will continue to be able to access all code when it's published to npm as it's private to the package.
+ *
+ * During the yarn pack lifecycle the exports[./internal] property is deleted from the package.json
+ * preventing the code from being importable by plugins or other npm packages making it truly "internal".
+ *
+ */
+
+export { UPlotChart } from '../components/uPlot/Plot';
+export { type AxisProps, UPLOT_AXIS_FONT_SIZE, timeUnitSize } from '../components/uPlot/config/UPlotAxisBuilder';
+export {
+  type Renderers,
+  UPlotConfigBuilder,
+  type UPlotConfigPrepFn,
+} from '../components/uPlot/config/UPlotConfigBuilder';
+export { type ScaleProps } from '../components/uPlot/config/UPlotScaleBuilder';
+export {
+  pluginLog,
+  preparePlotData2,
+  getStackingGroups,
+  getDisplayValuesForCalcs,
+  type StackingGroup,
+} from '../components/uPlot/utils';
+export { hasVisibleLegendSeries, PlotLegend } from '../components/uPlot/PlotLegend';
+export { getScaleGradientFn } from '../components/uPlot/config/gradientFills';
+export { buildScaleKey } from '../components/uPlot/internal';
+export { CloseButton } from '../components/uPlot/plugins/CloseButton';
+export { type TimeRange2, TooltipHoverMode } from '../components/uPlot/plugins/TooltipPlugin2';
+export type { FacetedData, FacetSeries } from '../components/uPlot/types';
+
+export { getResponsiveStyle, type ResponsiveProp } from '../components/Layout/utils/responsiveness';
+export { ColorSwatch } from '../components/ColorPicker/ColorSwatch';
+
+export { FieldNamePicker } from '../components/MatchersUI/FieldNamePicker';
+export { comparisonOperationOptions } from '../components/MatchersUI/FieldValueMatcher';
+export {
+  frameHasName,
+  getFrameFieldsDisplayNames,
+  useFieldDisplayNames,
+  useSelectOptions,
+} from '../components/MatchersUI/utils';
+export type { FieldMatcherUIRegistryItem } from '../components/MatchersUI/types';
+export { RefIDMultiPicker, RefIDPicker, stringsToRegexp } from '../components/MatchersUI/FieldsByFrameRefIdMatcher';
+export { allFieldTypeIconOptions } from '../components/MatchersUI/FieldTypeMatcherEditor';
+
+export { getStyles as getSliderStyles } from '../components/Slider/styles';
+export { getSelectStyles } from '../components/Select/getSelectStyles';
+export type { Props as InputProps } from '../components/Input/Input';
+export type { ModalsContextState } from '../components/Modal/ModalsContext';
+export { getModalStyles } from '../components/Modal/getModalStyles';
+export { MultiValueRemove, type MultiValueRemoveProps } from '../components/Select/MultiValue';
+export { getSvgSize } from '../components/Icon/utils';
+export { LoadingIndicator } from '../components/PanelChrome/LoadingIndicator';
+export { type ButtonLinkProps, getButtonStyles } from '../components/Button';
+export {
+  type TableSortByFieldState,
+  type TableFieldOptions,
+  TableCellDisplayMode,
+  FILTER_FOR_OPERATOR,
+  FILTER_OUT_OPERATOR,
+} from '../components/Table/types';
+export { defaultSparklineCellConfig } from '../components/Table/SparklineCell';
+export { TableCell } from '../components/Table/TableCell';
+export { useTableStyles } from '../components/Table/styles';
+export { migrateTableDisplayModeToCellOptions } from '../components/Table/utils';
+export { type DataLinksContextMenuApi } from '../components/DataLinks/DataLinksContextMenu';
+export { MenuDivider } from '../components/Menu/MenuDivider';
+export { AbstractList } from '../components/List/AbstractList';
+export type { HttpSettingsBaseProps, AzureAuthSettings } from '../components/DataSourceSettings/types';
+export { TimeZoneOffset, formatUtcOffset } from '../components/DateTimePickers/TimeZonePicker/TimeZoneOffset';
+export { TimeZoneTitle } from '../components/DateTimePickers/TimeZonePicker/TimeZoneTitle';
+export type { CodeEditorProps } from '../components/Monaco/types';
+export { type Props as InlineFieldProps } from '../components/Forms/InlineField';
+export { DataLinkSuggestions } from '../components/DataLinks/DataLinkSuggestions';
+export { type Props as AlertProps } from '../components/Alert/Alert';
+export { type TooltipPlacement } from '../components/Tooltip';
+export { ConfirmContent, type ConfirmContentProps } from '../components/ConfirmModal/ConfirmContent';
+
+export { EmotionPerfTest } from '../components/ThemeDemos/EmotionPerfTest';
+
+export { VizTooltipContent } from '../components/VizTooltip/VizTooltipContent';
+export { VizTooltipFooter } from '../components/VizTooltip/VizTooltipFooter';
+export { VizTooltipHeader } from '../components/VizTooltip/VizTooltipHeader';
+export { VizTooltipWrapper } from '../components/VizTooltip/VizTooltipWrapper';
+export { VizTooltipRow } from '../components/VizTooltip/VizTooltipRow';
+export { getContentItems } from '../components/VizTooltip/utils';
+export { ColorIndicator, ColorPlacement, type VizTooltipItem } from '../components/VizTooltip/types';
+export { mapMouseEventToMode } from '../components/VizLegend/utils';
+
+export { getFocusStyles, getMouseFocusStyles, getTooltipContainerStyles } from '../themes/mixins';
+
+export { optsWithHideZeros } from '../options/builder/tooltip';
+export { StackingEditor } from '../options/builder/stacking';
+export { addHideFrom } from '../options/builder/hideSeries';
+export { ScaleDistributionEditor } from '../options/builder/axis';
+
+export { useComponentInstanceId } from '../utils/useComponetInstanceId';
+export { closePopover } from '../utils/closePopover';
+
+export { flattenTokens } from '../slate-plugins/slate-prism';

public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx

@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { getInputStyles, Icon, Text, ToolbarButton, useStyles2, useTheme2 } from '@grafana/ui';
-import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
+import { getFocusStyles } from '@grafana/ui/internal';
 import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
 import { t } from 'app/core/internationalization';
 import { getModKey } from 'app/core/utils/browser';

public/app/core/components/GraphNG/GraphNG.tsx

@@ -16,11 +16,7 @@ import {
 } from '@grafana/data';
 import { DashboardCursorSync, VizLegendOptions } from '@grafana/schema';
 import { Themeable2, VizLayout } from '@grafana/ui';
-import { UPlotChart } from '@grafana/ui/src/components/uPlot/Plot';
+import { UPlotChart, AxisProps, Renderers, UPlotConfigBuilder, ScaleProps, pluginLog } from '@grafana/ui/internal';
-import { AxisProps } from '@grafana/ui/src/components/uPlot/config/UPlotAxisBuilder';
-import { Renderers, UPlotConfigBuilder } from '@grafana/ui/src/components/uPlot/config/UPlotConfigBuilder';
-import { ScaleProps } from '@grafana/ui/src/components/uPlot/config/UPlotScaleBuilder';
-import { pluginLog } from '@grafana/ui/src/components/uPlot/utils';
 
 import { GraphNGLegendEvent, XYFieldMatchers } from './types';
 import { preparePlotFrame as defaultPreparePlotFrame } from './utils';

public/app/core/components/Indent/Indent.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
-import { getResponsiveStyle, ResponsiveProp } from '@grafana/ui/src/components/Layout/utils/responsiveness';
+import { getResponsiveStyle, ResponsiveProp } from '@grafana/ui/internal';
 
 interface IndentProps {
   children?: React.ReactNode;

public/app/core/components/NestedFolderPicker/NestedFolderList.tsx

@@ -6,8 +6,7 @@ import { FixedSizeList as List } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { IconButton, useStyles2 } from '@grafana/ui';
+import { IconButton, useStyles2, Text } from '@grafana/ui';
-import { Text } from '@grafana/ui/src/components/Text/Text';
 import { Indent } from 'app/core/components/Indent/Indent';
 import { Trans } from 'app/core/internationalization';
 import { childrenByParentUIDSelector, rootItemsSelector } from 'app/features/browse-dashboards/state';

public/app/core/components/NestedFolderPicker/Trigger.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, getInputStyles, useTheme2, Text } from '@grafana/ui';
-import { getFocusStyles, getMouseFocusStyles } from '@grafana/ui/src/themes/mixins';
+import { getFocusStyles, getMouseFocusStyles } from '@grafana/ui/internal';
 import { Trans, t } from 'app/core/internationalization';
 
 import { FolderPickerSkeleton } from './Skeleton';

public/app/core/components/OptionsUI/color.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useTheme2, useStyles2, ColorPicker, IconButton } from '@grafana/ui';
-import { ColorSwatch } from '@grafana/ui/src/components/ColorPicker/ColorSwatch';
+import { ColorSwatch } from '@grafana/ui/internal';
 
 export interface ColorValueEditorSettings {
   placeholder?: string;

public/app/core/components/OptionsUI/registry.tsx

@@ -32,7 +32,7 @@ import {
 import { actionsOverrideProcessor } from '@grafana/data/src/field/overrides/processors';
 import { FieldConfig } from '@grafana/schema';
 import { RadioButtonGroup, TimeZonePicker, Switch } from '@grafana/ui';
-import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
+import { FieldNamePicker } from '@grafana/ui/internal';
 import { ThresholdsValueEditor } from 'app/features/dimensions/editors/ThresholdsEditor/thresholds';
 import { ValueMappingsEditor } from 'app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditor';
 

public/app/core/components/OptionsUI/slider.tsx

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 import { StandardEditorProps, GrafanaTheme2, SliderFieldConfigSettings } from '@grafana/data';
 import { useTheme2 } from '@grafana/ui';
-import { getStyles } from '@grafana/ui/src/components/Slider/styles';
+import { getSliderStyles } from '@grafana/ui/internal';
 
 import { NumberInput } from './NumberInput';
 
@@ -86,7 +86,7 @@ export const SliderValueEditor = ({ value, onChange, item }: Props) => {
   );
 
   // Styles
-  const styles = getStyles(theme, isHorizontal, Boolean(marks));
+  const styles = getSliderStyles(theme, isHorizontal, Boolean(marks));
   const stylesSlider = getStylesSlider(theme, inputWidth);
   const sliderInputClassNames = !isHorizontal ? [styles.sliderInputVertical] : [];
 

public/app/core/components/PasswordField/PasswordField.tsx

@@ -2,7 +2,7 @@ import { forwardRef, useState } from 'react';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { Input, IconButton } from '@grafana/ui';
-import { Props as InputProps } from '@grafana/ui/src/components/Input/Input';
+import { InputProps } from '@grafana/ui/internal';
 
 interface Props extends Omit<InputProps, 'type'> {}
 

public/app/core/components/RolePicker/RoleMenuGroupOption.tsx

@@ -3,7 +3,7 @@ import { FormEvent, memo } from 'react';
 import * as React from 'react';
 
 import { Checkbox, Portal, useStyles2, useTheme2 } from '@grafana/ui';
-import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles';
+import { getSelectStyles } from '@grafana/ui/internal';
 
 import { getStyles } from './styles';
 

public/app/core/components/RolePicker/RoleMenuOption.tsx

@@ -2,7 +2,7 @@ import { cx } from '@emotion/css';
 import { forwardRef, FormEvent } from 'react';
 
 import { Checkbox, Icon, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';
-import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles';
+import { getSelectStyles } from '@grafana/ui/internal';
 import { Role } from 'app/types';
 
 import { getStyles } from './styles';

public/app/core/components/RolePicker/RolePickerInput.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2, getInputStyles, sharedInputStyle, Tooltip, Icon, Spinner } from '@grafana/ui';
-import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
+import { getFocusStyles } from '@grafana/ui/internal';
 import { Trans } from 'app/core/internationalization';
 
 import { Role } from '../../../types';

public/app/core/components/RolePicker/RolePickerMenu.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { useEffect, useRef, useState } from 'react';
 
 import { Button, ScrollContainer, Stack, TextLink, useStyles2, useTheme2 } from '@grafana/ui';
-import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles';
+import { getSelectStyles } from '@grafana/ui/internal';
 import { Trans } from 'app/core/internationalization';
 import { OrgRole, Role } from 'app/types';
 

public/app/core/components/RolePicker/RolePickerSubMenu.tsx

@@ -1,7 +1,7 @@
 import { cx } from '@emotion/css';
 
 import { Button, ScrollContainer, Stack, useStyles2, useTheme2 } from '@grafana/ui';
-import { getSelectStyles } from '@grafana/ui/src/components/Select/getSelectStyles';
+import { getSelectStyles } from '@grafana/ui/internal';
 import { Trans } from 'app/core/internationalization';
 import { Role } from 'app/types';
 

public/app/core/components/TimeSeries/TimeSeries.tsx

@@ -1,9 +1,8 @@
 import { Component } from 'react';
 
 import { DataFrame, TimeRange } from '@grafana/data';
-import { hasVisibleLegendSeries, PlotLegend } from '@grafana/ui/src/components/uPlot/PlotLegend';
+import { withTheme2 } from '@grafana/ui';
-import { UPlotConfigBuilder } from '@grafana/ui/src/components/uPlot/config/UPlotConfigBuilder';
+import { hasVisibleLegendSeries, PlotLegend, UPlotConfigBuilder } from '@grafana/ui/internal';
-import { withTheme2 } from '@grafana/ui/src/themes/ThemeContext';
 
 import { GraphNG, GraphNGProps, PropDiffFn } from '../GraphNG/GraphNG';
 

public/app/core/components/TimeSeries/utils.ts

@@ -59,10 +59,14 @@ for (let i = 0; i < BIN_INCRS.length; i++) {
   BIN_INCRS[i] = 2 ** i;
 }
 
-import { UPlotConfigBuilder, UPlotConfigPrepFn } from '@grafana/ui/src/components/uPlot/config/UPlotConfigBuilder';
+import {
-import { getScaleGradientFn } from '@grafana/ui/src/components/uPlot/config/gradientFills';
+  UPlotConfigBuilder,
-import { buildScaleKey } from '@grafana/ui/src/components/uPlot/internal';
+  UPlotConfigPrepFn,
-import { getStackingGroups, preparePlotData2 } from '@grafana/ui/src/components/uPlot/utils';
+  getScaleGradientFn,
+  buildScaleKey,
+  getStackingGroups,
+  preparePlotData2,
+} from '@grafana/ui/internal';
 
 const defaultFormatter = (v: any, decimals: DecimalCount = 1) => (v == null ? '-' : v.toFixed(decimals));
 

public/app/core/components/TimelineChart/utils.ts

@@ -33,7 +33,7 @@ import {
   MappingType,
 } from '@grafana/schema';
 import { FIXED_UNIT, UPlotConfigBuilder, UPlotConfigPrepFn, VizLegendItem } from '@grafana/ui';
-import { preparePlotData2, getStackingGroups } from '@grafana/ui/src/components/uPlot/utils';
+import { preparePlotData2, getStackingGroups } from '@grafana/ui/internal';
 
 import { getConfig, TimelineCoreOptions } from './timeline';
 

public/app/core/context/ModalsContextProvider.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { textUtil } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { ConfirmModal, ConfirmModalProps, ModalsContext } from '@grafana/ui';
-import { ModalsContextState } from '@grafana/ui/src/components/Modal/ModalsContext';
+import { ModalsContextState } from '@grafana/ui/internal';
 import { ShowConfirmModalEvent, ShowModalReactEvent } from 'app/types/events';
 
 import appEvents from '../app_events';

public/app/core/core.ts

@@ -1,4 +1,4 @@
-import { colors, JsonExplorer } from '@grafana/ui/';
+import { colors, JsonExplorer } from '@grafana/ui';
 
 import appEvents from './app_events';
 import { profiler } from './profiler';

public/app/features/actions/ActionEditor.tsx

@@ -2,14 +2,8 @@ import { css } from '@emotion/css';
 import { memo } from 'react';
 
 import { Action, GrafanaTheme2, httpMethodOptions, HttpRequestMethod, VariableSuggestion } from '@grafana/data';
-import { Switch } from '@grafana/ui/';
+import { Switch, Field, InlineField, InlineFieldRow, RadioButtonGroup, JSONFormatter, useStyles2 } from '@grafana/ui';
-import { Field } from '@grafana/ui/src/components/Forms/Field';
+import { t } from 'app/core/internationalization';
-import { InlineField } from '@grafana/ui/src/components/Forms/InlineField';
-import { InlineFieldRow } from '@grafana/ui/src/components/Forms/InlineFieldRow';
-import { RadioButtonGroup } from '@grafana/ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup';
-import { JSONFormatter } from '@grafana/ui/src/components/JSONFormatter/JSONFormatter';
-import { useStyles2 } from '@grafana/ui/src/themes';
-import { t } from '@grafana/ui/src/utils/i18n';
 
 import { HTMLElementType, SuggestionsInput } from '../transformers/suggestionsInput/SuggestionsInput';
 

public/app/features/actions/ActionEditorModalContent.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 
 import { Action, DataFrame, VariableSuggestion } from '@grafana/data';
-import { Button } from '@grafana/ui/src/components/Button';
+import { Button, Modal } from '@grafana/ui';
-import { Modal } from '@grafana/ui/src/components/Modal/Modal';
 import { Trans } from 'app/core/internationalization';
 
 import { ActionEditor } from './ActionEditor';

public/app/features/actions/ParamsEditor.tsx

@@ -2,11 +2,7 @@ import { css } from '@emotion/css';
 import { useEffect, useState } from 'react';
 
 import { contentTypeOptions, GrafanaTheme2, VariableSuggestion } from '@grafana/data';
-import { IconButton } from '@grafana/ui/src/components/IconButton/IconButton';
+import { IconButton, Input, Stack, Select, useStyles2 } from '@grafana/ui';
-import { Input } from '@grafana/ui/src/components/Input/Input';
-import { Stack } from '@grafana/ui/src/components/Layout/Stack/Stack';
-import { Select } from '@grafana/ui/src/components/Select/Select';
-import { useStyles2 } from '@grafana/ui/src/themes';
 
 import { SuggestionsInput } from '../transformers/suggestionsInput/SuggestionsInput';
 

public/app/features/admin/AdminOrgsTable.tsx

@@ -4,7 +4,7 @@ import Skeleton from 'react-loading-skeleton';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, ConfirmModal, useStyles2 } from '@grafana/ui';
-import { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';
+import { SkeletonComponent, attachSkeleton } from '@grafana/ui/unstable';
 import { contextSrv } from 'app/core/core';
 import { Trans } from 'app/core/internationalization';
 import { AccessControlAction, Organization } from 'app/types';

public/app/features/admin/AdminSettingsTable.tsx

@@ -2,7 +2,7 @@ import { Fragment } from 'react';
 import Skeleton from 'react-loading-skeleton';
 
 import { ScrollContainer, Text } from '@grafana/ui';
-import { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';
+import { SkeletonComponent, attachSkeleton } from '@grafana/ui/unstable';
 
 import { Settings } from './AdminSettings';
 

public/app/features/admin/UserListPublicDashboardPage/DashboardsListModalButton.tsx

@@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data/src';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 import { config } from '@grafana/runtime';
-import { Button, LoadingPlaceholder, Modal, ModalsController, useStyles2 } from '@grafana/ui/src';
+import { Button, LoadingPlaceholder, Modal, ModalsController, useStyles2 } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 import {
   generatePublicDashboardConfigUrl,

public/app/features/admin/UserListPublicDashboardPage/DeleteUserModalButton.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
 import { config } from '@grafana/runtime';
-import { Button, Modal, ModalsController, useStyles2 } from '@grafana/ui/src';
+import { Button, Modal, ModalsController, useStyles2 } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 import { SessionUser } from 'app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboardUtils';
 

public/app/features/admin/UserListPublicDashboardPage/UserListPublicDashboardPage.tsx

@@ -1,5 +1,5 @@
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { Icon, Stack, Tag, Tooltip } from '@grafana/ui/src';
+import { Icon, Stack, Tag, Tooltip } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { Trans, t } from 'app/core/internationalization';
 

public/app/features/alerting/unified/components/GrafanaAlertmanagerDeliveryWarning.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { Alert, useStyles2 } from '@grafana/ui/src';
+import { Alert, useStyles2 } from '@grafana/ui';
 
 import { AlertmanagerChoice } from '../../../../plugins/datasource/alertmanager/types';
 import { alertmanagerApi } from '../api/alertmanagerApi';

public/app/features/alerting/unified/components/rule-editor/CloudAlertPreview.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { DataFrame, GrafanaTheme2 } from '@grafana/data/src';
-import { Icon, TagList, Tooltip, useStyles2 } from '@grafana/ui/src';
+import { Icon, TagList, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { labelsToTags } from '../../utils/labels';
 import { AlertStateTag } from '../rules/AlertStateTag';

public/app/features/alerting/unified/components/rule-editor/GrafanaAlertStatePicker.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import { Select } from '@grafana/ui';
+import { Select, SelectBaseProps } from '@grafana/ui';
-import { SelectBaseProps } from '@grafana/ui/src/components/Select/types';
 import { GrafanaAlertStateDecision } from 'app/types/unified-alerting-dto';
 
 type Props = Omit<SelectBaseProps<GrafanaAlertStateDecision>, 'options'> & {

public/app/features/alerting/unified/components/rule-editor/alert-rule-form/simplifiedRouting/route-settings/RouteSettings.tsx

@@ -5,7 +5,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { Field, FieldValidationMessage, InlineField, MultiSelect, Stack, Switch, Text, useStyles2 } from '@grafana/ui';
-import { MultiValueRemove, MultiValueRemoveProps } from '@grafana/ui/src/components/Select/MultiValue';
+import { MultiValueRemove, MultiValueRemoveProps } from '@grafana/ui/internal';
 import { RuleFormValues } from 'app/features/alerting/unified/types/rule-form';
 import {
   commonGroupByOptions,

public/app/features/alerting/unified/components/rules/RuleConfigStatus.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
 import { config } from '@grafana/runtime/src';
-import { Icon, Tooltip, useStyles2 } from '@grafana/ui/src';
+import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
 
 import { CombinedRule } from '../../../../../types/unified-alerting';
 import { checkEvaluationIntervalGlobalLimit } from '../../utils/config';

public/app/features/alerting/unified/home/PluginIntegrations.tsx

@@ -1,8 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data/';
-import { Stack, Text } from '@grafana/ui';
+import { Stack, Text, useStyles2 } from '@grafana/ui';
-import { useStyles2 } from '@grafana/ui/';
 
 import { useAlertingHomePageExtensions } from '../plugins/useAlertingHomePageExtensions';
 

public/app/features/alerting/unified/plugins/PluginOriginBadge.tsx

@@ -1,7 +1,7 @@
 import { useAsync } from 'react-use';
 
 import { Badge, IconSize, Tooltip } from '@grafana/ui';
-import { getSvgSize } from '@grafana/ui/src/components/Icon/utils';
+import { getSvgSize } from '@grafana/ui/internal';
 
 import { getPluginSettings } from '../../../plugins/pluginSettings';
 

public/app/features/browse-dashboards/components/NameCell.tsx

@@ -4,7 +4,7 @@ import Skeleton from 'react-loading-skeleton';
 import { GrafanaTheme2 } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
 import { Icon, IconButton, Link, Spinner, useStyles2, Text } from '@grafana/ui';
-import { getSvgSize } from '@grafana/ui/src/components/Icon/utils';
+import { getSvgSize } from '@grafana/ui/internal';
 import { t } from 'app/core/internationalization';
 import { getIconForItem } from 'app/features/search/service/utils';
 

public/app/features/canvas/elements/metricValue.tsx

@@ -6,8 +6,7 @@ import { of } from 'rxjs';
 import { DataFrame, FieldNamePickerConfigSettings, GrafanaTheme2, StandardEditorsRegistryItem } from '@grafana/data';
 import { TextDimensionMode } from '@grafana/schema';
 import { usePanelContext, useStyles2 } from '@grafana/ui';
-import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
+import { FieldNamePicker, frameHasName, getFrameFieldsDisplayNames } from '@grafana/ui/internal';
-import { frameHasName, getFrameFieldsDisplayNames } from '@grafana/ui/src/components/MatchersUI/utils';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';

public/app/features/dashboard-scene/sharing/ShareButton/share-externally/EmailShare/ConfigEmailSharing/ConfigEmailSharing.tsx

@@ -1,8 +1,7 @@
 import { useForm } from 'react-hook-form';
 
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { Button, Divider, Field, FieldSet, Icon, Stack, Tooltip } from '@grafana/ui';
+import { Button, Divider, Field, FieldSet, Icon, Input, Stack, Tooltip } from '@grafana/ui';
-import { Input } from '@grafana/ui/src/components/Input/Input';
 import { contextSrv } from 'app/core/core';
 import { t, Trans } from 'app/core/internationalization';
 import { publicDashboardApi, useAddRecipientMutation } from 'app/features/dashboard/api/publicDashboardApi';

public/app/features/dashboard-scene/sharing/ShareButton/share-externally/EmailShare/ConfigEmailSharing/EmailListConfiguration.tsx

@@ -2,8 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { Dropdown, Field, Icon, Menu, Spinner, Stack, Text, useStyles2 } from '@grafana/ui';
+import { Dropdown, Field, Icon, IconButton, Menu, Spinner, Stack, Text, useStyles2 } from '@grafana/ui';
-import { IconButton } from '@grafana/ui/';
 import { t } from 'app/core/internationalization';
 import {
   useReshareAccessToRecipientMutation,

public/app/features/dashboard-scene/sharing/ShareButton/share-externally/EmailShare/CreateEmailSharing.tsx

@@ -3,8 +3,7 @@ import { useForm } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { Button, Checkbox, FieldSet, Spinner, Stack } from '@grafana/ui';
+import { Button, Checkbox, FieldSet, Spinner, Stack, useStyles2 } from '@grafana/ui';
-import { useStyles2 } from '@grafana/ui/';
 import { contextSrv } from 'app/core/core';
 import { t, Trans } from 'app/core/internationalization';
 import { useCreatePublicDashboardMutation } from 'app/features/dashboard/api/publicDashboardApi';

public/app/features/dashboard-scene/sharing/ShareButton/share-externally/ShareConfiguration.tsx

@@ -4,8 +4,7 @@ import { Controller, useForm } from 'react-hook-form';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { sceneGraph } from '@grafana/scenes';
-import { FieldSet, Icon, Label, Spinner, Stack, Text, TimeRangeLabel, Tooltip, useStyles2 } from '@grafana/ui';
+import { FieldSet, Icon, Label, Spinner, Stack, Switch, Text, TimeRangeLabel, Tooltip, useStyles2 } from '@grafana/ui';
-import { Switch } from '@grafana/ui/src/components/Switch/Switch';
 import { contextSrv } from 'app/core/core';
 import { t, Trans } from 'app/core/internationalization';
 import { publicDashboardApi, useUpdatePublicDashboardMutation } from 'app/features/dashboard/api/publicDashboardApi';

public/app/features/dashboard-scene/sharing/ShareButton/share-snapshot/UpsertSnapshot.tsx

@@ -3,8 +3,7 @@ import { PropsWithChildren } from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { SceneObjectRef, VizPanel } from '@grafana/scenes';
-import { Alert, Button, Divider, Field, RadioButtonGroup, Stack, Text, useStyles2 } from '@grafana/ui';
+import { Alert, Button, Divider, Field, Input, RadioButtonGroup, Stack, Text, useStyles2 } from '@grafana/ui';
-import { Input } from '@grafana/ui/src/components/Input/Input';
 import { t, Trans } from 'app/core/internationalization';
 
 import { getExpireOptions } from '../../ShareSnapshotTab';

public/app/features/dashboard-scene/sharing/ShareDrawer/ShareDrawerConfirmAction.tsx

@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { Spinner, Stack, Text } from '@grafana/ui';
+import { IconButton, useStyles2, Spinner, Stack, Text } from '@grafana/ui';
-import { IconButton, useStyles2 } from '@grafana/ui/';
+import { ConfirmContent, ConfirmContentProps } from '@grafana/ui/internal';
-import { ConfirmContent, ConfirmContentProps } from '@grafana/ui/src/components/ConfirmModal/ConfirmContent';
 import { t } from 'app/core/internationalization';
 
 export function ShareDrawerConfirmAction({

public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { FieldConfigOptionsRegistry, GrafanaTheme2, ConfigOverrideRule } from '@grafana/data';
 import { Button, HorizontalGroup, Icon, useStyles2 } from '@grafana/ui';
-import { FieldMatcherUIRegistryItem } from '@grafana/ui/src/components/MatchersUI/types';
+import { FieldMatcherUIRegistryItem } from '@grafana/ui/internal';
 
 interface Props {
   isExpanded: boolean;

public/app/features/dashboard/components/PanelEditor/PanelHeaderCorner.tsx

@@ -5,8 +5,7 @@ import { renderMarkdown, LinkModelSupplier, ScopedVars, IconName } from '@grafan
 import { GrafanaTheme2 } from '@grafana/data/';
 import { selectors } from '@grafana/e2e-selectors';
 import { locationService, getTemplateSrv } from '@grafana/runtime';
-import { Tooltip, PopoverContent, Icon, Themeable2, withTheme2 } from '@grafana/ui';
+import { Tooltip, PopoverContent, Icon, Themeable2, withTheme2, useStyles2 } from '@grafana/ui';
-import { useStyles2 } from '@grafana/ui/';
 import { getTimeSrv, TimeSrv } from 'app/features/dashboard/services/TimeSrv';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { InspectTab } from 'app/features/inspector/types';

public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx

@@ -1,8 +1,7 @@
 import { useCallback } from 'react';
 
 import { locationService } from '@grafana/runtime';
-import { Button, VerticalGroup } from '@grafana/ui';
+import { Button, Stack } from '@grafana/ui';
-import { Layout } from '@grafana/ui/src/components/Layout/Layout';
 
 import { PanelEditorTabId } from './types';
 
@@ -16,15 +15,17 @@ export function PanelNotSupported({ message }: Props): JSX.Element {
   }, []);
 
   return (
-    <Layout justify="center" style={{ marginTop: '100px' }}>
+    <div style={{ marginTop: '100px' }}>
-      <VerticalGroup spacing="md">
+      <Stack direction="row" justifyContent="center">
-        <h2>{message}</h2>
+        <Stack direction="column" gap={2}>
-        <div>
+          <h2>{message}</h2>
-          <Button size="md" variant="secondary" icon="arrow-left" onClick={onBackToQueries}>
+          <div>
-            Go back to Queries
+            <Button size="md" variant="secondary" icon="arrow-left" onClick={onBackToQueries}>
-          </Button>
+              Go back to Queries
-        </div>
+            </Button>
-      </VerticalGroup>
+          </div>
-    </Layout>
+        </Stack>
+      </Stack>
+    </div>
   );
 }

public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx

@@ -4,8 +4,7 @@ import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2, PanelData, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, FilterInput, RadioButtonGroup, ScrollContainer, useStyles2 } from '@grafana/ui';
+import { Button, Field, FilterInput, RadioButtonGroup, ScrollContainer, useStyles2 } from '@grafana/ui';
-import { Field } from '@grafana/ui/src/components/Forms/Field';
 import { LS_VISUALIZATION_SELECT_TAB_KEY } from 'app/core/constants';
 import { PanelLibraryOptionsGroup } from 'app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup';
 import { VisualizationSuggestions } from 'app/features/panel/components/VizTypePicker/VisualizationSuggestions';

public/app/features/dashboard/components/PublicDashboardNotAvailable/PublicDashboardNotAvailable.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { useStyles2 } from '@grafana/ui/src';
+import { useStyles2 } from '@grafana/ui';
 
 import { Branding } from '../../../../core/components/Branding/Branding';
 import { getLoginStyles } from '../../../../core/components/Login/LoginLayout';

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.tsx

@@ -9,12 +9,12 @@ import {
   Field,
   HorizontalGroup,
   Input,
+  Stack,
   Label,
   ModalsController,
   Switch,
   useStyles2,
-} from '@grafana/ui/src';
+} from '@grafana/ui';
-import { Layout } from '@grafana/ui/src/components/Layout/Layout';
 import { Trans, t } from 'app/core/internationalization';
 import {
   useDeletePublicDashboardMutation,
@@ -167,7 +167,7 @@ export function ConfigPublicDashboardBase({
       </Field>
 
       <Field className={styles.fieldSpace}>
-        <Layout>
+        <Stack>
           <Switch
             {...register('isPaused')}
             disabled={disableInputs}
@@ -186,7 +186,7 @@ export function ConfigPublicDashboardBase({
           >
             <Trans i18nKey="public-dashboard.config.pause-sharing-dashboard-label">Pause sharing dashboard</Trans>
           </Label>
-        </Layout>
+        </Stack>
       </Field>
 
       <Field className={styles.fieldSpace}>
@@ -207,10 +207,10 @@ export function ConfigPublicDashboardBase({
         </SettingsBar>
       </Field>
 
-      <Layout
+      <Stack
-        orientation={isDesktop ? 0 : 1}
+        direction={isDesktop ? 'row' : 'column'}
-        justify={isDesktop ? 'flex-end' : 'flex-start'}
+        justifyContent={isDesktop ? 'flex-end' : 'flex-start'}
-        align={isDesktop ? 'center' : 'normal'}
+        alignItems={isDesktop ? 'center' : 'stretch'}
       >
         <HorizontalGroup justify="flex-end">
           <Button
@@ -225,7 +225,7 @@ export function ConfigPublicDashboardBase({
             <Trans i18nKey="public-dashboard.config.revoke-public-URL-button">Revoke public URL</Trans>
           </Button>
         </HorizontalGroup>
-      </Layout>
+      </Stack>
     </div>
   );
 }

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/Configuration.tsx

@@ -2,8 +2,7 @@ import { UseFormRegister } from 'react-hook-form';
 
 import { TimeRange } from '@grafana/data/src';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { FieldSet, Label, Switch, TimeRangeInput, VerticalGroup } from '@grafana/ui/src';
+import { FieldSet, Label, Switch, TimeRangeInput, Stack, VerticalGroup } from '@grafana/ui';
-import { Layout } from '@grafana/ui/src/components/Layout/Layout';
 import { Trans, t } from 'app/core/internationalization';
 import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions';
 
@@ -26,7 +25,7 @@ export const Configuration = ({
     <>
       <FieldSet disabled={disabled}>
         <VerticalGroup spacing="md">
-          <Layout orientation={1} spacing="xs" justify="space-between">
+          <Stack direction="column" gap={0.5} justifyContent="space-between">
             <Label
               description={t(
                 'public-dashboard.settings-configuration.default-time-range-label-desc',
@@ -38,8 +37,8 @@ export const Configuration = ({
               </Trans>
             </Label>
             <TimeRangeInput value={timeRange} disabled onChange={() => {}} />
-          </Layout>
+          </Stack>
-          <Layout orientation={0} spacing="sm">
+          <Stack direction="row" gap={0.5}>
             <Switch
               {...register('isTimeSelectionEnabled')}
               data-testid={selectors.EnableTimeRangeSwitch}
@@ -60,8 +59,8 @@ export const Configuration = ({
                 Time range picker enabled
               </Trans>
             </Label>
-          </Layout>
+          </Stack>
-          <Layout orientation={0} spacing="sm">
+          <Stack direction="row" gap={0.5}>
             <Switch
               {...register('isAnnotationsEnabled')}
               onChange={(e) => {
@@ -80,7 +79,7 @@ export const Configuration = ({
             >
               <Trans i18nKey="public-dashboard.settings-configuration.show-annotations-label">Show annotations</Trans>
             </Label>
-          </Layout>
+          </Stack>
         </VerticalGroup>
       </FieldSet>
     </>

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx

@@ -3,7 +3,7 @@ import { UseFormRegister } from 'react-hook-form';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { Checkbox, FieldSet, HorizontalGroup, LinkButton, useStyles2, VerticalGroup } from '@grafana/ui/src';
+import { Checkbox, FieldSet, HorizontalGroup, LinkButton, useStyles2, VerticalGroup } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { SharePublicDashboardAcknowledgmentInputs } from './CreatePublicDashboard';

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/NoUpsertPermissionsAlert.tsx

@@ -1,6 +1,6 @@
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 import { config } from '@grafana/runtime';
-import { Alert } from '@grafana/ui/src';
+import { Alert } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 
 const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/SaveDashboardChangesAlert.tsx

@@ -1,4 +1,4 @@
-import { Alert } from '@grafana/ui/src';
+import { Alert } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
 export const SaveDashboardChangesAlert = () => (

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedDataSourcesAlert.tsx

@@ -4,7 +4,7 @@ import cx from 'classnames';
 import { GrafanaTheme2 } from '@grafana/data/src';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
 import { config } from '@grafana/runtime';
-import { Alert, useStyles2 } from '@grafana/ui/src';
+import { Alert, useStyles2 } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 
 const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedTemplateVariablesAlert.tsx

@@ -1,5 +1,5 @@
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src';
-import { Alert } from '@grafana/ui/src';
+import { Alert } from '@grafana/ui';
 import { Trans, t } from 'app/core/internationalization';
 
 const selectors = e2eSelectors.pages.ShareDashboardModal.PublicDashboard;

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboard.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { Spinner, useStyles2 } from '@grafana/ui/src';
+import { Spinner, useStyles2 } from '@grafana/ui';
 import { useGetPublicDashboardQuery } from 'app/features/dashboard/api/publicDashboardApi';
 import { publicDashboardPersisted } from 'app/features/dashboard/components/ShareModal/SharePublicDashboard/SharePublicDashboardUtils';
 import { ShareModalTabProps } from 'app/features/dashboard/components/ShareModal/types';

public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { AnnotationQuery, EventBus, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
-import { LoadingIndicator } from '@grafana/ui/src/components/PanelChrome/LoadingIndicator';
+import { LoadingIndicator } from '@grafana/ui/internal';
 
 import { AnnotationQueryFinished, AnnotationQueryStarted } from '../../../../types/events';
 import { getDashboardQueryRunner } from '../../../query/state/DashboardQueryRunner/DashboardQueryRunner';

public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx

@@ -6,8 +6,8 @@ import { GrafanaTheme2, ScopedVars } from '@grafana/data';
 import { sanitize, sanitizeUrl } from '@grafana/data/src/text/sanitize';
 import { selectors } from '@grafana/e2e-selectors';
 import { DashboardLink } from '@grafana/schema';
-import { Dropdown, Icon, Button, Menu, ScrollContainer, useStyles2 } from '@grafana/ui';
+import { Dropdown, Icon, LinkButton, Button, Menu, ScrollContainer, useStyles2 } from '@grafana/ui';
-import { ButtonLinkProps, LinkButton } from '@grafana/ui/src/components/Button';
+import { ButtonLinkProps } from '@grafana/ui/internal';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { DashboardSearchItem } from 'app/features/search/types';
 

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderNotice.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2, QueryResultMetaNotice } from '@grafana/data';
 import { Icon, ToolbarButton, Tooltip, useStyles2 } from '@grafana/ui';
-import { getFocusStyles, getMouseFocusStyles } from '@grafana/ui/src/themes/mixins';
+import { getFocusStyles, getMouseFocusStyles } from '@grafana/ui/internal';
 
 interface Props {
   notice: QueryResultMetaNotice;

public/app/features/dashboard/state/DashboardMigrator.ts

@@ -32,7 +32,7 @@ import { mergeTransformer } from '@grafana/data/src/transformations/transformers
 import { getDataSourceSrv, setDataSourceSrv } from '@grafana/runtime';
 import { DataTransformerConfig } from '@grafana/schema';
 import { AxisPlacement, GraphFieldConfig } from '@grafana/ui';
-import { migrateTableDisplayModeToCellOptions } from '@grafana/ui/src/components/Table/utils';
+import { migrateTableDisplayModeToCellOptions } from '@grafana/ui/internal';
 import { getAllOptionEditors, getAllStandardFieldConfigs } from 'app/core/components/OptionsUI/registry';
 import { config } from 'app/core/config';
 import {

public/app/features/dimensions/editors/BackgroundSizeEditor.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 
 import { SelectableValue, StandardEditorProps } from '@grafana/data';
-import { InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui/src';
+import { InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui';
 import { BackgroundImageSize } from 'app/plugins/panel/canvas/panelcfg.gen';
 
 const options: Array<SelectableValue<BackgroundImageSize>> = [

public/app/features/dimensions/editors/ColorDimensionEditor.tsx

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { GrafanaTheme2, SelectableValue, StandardEditorProps, FieldNamePickerBaseNameMode } from '@grafana/data';
 import { ColorDimensionConfig } from '@grafana/schema';
 import { Select, ColorPicker, useStyles2 } from '@grafana/ui';
-import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/src/components/MatchersUI/utils';
+import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/internal';
 
 const fixedColorOption: SelectableValue<string> = {
   label: 'Fixed color',

public/app/features/dimensions/editors/ResourceDimensionEditor.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { FieldNamePickerConfigSettings, StandardEditorProps, StandardEditorsRegistryItem } from '@grafana/data';
 import { ResourceDimensionConfig, ResourceDimensionMode } from '@grafana/schema';
 import { InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui';
-import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
+import { FieldNamePicker } from '@grafana/ui/internal';
 
 import { getPublicOrAbsoluteUrl, ResourceFolderName } from '..';
 import { MediaType, ResourceDimensionOptions, ResourcePickerSize } from '../types';

public/app/features/dimensions/editors/ResourcePicker.tsx

@@ -14,7 +14,7 @@ import {
   useStyles2,
   useTheme2,
 } from '@grafana/ui';
-import { closePopover } from '@grafana/ui/src/utils/closePopover';
+import { closePopover } from '@grafana/ui/internal';
 import { SanitizedSVG } from 'app/core/components/SVG/SanitizedSVG';
 
 import { getPublicOrAbsoluteUrl } from '../resource';

public/app/features/dimensions/editors/ScalarDimensionEditor.tsx

@@ -4,7 +4,7 @@ import { useCallback } from 'react';
 import { FieldType, GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
 import { ScalarDimensionMode, ScalarDimensionConfig } from '@grafana/schema';
 import { InlineField, InlineFieldRow, RadioButtonGroup, Select, useStyles2 } from '@grafana/ui';
-import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/src/components/MatchersUI/utils';
+import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/internal';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 
 import { ScalarDimensionOptions } from '../types';

public/app/features/dimensions/editors/ScaleDimensionEditor.tsx

@@ -4,7 +4,7 @@ import { useCallback, useMemo } from 'react';
 import { GrafanaTheme2, SelectableValue, StandardEditorProps } from '@grafana/data';
 import { ScaleDimensionConfig } from '@grafana/schema';
 import { InlineField, InlineFieldRow, Select, useStyles2 } from '@grafana/ui';
-import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/src/components/MatchersUI/utils';
+import { useFieldDisplayNames, useSelectOptions } from '@grafana/ui/internal';
 import { NumberInput } from 'app/core/components/OptionsUI/NumberInput';
 
 import { validateScaleOptions, validateScaleConfig } from '../scale';

public/app/features/dimensions/editors/TextDimensionEditor.tsx

@@ -8,7 +8,7 @@ import {
 } from '@grafana/data';
 import { TextDimensionConfig, TextDimensionMode } from '@grafana/schema';
 import { Button, InlineField, InlineFieldRow, RadioButtonGroup } from '@grafana/ui';
-import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
+import { FieldNamePicker } from '@grafana/ui/internal';
 import { StringValueEditor } from 'app/core/components/OptionsUI/string';
 
 import { TextDimensionOptions } from '../types';

public/app/features/explore/ContentOutline/ContentOutlineItemButton.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { IconName, isIconName, GrafanaTheme2 } from '@grafana/data';
 import { Button, Icon, Tooltip, useTheme2 } from '@grafana/ui';
-import { TooltipPlacement } from '@grafana/ui/src/components/Tooltip';
+import { TooltipPlacement } from '@grafana/ui/internal';
 
 type CommonProps = {
   contentOutlineExpanded?: boolean;

public/app/features/explore/Explore.tsx

@@ -29,7 +29,7 @@ import {
   Themeable2,
   withTheme2,
 } from '@grafana/ui';
-import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR } from '@grafana/ui/src/components/Table/types';
+import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR } from '@grafana/ui/internal';
 import { supportedFeatures } from 'app/core/history/richHistoryStorageProvider';
 import { MIXED_DATASOURCE_NAME } from 'app/plugins/datasource/mixed/MixedDataSource';
 import { StoreState } from 'app/types';

public/app/features/explore/Logs/Logs.tsx

@@ -48,7 +48,7 @@ import {
   Themeable2,
   withTheme2,
 } from '@grafana/ui';
-import { mapMouseEventToMode } from '@grafana/ui/src/components/VizLegend/utils';
+import { mapMouseEventToMode } from '@grafana/ui/internal';
 import { Trans } from 'app/core/internationalization';
 import store from 'app/core/store';
 import { createAndCopyShortLink, getLogsPermalinkRange } from 'app/core/utils/shortLinks';

public/app/features/explore/Logs/LogsColumnSearch.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { Field, Input, useTheme2 } from '@grafana/ui/src';
+import { Field, Input, useTheme2 } from '@grafana/ui';
 
 function getStyles(theme: GrafanaTheme2) {
   return {

public/app/features/explore/Logs/LogsTable.tsx

@@ -19,7 +19,7 @@ import {
 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { AdHocFilterItem, Table } from '@grafana/ui';
-import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR } from '@grafana/ui/src/components/Table/types';
+import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR } from '@grafana/ui/internal';
 import { LogsFrame } from 'app/features/logs/logsFrame';
 
 import { getFieldLinksForExplore } from '../utils/links';

public/app/features/explore/Logs/LogsTableActiveFields.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import { DragDropContext, Draggable, DraggableProvided, Droppable, DropResult } from '@hello-pangea/dnd';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { useTheme2 } from '@grafana/ui/src';
+import { useTheme2 } from '@grafana/ui';
 
 import { LogsTableEmptyFields } from './LogsTableEmptyFields';
 import { LogsTableNavField } from './LogsTableNavField';

public/app/features/explore/Logs/LogsTableAvailableFields.tsx

@@ -1,4 +1,4 @@
-import { useTheme2 } from '@grafana/ui/src';
+import { useTheme2 } from '@grafana/ui';
 
 import { getLogsFieldsStyles } from './LogsTableActiveFields';
 import { LogsTableEmptyFields } from './LogsTableEmptyFields';

public/app/features/explore/Logs/LogsTableMultiSelect.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
-import { useTheme2 } from '@grafana/ui/src';
+import { useTheme2 } from '@grafana/ui';
 
 import { LogsTableActiveFields } from './LogsTableActiveFields';
 import { LogsTableAvailableFields } from './LogsTableAvailableFields';

public/app/features/explore/Logs/LogsTableWrap.tsx

@@ -14,7 +14,7 @@ import {
   TimeRange,
 } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime/src';
-import { InlineField, Select, Themeable2 } from '@grafana/ui/';
+import { InlineField, Select, Themeable2 } from '@grafana/ui';
 
 import { parseLogsFrame } from '../../logs/logsFrame';
 

public/app/features/explore/PrometheusListView/ItemLabels.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { Field, GrafanaTheme2 } from '@grafana/data/';
 import { InstantQueryRefIdIndex } from '@grafana/prometheus';
-import { useStyles2 } from '@grafana/ui/';
+import { useStyles2 } from '@grafana/ui';
 
 import { rawListItemColumnWidth } from './RawListItem';
 

public/app/features/explore/PrometheusListView/ItemValues.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data/';
-import { useStyles2 } from '@grafana/ui/';
+import { useStyles2 } from '@grafana/ui';
 
 import { rawListItemColumnWidth, rawListPaddingToHoldSpaceForCopyIcon, RawListValue } from './RawListItem';
 import { RawPrometheusListItemEmptyValue } from './utils/getRawPrometheusListItemsFromDataFrame';

public/app/features/explore/PrometheusListView/RawListContainer.tsx

@@ -6,7 +6,7 @@ import { VariableSizeList as List } from 'react-window';
 
 import { DataFrame, Field as DataFrameField } from '@grafana/data/';
 import { reportInteraction } from '@grafana/runtime/src';
-import { Field, Switch } from '@grafana/ui/';
+import { Field, Switch } from '@grafana/ui';
 
 import { ItemLabels } from './ItemLabels';
 import RawListItem from './RawListItem';

public/app/features/explore/PrometheusListView/RawListItem.tsx

@@ -4,7 +4,7 @@ import { useCopyToClipboard } from 'react-use';
 import { Field, GrafanaTheme2 } from '@grafana/data/';
 import { isValidLegacyName, utf8Support } from '@grafana/prometheus/src/utf8_support';
 import { reportInteraction } from '@grafana/runtime/src';
-import { IconButton, useStyles2 } from '@grafana/ui/';
+import { IconButton, useStyles2 } from '@grafana/ui';
 
 import { ItemLabels } from './ItemLabels';
 import { ItemValues } from './ItemValues';

public/app/features/explore/PrometheusListView/RawListItemAttributes.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data/';
-import { useStyles2 } from '@grafana/ui/';
+import { useStyles2 } from '@grafana/ui';
 
 import { RawListValue } from './RawListItem';
 

public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/NextPrevResult.tsx

@@ -20,7 +20,7 @@ import * as React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { config, reportInteraction } from '@grafana/runtime';
 import { Icon, PopoverContent, Tooltip, useTheme2 } from '@grafana/ui';
-import { getButtonStyles } from '@grafana/ui/src/components/Button';
+import { getButtonStyles } from '@grafana/ui/internal';
 
 import { Trace } from '../../types';
 

public/app/features/explore/TraceView/components/TracePageHeader/SearchBar/TracePageSearchBar.tsx

@@ -17,7 +17,7 @@ import { memo, Dispatch, SetStateAction, useMemo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Switch, useStyles2 } from '@grafana/ui';
-import { getButtonStyles } from '@grafana/ui/src/components/Button';
+import { getButtonStyles } from '@grafana/ui/internal';
 
 import { SearchProps } from '../../../useSearch';
 import { Trace } from '../../types';

public/app/features/library-panels/components/LibraryPanelCard/LibraryPanelCard.tsx

@@ -5,7 +5,7 @@ import Skeleton from 'react-loading-skeleton';
 import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { Icon, Link, useStyles2 } from '@grafana/ui';
-import { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';
+import { SkeletonComponent, attachSkeleton } from '@grafana/ui/unstable';
 import { getPanelPluginNotFound } from 'app/features/panel/components/PanelPluginError';
 import { PanelTypeCard } from 'app/features/panel/components/VizTypePicker/PanelTypeCard';
 

public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardButton.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { config } from '@grafana/runtime';
-import { Button, ModalsController, ButtonProps } from '@grafana/ui/src';
+import { Button, ModalsController, ButtonProps } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import { useDeletePublicDashboardMutation } from 'app/features/dashboard/api/publicDashboardApi';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';

public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data/src';
 import { config } from '@grafana/runtime';
-import { ConfirmModal, useStyles2 } from '@grafana/ui/src';
+import { ConfirmModal, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 
 const Body = () => {

public/app/features/manage-dashboards/components/SnapshotListTableRow.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import Skeleton from 'react-loading-skeleton';
 
 import { Button, LinkButton, useStyles2 } from '@grafana/ui';
-import { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';
+import { SkeletonComponent, attachSkeleton } from '@grafana/ui/unstable';
 import { t, Trans } from 'app/core/internationalization';
 import { contextSrv } from 'app/core/services/context_srv';
 import { Snapshot } from 'app/features/dashboard/services/SnapshotSrv';

public/app/features/migrate-to-cloud/onprem/NameCell.tsx

@@ -5,7 +5,7 @@ import Skeleton from 'react-loading-skeleton';
 import { DataSourceInstanceSettings } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { CellProps, Stack, Text, Icon, useStyles2 } from '@grafana/ui';
-import { getSvgSize } from '@grafana/ui/src/components/Icon/utils';
+import { getSvgSize } from '@grafana/ui/internal';
 import { Trans } from 'app/core/internationalization';
 import { useGetFolderQuery } from 'app/features/browse-dashboards/api/browseDashboardsAPI';
 

public/app/features/migrate-to-cloud/shared/AlertWithTraceID.tsx

@@ -1,6 +1,6 @@
 import { isFetchError } from '@grafana/runtime';
 import { Alert, Stack, Text } from '@grafana/ui';
-import { Props as AlertProps } from '@grafana/ui/src/components/Alert/Alert';
+import { AlertProps } from '@grafana/ui/internal';
 
 interface AlertWithTraceIDProps extends AlertProps {
   error?: unknown;

public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx

@@ -6,7 +6,7 @@ import Skeleton from 'react-loading-skeleton';
 import { GrafanaTheme2, isUnsignedPluginSignature, PanelPluginMeta, PluginState } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { IconButton, PluginSignatureBadge, useStyles2 } from '@grafana/ui';
-import { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';
+import { SkeletonComponent, attachSkeleton } from '@grafana/ui/unstable';
 import { PluginStateInfo } from 'app/features/plugins/components/PluginStateInfo';
 
 interface Props {

public/app/features/playlist/PlaylistCard.tsx

@@ -3,7 +3,7 @@ import Skeleton from 'react-loading-skeleton';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Button, Card, LinkButton, ModalsController, Stack, useStyles2 } from '@grafana/ui';
-import { attachSkeleton, SkeletonComponent } from '@grafana/ui/src/unstable';
+import { attachSkeleton, SkeletonComponent } from '@grafana/ui/unstable';
 import { t, Trans } from 'app/core/internationalization';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DashNavButton } from 'app/features/dashboard/components/DashNav/DashNavButton';

public/app/features/playlist/PlaylistPageList.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
-import { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';
+import { SkeletonComponent, attachSkeleton } from '@grafana/ui/unstable';
 
 import { PlaylistCard } from './PlaylistCard';
 import { Playlist } from './types';

public/app/features/plugins/admin/components/PluginListItem.tsx

@@ -4,7 +4,7 @@ import Skeleton from 'react-loading-skeleton';
 import { GrafanaTheme2 } from '@grafana/data';
 import { locationService, reportInteraction } from '@grafana/runtime';
 import { Badge, Icon, Stack, useStyles2 } from '@grafana/ui';
-import { SkeletonComponent, attachSkeleton } from '@grafana/ui/src/unstable';
+import { SkeletonComponent, attachSkeleton } from '@grafana/ui/unstable';
 
 import { CatalogPlugin, PluginIconName } from '../types';
 

public/app/features/plugins/loader/sharedDependencies.ts

@@ -54,7 +54,7 @@ export const sharedDependenciesMap = {
   '@grafana/runtime/unstable': () => import('@grafana/runtime/src/unstable'),
   '@grafana/slate-react': () => import('slate-react'),
   '@grafana/ui': grafanaUI,
-  '@grafana/ui/unstable': () => import('@grafana/ui/src/unstable'),
+  '@grafana/ui/unstable': () => import('@grafana/ui/unstable'),
   '@kusto/monaco-kusto': () => import('@kusto/monaco-kusto'),
   'app/core/app_events': {
     default: appEvents,

public/app/features/sandbox/BenchmarksPage.tsx

@@ -1,4 +1,4 @@
-import { EmotionPerfTest } from '@grafana/ui/src/components/ThemeDemos/EmotionPerfTest';
+import { EmotionPerfTest } from '@grafana/ui/internal';
 
 export const BenchmarksPage = () => {
   return <EmotionPerfTest />;

public/app/features/search/page/components/SearchResultsTable.tsx

@@ -9,8 +9,7 @@ import { Observable } from 'rxjs';
 import { Field, GrafanaTheme2 } from '@grafana/data';
 import { TableCellHeight } from '@grafana/schema';
 import { useStyles2, useTheme2 } from '@grafana/ui';
-import { TableCell } from '@grafana/ui/src/components/Table/TableCell';
+import { useTableStyles, TableCell } from '@grafana/ui/internal';
-import { useTableStyles } from '@grafana/ui/src/components/Table/styles';
 import { useCustomFlexLayout } from 'app/features/browse-dashboards/components/customFlexTableLayout';
 
 import { useSearchKeyboardNavigation } from '../../hooks/useSearchKeyboardSelection';