diff --git a/.circleci/config.yml b/.circleci/config.yml
index 29b3963fa0a..a75956d9c4d 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -283,7 +283,7 @@ jobs:
           command: |
             cd code
             yarn coverage
-  chromatic-storybook-ui:
+  chromatic-internal-storybooks:
     executor:
       class: medium+
       name: sb_node_16_browsers
@@ -297,6 +297,7 @@ jobs:
           command: |
             cd code
             yarn storybook:ui:chromatic
+            yarn storybook:blocks:chromatic
       - store_test_results:
           path: test-results
   ## new workflow
@@ -418,7 +419,7 @@ workflows:
       - script-unit-tests:
           requires:
             - build
-      - chromatic-storybook-ui:
+      - chromatic-internal-storybooks:
           requires:
             - build
       - coverage:
diff --git a/MIGRATION.md b/MIGRATION.md
index a76edffe8f8..4fb9d337c3f 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -2,9 +2,8 @@
 
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [Alpha release notes](#alpha-release-notes)
-  - [Breaking changes](#breaking-changes)
+  - [7.0 breaking changes](#70-breaking-changes)
     - [register.js removed](#registerjs-removed)
-    - [`Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`](#story-type-change-to-storyfn-and-the-new-story-type-now-refers-to-storyobj)
     - [Change of root html IDs](#change-of-root-html-ids)
     - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
     - [Modern browser support](#modern-browser-support)
@@ -38,11 +37,12 @@
     - [External Docs](#external-docs)
     - [MDX2 upgrade](#mdx2-upgrade)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
+  - [7.0 Deprecations](#70-deprecations)
+    - [`Story` type deprecated](#story-type-deprecated)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
   - [Vue 3 upgrade](#vue-3-upgrade)
   - [React18 new root API](#react18-new-root-api)
   - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
-  - [Deprecated register.js](#deprecated-registerjs)
   - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
   - [Vite builder renamed](#vite-builder-renamed)
   - [Docs framework refactor for React](#docs-framework-refactor-for-react)
@@ -51,6 +51,8 @@
     - [Auto-title filename case](#auto-title-filename-case)
     - [Auto-title redundant filename](#auto-title-redundant-filename)
     - [Auto-title always prefixes](#auto-title-always-prefixes)
+  - [6.5 Deprecations](#65-deprecations)
+    - [Deprecated register.js](#deprecated-registerjs)
 - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
   - [Automigrate](#automigrate)
   - [CRA5 upgrade](#cra5-upgrade)
@@ -247,7 +249,7 @@ Storybook 7.0 is in early alpha. During the alpha, we are making a large number
 
 In the meantime, these migration notes are the best available documentation on things you should know upgrading to 7.0.
 
-### Breaking changes
+### 7.0 breaking changes
 
 #### register.js removed
 
@@ -257,46 +259,6 @@ In 7.0, most of Storybook's addons now export a `manager.js` entry point, which
 
 If your `.manager.js` config references `register.js` of any of the following addons, you can remove it: `a11y`, `actions`, `backgrounds`, `controls`, `interactions`, `jest`, `links`, `measure`, `outline`, `toolbars`, `viewport`.
 
-#### `Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`
-
-In 6.x you were able to do this:
-
-```js
-import type { Story } from '@storybook/react';
-
-export const MyStory: Story = () => <div />;
-```
-
-But this will produce an error in 7.0 because `Story` is now a type that refers to the `StoryObj` type.
-You must now use the new `StoryFn` type:
-
-```js
-import type { StoryFn } from '@storybook/react';
-
-export const MyStory: StoryFn = () => <div />;
-```
-
-This change was done to improve the experience of writing CSF3 stories, which is the recommended way of writing stories in 7.0:
-
-```js
-import type { Story } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
-
-export default {
-  component: Button,
-};
-
-export const Primary: Story<ButtonProps> = {
-  variant: 'primary',
-};
-```
-
-If you want to be explicit, you can also import `StoryObj` instead of `Story`, they are the same type.
-
-For Storybook for react users: We also changed `ComponentStory` to refer to `ComponentStoryObj` instead of `ComponentStoryFn`, so if you were using `ComponentStory` you should now import/use `ComponentStoryFn` instead.
-
-You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
-
 #### Change of root html IDs
 
 The root ID unto which storybook renders stories is renamed from `root` to `#storybook-root` to avoid conflicts with user's code.
@@ -751,6 +713,55 @@ As part of the upgrade we deleted the codemod `mdx-to-csf` and will be replacing
 
 Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely.
 
+### 7.0 Deprecations
+
+#### `Story` type deprecated
+
+In 6.x you were able to do this:
+
+```ts
+import type { Story } from '@storybook/react';
+
+export const MyStory: Story = () => <div />;
+```
+
+But this will produce a deprecation warning in 7.0 because `Story` has been deprecated.
+To fix the deprecation warning, use the `StoryFn` type:
+
+```ts
+import type { StoryFn } from '@storybook/react';
+
+export const MyStory: StoryFn = () => <div />;
+```
+
+This change is part of our move to CSF3, which uses objects instead of functions to represent stories.
+You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+
+#### `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated
+
+The type of StoryObj and StoryFn have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter.
+
+```ts
+import type { Story } from '@storybook/react';
+import { Button, ButtonProps } from './Button';
+
+// This works in 7.0, making the ComponentX types redundant.
+const meta: Meta<typeof Button> = { component: Button };
+
+export const CSF3Story: StoryObj<typeof Button> = { args: { label: 'Label' } };
+
+export const CSF2Story: StoryFn<typeof Button> = (args) => <Button {...args} />;
+CSF2Story.args = { label: 'Label' };
+
+// Passing props directly still works as well.
+const meta: Meta<ButtonProps> = { component: Button };
+
+export const CSF3Story: StoryObj<ButtonProps> = { args: { label: 'Label' } };
+
+export const CSF2Story: StoryFn<ButtonProps> = (args) => <Button {...args} />;
+CSF2Story.args = { label: 'Label' };
+```
+
 ## From version 6.4.x to 6.5.0
 
 ### Vue 3 upgrade
@@ -784,22 +795,6 @@ addons.setConfig({
 });
 ```
 
-### Deprecated register.js
-
-In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
-
-Before:
-
-```js
-module.exports = { addons: ['my-addon/register.js'] };
-```
-
-After:
-
-```js
-module.exports = { addons: ['my-addon'] };
-```
-
 ### Dropped support for addon-actions addDecorators
 
 Prior to SB6.5, `addon-actions` provided an option called `addDecorators`. In SB6.5, decorators are applied always. This is technically a breaking change, so if this affects you please file an issue in Github and we can consider reverting this in a patch release.
@@ -917,6 +912,24 @@ In 6.5, the final titles would be:
 
 <!-- markdown-link-check-disable -->
 
+### 6.5 Deprecations
+
+#### Deprecated register.js
+
+In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
+
+Before:
+
+```js
+module.exports = { addons: ['my-addon/register.js'] };
+```
+
+After:
+
+```js
+module.exports = { addons: ['my-addon'] };
+```
+
 ## From version 6.3.x to 6.4.0
 
 ### Automigrate
diff --git a/code/frameworks/angular/src/client/public-types.ts b/code/frameworks/angular/src/client/public-types.ts
index 5667ccf5c6f..a0079cad37c 100644
--- a/code/frameworks/angular/src/client/public-types.ts
+++ b/code/frameworks/angular/src/client/public-types.ts
@@ -30,8 +30,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<AngularFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<AngularFramework, TArgs>;
 
 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
diff --git a/code/lib/addons/src/hooks.test.js b/code/lib/addons/src/hooks.test.js
index 3efc7eccb46..0eafc46c1e2 100644
--- a/code/lib/addons/src/hooks.test.js
+++ b/code/lib/addons/src/hooks.test.js
@@ -1,14 +1,12 @@
 import { useParameter, useStoryContext } from './hooks';
 
-const { window: globalWindow } = global;
-
 describe('addons/hooks', () => {
   beforeEach(() => {
-    globalWindow.STORYBOOK_HOOKS_CONTEXT = undefined;
+    global.STORYBOOK_HOOKS_CONTEXT = undefined;
   });
 
   afterEach(() => {
-    globalWindow.STORYBOOK_HOOKS_CONTEXT = undefined;
+    global.STORYBOOK_HOOKS_CONTEXT = undefined;
   });
 
   describe('useStoryContext', () => {
@@ -21,7 +19,7 @@ describe('addons/hooks', () => {
 
   describe('useParameter', () => {
     beforeEach(() => {
-      globalWindow.STORYBOOK_HOOKS_CONTEXT = {
+      global.STORYBOOK_HOOKS_CONTEXT = {
         currentContext: {
           parameters: {
             'undefined key': undefined,
diff --git a/code/lib/addons/src/hooks.ts b/code/lib/addons/src/hooks.ts
index a99d92dd210..1598e1759c7 100644
--- a/code/lib/addons/src/hooks.ts
+++ b/code/lib/addons/src/hooks.ts
@@ -19,8 +19,6 @@ import {
 // eslint-disable-next-line import/no-cycle
 import { addons } from './index';
 
-const { window: globalWindow } = global;
-
 interface Hook {
   name: string;
   memoizedState?: any;
@@ -156,10 +154,10 @@ function hookify<TFramework extends AnyFramework>(fn: AbstractFunction) {
     }
     hooks.nextHookIndex = 0;
 
-    const prevContext = globalWindow.STORYBOOK_HOOKS_CONTEXT;
-    globalWindow.STORYBOOK_HOOKS_CONTEXT = hooks;
+    const prevContext = global.STORYBOOK_HOOKS_CONTEXT;
+    global.STORYBOOK_HOOKS_CONTEXT = hooks;
     const result = fn(...args);
-    globalWindow.STORYBOOK_HOOKS_CONTEXT = prevContext;
+    global.STORYBOOK_HOOKS_CONTEXT = prevContext;
 
     if (hooks.currentPhase === 'UPDATE' && hooks.getNextHook() != null) {
       throw new Error(
@@ -218,7 +216,7 @@ const invalidHooksError = () =>
   new Error('Storybook preview hooks can only be called inside decorators and story functions.');
 
 function getHooksContextOrNull<TFramework extends AnyFramework>(): HooksContext<TFramework> | null {
-  return globalWindow.STORYBOOK_HOOKS_CONTEXT || null;
+  return global.STORYBOOK_HOOKS_CONTEXT || null;
 }
 
 function getHooksContextOrThrow<TFramework extends AnyFramework>(): HooksContext<TFramework> {
diff --git a/code/lib/addons/src/main.ts b/code/lib/addons/src/main.ts
index f69ed079b8e..29988a84d4e 100644
--- a/code/lib/addons/src/main.ts
+++ b/code/lib/addons/src/main.ts
@@ -21,8 +21,6 @@ export function isSupportedType(type: Addon_Types): boolean {
   return !!Object.values(Addon_TypesEnum).find((typeVal) => typeVal === type);
 }
 
-export type Types = Addon_TypesEnum | string;
-
 export class AddonStore {
   constructor() {
     this.promise = new Promise((res) => {
@@ -76,7 +74,7 @@ export class AddonStore {
     this.serverChannel = channel;
   };
 
-  getElements = (type: Types): Addon_Collection => {
+  getElements = (type: Addon_Types): Addon_Collection => {
     if (!this.elements[type]) {
       this.elements[type] = {};
     }
diff --git a/code/lib/api/src/modules/addons.ts b/code/lib/api/src/modules/addons.ts
index fbde5165252..dc0da4d0f09 100644
--- a/code/lib/api/src/modules/addons.ts
+++ b/code/lib/api/src/modules/addons.ts
@@ -1,23 +1,15 @@
-import type { API_Collection, API_Panels, API_StateMerger, API_Types } from '@storybook/types';
+import type { Addon_Types, API_Collection, API_Panels, API_StateMerger } from '@storybook/types';
+import { Addon_TypesEnum } from '@storybook/types';
 import type { ModuleFn } from '../index';
 import { Options } from '../store';
 
-// eslint-disable-next-line @typescript-eslint/naming-convention
-enum types {
-  TAB = 'tab',
-  PANEL = 'panel',
-  TOOL = 'tool',
-  PREVIEW = 'preview',
-  NOTES_ELEMENT = 'notes-element',
-}
-
 export interface SubState {
   selectedPanel: string;
   addons: Record<string, never>;
 }
 
 export interface SubAPI {
-  getElements: <T>(type: API_Types) => API_Collection<T>;
+  getElements: <T>(type: Addon_Types) => API_Collection<T>;
   getPanels: () => API_Panels;
   getStoryPanels: () => API_Panels;
   getSelectedPanel: () => string;
@@ -46,7 +38,7 @@ export function ensurePanel(panels: API_Panels, selectedPanel?: string, currentP
 export const init: ModuleFn<SubAPI, SubState> = ({ provider, store, fullAPI }) => {
   const api: SubAPI = {
     getElements: (type) => provider.getElements(type),
-    getPanels: () => api.getElements(types.PANEL),
+    getPanels: () => api.getElements(Addon_TypesEnum.PANEL),
     getStoryPanels: () => {
       const allPanels = api.getPanels();
       const { storyId } = store.getState();
diff --git a/code/lib/core-client/src/manager/provider.ts b/code/lib/core-client/src/manager/provider.ts
index 4fd5a4f316b..2daa82f43b8 100644
--- a/code/lib/core-client/src/manager/provider.ts
+++ b/code/lib/core-client/src/manager/provider.ts
@@ -1,8 +1,8 @@
 import global from 'global';
 import { Provider } from '@storybook/ui';
 import { Channel } from '@storybook/channels';
-import { addons, AddonStore, type Types } from '@storybook/addons';
-import type { Addon_Config } from '@storybook/types';
+import type { Addon_Types, Addon_Config } from '@storybook/types';
+import { addons, AddonStore } from '@storybook/addons';
 import * as postMessage from '@storybook/channel-postmessage';
 import * as webSocket from '@storybook/channel-websocket';
 import { CHANNEL_CREATED } from '@storybook/core-events';
@@ -34,7 +34,7 @@ export default class ReactProvider extends Provider {
     }
   }
 
-  getElements(type: Types) {
+  getElements(type: Addon_Types) {
     return this.addons.getElements(type);
   }
 
diff --git a/code/lib/types/src/modules/addons.ts b/code/lib/types/src/modules/addons.ts
index 41baa667ea2..ab343411363 100644
--- a/code/lib/types/src/modules/addons.ts
+++ b/code/lib/types/src/modules/addons.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
+
 import type { RenderData as RouterData } from '../../../router/src/router';
 import type { ThemeVars } from '../../../theming/src/types';
-import {
+import type {
   AnyFramework,
   Args,
   ArgsStoryFn as ArgsStoryFnForFramework,
@@ -175,18 +175,18 @@ export type Addon_BaseDecorators<StoryFnReturnType> = Array<
   (story: () => StoryFnReturnType, context: Addon_StoryContext) => StoryFnReturnType
 >;
 
-export interface Addon_BaseAnnotations<Args, StoryFnReturnType> {
+export interface Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
   /**
    * Dynamic data that are provided (and possibly updated by) Storybook and its addons.
    * @see [Arg story inputs](https://storybook.js.org/docs/react/api/csf#args-story-inputs)
    */
-  args?: Partial<Args>;
+  args?: Partial<TArgs>;
 
   /**
    * ArgTypes encode basic metadata for args, such as `name`, `description`, `defaultValue` for an arg. These get automatically filled in by Storybook Docs.
    * @see [Control annotations](https://github.com/storybookjs/storybook/blob/91e9dee33faa8eff0b342a366845de7100415367/addons/controls/README.md#control-annotations)
    */
-  argTypes?: Addons_ArgTypes<Args>;
+  argTypes?: Addons_ArgTypes<TArgs>;
 
   /**
    * Custom metadata for a story.
@@ -205,7 +205,7 @@ export interface Addon_BaseAnnotations<Args, StoryFnReturnType> {
   /**
    * Define a custom render function for the story(ies). If not passed, a default render function by the framework will be used.
    */
-  render?: (args: Args, context: Addon_StoryContext) => StoryFnReturnType;
+  render?: (args: TArgs, context: Addon_StoryContext) => StoryFnReturnType;
 
   /**
    * Function that is executed after the story is rendered.
@@ -213,8 +213,8 @@ export interface Addon_BaseAnnotations<Args, StoryFnReturnType> {
   play?: (context: Addon_StoryContext) => Promise<void> | void;
 }
 
-export interface Addon_Annotations<Args, StoryFnReturnType>
-  extends Addon_BaseAnnotations<Args, StoryFnReturnType> {
+export interface Addon_Annotations<TArgs, StoryFnReturnType>
+  extends Addon_BaseAnnotations<TArgs, StoryFnReturnType> {
   /**
    * Used to only include certain named exports as stories. Useful when you want to have non-story exports such as mock data or ignore a few stories.
    * @example
@@ -288,20 +288,20 @@ export interface Addon_BaseMeta<ComponentType> {
   subcomponents?: Record<string, ComponentType>;
 }
 
-export type Addon_BaseStoryObject<Args, StoryFnReturnType> = {
+export type Addon_BaseStoryObject<TArgs, StoryFnReturnType> = {
   /**
    * Override the display name in the UI
    */
   storyName?: string;
 };
 
-export type Addon_BaseStoryFn<Args, StoryFnReturnType> = {
-  (args: Args, context: Addon_StoryContext): StoryFnReturnType;
-} & Addon_BaseStoryObject<Args, StoryFnReturnType>;
+export type Addon_BaseStoryFn<TArgs, StoryFnReturnType> = {
+  (args: TArgs, context: Addon_StoryContext): StoryFnReturnType;
+} & Addon_BaseStoryObject<TArgs, StoryFnReturnType>;
 
-export type BaseStory<Args, StoryFnReturnType> =
-  | Addon_BaseStoryFn<Args, StoryFnReturnType>
-  | Addon_BaseStoryObject<Args, StoryFnReturnType>;
+export type BaseStory<TArgs, StoryFnReturnType> =
+  | Addon_BaseStoryFn<TArgs, StoryFnReturnType>
+  | Addon_BaseStoryObject<TArgs, StoryFnReturnType>;
 
 export interface Addon_RenderOptions {
   active?: boolean;
diff --git a/code/lib/types/src/modules/api-stories.ts b/code/lib/types/src/modules/api-stories.ts
index f706aec4024..69f31d182a2 100644
--- a/code/lib/types/src/modules/api-stories.ts
+++ b/code/lib/types/src/modules/api-stories.ts
@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
 import type { API_ViewMode } from './api';
 import type { DocsOptions } from './core-common';
 import type {
diff --git a/code/lib/types/src/modules/api.ts b/code/lib/types/src/modules/api.ts
index c5aad29d591..c168529e958 100644
--- a/code/lib/types/src/modules/api.ts
+++ b/code/lib/types/src/modules/api.ts
@@ -1,29 +1,21 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
+
 import type { RenderData } from '../../../router/src/router';
 import type { Channel } from '../../../channels/src';
 import type { ThemeVars } from '../../../theming/src/types';
 import type { ViewMode } from './csf';
 import type { DocsOptions } from './core-common';
-import {
+import type {
   API_HashEntry,
   API_SetStoriesStory,
   API_SetStoriesStoryData,
   API_StoriesHash,
   API_StoryIndex,
 } from './api-stories';
+import type { Addon_Types } from './addons';
 
 export type API_ViewMode = 'story' | 'info' | 'settings' | 'page' | undefined | string;
 
-enum types {
-  TAB = 'tab',
-  PANEL = 'panel',
-  TOOL = 'tool',
-  PREVIEW = 'preview',
-  NOTES_ELEMENT = 'notes-element',
-}
-
-export type API_Types = types | string;
 export interface API_RenderOptions {
   active: boolean;
   key: string;
@@ -44,7 +36,7 @@ export interface API_MatchOptions {
 
 export interface API_Addon {
   title: string;
-  type?: API_Types;
+  type?: Addon_Types;
   id?: string;
   route?: (routeOptions: API_RouteOptions) => string;
   match?: (matchOptions: API_MatchOptions) => boolean;
diff --git a/code/lib/types/src/modules/core-client.ts b/code/lib/types/src/modules/core-client.ts
index ea2436ba2d2..5767da49b53 100644
--- a/code/lib/types/src/modules/core-client.ts
+++ b/code/lib/types/src/modules/core-client.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { Store_RenderContext } from './store';
+import type { Store_RenderContext } from './store';
 // import { Store_RenderContext, Store_WebProjectAnnotations } from './store';
 // import { ArgsStoryFn } from './csf';
 
diff --git a/code/lib/types/src/modules/csf.ts b/code/lib/types/src/modules/csf.ts
index e6184909313..e178e7b54e1 100644
--- a/code/lib/types/src/modules/csf.ts
+++ b/code/lib/types/src/modules/csf.ts
@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-/* eslint-disable import/no-cycle */
+
 import type {
   AnnotatedStoryFn,
   AnyFramework,
@@ -60,7 +60,7 @@ import type {
 } from '@storybook/csf';
 import { Addon_OptionsParameter } from './addons';
 
-export {
+export type {
   AnnotatedStoryFn,
   AnyFramework,
   Args,
diff --git a/code/package.json b/code/package.json
index 2476c26378e..5ed32af5e69 100644
--- a/code/package.json
+++ b/code/package.json
@@ -75,9 +75,12 @@
     "publish:debug": "npm run publish:latest -- --npm-tag=debug --no-push",
     "publish:latest": "lerna publish --exact --concurrency 1 --force-publish",
     "publish:next": "npm run publish:latest -- --npm-tag=next",
-    "storybook:ui": "./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook --no-manager-cache",
-    "storybook:ui:build": "./lib/cli/bin/index.js build --config-dir ./ui/.storybook",
-    "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code/ui --project-token=$CHROMATIC_TOKEN_STORYBOOK_UI --only-changed --exit-zero-on-changes --exit-once-uploaded",
+    "storybook:blocks": "BLOCKS_ONLY=true yarn storybook:ui",
+    "storybook:blocks:build": "BLOCKS_ONLY=true yarn storybook:ui:build",
+    "storybook:blocks:chromatic": "BLOCKS_ONLY=true yarn storybook:ui:chromatic --project-token=${CHROMATIC_TOKEN_STORYBOOK_BLOCKS:-MISSING_PROJECT_TOKEN}",
+    "storybook:ui": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js dev --port 6006 --config-dir ./ui/.storybook --no-manager-cache",
+    "storybook:ui:build": "NODE_OPTIONS=\"--preserve-symlinks --preserve-symlinks-main\" ./lib/cli/bin/index.js build --config-dir ./ui/.storybook",
+    "storybook:ui:chromatic": "yarn chromatic --build-script-name storybook:ui:build --storybook-config-dir ./ui/.storybook --storybook-base-dir ./code/ui --project-token=${CHROMATIC_TOKEN_STORYBOOK_UI:-MISSING_PROJECT_TOKEN} --only-changed --exit-zero-on-changes --exit-once-uploaded",
     "task": "cd .. && yarn task",
     "test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js",
     "test:cli": "npm --prefix lib/cli run test"
diff --git a/code/renderers/html/src/public-types.ts b/code/renderers/html/src/public-types.ts
index d5013e261b4..fd843c3cd24 100644
--- a/code/renderers/html/src/public-types.ts
+++ b/code/renderers/html/src/public-types.ts
@@ -31,8 +31,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlFramework, TArgs>;
 
 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
diff --git a/code/renderers/preact/src/public-types.ts b/code/renderers/preact/src/public-types.ts
index 4f02a1ab167..453cbbb21f7 100644
--- a/code/renderers/preact/src/public-types.ts
+++ b/code/renderers/preact/src/public-types.ts
@@ -30,8 +30,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<PreactFramework, TArgs>;
 
 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts
index 6775e94e30b..811ca5ed5bf 100644
--- a/code/renderers/react/src/public-types.ts
+++ b/code/renderers/react/src/public-types.ts
@@ -19,31 +19,32 @@ type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<CmpOrArgs = Args> = CmpOrArgs extends ComponentType<infer CmpArgs>
-  ? ComponentAnnotations<ReactFramework, CmpArgs>
-  : ComponentAnnotations<ReactFramework, CmpOrArgs>;
+export type Meta<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
+  ? ComponentAnnotations<ReactFramework, ComponentProps<TCmpOrArgs>>
+  : ComponentAnnotations<ReactFramework, TCmpOrArgs>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactFramework, TArgs>;
+export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends ComponentType<any>
+  ? AnnotatedStoryFn<ReactFramework, ComponentProps<TCmpOrArgs>>
+  : AnnotatedStoryFn<ReactFramework, TCmpOrArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-
-export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
   render?: ArgsStoryFn<ReactFramework, any>;
   component?: infer Component;
   args?: infer DefaultArgs;
 }
   ? Simplify<
       (Component extends ComponentType<any> ? ComponentProps<Component> : unknown) &
-        ArgsFromMeta<ReactFramework, MetaOrCmpOrArgs>
+        ArgsFromMeta<ReactFramework, TMetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
         ReactFramework,
@@ -51,20 +52,21 @@ export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
         SetOptional<TArgs, Extract<keyof TArgs, keyof (DefaultArgs & ActionArgs<TArgs>)>>
       >
     : never
-  : MetaOrCmpOrArgs extends ComponentType<any>
+  : TMetaOrCmpOrArgs extends ComponentType<any>
   ? StoryAnnotations<
       ReactFramework,
-      ComponentProps<MetaOrCmpOrArgs>,
-      ComponentProps<MetaOrCmpOrArgs>
+      ComponentProps<TMetaOrCmpOrArgs>,
+      ComponentProps<TMetaOrCmpOrArgs>
     >
-  : StoryAnnotations<ReactFramework, MetaOrCmpOrArgs>;
+  : StoryAnnotations<ReactFramework, TMetaOrCmpOrArgs>;
 
 type ActionArgs<RArgs> = {
   [P in keyof RArgs as ((...args: any[]) => void) extends RArgs[P] ? P : never]: RArgs[P];
 };
 
 /**
- * @deprecated Use `Meta` instead.
+ * @deprecated Use `Meta` instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.
+ *
  * For the common case where a component's stories are simple components that receives args as props:
  *
  * ```tsx
@@ -74,6 +76,10 @@ type ActionArgs<RArgs> = {
 export type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
 
 /**
+ * @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
  * For the common case where a (CSFv2) story is a simple component that receives args as props:
  *
  * ```tsx
@@ -83,7 +89,7 @@ export type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
 export type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
 
 /**
- * @deprecated Use `StoryObj` instead.
+ * @deprecated Use `StoryObj` instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.
  *
  * For the common case where a (CSFv3) story is a simple component that receives args as props:
  *
@@ -96,18 +102,20 @@ export type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
 export type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
 
 /**
-
- /**
- * @deprecated Use `StoryObj` instead.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
  *
- * Story function that represents a CSFv3 component example.
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
 
 /**
- * @deprecated Use StoryObj instead.
+ * @deprecated Use `StoryFn` instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/.
  *
  * For the common case where a (CSFv3) story is a simple component that receives args as props:
  *
@@ -117,4 +125,4 @@ export type Story<TArgs = Args> = StoryFn<TArgs>;
  * }
  * ```
  */
-export type ComponentStory<T extends JSXElement> = ComponentStoryObj<T>;
+export type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
diff --git a/code/renderers/react/template/stories/decorators.stories.tsx b/code/renderers/react/template/stories/decorators.stories.tsx
index 39b1f83118b..d7e00e3319e 100644
--- a/code/renderers/react/template/stories/decorators.stories.tsx
+++ b/code/renderers/react/template/stories/decorators.stories.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 
 const Component: FC = () => <p>Story</p>;
 
@@ -13,9 +13,9 @@ export default {
       </>
     ),
   ],
-} as ComponentMeta<typeof Component>;
+} as Meta<typeof Component>;
 
-export const All: ComponentStory<typeof Component> = {
+export const All: StoryObj<typeof Component> = {
   decorators: [
     (Story) => (
       <>
diff --git a/code/renderers/server/src/public-types.ts b/code/renderers/server/src/public-types.ts
index 1220a155c89..a24291d4d55 100644
--- a/code/renderers/server/src/public-types.ts
+++ b/code/renderers/server/src/public-types.ts
@@ -30,8 +30,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerFramework, TArgs>;
 export type StoryObj<TArgs = Args> = StoryAnnotations<ServerFramework, TArgs>;
 
 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
diff --git a/code/renderers/svelte/src/public-types.ts b/code/renderers/svelte/src/public-types.ts
index 62fbaeeed64..2e3d7a9443c 100644
--- a/code/renderers/svelte/src/public-types.ts
+++ b/code/renderers/svelte/src/public-types.ts
@@ -25,7 +25,9 @@ export type Meta<CmpOrArgs = Args> = CmpOrArgs extends SvelteComponentTyped<infe
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<SvelteFramework, TArgs>;
+export type StoryFn<TCmpOrArgs = Args> = TCmpOrArgs extends SvelteComponentTyped<infer Props>
+  ? AnnotatedStoryFn<SvelteFramework, Props>
+  : AnnotatedStoryFn<SvelteFramework, TCmpOrArgs>;
 
 /**
  * Story function that represents a CSFv3 component example.
diff --git a/code/renderers/vue/src/public-types.ts b/code/renderers/vue/src/public-types.ts
index 9d5c35714af..4616658fe2a 100644
--- a/code/renderers/vue/src/public-types.ts
+++ b/code/renderers/vue/src/public-types.ts
@@ -19,42 +19,41 @@ export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/types'
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<CmpOrArgs = Args> = CmpOrArgs extends Component<any>
-  ? ComponentAnnotations<
-      VueFramework,
-      unknown extends ComponentProps<CmpOrArgs> ? CmpOrArgs : ComponentProps<CmpOrArgs>
-    >
-  : ComponentAnnotations<VueFramework, CmpOrArgs>;
+export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
+  VueFramework,
+  ComponentPropsOrProps<TCmpOrArgs>
+>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
+export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
+  VueFramework,
+  ComponentPropsOrProps<TCmpOrArgs>
+>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
   render?: ArgsStoryFn<VueFramework, any>;
   component?: infer C;
   args?: infer DefaultArgs;
 }
-  ? MetaOrCmpOrArgs extends Component<any>
-    ? StoryAnnotations<VueFramework, ComponentProps<MetaOrCmpOrArgs>>
-    : Simplify<ComponentProps<C> & ArgsFromMeta<VueFramework, MetaOrCmpOrArgs>> extends infer TArgs
+  ? TMetaOrCmpOrArgs extends Component<any> // needed because StoryObj<typeof Button> falls into this branch, see test
+    ? StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>
+    : Simplify<ComponentProps<C> & ArgsFromMeta<VueFramework, TMetaOrCmpOrArgs>> extends infer TArgs
     ? StoryAnnotations<
         VueFramework,
         TArgs,
         SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
       >
     : never
-  : MetaOrCmpOrArgs extends Component<any>
-  ? StoryAnnotations<VueFramework, ComponentProps<MetaOrCmpOrArgs>>
-  : StoryAnnotations<VueFramework, MetaOrCmpOrArgs>;
+  : StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
 
 type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
   ? P
@@ -62,8 +61,17 @@ type ComponentProps<C> = C extends ExtendedVue<any, any, any, any, infer P>
   ? P
   : unknown;
 
+type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Component<any>
+  ? unknown extends ComponentProps<TCmpOrArgs>
+    ? TCmpOrArgs
+    : ComponentProps<TCmpOrArgs>
+  : TCmpOrArgs;
+
 /**
  * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
diff --git a/code/renderers/vue3/src/public-types.test.ts b/code/renderers/vue3/src/public-types.test.ts
index 293c2db48e4..e44f2eb2fdb 100644
--- a/code/renderers/vue3/src/public-types.test.ts
+++ b/code/renderers/vue3/src/public-types.test.ts
@@ -3,11 +3,11 @@ import { ComponentAnnotations, StoryAnnotations } from '@storybook/csf';
 import { expectTypeOf } from 'expect-type';
 import { SetOptional } from 'type-fest';
 import { ComponentOptions, FunctionalComponent, h } from 'vue';
-import Button from './__tests__/Button.vue';
-import Decorator2TsVue from './__tests__/Decorator2.vue';
-import DecoratorTsVue from './__tests__/Decorator.vue';
 import { DecoratorFn, Meta, StoryObj } from './public-types';
 import { VueFramework } from './types';
+import Button from './__tests__/Button.vue';
+import DecoratorTsVue from './__tests__/Decorator.vue';
+import Decorator2TsVue from './__tests__/Decorator2.vue';
 
 describe('Meta', () => {
   test('Generic parameter of Meta can be a component', () => {
diff --git a/code/renderers/vue3/src/public-types.ts b/code/renderers/vue3/src/public-types.ts
index 119ffd1c7f1..7a37ec29e1f 100644
--- a/code/renderers/vue3/src/public-types.ts
+++ b/code/renderers/vue3/src/public-types.ts
@@ -17,29 +17,33 @@ import type { VueFramework } from './types';
  *
  * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export)
  */
-export type Meta<CmpOrArgs = Args> = CmpOrArgs extends ComponentOptions<infer Props>
-  ? ComponentAnnotations<VueFramework, unknown extends Props ? CmpOrArgs : Props>
-  : ComponentAnnotations<VueFramework, CmpOrArgs>;
+export type Meta<TCmpOrArgs = Args> = ComponentAnnotations<
+  VueFramework,
+  ComponentPropsOrProps<TCmpOrArgs>
+>;
 
 /**
  * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryFn<TArgs = Args> = AnnotatedStoryFn<VueFramework, TArgs>;
+export type StoryFn<TCmpOrArgs = Args> = AnnotatedStoryFn<
+  VueFramework,
+  ComponentPropsOrProps<TCmpOrArgs>
+>;
 
 /**
  * Story function that represents a CSFv3 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+export type StoryObj<TMetaOrCmpOrArgs = Args> = TMetaOrCmpOrArgs extends {
   render?: ArgsStoryFn<VueFramework, any>;
   component?: infer Component;
   args?: infer DefaultArgs;
 }
   ? Simplify<
-      ComponentProps<Component> & ArgsFromMeta<VueFramework, MetaOrCmpOrArgs>
+      ComponentProps<Component> & ArgsFromMeta<VueFramework, TMetaOrCmpOrArgs>
     > extends infer TArgs
     ? StoryAnnotations<
         VueFramework,
@@ -47,21 +51,29 @@ export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
         SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
       >
     : never
-  : MetaOrCmpOrArgs extends ConcreteComponent<any>
-  ? StoryAnnotations<VueFramework, ComponentProps<MetaOrCmpOrArgs>>
-  : StoryAnnotations<VueFramework, MetaOrCmpOrArgs>;
+  : StoryAnnotations<VueFramework, ComponentPropsOrProps<TMetaOrCmpOrArgs>>;
 
-type ComponentProps<Component> = Component extends ComponentOptions<infer P>
+type ComponentProps<C> = C extends ComponentOptions<infer P>
   ? P
-  : Component extends FunctionalComponent<infer P>
+  : C extends FunctionalComponent<infer P>
   ? P
   : unknown;
+
+type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends ConcreteComponent<any>
+  ? unknown extends ComponentProps<TCmpOrArgs>
+    ? TCmpOrArgs
+    : ComponentProps<TCmpOrArgs>
+  : TCmpOrArgs;
+
 /**
- * @deprecated Use `StoryObj` instead.
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
 
 export type DecoratorFn<TArgs = Args> = DecoratorFunction<VueFramework, TArgs>;
diff --git a/code/renderers/web-components/src/public-types.ts b/code/renderers/web-components/src/public-types.ts
index 5350c2e29f7..f264bc9db06 100644
--- a/code/renderers/web-components/src/public-types.ts
+++ b/code/renderers/web-components/src/public-types.ts
@@ -28,8 +28,12 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsFramework, TAr
 export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsFramework, TArgs>;
 
 /**
- * Story function that represents a CSFv3 component example.
+ * @deprecated Use `StoryFn` instead.
+ * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
+ * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+ *
+ * Story function that represents a CSFv2 component example.
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type Story<TArgs = Args> = StoryObj<TArgs>;
+export type Story<TArgs = Args> = StoryFn<TArgs>;
diff --git a/code/ui/.storybook/main.ts b/code/ui/.storybook/main.ts
index 973da3430c6..cf91a08607b 100644
--- a/code/ui/.storybook/main.ts
+++ b/code/ui/.storybook/main.ts
@@ -1,20 +1,25 @@
 import type { StorybookConfig } from '../../frameworks/react-vite/dist';
 
+const isBlocksOnly = process.env.BLOCKS_ONLY === 'true';
+
+const allStories = [
+  {
+    directory: '../manager/src',
+    titlePrefix: '@storybook-ui',
+  },
+  {
+    directory: '../components/src',
+    titlePrefix: '@storybook-components',
+  },
+  {
+    directory: '../blocks/src',
+    titlePrefix: '@storybook-blocks',
+  },
+];
+const blocksOnlyStories = ['../blocks/src/**/*.stories.@(js|jsx|ts|tsx|mdx)'];
+
 const config: StorybookConfig = {
-  stories: [
-    {
-      directory: '../manager/src',
-      titlePrefix: '@storybook-ui',
-    },
-    {
-      directory: '../components/src',
-      titlePrefix: '@storybook-components',
-    },
-    {
-      directory: '../blocks/src',
-      titlePrefix: '@storybook-blocks',
-    },
-  ],
+  stories: isBlocksOnly ? blocksOnlyStories : allStories,
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
diff --git a/code/ui/.storybook/preview.jsx b/code/ui/.storybook/preview.jsx
index b05579b7b13..1b3ce4cdc6d 100644
--- a/code/ui/.storybook/preview.jsx
+++ b/code/ui/.storybook/preview.jsx
@@ -9,8 +9,8 @@ import {
   convert,
   styled,
   useTheme,
-} from '../../lib/theming';
-import { Symbols } from '../components';
+} from '@storybook/theming';
+import { Symbols } from '@storybook/components';
 
 const { document } = global;
 
diff --git a/code/ui/components/src/typography/typography.stories.mdx b/code/ui/components/src/typography/typography.stories.mdx
index 7bd94ec1ca2..4756815eff0 100644
--- a/code/ui/components/src/typography/typography.stories.mdx
+++ b/code/ui/components/src/typography/typography.stories.mdx
@@ -12,6 +12,20 @@ export const sampleText =
 
 ## Sans-serif
 
+```
+font-family:
+  "Nunito Sans",
+  -apple-system,
+  ".SFNSText-Regular",
+  "San Francisco",
+  BlinkMacSystemFont,
+  "Segoe UI",
+  "Helvetica Neue",
+  Helvetica,
+  Arial,
+  sans-serif;
+```
+
 <Typeset
   fontFamily={typography.fonts.base}
   fontSizes={fontSizes}
@@ -33,7 +47,19 @@ export const sampleText =
 
 ## Monospace
 
-Currently not working
+```
+font-family:
+  ui-monospace,
+  Menlo,
+  Monaco,
+  "Roboto Mono",
+  "Oxygen Mono",
+  "Ubuntu Monospace",
+  "Source Code Pro",
+  "Droid Sans Mono",
+  "Courier New",
+  monospace;
+```
 
 <Typeset
   fontFamily={typography.fonts.mono}
diff --git a/code/ui/manager/src/provider.ts b/code/ui/manager/src/provider.ts
index b547cf96f40..d54ca6b6601 100644
--- a/code/ui/manager/src/provider.ts
+++ b/code/ui/manager/src/provider.ts
@@ -1,7 +1,7 @@
-import type { Types } from '@storybook/addons';
+import type { Addon_Types } from '@storybook/types';
 
 export default class Provider {
-  getElements(_type: Types) {
+  getElements(_type: Addon_Types) {
     throw new Error('Provider.getElements() is not implemented!');
   }
 
diff --git a/code/ui/manager/src/runtime.ts b/code/ui/manager/src/runtime.ts
index e9e86d17de8..c74e4f86072 100644
--- a/code/ui/manager/src/runtime.ts
+++ b/code/ui/manager/src/runtime.ts
@@ -1,8 +1,8 @@
 import global from 'global';
 
 import type { Channel } from '@storybook/channels';
-import { addons, AddonStore, type Types } from '@storybook/addons';
-import type { Addon_Config } from '@storybook/types';
+import { addons, AddonStore } from '@storybook/addons';
+import type { Addon_Types, Addon_Config } from '@storybook/types';
 import * as postMessage from '@storybook/channel-postmessage';
 import * as webSocket from '@storybook/channel-websocket';
 import { CHANNEL_CREATED } from '@storybook/core-events';
@@ -39,7 +39,7 @@ class ReactProvider extends Provider {
     }
   }
 
-  getElements(type: Types) {
+  getElements(type: Addon_Types) {
     return this.addons.getElements(type);
   }