wip

code/addons/a11y/package.json

@@ -64,7 +64,6 @@
     "@storybook/global": "^5.0.0",
     "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "@testing-library/react": "^14.0.0",
     "lodash": "^4.17.21",
     "react": "^18.2.0",

code/addons/a11y/src/components/A11YPanel.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 import { ActionBar, ScrollArea } from '@storybook/components';
 import { SyncIcon, CheckIcon } from '@storybook/icons';

code/addons/a11y/src/components/A11yContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { themes, convert } from '@storybook/theming';
+import { themes, convert } from '@storybook/core/dist/theming';
 import type { Result } from 'axe-core';
 import { useChannel, useAddonState, useStorybookApi } from '@storybook/manager-api';
 import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core/dist/core-events';

code/addons/a11y/src/components/Report/Elements.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 import type { NodeResult } from 'axe-core';
 import { Rules } from './Rules';

code/addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 import type { NodeResult } from 'axe-core';
 import { useA11yContext } from '../A11yContext';

code/addons/a11y/src/components/Report/Info.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import type { Result } from 'axe-core';
 
 const Wrapper = styled.div({

code/addons/a11y/src/components/Report/Item.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, useState } from 'react';
 
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 import type { Result } from 'axe-core';
 import { Info } from './Info';

code/addons/a11y/src/components/Report/Rules.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React from 'react';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import { Badge } from '@storybook/components';
 import type { CheckResult } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';

code/addons/a11y/src/components/Report/Tags.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import type { TagValue } from 'axe-core';
 
 const Wrapper = styled.div({

code/addons/a11y/src/components/Tabs.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import type { NodeResult, Result } from 'axe-core';
 import { useResizeDetector } from 'react-resize-detector';
 import HighlightToggle from './Report/HighlightToggle';

code/addons/a11y/src/components/VisionSimulator.tsx

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import React, { useState } from 'react';
-import { Global, styled } from '@storybook/theming';
+import { Global, styled } from '@storybook/core/dist/theming';
 import { IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
 import { AccessibilityIcon } from '@storybook/icons';

code/addons/actions/package.json

@@ -77,7 +77,6 @@
   "devDependencies": {
     "@storybook/components": "workspace:*",
     "@storybook/manager-api": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-inspector": "^6.0.0",

code/addons/actions/src/components/ActionLogger/index.tsx

@@ -1,7 +1,7 @@
 import type { ElementRef, ReactNode } from 'react';
 import React, { forwardRef, Fragment, useEffect, useRef } from 'react';
-import type { Theme } from '@storybook/theming';
-import { styled, withTheme } from '@storybook/theming';
+import type { Theme } from '@storybook/core/dist/theming';
+import { styled, withTheme } from '@storybook/core/dist/theming';
 
 import { Inspector } from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';

code/addons/actions/src/components/ActionLogger/style.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import { opacify } from 'polished';
 
 export const Action = styled.div({

code/addons/backgrounds/package.json

@@ -64,7 +64,6 @@
     "@storybook/components": "workspace:*",
     "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.2"

code/addons/backgrounds/src/components/ColorIcon.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 export const ColorIcon = styled.span(
   ({ background }: { background: string }) => ({

code/addons/controls/package.json

@@ -60,7 +60,6 @@
     "@storybook/components": "workspace:*",
     "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

code/addons/controls/src/ControlsPanel.tsx

@@ -9,7 +9,7 @@ import {
   useStorybookState,
 } from '@storybook/manager-api';
 import { PureArgsTable as ArgsTable, type PresetColor, type SortType } from '@storybook/blocks';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import type { ArgTypes } from '@storybook/core/dist/types';
 
 import { PARAM_KEY } from './constants';

code/addons/controls/src/SaveStory.tsx

@@ -8,7 +8,7 @@ import {
   WithTooltip,
 } from '@storybook/components';
 import { AddIcon, CheckIcon, UndoIcon } from '@storybook/icons';
-import { keyframes, styled } from '@storybook/theming';
+import { keyframes, styled } from '@storybook/core/dist/theming';
 import React from 'react';
 
 const slideIn = keyframes({

code/addons/controls/src/manager.tsx

@@ -8,7 +8,7 @@ import type {
 } from '@storybook/core/dist/core-events';
 import { SAVE_STORY_REQUEST, SAVE_STORY_RESPONSE } from '@storybook/core/dist/core-events';
 import { addons, experimental_requestResponse, types, useArgTypes } from '@storybook/manager-api';
-import { color } from '@storybook/theming';
+import { color } from '@storybook/core/dist/theming';
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';
 import type { Args } from '@storybook/csf';

code/addons/docs/package.json

@@ -105,7 +105,6 @@
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/react-dom-shim": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "fs-extra": "^11.1.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",

code/addons/docs/src/preset.ts

@@ -155,7 +155,7 @@ export const viteFinal = async (config: any, options: Options) => {
            * The following aliases are used to ensure a single instance of these packages are used in situations where they are duplicated
            * The packages will be duplicated by the package manager when the user has react installed with another version than 18.2.0
            */
-          '@storybook/theming': dirname(require.resolve('@storybook/theming')),
+          '@storybook/core/dist/theming': dirname(require.resolve('@storybook/core/dist/theming')),
           '@storybook/components': dirname(require.resolve('@storybook/components')),
           '@storybook/blocks': dirname(require.resolve('@storybook/blocks')),
         },

code/addons/interactions/package.json

@@ -63,7 +63,6 @@
     "@storybook/components": "workspace:*",
     "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "@types/node": "^18.0.0",
     "formik": "^2.2.9",
     "react": "^18.2.0",

code/addons/interactions/src/components/EmptyState.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Link, EmptyTabContent } from '@storybook/components';
 import { DocumentIcon, VideoIcon } from '@storybook/icons';
 import { useStorybookApi } from '@storybook/manager-api';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 import { DOCUMENTATION_LINK, TUTORIAL_VIDEO_LINK } from '../constants';
 

code/addons/interactions/src/components/Interaction.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IconButton, TooltipNote, WithTooltip } from '@storybook/components';
 import { type Call, CallStates, type ControlStates } from '@storybook/core/dist/instrumenter';
-import { styled, typography } from '@storybook/theming';
+import { styled, typography } from '@storybook/core/dist/theming';
 import { transparentize } from 'polished';
 
 import { ListUnorderedIcon } from '@storybook/icons';

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/core/dist/instrumenter';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import { userEvent, within, waitFor, expect } from '@storybook/test';
 import { isChromatic } from '../../../../ui/.storybook/isChromatic';
 

code/addons/interactions/src/components/InteractionsPanel.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type Call, CallStates, type ControlStates } from '@storybook/core/dist/instrumenter';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import { transparentize } from 'polished';
 
 import { Subnav } from './Subnav';

code/addons/interactions/src/components/List.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react';
-import { styled, themes, convert } from '@storybook/theming';
+import { styled, themes, convert } from '@storybook/core/dist/theming';
 import { ChevronSmallDownIcon } from '@storybook/icons';
 
 const ListWrapper = styled.ul({

code/addons/interactions/src/components/MatcherResult.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import dedent from 'ts-dedent';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import { MatcherResult } from './MatcherResult';
 
 const StyledWrapper = styled.div(({ theme }) => ({

code/addons/interactions/src/components/MatcherResult.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled, typography } from '@storybook/theming';
+import { styled, typography } from '@storybook/core/dist/theming';
 import { Node } from './MethodCall';
 
 const getParams = (line: string, fromIndex = 0): string => {

code/addons/interactions/src/components/MethodCall.stories.tsx

@@ -1,6 +1,6 @@
 import type { Call } from '@storybook/core/dist/instrumenter';
 import React from 'react';
-import { styled, typography } from '@storybook/theming';
+import { styled, typography } from '@storybook/core/dist/theming';
 import { Node, MethodCall } from './MethodCall';
 
 const StyledWrapper = styled.div(({ theme }) => ({

code/addons/interactions/src/components/MethodCall.tsx

@@ -1,6 +1,6 @@
 import { ObjectInspector } from '@devtools-ds/object-inspector';
 import type { Call, CallRef, ElementRef } from '@storybook/core/dist/instrumenter';
-import { useTheme } from '@storybook/theming';
+import { useTheme } from '@storybook/core/dist/theming';
 import type { ReactElement } from 'react';
 import React, { Fragment } from 'react';
 

code/addons/interactions/src/components/StatusBadge.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type Call, CallStates } from '@storybook/core/dist/instrumenter';
-import { styled, typography } from '@storybook/theming';
+import { styled, typography } from '@storybook/core/dist/theming';
 
 export interface StatusBadgeProps {
   status: Call['status'];

code/addons/interactions/src/components/StatusIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type Call, CallStates } from '@storybook/core/dist/instrumenter';
-import { styled, useTheme } from '@storybook/theming';
+import { styled, useTheme } from '@storybook/core/dist/theming';
 
 import { transparentize } from 'polished';
 import { CheckIcon, CircleIcon, PlayIcon, StopAltIcon } from '@storybook/icons';

code/addons/interactions/src/components/Subnav.tsx

@@ -11,7 +11,7 @@ import {
 } from '@storybook/components';
 import type { Call, ControlStates } from '@storybook/core/dist/instrumenter';
 import { CallStates } from '@storybook/core/dist/instrumenter';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 import {
   FastForwardIcon,

code/addons/interactions/src/components/TabStatus.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 import { StatusIcon } from './StatusIcon';
 

code/addons/jest/package.json

@@ -62,7 +62,6 @@
     "@storybook/components": "workspace:*",
     "@storybook/icons": "^1.2.5",
     "@storybook/manager-api": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",

code/addons/jest/src/components/Message.tsx

@@ -1,6 +1,6 @@
 import type { FC, ReactElement } from 'react';
 import React, { Fragment } from 'react';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 const positiveConsoleRegex = /\[32m(.*?)\[39m/;
 const negativeConsoleRegex = /\[31m(.*?)\[39m/;

code/addons/jest/src/components/Panel.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import React, { Fragment } from 'react';
-import { styled, themes, convert } from '@storybook/theming';
+import { styled, themes, convert } from '@storybook/core/dist/theming';
 import { ScrollArea, TabsState, Link, Placeholder } from '@storybook/components';
 import { useResizeDetector } from 'react-resize-detector';
 import { Result } from './Result';

code/addons/jest/src/components/Result.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from 'react';
-import { styled, themes, convert } from '@storybook/theming';
+import { styled, themes, convert } from '@storybook/core/dist/theming';
 // eslint-disable-next-line import/no-named-as-default
 import Message from './Message';
 import { ChevronSmallDownIcon } from '@storybook/icons';

code/addons/onboarding/package.json

@@ -55,7 +55,6 @@
     "@storybook/manager-api": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
-    "@storybook/theming": "workspace:*",
     "framer-motion": "^11.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

code/addons/onboarding/src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { ThemeProvider, convert } from '@storybook/theming';
+import { ThemeProvider, convert } from '@storybook/core/dist/theming';
 import { addons, type API } from '@storybook/manager-api';
 
 import { GuidedTour } from './features/GuidedTour/GuidedTour';

code/addons/onboarding/src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import React, { forwardRef } from 'react';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 export interface ButtonProps extends ComponentProps<'button'> {
   children: string;

code/addons/onboarding/src/components/Confetti/Confetti.tsx

@@ -1,6 +1,6 @@
 import ReactConfetti from 'react-confetti';
 import React, { useEffect } from 'react';
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import { createPortal } from 'react-dom';
 import { useState } from 'react';
 

code/addons/onboarding/src/components/List/List.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 export const ListWrapper = styled.ul(() => ({
   display: 'flex',

code/addons/onboarding/src/components/List/ListItem/ListItem.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 
 export const ListItemWrapper = styled.li(() => ({
   display: 'flex',

code/addons/onboarding/src/components/SyntaxHighlighter/Snippet/Snippet.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import { motion } from 'framer-motion';
 
 export const SnippetWrapper = styled(motion.div)`

code/addons/onboarding/src/components/SyntaxHighlighter/SyntaxHighlighter.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from '@storybook/theming';
+import { styled } from '@storybook/core/dist/theming';
 import { motion } from 'framer-motion';
 
 export const Code = styled(motion.div)`

code/addons/onboarding/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -1,7 +1,7 @@
 import React, { createRef, useCallback, useLayoutEffect, useMemo, useState } from 'react';
 import { Backdrop, Code, Container, SnippetWrapperFirst } from './SyntaxHighlighter.styled';
 import { Snippet } from './Snippet/Snippet';
-import { ThemeProvider, ensure, themes } from '@storybook/theming';
+import { ThemeProvider, ensure, themes } from '@storybook/core/dist/theming';
 import { SyntaxHighlighter as StorybookSyntaxHighlighter } from '@storybook/components';
 
 type SyntaxHighlighterProps = {

code/addons/onboarding/src/features/GuidedTour/GuidedTour.styled.tsx

@@ -1,4 +1,4 @@
-import { type Theme } from '@storybook/theming';
+import { type Theme } from '@storybook/core/dist/theming';
 
 export const getStyles = (theme: Theme) => ({
   border: 0,