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
2025-03-12 14:14:32 +01:00
parent dcba71a0b0
commit c9f563e576
182 changed files with 527 additions and 743 deletions
@@ -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

@@ -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
@@ -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",
@@ -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';
@@ -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';
@@ -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 { 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 { UPlotChart, AxisProps, Renderers, UPlotConfigBuilder, ScaleProps, pluginLog } from '@grafana/ui/internal';

 import { GraphNGLegendEvent, XYFieldMatchers } from './types';
 import { preparePlotFrame as defaultPreparePlotFrame } from './utils';
@@ -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;
@@ -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 { Text } from '@grafana/ui/src/components/Text/Text';
+import { IconButton, useStyles2, Text } from '@grafana/ui';
 import { Indent } from 'app/core/components/Indent/Indent';
 import { Trans } from 'app/core/internationalization';
 import { childrenByParentUIDSelector, rootItemsSelector } from 'app/features/browse-dashboards/state';
@@ -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';
@@ -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;
@@ -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';

@@ -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] : [];

@@ -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'> {}

@@ -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';

@@ -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';
@@ -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';
@@ -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';

@@ -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';

@@ -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 { UPlotConfigBuilder } from '@grafana/ui/src/components/uPlot/config/UPlotConfigBuilder';
-import { withTheme2 } from '@grafana/ui/src/themes/ThemeContext';
+import { withTheme2 } from '@grafana/ui';
+import { hasVisibleLegendSeries, PlotLegend, UPlotConfigBuilder } from '@grafana/ui/internal';

 import { GraphNG, GraphNGProps, PropDiffFn } from '../GraphNG/GraphNG';

@@ -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 { getScaleGradientFn } from '@grafana/ui/src/components/uPlot/config/gradientFills';
-import { buildScaleKey } from '@grafana/ui/src/components/uPlot/internal';
-import { getStackingGroups, preparePlotData2 } from '@grafana/ui/src/components/uPlot/utils';
+import {
+  UPlotConfigBuilder,
+  UPlotConfigPrepFn,
+  getScaleGradientFn,
+  buildScaleKey,
+  getStackingGroups,
+  preparePlotData2,
+} from '@grafana/ui/internal';

 const defaultFormatter = (v: any, decimals: DecimalCount = 1) => (v == null ? '-' : v.toFixed(decimals));

@@ -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';

@@ -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';
@@ -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';
@@ -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 { Field } from '@grafana/ui/src/components/Forms/Field';
-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 { Switch, Field, InlineField, InlineFieldRow, RadioButtonGroup, JSONFormatter, useStyles2 } from '@grafana/ui';
+import { t } from 'app/core/internationalization';

 import { HTMLElementType, SuggestionsInput } from '../transformers/suggestionsInput/SuggestionsInput';

@@ -1,8 +1,7 @@
 import { useState } from 'react';

 import { Action, DataFrame, VariableSuggestion } from '@grafana/data';
-import { Button } from '@grafana/ui/src/components/Button';
-import { Modal } from '@grafana/ui/src/components/Modal/Modal';
+import { Button, Modal } from '@grafana/ui';
 import { Trans } from 'app/core/internationalization';

 import { ActionEditor } from './ActionEditor';
@@ -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 { 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 { IconButton, Input, Stack, Select, useStyles2 } from '@grafana/ui';

 import { SuggestionsInput } from '../transformers/suggestionsInput/SuggestionsInput';

@@ -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';
@@ -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';

@@ -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,
@@ -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';

@@ -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';

@@ -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';
@@ -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';
@@ -1,8 +1,7 @@
 import { useMemo } from 'react';

 import { SelectableValue } from '@grafana/data';
-import { Select } from '@grafana/ui';
-import { SelectBaseProps } from '@grafana/ui/src/components/Select/types';
+import { Select, SelectBaseProps } from '@grafana/ui';
 import { GrafanaAlertStateDecision } from 'app/types/unified-alerting-dto';

 type Props = Omit<SelectBaseProps<GrafanaAlertStateDecision>, 'options'> & {
@@ -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,
@@ -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';
@@ -1,8 +1,7 @@
 import { css } from '@emotion/css';

 import { GrafanaTheme2 } from '@grafana/data/';
-import { Stack, Text } from '@grafana/ui';
-import { useStyles2 } from '@grafana/ui/';
+import { Stack, Text, useStyles2 } from '@grafana/ui';

 import { useAlertingHomePageExtensions } from '../plugins/useAlertingHomePageExtensions';

@@ -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';

@@ -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';

@@ -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 { frameHasName, getFrameFieldsDisplayNames } from '@grafana/ui/src/components/MatchersUI/utils';
+import { FieldNamePicker, frameHasName, getFrameFieldsDisplayNames } from '@grafana/ui/internal';
 import { DimensionContext } from 'app/features/dimensions/context';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
@@ -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 { Input } from '@grafana/ui/src/components/Input/Input';
+import { Button, Divider, Field, FieldSet, Icon, Input, Stack, Tooltip } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { t, Trans } from 'app/core/internationalization';
 import { publicDashboardApi, useAddRecipientMutation } from 'app/features/dashboard/api/publicDashboardApi';
@@ -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 { IconButton } from '@grafana/ui/';
+import { Dropdown, Field, Icon, IconButton, Menu, Spinner, Stack, Text, useStyles2 } from '@grafana/ui';
 import { t } from 'app/core/internationalization';
 import {
  useReshareAccessToRecipientMutation,
@@ -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 { useStyles2 } from '@grafana/ui/';
+import { Button, Checkbox, FieldSet, Spinner, Stack, 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';
@@ -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 { Switch } from '@grafana/ui/src/components/Switch/Switch';
+import { FieldSet, Icon, Label, Spinner, Stack, Switch, Text, TimeRangeLabel, Tooltip, useStyles2 } from '@grafana/ui';
 import { contextSrv } from 'app/core/core';
 import { t, Trans } from 'app/core/internationalization';
 import { publicDashboardApi, useUpdatePublicDashboardMutation } from 'app/features/dashboard/api/publicDashboardApi';
@@ -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 { Input } from '@grafana/ui/src/components/Input/Input';
+import { Alert, Button, Divider, Field, Input, RadioButtonGroup, Stack, Text, useStyles2 } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';

 import { getExpireOptions } from '../../ShareSnapshotTab';
@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';

 import { GrafanaTheme2 } from '@grafana/data';
-import { Spinner, Stack, Text } from '@grafana/ui';
-import { IconButton, useStyles2 } from '@grafana/ui/';
-import { ConfirmContent, ConfirmContentProps } from '@grafana/ui/src/components/ConfirmModal/ConfirmContent';
+import { IconButton, useStyles2, Spinner, Stack, Text } from '@grafana/ui';
+import { ConfirmContent, ConfirmContentProps } from '@grafana/ui/internal';
 import { t } from 'app/core/internationalization';

 export function ShareDrawerConfirmAction({
@@ -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;
@@ -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 { useStyles2 } from '@grafana/ui/';
+import { Tooltip, PopoverContent, Icon, Themeable2, withTheme2, 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';
@@ -1,8 +1,7 @@
 import { useCallback } from 'react';

 import { locationService } from '@grafana/runtime';
-import { Button, VerticalGroup } from '@grafana/ui';
-import { Layout } from '@grafana/ui/src/components/Layout/Layout';
+import { Button, Stack } from '@grafana/ui';

 import { PanelEditorTabId } from './types';

@@ -16,15 +15,17 @@ export function PanelNotSupported({ message }: Props): JSX.Element {
  }, []);

  return (
-    <Layout justify="center" style={{ marginTop: '100px' }}>
-      <VerticalGroup spacing="md">
-        <h2>{message}</h2>
-        <div>
-          <Button size="md" variant="secondary" icon="arrow-left" onClick={onBackToQueries}>
-            Go back to Queries
-          </Button>
-        </div>
-      </VerticalGroup>
-    </Layout>
+    <div style={{ marginTop: '100px' }}>
+      <Stack direction="row" justifyContent="center">
+        <Stack direction="column" gap={2}>
+          <h2>{message}</h2>
+          <div>
+            <Button size="md" variant="secondary" icon="arrow-left" onClick={onBackToQueries}>
+              Go back to Queries
+            </Button>
+          </div>
+        </Stack>
+      </Stack>
+    </div>
  );
 }
@@ -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 { Field } from '@grafana/ui/src/components/Forms/Field';
+import { Button, Field, FilterInput, RadioButtonGroup, ScrollContainer, useStyles2 } from '@grafana/ui';
 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';
@@ -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';
@@ -9,12 +9,12 @@ import {
  Field,
  HorizontalGroup,
  Input,
+  Stack,
  Label,
  ModalsController,
  Switch,
  useStyles2,
-} from '@grafana/ui/src';
-import { Layout } from '@grafana/ui/src/components/Layout/Layout';
+} from '@grafana/ui';
 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
-        orientation={isDesktop ? 0 : 1}
-        justify={isDesktop ? 'flex-end' : 'flex-start'}
-        align={isDesktop ? 'center' : 'normal'}
+      <Stack
+        direction={isDesktop ? 'row' : 'column'}
+        justifyContent={isDesktop ? 'flex-end' : 'flex-start'}
+        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>
  );
 }
@@ -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 { Layout } from '@grafana/ui/src/components/Layout/Layout';
+import { FieldSet, Label, Switch, TimeRangeInput, Stack, VerticalGroup } from '@grafana/ui';
 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>
-          <Layout orientation={0} spacing="sm">
+          </Stack>
+          <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>
-          <Layout orientation={0} spacing="sm">
+          </Stack>
+          <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>
    </>
@@ -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';
@@ -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;
@@ -1,4 +1,4 @@
-import { Alert } from '@grafana/ui/src';
+import { Alert } from '@grafana/ui';
 import { t } from 'app/core/internationalization';

 export const SaveDashboardChangesAlert = () => (
@@ -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;
@@ -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;
@@ -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';
@@ -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';
@@ -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 { ButtonLinkProps, LinkButton } from '@grafana/ui/src/components/Button';
+import { Dropdown, Icon, LinkButton, Button, Menu, ScrollContainer, useStyles2 } from '@grafana/ui';
+import { ButtonLinkProps } from '@grafana/ui/internal';
 import { getBackendSrv } from 'app/core/services/backend_srv';
 import { DashboardSearchItem } from 'app/features/search/types';

@@ -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;
@@ -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 {
@@ -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>> = [
@@ -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',
@@ -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';
@@ -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';
@@ -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';
@@ -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';
@@ -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';
@@ -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;
@@ -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';
@@ -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';
@@ -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 {
@@ -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';
@@ -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';
@@ -1,4 +1,4 @@
-import { useTheme2 } from '@grafana/ui/src';
+import { useTheme2 } from '@grafana/ui';

 import { getLogsFieldsStyles } from './LogsTableActiveFields';
 import { LogsTableEmptyFields } from './LogsTableEmptyFields';
@@ -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';
@@ -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';

@@ -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';

@@ -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';
@@ -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';
@@ -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';
@@ -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';

@@ -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';

@@ -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';
@@ -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';

@@ -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';
@@ -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 = () => {
@@ -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';
@@ -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';

@@ -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;
@@ -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 {
@@ -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';
@@ -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';
@@ -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';

@@ -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,
@@ -1,4 +1,4 @@
-import { EmotionPerfTest } from '@grafana/ui/src/components/ThemeDemos/EmotionPerfTest';
+import { EmotionPerfTest } from '@grafana/ui/internal';

 export const BenchmarksPage = () => {
  return <EmotionPerfTest />;
@@ -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 } from '@grafana/ui/src/components/Table/styles';
+import { useTableStyles, TableCell } from '@grafana/ui/internal';
 import { useCustomFlexLayout } from 'app/features/browse-dashboards/components/customFlexTableLayout';

 import { useSearchKeyboardNavigation } from '../../hooks/useSearchKeyboardSelection';
--- a/Show More
+++ b/Show More