Grafana UI: Replace barrel files with explicit exports (#106168)

* refactor(grafana-ui): move all exports from components barrel file to entry point

* refactor(grafana-ui): move all exports from types barrel file to entry point

* refactor(grafana-ui): explict exports for utils

* refactor(grafana-ui): move themes to explicit exports

* refactor(grafana-ui): use explicit exports for options, slate-plugins and schema

* fix(grafana-ui): put back missing components

* chore(grafana-ui): delete first level barrel files

* refactor(grafana-ui): update all internal barrel file imports

* refactor(grafana-ui): start fixing storybook mdx files

* style(grafana-ui): fix linting issues, update betterer result

* chore(grafana-ui): delete nested component barrel files

* refactor(grafana-ui): update imports to use non-barrel files

* refactor(grafana-ui): update imports to non-barrel files for story and test

* fix(grafana-ui): put back missing FileListItem component and types

* refactor(grafana-ui): update mdx to use direct imports

* fix(grafana-ui): align exports with grafana 12

.betterer.results

@@ -767,10 +767,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "packages/grafana-ui/src/components/index.ts:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'./Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "\'VerticalGroup\' import from \'./Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
-    ],
     "packages/grafana-ui/src/components/uPlot/Plot.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]

packages/grafana-ui/src/components/Actions/ActionButton.tsx

@@ -2,9 +2,9 @@ import { useState } from 'react';
 
 import { ActionModel, Field, ActionVariableInput } from '@grafana/data';
 
-import { useTheme2 } from '../../themes';
+import { useTheme2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
-import { Button, ButtonProps } from '../Button';
+import { Button, ButtonProps } from '../Button/Button';
 import { ConfirmModal } from '../ConfirmModal/ConfirmModal';
 
 import { VariablesInputModal } from './VariablesInputModal';

packages/grafana-ui/src/components/Actions/VariablesInputModal.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { ActionModel, ActionVariableInput } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
 import { Button } from '../Button/Button';
 import { Field } from '../Forms/Field';

packages/grafana-ui/src/components/Alert/Alert.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useTheme2 } from '../../themes';
+import { useTheme2 } from '../../themes/ThemeContext';
 import { IconName } from '../../types/icon';
 import { t } from '../../utils/i18n';
 import { Button } from '../Button/Button';

packages/grafana-ui/src/components/AutoSaveField/AutoSaveField.tsx

@@ -3,7 +3,7 @@ import { debounce } from 'lodash';
 import { useCallback, useMemo, useRef } from 'react';
 import * as React from 'react';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { Trans } from '../../utils/i18n';
 import { Field, FieldProps } from '../Forms/Field';
 import { InlineToast } from '../InlineToast/InlineToast';

packages/grafana-ui/src/components/AutoSaveField/EllipsisAnimated.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 
 export const EllipsisAnimated = memo(() => {
   const styles = useStyles2(getStyles);

packages/grafana-ui/src/components/Badge/Badge.tsx

@@ -7,11 +7,11 @@ import tinycolor from 'tinycolor2';
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { IconName } from '../../types';
+import { IconName } from '../../types/icon';
 import { SkeletonComponent, attachSkeleton } from '../../utils/skeleton';
 import { Icon } from '../Icon/Icon';
-import { PopoverContent } from '../Tooltip';
 import { Tooltip } from '../Tooltip/Tooltip';
+import { PopoverContent } from '../Tooltip/types';
 
 export type BadgeColor = 'blue' | 'red' | 'green' | 'orange' | 'purple' | 'darkgrey';
 

packages/grafana-ui/src/components/BarGauge/BarGauge.story.tsx

@@ -3,7 +3,7 @@ import { StoryFn, Meta } from '@storybook/react';
 import { VizOrientation, ThresholdsMode, Field, FieldType, getDisplayProcessor } from '@grafana/data';
 import { BarGaugeDisplayMode } from '@grafana/schema';
 
-import { useTheme2 } from '../../themes';
+import { useTheme2 } from '../../themes/ThemeContext';
 
 import { BarGauge, Props } from './BarGauge';
 import mdx from './BarGauge.mdx';

packages/grafana-ui/src/components/BarGauge/BarGauge.tsx

@@ -23,9 +23,9 @@ import {
 import { selectors } from '@grafana/e2e-selectors';
 import { BarGaugeDisplayMode, BarGaugeNamePlacement, BarGaugeValueMode, VizTextDisplayOptions } from '@grafana/schema';
 
-import { Themeable2 } from '../../types';
+import { Themeable2 } from '../../types/theme';
 import { calculateFontSize, measureText } from '../../utils/measureText';
-import { clearButtonStyles } from '../Button';
+import { clearButtonStyles } from '../Button/Button';
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
 
 const MIN_VALUE_HEIGHT = 18;

packages/grafana-ui/src/components/BigValue/BigValue.story.tsx

@@ -2,7 +2,7 @@ import { StoryFn, Meta } from '@storybook/react';
 
 import { FieldSparkline, FieldType } from '@grafana/data';
 
-import { useTheme2 } from '../../themes';
+import { useTheme2 } from '../../themes/ThemeContext';
 
 import {
   BigValue,

packages/grafana-ui/src/components/BigValue/BigValue.tsx

@@ -5,8 +5,8 @@ import * as React from 'react';
 import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline } from '@grafana/data';
 import { PercentChangeColorMode, VizTextDisplayOptions } from '@grafana/schema';
 
-import { Themeable2 } from '../../types';
-import { clearButtonStyles } from '../Button';
+import { Themeable2 } from '../../types/theme';
+import { clearButtonStyles } from '../Button/Button';
 import { FormattedValueDisplay } from '../FormattedValueDisplay/FormattedValueDisplay';
 
 import { buildLayout } from './BigValueLayout';

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

@@ -5,7 +5,7 @@ import tinycolor from 'tinycolor2';
 import { formattedValueToString, DisplayValue, FieldConfig, FieldType, ThemeVisualizationColors } from '@grafana/data';
 import { GraphDrawStyle, GraphFieldConfig, PercentChangeColorMode } from '@grafana/schema';
 
-import { getTextColorForAlphaBackground } from '../../utils';
+import { getTextColorForAlphaBackground } from '../../utils/colors';
 import { calculateFontSize } from '../../utils/measureText';
 import { Sparkline } from '../Sparkline/Sparkline';
 

packages/grafana-ui/src/components/BrowserLabel/Label.tsx

@@ -5,8 +5,8 @@ import Highlighter from 'react-highlight-words';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useTheme2 } from '../../themes';
-import { HighlightPart } from '../../types';
+import { useTheme2 } from '../../themes/ThemeContext';
+import { HighlightPart } from '../../types/completion';
 import { PartialHighlighter } from '../Typeahead/PartialHighlighter';
 
 type OnLabelClick = (name: string, value: string | undefined, event: React.MouseEvent<HTMLElement>) => void;

packages/grafana-ui/src/components/Button/Button.story.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { StoryFn } from '@storybook/react';
 
-import { ComponentSize } from '../../types';
+import { ComponentSize } from '../../types/size';
 import { Card } from '../Card/Card';
 import { Stack } from '../Layout/Stack/Stack';
 

packages/grafana-ui/src/components/Button/Button.tsx

@@ -4,13 +4,14 @@ import * as React from 'react';
 
 import { GrafanaTheme2, ThemeRichColor } from '@grafana/data';
 
-import { useTheme2 } from '../../themes';
+import { useTheme2 } from '../../themes/ThemeContext';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
-import { ComponentSize, IconSize, IconType } from '../../types';
-import { IconName } from '../../types/icon';
+import { IconName, IconSize, IconType } from '../../types/icon';
+import { ComponentSize } from '../../types/size';
 import { getPropertiesForButtonSize } from '../Forms/commonStyles';
 import { Icon } from '../Icon/Icon';
-import { PopoverContent, Tooltip, TooltipPlacement } from '../Tooltip';
+import { Tooltip } from '../Tooltip/Tooltip';
+import { PopoverContent, TooltipPlacement } from '../Tooltip/types';
 
 export type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'success';
 export const allButtonVariants: ButtonVariant[] = ['primary', 'secondary', 'destructive'];

packages/grafana-ui/src/components/Button/ButtonGroup.tsx

@@ -3,7 +3,7 @@ import { forwardRef, HTMLAttributes } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   className?: string;

packages/grafana-ui/src/components/Button/FullWidthButtonContainer.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from '@emotion/css';
 import * as React from 'react';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 
 export interface Props {
   className?: string;

packages/grafana-ui/src/components/Button/index.ts

@@ -1,2 +0,0 @@
-export * from './Button';
-export { ButtonGroup } from './ButtonGroup';

packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx

@@ -4,9 +4,9 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { IconName } from '../../types/icon';
-import { Button, ButtonProps } from '../Button';
+import { Button, ButtonProps } from '../Button/Button';
 import { CascaderOption } from '../Cascader/Cascader';
 import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';
 import { getCascaderStyles } from '../Cascader/styles';

packages/grafana-ui/src/components/Card/Card.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 import { IconButton } from '../IconButton/IconButton';
 import { TagList } from '../Tags/TagList';
 

packages/grafana-ui/src/components/Card/Card.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 import { IconButton } from '../IconButton/IconButton';
 
 import { Card } from './Card';

packages/grafana-ui/src/components/Card/Card.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { t } from '../../utils/i18n';
 

packages/grafana-ui/src/components/Card/CardContainer.tsx

@@ -4,7 +4,8 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { styleMixins, useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
+import { getFocusStyles } from '../../themes/mixins';
 
 /**
  * @public
@@ -118,7 +119,7 @@ export const getCardContainerStyles = (
           cursor: 'pointer',
           zIndex: 1,
         },
-        '&:focus': styleMixins.getFocusStyles(theme),
+        '&:focus': getFocusStyles(theme),
       }),
 
       ...(isSelectable && {
@@ -149,7 +150,7 @@ export const getCardContainerStyles = (
           cursor: 'pointer',
           zIndex: 1,
         },
-        '&:focus': styleMixins.getFocusStyles(theme),
+        '&:focus': getFocusStyles(theme),
       }),
     }),
   };

packages/grafana-ui/src/components/Carousel/Carousel.tsx

@@ -6,10 +6,10 @@ import { useState, useEffect, useRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
 import { Alert } from '../Alert/Alert';
-import { clearButtonStyles } from '../Button';
+import { clearButtonStyles } from '../Button/Button';
 import { IconButton } from '../IconButton/IconButton';
 
 // Define the image item interface

packages/grafana-ui/src/components/Cascader/Cascader.tsx

@@ -6,8 +6,8 @@ import * as React from 'react';
 
 import { SelectableValue } from '@grafana/data';
 
-import { withTheme2 } from '../../themes';
-import { Themeable2 } from '../../types';
+import { withTheme2 } from '../../themes/ThemeContext';
+import { Themeable2 } from '../../types/theme';
 import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';

packages/grafana-ui/src/components/ClipboardButton/ClipboardButton.tsx

@@ -4,9 +4,9 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { t } from '../../../src/utils/i18n';
-import { useStyles2 } from '../../themes';
-import { Button, ButtonProps } from '../Button';
+import { useStyles2 } from '../../themes/ThemeContext';
+import { t } from '../../utils/i18n';
+import { Button, ButtonProps } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import { InlineToast } from '../InlineToast/InlineToast';
 

packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { Icon } from '../Icon/Icon';
 import { Spinner } from '../Spinner/Spinner';

packages/grafana-ui/src/components/Collapse/Collapse.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { clearButtonStyles } from '../Button';
+import { clearButtonStyles } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 
 const getStyles = (theme: GrafanaTheme2) => ({

packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx

@@ -6,7 +6,7 @@ import tinycolor from 'tinycolor2';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { Input, Props as InputProps } from '../Input/Input';
 
 import { ColorPickerProps } from './ColorPickerPopover';

packages/grafana-ui/src/components/ColorPicker/ColorPicker.story.tsx

@@ -3,7 +3,7 @@ import { useArgs } from '@storybook/preview-api';
 import { Meta, StoryFn } from '@storybook/react';
 
 import { useStyles2 } from '../../themes/ThemeContext';
-import { clearButtonStyles } from '../Button';
+import { clearButtonStyles } from '../Button/Button';
 
 import { ColorPicker, SeriesColorPicker } from './ColorPicker';
 import mdx from './ColorPicker.mdx';

packages/grafana-ui/src/components/ColorPicker/ColorPicker.tsx

@@ -4,7 +4,8 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { withTheme2, stylesFactory } from '../../themes';
+import { withTheme2 } from '../../themes/ThemeContext';
+import { stylesFactory } from '../../themes/stylesFactory';
 import { closePopover } from '../../utils/closePopover';
 import { Popover } from '../Tooltip/Popover';
 import { PopoverController } from '../Tooltip/PopoverController';

packages/grafana-ui/src/components/ColorPicker/ColorPickerInput.tsx

@@ -5,7 +5,7 @@ import { useThrottleFn } from 'react-use';
 
 import { colorManipulator, GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2, useTheme2 } from '../../themes';
+import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
 import { Props as InputProps } from '../Input/Input';
 

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react';
 import { useState } from 'react';
 
-import { useTheme2 } from '../../themes';
+import { useTheme2 } from '../../themes/ThemeContext';
 
 import mdx from './ColorPicker.mdx';
 import { ColorPickerPopover } from './ColorPickerPopover';

packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx

@@ -5,11 +5,13 @@ import * as React from 'react';
 
 import { GrafanaTheme2, colorManipulator } from '@grafana/data';
 
-import { stylesFactory, withTheme2 } from '../../themes';
+import { withTheme2 } from '../../themes/ThemeContext';
+import { stylesFactory } from '../../themes/stylesFactory';
 import { Themeable2 } from '../../types/theme';
 import { t } from '../../utils/i18n';
-import { Tab, TabsBar } from '../Tabs';
-import { PopoverContentProps } from '../Tooltip';
+import { Tab } from '../Tabs/Tab';
+import { TabsBar } from '../Tabs/TabsBar';
+import { PopoverContentProps } from '../Tooltip/types';
 
 import { NamedColorsPalette } from './NamedColorsPalette';
 import SpectrumPalette from './SpectrumPalette';

packages/grafana-ui/src/components/ColorPicker/SeriesColorPickerPopover.tsx

@@ -1,8 +1,8 @@
-import { withTheme2 } from '../../themes';
+import { withTheme2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
 import { InlineField } from '../Forms/InlineField';
 import { InlineSwitch } from '../Switch/Switch';
-import { PopoverContentProps } from '../Tooltip';
+import { PopoverContentProps } from '../Tooltip/types';
 
 import { ColorPickerPopover, ColorPickerProps } from './ColorPickerPopover';
 

packages/grafana-ui/src/components/ColorPicker/SpectrumPalette.tsx

@@ -6,7 +6,7 @@ import tinycolor from 'tinycolor2';
 
 import { GrafanaTheme2, colorManipulator } from '@grafana/data';
 
-import { useStyles2, useTheme2 } from '../../themes';
+import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 
 import ColorInput from './ColorInput';
 

packages/grafana-ui/src/components/Combobox/Combobox.tsx

@@ -3,7 +3,7 @@ import { useVirtualizer, type Range } from '@tanstack/react-virtual';
 import { useCombobox } from 'downshift';
 import React, { useCallback, useId, useMemo } from 'react';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { AutoSizeInput } from '../Input/AutoSizeInput';

packages/grafana-ui/src/components/Combobox/ComboboxList.tsx

@@ -3,7 +3,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import type { UseComboboxPropGetters } from 'downshift';
 import { useCallback } from 'react';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { Checkbox } from '../Forms/Checkbox';
 import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
 

packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx

@@ -2,13 +2,13 @@ import { cx } from '@emotion/css';
 import { useCombobox, useMultipleSelection } from 'downshift';
 import { useCallback, useMemo, useState } from 'react';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 import { Box } from '../Layout/Box/Box';
 import { Portal } from '../Portal/Portal';
 import { Text } from '../Text/Text';
-import { Tooltip } from '../Tooltip';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 import { ComboboxBaseProps, AutoSizeConditionals } from './Combobox';
 import { ComboboxList } from './ComboboxList';

packages/grafana-ui/src/components/Combobox/ValuePill.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
 import { IconButton } from '../IconButton/IconButton';
 

packages/grafana-ui/src/components/Combobox/useComboboxFloat.ts

@@ -1,7 +1,7 @@
 import { autoUpdate, autoPlacement, size, useFloating } from '@floating-ui/react';
 import { useMemo, useRef, useState } from 'react';
 
-import { measureText } from '../../utils';
+import { measureText } from '../../utils/measureText';
 
 import {
   MENU_ITEM_FONT_SIZE,

packages/grafana-ui/src/components/Combobox/useMeasureMulti.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useMeasure } from 'react-use';
 
-import { measureText } from '../../utils';
+import { measureText } from '../../utils/measureText';
 
 import { ComboboxOption } from './types';
 

packages/grafana-ui/src/components/Combobox/useMultiInputAutoSize.tsx

@@ -1,6 +1,6 @@
 import { useLayoutEffect, useRef, useState } from 'react';
 
-import { measureText } from '../../utils';
+import { measureText } from '../../utils/measureText';
 
 export function useMultiInputAutoSize(inputValue: string) {
   const inputRef = useRef<HTMLInputElement>(null);

packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.story.tsx

@@ -1,7 +1,7 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/react';
 
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 
 import { ConfirmButton, Props } from './ConfirmButton';
 import mdx from './ConfirmButton.mdx';

packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.tsx

@@ -4,10 +4,10 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { ComponentSize } from '../../types/size';
 import { Trans } from '../../utils/i18n';
-import { Button, ButtonVariant } from '../Button';
+import { Button, ButtonVariant } from '../Button/Button';
 
 export interface Props {
   /** Confirm action callback */

packages/grafana-ui/src/components/ConfirmButton/DeleteButton.tsx

@@ -1,5 +1,5 @@
 import { ComponentSize } from '../../types/size';
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 
 import { ConfirmButton } from './ConfirmButton';
 

packages/grafana-ui/src/components/ConfirmModal/ConfirmContent.tsx

@@ -6,9 +6,9 @@ import { useForm } from 'react-hook-form';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
-import { Button, ButtonVariant } from '../Button';
+import { Button, ButtonVariant } from '../Button/Button';
 import { Field } from '../Forms/Field';
 import { Input } from '../Input/Input';
 import { Stack } from '../Layout/Stack/Stack';

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx

@@ -3,8 +3,8 @@ import * as React from 'react';
 
 import { IconName } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
-import { ButtonVariant } from '../Button';
+import { useStyles2 } from '../../themes/ThemeContext';
+import { ButtonVariant } from '../Button/Button';
 import { Modal } from '../Modal/Modal';
 
 import { ConfirmContent } from './ConfirmContent';

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

@@ -5,7 +5,7 @@ import Scrollbars, { positionValues } from 'react-custom-scrollbars-2';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 
 import { ScrollIndicators } from './ScrollIndicators';
 

packages/grafana-ui/src/components/CustomScrollbar/ScrollIndicators.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 
 export const ScrollIndicators = ({ children }: React.PropsWithChildren<{}>) => {
   const [showScrollTopIndicator, setShowTopScrollIndicator] = useState(false);

packages/grafana-ui/src/components/DataLinks/DataLinkButton.tsx

@@ -1,6 +1,6 @@
 import { Field, LinkModel } from '@grafana/data';
 
-import { ButtonProps, Button } from '../Button';
+import { ButtonProps, Button } from '../Button/Button';
 
 type DataLinkButtonProps = {
   link: LinkModel<Field>;

packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx

@@ -3,7 +3,7 @@ import { memo, ChangeEvent } from 'react';
 
 import { VariableSuggestion, GrafanaTheme2, DataLink } from '@grafana/data';
 
-import { useStyles2 } from '../../themes/index';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t, Trans } from '../../utils/i18n';
 import { Field } from '../Forms/Field';
 import { Input } from '../Input/Input';

packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx

@@ -10,8 +10,8 @@ import { Editor } from 'slate-react';
 
 import { DataLinkBuiltInVars, GrafanaTheme2, VariableOrigin, VariableSuggestion } from '@grafana/data';
 
-import { SlatePrism } from '../../slate-plugins';
-import { useStyles2 } from '../../themes';
+import { SlatePrism } from '../../slate-plugins/slate-prism';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { SCHEMA, makeValue } from '../../utils/slate';
 import { getInputStyles } from '../Input/Input';
 import { Portal } from '../Portal/Portal';

packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx

@@ -6,7 +6,7 @@ import { useClickAway } from 'react-use';
 
 import { VariableSuggestion, GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { List } from '../List/List';
 
 interface DataLinkSuggestionsProps {

packages/grafana-ui/src/components/DataLinks/DataLinksContextMenu.tsx

@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ActionModel, GrafanaTheme2, LinkModel } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { linkModelToContextMenuItems } from '../../utils/dataLinks';
 import { WithContextMenu } from '../ContextMenu/WithContextMenu';
 import { MenuGroup, MenuItemsGroup } from '../Menu/MenuGroup';

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinkEditorModalContent.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { DataFrame, DataLink, VariableSuggestion } from '@grafana/data';
 
 import { Trans } from '../../../utils/i18n';
-import { Button } from '../../Button';
+import { Button } from '../../Button/Button';
 import { Modal } from '../../Modal/Modal';
 import { DataLinkEditor } from '../DataLinkEditor';
 

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditorBase.tsx

@@ -5,9 +5,9 @@ import { useEffect, useState } from 'react';
 
 import { Action, DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { t } from '../../../utils/i18n';
-import { Button } from '../../Button';
+import { Button } from '../../Button/Button';
 import { Modal } from '../../Modal/Modal';
 
 import { DataLinksListItemBase } from './DataLinksListItemBase';

packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItemBase.tsx

@@ -3,7 +3,7 @@ import { Draggable } from '@hello-pangea/dnd';
 
 import { Action, DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { t } from '../../../utils/i18n';
 import { Badge } from '../../Badge/Badge';
 import { Icon } from '../../Icon/Icon';

packages/grafana-ui/src/components/DataLinks/FieldLinkList.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { Field, GrafanaTheme2, LinkModel } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { Trans } from '../../utils/i18n';
 import { Icon } from '../Icon/Icon';
 

packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx

@@ -1,7 +1,7 @@
 import { ChangeEvent, MouseEvent } from 'react';
 
 import { Trans } from '../../utils/i18n';
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 import { InlineField } from '../Forms/InlineField';
 import { InlineFieldRow } from '../Forms/InlineFieldRow';
 import { Input } from '../Input/Input';

packages/grafana-ui/src/components/DataSourceSettings/CustomHeadersSettings.tsx

@@ -4,9 +4,9 @@ import { PureComponent } from 'react';
 
 import { DataSourceSettings } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t, Trans } from '../../utils/i18n';
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 import { FormField } from '../FormField/FormField';
 import { Icon } from '../Icon/Icon';
 import { SecretFormField } from '../SecretFormField/SecretFormField';

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -4,10 +4,10 @@ import { useState, useCallback, useId, useMemo } from 'react';
 import { SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useTheme2 } from '../../themes';
+import { useTheme2 } from '../../themes/ThemeContext';
 import { t, Trans } from '../../utils/i18n';
 import { Alert } from '../Alert/Alert';
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 import { Field } from '../Forms/Field';
 import { InlineField } from '../Forms/InlineField';
 import { RadioButtonGroup } from '../Forms/RadioButtonGroup/RadioButtonGroup';

packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
 import { InlineField } from '../Forms/InlineField';
 import { Stack } from '../Layout/Stack/Stack';

packages/grafana-ui/src/components/DateTimePickers/DatePicker/DatePicker.tsx

@@ -4,7 +4,7 @@ import Calendar from 'react-calendar';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';
 import { Icon } from '../../Icon/Icon';
 import { getBodyStyles } from '../TimeRangePicker/CalendarBody';

packages/grafana-ui/src/components/DateTimePickers/DatePickerWithInput/DatePickerWithInput.tsx

@@ -4,7 +4,7 @@ import { ChangeEvent, forwardRef, useImperativeHandle, useState } from 'react';
 
 import { GrafanaTheme2, dateTime } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { Props as InputProps, Input } from '../../Input/Input';
 import { DatePicker } from '../DatePicker/DatePicker';
 

packages/grafana-ui/src/components/DateTimePickers/DateTimePicker/DateTimePicker.tsx

@@ -20,7 +20,7 @@ import {
 } from '@grafana/data';
 import { Components } from '@grafana/e2e-selectors';
 
-import { useStyles2, useTheme2 } from '../../../themes';
+import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
 import { t, Trans } from '../../../utils/i18n';
 import { Button } from '../../Button/Button';
 import { InlineField } from '../../Forms/InlineField';

packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx

@@ -7,9 +7,9 @@ import { FormEvent, useCallback, useRef, useState } from 'react';
 
 import { RelativeTimeRange, GrafanaTheme2, TimeOption } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { Trans, t } from '../../../utils/i18n';
-import { Button } from '../../Button';
+import { Button } from '../../Button/Button';
 import { Field } from '../../Forms/Field';
 import { Icon } from '../../Icon/Icon';
 import { getInputStyles, Input } from '../../Input/Input';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker.tsx

@@ -19,10 +19,10 @@ import { selectors } from '@grafana/e2e-selectors';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { t, Trans } from '../../utils/i18n';
-import { ButtonGroup } from '../Button';
+import { ButtonGroup } from '../Button/ButtonGroup';
 import { getModalStyles } from '../Modal/getModalStyles';
 import { getPortalContainer } from '../Portal/Portal';
-import { ToolbarButton } from '../ToolbarButton';
+import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
 import { Tooltip } from '../Tooltip/Tooltip';
 
 import { TimePickerContent } from './TimeRangePicker/TimePickerContent';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx

@@ -4,7 +4,7 @@ import Calendar, { CalendarType } from 'react-calendar';
 
 import { GrafanaTheme2, dateTimeParse, DateTime, TimeZone } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { t } from '../../../utils/i18n';
 import { Icon } from '../../Icon/Icon';
 import { getWeekStart, WeekStart } from '../WeekStartPicker';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarFooter.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '../../../utils/i18n';
-import { Button } from '../../Button';
+import { Button } from '../../Button/Button';
 import { Stack } from '../../Layout/Stack/Stack';
 
 import { TimePickerCalendarProps } from './TimePickerCalendar';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerCalendar.tsx

@@ -7,7 +7,7 @@ import { createRef, FormEvent, memo } from 'react';
 import { DateTime, GrafanaTheme2, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2, useTheme2 } from '../../../themes';
+import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
 import { getModalStyles } from '../../Modal/getModalStyles';
 import { WeekStart } from '../WeekStartPicker';
 

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerContent.tsx

@@ -4,7 +4,7 @@ import { memo, useMemo, useState } from 'react';
 import { GrafanaTheme2, isDateTime, rangeUtil, RawTimeRange, TimeOption, TimeRange, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2, useTheme2 } from '../../../themes';
+import { useStyles2, useTheme2 } from '../../../themes/ThemeContext';
 import { getFocusStyles } from '../../../themes/mixins';
 import { t, Trans } from '../../../utils/i18n';
 import { FilterInput } from '../../FilterInput/FilterInput';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerFooter.tsx

@@ -6,12 +6,14 @@ import * as React from 'react';
 import { getTimeZoneInfo, GrafanaTheme2, TimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { t, Trans } from '../../../utils/i18n';
-import { Button } from '../../Button';
+import { Button } from '../../Button/Button';
 import { Combobox } from '../../Combobox/Combobox';
 import { Field } from '../../Forms/Field';
-import { Tab, TabContent, TabsBar } from '../../Tabs';
+import { Tab } from '../../Tabs/Tab';
+import { TabContent } from '../../Tabs/TabContent';
+import { TabsBar } from '../../Tabs/TabsBar';
 import { TimeZonePicker } from '../TimeZonePicker';
 import { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription';
 import { TimeZoneOffset } from '../TimeZonePicker/TimeZoneOffset';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimePickerTitle.tsx

@@ -3,7 +3,7 @@ import { memo, PropsWithChildren } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeContent.tsx

@@ -17,7 +17,7 @@ import { selectors } from '@grafana/e2e-selectors';
 
 import { useStyles2 } from '../../../themes/ThemeContext';
 import { t, Trans } from '../../../utils/i18n';
-import { Button } from '../../Button';
+import { Button } from '../../Button/Button';
 import { Field } from '../../Forms/Field';
 import { Icon } from '../../Icon/Icon';
 import { Input } from '../../Input/Input';

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeLabel.tsx

@@ -3,7 +3,7 @@ import { memo } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../../src/themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { TimePickerButtonLabel, TimeRangePickerProps } from '../TimeRangePicker';
 import { isValidTimeRange } from '../utils';
 

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/TimeRangeList.tsx

@@ -3,7 +3,7 @@ import { useRef, ReactNode } from 'react';
 
 import { GrafanaTheme2, TimeOption } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { t } from '../../../utils/i18n';
 
 import { TimePickerTitle } from './TimePickerTitle';

packages/grafana-ui/src/components/DateTimePickers/TimeSyncButton.tsx

@@ -1,6 +1,6 @@
 import { t } from '../../utils/i18n';
-import { ToolbarButton } from '../ToolbarButton';
-import { Tooltip } from '../Tooltip';
+import { ToolbarButton } from '../ToolbarButton/ToolbarButton';
+import { Tooltip } from '../Tooltip/Tooltip';
 
 interface TimeSyncButtonProps {
   isSynced: boolean;

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneDescription.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 
 import { GrafanaTheme2, TimeZoneInfo } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 
 interface Props {
   info?: TimeZoneInfo;

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneGroup.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 
 interface Props {
   label: string | undefined;

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOffset.tsx

@@ -3,7 +3,7 @@ import { isString } from 'lodash';
 
 import { GrafanaTheme2, TimeZone, dateTimeFormat } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 
 interface Props {
   timestamp: number;

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneOption.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
 import { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 import { Icon } from '../../Icon/Icon';
 
 import { TimeZoneDescription } from './TimeZoneDescription';

packages/grafana-ui/src/components/DateTimePickers/TimeZonePicker/TimeZoneTitle.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 
 interface Props {
   title: string | ReactNode;

packages/grafana-ui/src/components/Divider/Divider.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2, ThemeSpacingTokens } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 
 interface DividerProps {
   direction?: 'vertical' | 'horizontal';

packages/grafana-ui/src/components/Drawer/Drawer.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { t } from '../../utils/i18n';
 import { getDragStyles } from '../DragHandle/DragHandle';
 import { IconButton } from '../IconButton/IconButton';

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

@@ -17,8 +17,8 @@ import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { useStyles2 } from '../../themes/ThemeContext';
 import { Menu } from '../Menu/Menu';
 import { MenuItem } from '../Menu/MenuItem';
-import { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton';
-import { PopoverContent } from '../Tooltip';
+import { ToolbarButton, ToolbarButtonVariant } from '../ToolbarButton/ToolbarButton';
+import { PopoverContent } from '../Tooltip/types';
 
 export interface Props<T> extends HTMLAttributes<HTMLButtonElement> {
   className?: string;

packages/grafana-ui/src/components/Dropdown/Dropdown.story.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/react';
 
 import { StoryExample } from '../../utils/storybook/StoryExample';
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 import { IconButton } from '../IconButton/IconButton';
 import { Stack } from '../Layout/Stack/Stack';
 import { Menu } from '../Menu/Menu';

packages/grafana-ui/src/components/Dropdown/Dropdown.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 import { Menu } from '../Menu/Menu';
 
 import { Dropdown } from './Dropdown';

packages/grafana-ui/src/components/Dropdown/Dropdown.tsx

@@ -16,8 +16,8 @@ import { CSSTransition } from 'react-transition-group';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
-import { ReactUtils } from '../../utils';
+import { useStyles2 } from '../../themes/ThemeContext';
+import { renderOrCallToRender } from '../../utils/reactUtils';
 import { getPlacement } from '../../utils/tooltipUtils';
 import { Portal } from '../Portal/Portal';
 import { TooltipPlacement } from '../Tooltip/types';
@@ -105,7 +105,7 @@ export const Dropdown = React.memo(({ children, overlay, placement, offset, onVi
                 timeout={{ appear: animationDuration, exit: 0, enter: 0 }}
                 classNames={animationStyles}
               >
-                <div ref={transitionRef}>{ReactUtils.renderOrCallToRender(overlay, { ...getFloatingProps() })}</div>
+                <div ref={transitionRef}>{renderOrCallToRender(overlay, { ...getFloatingProps() })}</div>
               </CSSTransition>
             </div>
           </FloatingFocusManager>

packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx

@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 
 export interface Props {
   children: JSX.Element | string;

packages/grafana-ui/src/components/EmptyState/EmptyState.story.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryFn } from '@storybook/react';
 
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 
 import { EmptyState } from './EmptyState';
 import mdx from './EmptyState.mdx';

packages/grafana-ui/src/components/EmptyState/EmptyState.tsx

@@ -5,7 +5,7 @@ import SVG from 'react-inlinesvg';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { Box } from '../Layout/Box/Box';
 import { Stack } from '../Layout/Stack/Stack';
 import { Text } from '../Text/Text';

packages/grafana-ui/src/components/EmptyState/GrotCTA/GrotCTA.tsx

@@ -4,7 +4,7 @@ import SVG from 'react-inlinesvg';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 
 import grotCTASvg from './grot-cta.svg';
 

packages/grafana-ui/src/components/EmptyState/GrotNotFound/GrotNotFound.tsx

@@ -4,7 +4,7 @@ import SVG from 'react-inlinesvg';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../../themes';
+import { useStyles2 } from '../../../themes/ThemeContext';
 
 import notFoundSvg from './grot-not-found.svg';
 

packages/grafana-ui/src/components/ErrorBoundary/ErrorBoundary.story.tsx

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/react';
 import { useState } from 'react';
 
 import { Alert } from '../Alert/Alert';
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 
 import { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary';
 import mdx from './ErrorBoundary.mdx';

packages/grafana-ui/src/components/ErrorBoundary/ErrorWithStack.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 
 import { ErrorBoundaryApi } from './ErrorBoundary';
 

packages/grafana-ui/src/components/FileDropzone/FileDropzone.tsx

@@ -5,7 +5,7 @@ import { Accept, DropEvent, DropzoneOptions, FileError, FileRejection, useDropzo
 
 import { formattedValueToString, getValueFormat, GrafanaTheme2 } from '@grafana/data';
 
-import { useTheme2 } from '../../themes';
+import { useTheme2 } from '../../themes/ThemeContext';
 import { t, Trans } from '../../utils/i18n';
 import { Alert } from '../Alert/Alert';
 import { Icon } from '../Icon/Icon';

packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx

@@ -2,10 +2,10 @@ import { css } from '@emotion/css';
 
 import { formattedValueToString, getValueFormat, GrafanaTheme2 } from '@grafana/data';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { trimFileName } from '../../utils/file';
 import { t, Trans } from '../../utils/i18n';
-import { Button } from '../Button';
+import { Button } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 import { IconButton } from '../IconButton/IconButton';
 

packages/grafana-ui/src/components/FileDropzone/index.ts

@@ -1,11 +0,0 @@
-import { FileDropzone, DropzoneFile, FileDropzoneProps, FileDropzoneDefaultChildren } from './FileDropzone';
-import { FileListItem, FileListItemProps } from './FileListItem';
-
-export {
-  FileDropzone,
-  type FileDropzoneProps,
-  type DropzoneFile,
-  FileListItem,
-  type FileListItemProps,
-  FileDropzoneDefaultChildren,
-};

packages/grafana-ui/src/components/FileUpload/FileUpload.tsx

@@ -6,12 +6,12 @@ import { v4 as uuidv4 } from 'uuid';
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useStyles2 } from '../../themes';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
 import { ComponentSize } from '../../types/size';
 import { trimFileName } from '../../utils/file';
 import { t } from '../../utils/i18n';
-import { getButtonStyles } from '../Button';
+import { getButtonStyles } from '../Button/Button';
 import { Icon } from '../Icon/Icon';
 
 export interface Props {