From 0d9a4a656397f7a4f9c7b4f5b21bd911aec85cf4 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Thu, 28 Mar 2024 00:02:27 +0000
Subject: [PATCH 01/37] Update CHANGELOG.md for v8.0.5 [skip ci]

---
 CHANGELOG.md | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c78e29fa62ae..2de9a1f7882f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 8.0.5
+
+- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
+- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
+- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
+- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
+- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
+
 ## 8.0.4
 
 - Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!

From b2091f03ef695f3fc4a792ca872aff4cd8b0fd03 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 28 Mar 2024 10:07:40 +0100
Subject: [PATCH 02/37] Fix sourcemap generation in webpack react-docgen-loader

---
 .../presets/react-webpack/src/loaders/react-docgen-loader.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
index 15b71f19bfd5..ac83e37982de 100644
--- a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
+++ b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
@@ -114,7 +114,10 @@ export default async function reactDocgenLoader(
       }
     });
 
-    const map = magicString.generateMap({ hires: true });
+    const map = magicString.generateMap({
+      includeContent: true,
+      source: this.resourcePath,
+    });
     callback(null, magicString.toString(), map);
   } catch (error: any) {
     if (error.code === ERROR_CODES.MISSING_DEFINITION) {

From fdad84ebaf50e1ef0d590b93e14b0f9af40957c9 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 28 Mar 2024 11:41:58 +0100
Subject: [PATCH 03/37] Fix parallelism for check and compile command on CI

---
 scripts/tasks/check.ts   | 5 ++++-
 scripts/tasks/compile.ts | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/scripts/tasks/check.ts b/scripts/tasks/check.ts
index 80065df999b4..1f5928c48147 100644
--- a/scripts/tasks/check.ts
+++ b/scripts/tasks/check.ts
@@ -2,7 +2,10 @@ import type { Task } from '../task';
 import { exec } from '../utils/exec';
 import { maxConcurrentTasks } from '../utils/maxConcurrentTasks';
 
-const parallel = `--parallel=${process.env.CI ? 8 : maxConcurrentTasks}`;
+// The amount of VCPUs for the check task on CI is 8 (xlarge resource)
+const amountOfVCPUs = 8;
+
+const parallel = `--parallel=${process.env.CI ? amountOfVCPUs - 1 : maxConcurrentTasks}`;
 
 const linkCommand = `nx affected -t check ${parallel}`;
 const nolinkCommand = `nx affected -t check -c production ${parallel}`;
diff --git a/scripts/tasks/compile.ts b/scripts/tasks/compile.ts
index 7f4beda5d609..af220b9f27a4 100644
--- a/scripts/tasks/compile.ts
+++ b/scripts/tasks/compile.ts
@@ -5,7 +5,10 @@ import { maxConcurrentTasks } from '../utils/maxConcurrentTasks';
 import { exec } from '../utils/exec';
 import type { Task } from '../task';
 
-const parallel = `--parallel=${process.env.CI ? 8 : maxConcurrentTasks}`;
+// The amount of VCPUs for the check task on CI is 4 (large resource)
+const amountOfVCPUs = 4;
+
+const parallel = `--parallel=${process.env.CI ? amountOfVCPUs - 1 : maxConcurrentTasks}`;
 
 const linkedContents = `export * from '../src/index';`;
 const linkCommand = `nx run-many -t build ${parallel}`;

From 07728208244044272b8d45576cd0a33af69da2bc Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sat, 30 Mar 2024 10:04:31 +0100
Subject: [PATCH 04/37] Ensure all matching notifications are cleared rather
 than just the first one, and use atomic state updates

---
 .../manager-api/src/modules/notifications.ts  | 35 +++++++++----------
 1 file changed, 17 insertions(+), 18 deletions(-)

diff --git a/code/lib/manager-api/src/modules/notifications.ts b/code/lib/manager-api/src/modules/notifications.ts
index 3358dd67a241..0196fb1fcbc6 100644
--- a/code/lib/manager-api/src/modules/notifications.ts
+++ b/code/lib/manager-api/src/modules/notifications.ts
@@ -1,4 +1,5 @@
 import type { API_Notification } from '@storybook/types';
+import partition from 'lodash/partition.js';
 import type { ModuleFn } from '../lib/types';
 
 export interface SubState {
@@ -25,26 +26,24 @@ export interface SubAPI {
 
 export const init: ModuleFn = ({ store }) => {
   const api: SubAPI = {
-    addNotification: (notification) => {
-      // Get rid of it if already exists
-      api.clearNotification(notification.id);
-
-      const { notifications } = store.getState();
-
-      store.setState({ notifications: [...notifications, notification] });
+    addNotification: (newNotification) => {
+      store.setState(({ notifications }) => {
+        const [existing, others] = partition(notifications, (n) => n.id === newNotification.id);
+        existing.forEach((notification) => {
+          if (notification.onClear) notification.onClear({ dismissed: false });
+        });
+        return { notifications: [...others, newNotification] };
+      });
     },
 
-    clearNotification: (id) => {
-      const { notifications } = store.getState();
-
-      const notification = notifications.find((n) => n.id === id);
-
-      if (notification) {
-        store.setState({ notifications: notifications.filter((n) => n.id !== id) });
-        if (notification.onClear) {
-          notification.onClear({ dismissed: false });
-        }
-      }
+    clearNotification: (notificationId) => {
+      store.setState(({ notifications }) => {
+        const [matching, others] = partition(notifications, (n) => n.id === notificationId);
+        matching.forEach((notification) => {
+          if (notification.onClear) notification.onClear({ dismissed: false });
+        });
+        return { notifications: others };
+      });
     },
   };
 

From 123774cab7c29f909fe922eaa31d91110d2696d5 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sat, 30 Mar 2024 10:37:18 +0100
Subject: [PATCH 05/37] Improve NotificationItem stories

---
 .../NotificationItem.stories.tsx              | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
index 5d58559b465b..dd9b351f222a 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
@@ -7,6 +7,7 @@ import {
   BookIcon as BookIconIcon,
   FaceHappyIcon,
 } from '@storybook/icons';
+import { fn } from '@storybook/test';
 
 const meta = {
   component: NotificationItem,
@@ -29,8 +30,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const onClear = () => {};
-const onDismissNotification = () => {};
+const onClear = fn();
+const onDismissNotification = fn();
 
 export const Simple: Story = {
   args: {
@@ -40,7 +41,7 @@ export const Simple: Story = {
       content: {
         headline: 'Storybook cool!',
       },
-      link: '/some/path',
+      link: undefined,
     },
     onDismissNotification,
   },
@@ -55,7 +56,7 @@ export const LongHeadline: Story = {
       content: {
         headline: 'This is a long message that extends over two lines!',
       },
-      link: '/some/path',
+      link: undefined,
     },
   },
 };
@@ -115,7 +116,7 @@ export const BookIcon: Story = {
         headline: 'Storybook has a book icon!',
       },
       icon: <BookIconIcon />,
-      link: '/some/path',
+      link: undefined,
     },
   },
 };
@@ -131,7 +132,7 @@ export const StrongSubHeadline: Story = {
         subHeadline: <strong>Strong subHeadline</strong>,
       },
       icon: <BookIconIcon />,
-      link: '/some/path',
+      link: undefined,
     },
   },
 };
@@ -151,7 +152,7 @@ export const StrongEmphasizedSubHeadline: Story = {
         ),
       },
       icon: <BookIconIcon />,
-      link: '/some/path',
+      link: undefined,
     },
   },
 };
@@ -167,7 +168,7 @@ export const BookIconSubHeadline: Story = {
         subHeadline: 'Find out more!',
       },
       icon: <BookIconIcon />,
-      link: '/some/path',
+      link: undefined,
     },
   },
 };
@@ -184,7 +185,7 @@ export const BookIconLongSubHeadline: Story = {
           'Find out more! by clicking on on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications',
       },
       icon: <BookIconIcon />,
-      link: '/some/path',
+      link: undefined,
     },
   },
 };
@@ -200,7 +201,7 @@ export const AccessibilityIcon: Story = {
         subHeadline: 'It is here!',
       },
       icon: <AccessibilityIconIcon />,
-      link: '/some/path',
+      link: undefined,
     },
   },
 };
@@ -216,7 +217,7 @@ export const AccessibilityGoldIcon: Story = {
         subHeadline: 'It is gold!',
       },
       icon: <AccessibilityIconIcon color="gold" />,
-      link: '/some/path',
+      link: undefined,
     },
   },
 };
@@ -231,7 +232,7 @@ export const AccessibilityGoldIconLongHeadLineNoSubHeadline: Story = {
         headline: 'Storybook notifications has a accessibility icon it can be any color!',
       },
       icon: <AccessibilityIconIcon color="gold" />,
-      link: '/some/path',
+      link: undefined,
     },
   },
 };
@@ -249,7 +250,7 @@ export const WithOldIconFormat: Story = {
         name: 'accessibility',
         color: 'gold',
       },
-      link: '/some/path',
+      link: undefined,
     },
   },
 };

From e84cabef31b49a90e436be4b1c4edce73ff18dfe Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sat, 30 Mar 2024 14:24:34 +0100
Subject: [PATCH 06/37] Add duration property to Notification API, and show
 countdown bar

---
 code/lib/types/src/modules/api.ts             |  9 +-
 .../NotificationItem.stories.tsx              | 15 +++-
 .../notifications/NotificationItem.tsx        | 85 +++++++++++++------
 3 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/code/lib/types/src/modules/api.ts b/code/lib/types/src/modules/api.ts
index 1ccc98cc9e24..4c6893d35ad4 100644
--- a/code/lib/types/src/modules/api.ts
+++ b/code/lib/types/src/modules/api.ts
@@ -115,9 +115,13 @@ export interface API_SidebarOptions {
 
 interface OnClearOptions {
   /**
-   *  True when the user dismissed the notification.
+   *  True when the user manually dismissed the notification.
    */
   dismissed: boolean;
+  /**
+   *  True when the notification timed out after the set duration.
+   */
+  timeout: boolean;
 }
 
 /**
@@ -130,11 +134,12 @@ interface DeprecatedIconType {
 }
 export interface API_Notification {
   id: string;
-  link: string;
   content: {
     headline: string;
     subHeadline?: string | any;
   };
+  duration?: number;
+  link?: string;
   // TODO: Remove DeprecatedIconType in 9.0
   icon?: React.ReactNode | DeprecatedIconType;
   onClear?: (options: OnClearOptions) => void;
diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
index dd9b351f222a..210623ee6c8c 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
@@ -41,7 +41,20 @@ export const Simple: Story = {
       content: {
         headline: 'Storybook cool!',
       },
-      link: undefined,
+    },
+    onDismissNotification,
+  },
+};
+
+export const Timeout: Story = {
+  args: {
+    notification: {
+      id: '1',
+      onClear,
+      content: {
+        headline: 'Storybook cool!',
+      },
+      duration: 5000,
     },
     onDismissNotification,
   },
diff --git a/code/ui/manager/src/components/notifications/NotificationItem.tsx b/code/ui/manager/src/components/notifications/NotificationItem.tsx
index 0028f87749cf..20d736bd32bb 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.tsx
@@ -1,26 +1,51 @@
 import type { FC, SyntheticEvent } from 'react';
-import React from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { type State } from '@storybook/manager-api';
 import { Link } from '@storybook/router';
-import { styled, useTheme } from '@storybook/theming';
+import { keyframes, styled, useTheme } from '@storybook/theming';
 import type { IconsProps } from '@storybook/components';
 import { IconButton, Icons } from '@storybook/components';
 import { transparentize } from 'polished';
 import { CloseAltIcon } from '@storybook/icons';
 
-const Notification = styled.div(({ theme }) => ({
-  position: 'relative',
-  display: 'flex',
-  padding: 15,
-  width: 280,
-  borderRadius: 4,
-  alignItems: 'center',
+const grow = keyframes({
+  '0%': {
+    width: '0%',
+  },
+  '100%': {
+    width: '100%',
+  },
+});
 
-  background: theme.base === 'light' ? 'hsla(203, 50%, 20%, .97)' : 'hsla(203, 30%, 95%, .97)',
-  boxShadow: `0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)`,
-  color: theme.color.inverseText,
-  textDecoration: 'none',
-}));
+const Notification = styled.div<{ duration?: number }>(
+  ({ theme }) => ({
+    position: 'relative',
+    display: 'flex',
+    padding: 15,
+    width: 280,
+    borderRadius: 4,
+    alignItems: 'center',
+
+    background: theme.base === 'light' ? 'hsla(203, 50%, 20%, .97)' : 'hsla(203, 30%, 95%, .97)',
+    boxShadow: `0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)`,
+    color: theme.color.inverseText,
+    textDecoration: 'none',
+    overflow: 'hidden',
+  }),
+  ({ duration, theme }) =>
+    duration && {
+      '&::after': {
+        content: '""',
+        display: 'block',
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        height: 3,
+        background: theme.color.secondary,
+        animation: `${grow} ${duration}ms linear forwards reverse`,
+      },
+    }
+);
 
 const NotificationWithInteractiveStates = styled(Notification)(() => ({
   transition: 'all 150ms ease-out',
@@ -135,22 +160,34 @@ export const NotificationItemSpacer = styled.div({
 const NotificationItem: FC<{
   notification: State['notifications'][0];
   onDismissNotification: (id: string) => void;
-}> = ({ notification: { content, link, onClear, id, icon }, onDismissNotification }) => {
-  const dismissNotificationItem = () => {
+}> = ({ notification: { content, duration, link, onClear, id, icon }, onDismissNotification }) => {
+  const onTimeout = useCallback(() => {
     onDismissNotification(id);
-    if (onClear) {
-      onClear({ dismissed: true });
-    }
-  };
+    if (onClear) onClear({ dismissed: false, timeout: true });
+  }, [onDismissNotification, onClear]);
+
+  const timer = useRef<NodeJS.Timeout | null>(null);
+  useEffect(() => {
+    if (!duration) return;
+    timer.current = setTimeout(onTimeout, duration);
+    return () => clearTimeout(timer.current);
+  }, [duration, onTimeout]);
+
+  const onDismiss = useCallback(() => {
+    clearTimeout(timer.current);
+    onDismissNotification(id);
+    if (onClear) onClear({ dismissed: true, timeout: false });
+  }, [onDismissNotification, onClear]);
+
   return link ? (
-    <NotificationLink to={link}>
+    <NotificationLink to={link} duration={duration}>
       <ItemContent icon={icon} content={content} />
-      <DismissNotificationItem onDismiss={dismissNotificationItem} />
+      <DismissNotificationItem onDismiss={onDismiss} />
     </NotificationLink>
   ) : (
-    <Notification>
+    <Notification duration={duration}>
       <ItemContent icon={icon} content={content} />
-      <DismissNotificationItem onDismiss={dismissNotificationItem} />
+      <DismissNotificationItem onDismiss={onDismiss} />
     </Notification>
   );
 };

From b00d4ee29bae443158807f5794519d34a9104cc8 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sat, 30 Mar 2024 20:27:20 +0100
Subject: [PATCH 07/37] Add slide in animation to notifications

---
 .../components/notifications/NotificationItem.tsx    | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/code/ui/manager/src/components/notifications/NotificationItem.tsx b/code/ui/manager/src/components/notifications/NotificationItem.tsx
index 20d736bd32bb..ca07e513422a 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.tsx
@@ -8,6 +8,17 @@ import { IconButton, Icons } from '@storybook/components';
 import { transparentize } from 'polished';
 import { CloseAltIcon } from '@storybook/icons';
 
+const slideIn = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(30px)',
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+});
+
 const grow = keyframes({
   '0%': {
     width: '0%',
@@ -26,6 +37,7 @@ const Notification = styled.div<{ duration?: number }>(
     borderRadius: 4,
     alignItems: 'center',
 
+    animation: `${slideIn} 500ms`,
     background: theme.base === 'light' ? 'hsla(203, 50%, 20%, .97)' : 'hsla(203, 30%, 95%, .97)',
     boxShadow: `0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)`,
     color: theme.color.inverseText,

From 7f1c4e0272ebd974e0250e15417b3f85d962a3ba Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sat, 30 Mar 2024 21:06:10 +0100
Subject: [PATCH 08/37] Fix logging onClear handler

---
 .../components/notifications/NotificationItem.stories.tsx   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
index 210623ee6c8c..254812ead9d9 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import { LocationProvider } from '@storybook/router';
 import type { Meta, StoryObj } from '@storybook/react';
 import NotificationItem from './NotificationItem';
@@ -7,7 +8,6 @@ import {
   BookIcon as BookIconIcon,
   FaceHappyIcon,
 } from '@storybook/icons';
-import { fn } from '@storybook/test';
 
 const meta = {
   component: NotificationItem,
@@ -30,8 +30,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const onClear = fn();
-const onDismissNotification = fn();
+const onClear = action('onClear');
+const onDismissNotification = () => {};
 
 export const Simple: Story = {
   args: {

From 8338f595b66f593b9b28cbb05257f7ad057b73d8 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sat, 30 Mar 2024 21:10:27 +0100
Subject: [PATCH 09/37] Add missing property

---
 code/lib/manager-api/src/modules/notifications.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/code/lib/manager-api/src/modules/notifications.ts b/code/lib/manager-api/src/modules/notifications.ts
index 0196fb1fcbc6..a8ee3195b6b7 100644
--- a/code/lib/manager-api/src/modules/notifications.ts
+++ b/code/lib/manager-api/src/modules/notifications.ts
@@ -30,7 +30,7 @@ export const init: ModuleFn = ({ store }) => {
       store.setState(({ notifications }) => {
         const [existing, others] = partition(notifications, (n) => n.id === newNotification.id);
         existing.forEach((notification) => {
-          if (notification.onClear) notification.onClear({ dismissed: false });
+          if (notification.onClear) notification.onClear({ dismissed: false, timeout: false });
         });
         return { notifications: [...others, newNotification] };
       });
@@ -40,7 +40,7 @@ export const init: ModuleFn = ({ store }) => {
       store.setState(({ notifications }) => {
         const [matching, others] = partition(notifications, (n) => n.id === notificationId);
         matching.forEach((notification) => {
-          if (notification.onClear) notification.onClear({ dismissed: false });
+          if (notification.onClear) notification.onClear({ dismissed: false, timeout: false });
         });
         return { notifications: others };
       });

From 908e92ec2b159bbedc15386a8b6e271200432224 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sat, 30 Mar 2024 21:26:16 +0100
Subject: [PATCH 10/37] Add onClick property to notifications

---
 code/lib/types/src/modules/api.ts             |  8 +++++
 .../NotificationItem.stories.tsx              | 35 ++++++++++---------
 .../notifications/NotificationItem.tsx        | 32 +++++++++++++----
 3 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/code/lib/types/src/modules/api.ts b/code/lib/types/src/modules/api.ts
index 4c6893d35ad4..481139e71792 100644
--- a/code/lib/types/src/modules/api.ts
+++ b/code/lib/types/src/modules/api.ts
@@ -124,6 +124,13 @@ interface OnClearOptions {
   timeout: boolean;
 }
 
+interface OnClickOptions {
+  /**
+   *  Function to dismiss the notification.
+   */
+  onDismiss: () => void;
+}
+
 /**
  * @deprecated Use ReactNode for the icon instead.
  * @see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#icons-is-deprecated
@@ -143,6 +150,7 @@ export interface API_Notification {
   // TODO: Remove DeprecatedIconType in 9.0
   icon?: React.ReactNode | DeprecatedIconType;
   onClear?: (options: OnClearOptions) => void;
+  onClick?: (options: OnClickOptions) => void;
 }
 
 type API_Versions = Record<string, string>;
diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
index 254812ead9d9..13b20e0f7d99 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
@@ -25,13 +25,16 @@ const meta = {
     ),
   ],
   excludeStories: /.*Data$/,
+  args: {
+    onDismissNotification: () => {},
+  },
 } satisfies Meta<typeof NotificationItem>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 const onClear = action('onClear');
-const onDismissNotification = () => {};
+const onClick = action('onClick');
 
 export const Simple: Story = {
   args: {
@@ -42,27 +45,24 @@ export const Simple: Story = {
         headline: 'Storybook cool!',
       },
     },
-    onDismissNotification,
   },
 };
 
 export const Timeout: Story = {
   args: {
     notification: {
-      id: '1',
+      id: 'Timeout',
       onClear,
       content: {
         headline: 'Storybook cool!',
       },
       duration: 5000,
     },
-    onDismissNotification,
   },
 };
 
 export const LongHeadline: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '2',
       onClear,
@@ -74,9 +74,21 @@ export const LongHeadline: Story = {
   },
 };
 
+export const Clickable: Story = {
+  args: {
+    notification: {
+      id: 'Clickable',
+      onClear,
+      onClick,
+      content: {
+        headline: 'Storybook cool!',
+      },
+    },
+  },
+};
+
 export const Link: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '3',
       onClear,
@@ -90,7 +102,6 @@ export const Link: Story = {
 
 export const LinkIconWithColor: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '4',
       onClear,
@@ -105,7 +116,6 @@ export const LinkIconWithColor: Story = {
 
 export const LinkIconWithColorSubHeadline: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '5',
       onClear,
@@ -121,7 +131,6 @@ export const LinkIconWithColorSubHeadline: Story = {
 
 export const BookIcon: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '6',
       onClear,
@@ -136,7 +145,6 @@ export const BookIcon: Story = {
 
 export const StrongSubHeadline: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '7',
       onClear,
@@ -152,7 +160,6 @@ export const StrongSubHeadline: Story = {
 
 export const StrongEmphasizedSubHeadline: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '8',
       onClear,
@@ -172,7 +179,6 @@ export const StrongEmphasizedSubHeadline: Story = {
 
 export const BookIconSubHeadline: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '9',
       onClear,
@@ -188,7 +194,6 @@ export const BookIconSubHeadline: Story = {
 
 export const BookIconLongSubHeadline: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '10',
       onClear,
@@ -205,7 +210,6 @@ export const BookIconLongSubHeadline: Story = {
 
 export const AccessibilityIcon: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '11',
       onClear,
@@ -221,7 +225,6 @@ export const AccessibilityIcon: Story = {
 
 export const AccessibilityGoldIcon: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '12',
       onClear,
@@ -237,7 +240,6 @@ export const AccessibilityGoldIcon: Story = {
 
 export const AccessibilityGoldIconLongHeadLineNoSubHeadline: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '13',
       onClear,
@@ -252,7 +254,6 @@ export const AccessibilityGoldIconLongHeadLineNoSubHeadline: Story = {
 
 export const WithOldIconFormat: Story = {
   args: {
-    ...Simple.args,
     notification: {
       id: '13',
       onClear,
diff --git a/code/ui/manager/src/components/notifications/NotificationItem.tsx b/code/ui/manager/src/components/notifications/NotificationItem.tsx
index ca07e513422a..35403fab8296 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.tsx
@@ -60,6 +60,7 @@ const Notification = styled.div<{ duration?: number }>(
 );
 
 const NotificationWithInteractiveStates = styled(Notification)(() => ({
+  cursor: 'pointer',
   transition: 'all 150ms ease-out',
   transform: 'translate3d(0, 0, 0)',
   '&:hover': {
@@ -158,6 +159,7 @@ const DismissNotificationItem: FC<{
     title="Dismiss notification"
     onClick={(e: SyntheticEvent) => {
       e.preventDefault();
+      e.stopPropagation();
       onDismiss();
     }}
   >
@@ -172,7 +174,10 @@ export const NotificationItemSpacer = styled.div({
 const NotificationItem: FC<{
   notification: State['notifications'][0];
   onDismissNotification: (id: string) => void;
-}> = ({ notification: { content, duration, link, onClear, id, icon }, onDismissNotification }) => {
+}> = ({
+  notification: { content, duration, link, onClear, onClick, id, icon },
+  onDismissNotification,
+}) => {
   const onTimeout = useCallback(() => {
     onDismissNotification(id);
     if (onClear) onClear({ dismissed: false, timeout: true });
@@ -191,12 +196,25 @@ const NotificationItem: FC<{
     if (onClear) onClear({ dismissed: true, timeout: false });
   }, [onDismissNotification, onClear]);
 
-  return link ? (
-    <NotificationLink to={link} duration={duration}>
-      <ItemContent icon={icon} content={content} />
-      <DismissNotificationItem onDismiss={onDismiss} />
-    </NotificationLink>
-  ) : (
+  if (link) {
+    return (
+      <NotificationLink to={link} duration={duration}>
+        <ItemContent icon={icon} content={content} />
+        <DismissNotificationItem onDismiss={onDismiss} />
+      </NotificationLink>
+    );
+  }
+
+  if (onClick) {
+    return (
+      <NotificationWithInteractiveStates onClick={() => onClick({ onDismiss })} duration={duration}>
+        <ItemContent icon={icon} content={content} />
+        <DismissNotificationItem onDismiss={onDismiss} />
+      </NotificationWithInteractiveStates>
+    );
+  }
+
+  return (
     <Notification duration={duration}>
       <ItemContent icon={icon} content={content} />
       <DismissNotificationItem onDismiss={onDismiss} />

From d61bfd875916a1d4fea13ddec225e995c6f9d932 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sat, 30 Mar 2024 21:42:03 +0100
Subject: [PATCH 11/37] Use button element for clickable notification

---
 .../notifications/NotificationItem.stories.tsx         |  1 +
 .../src/components/notifications/NotificationItem.tsx  | 10 +++++++---
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
index 13b20e0f7d99..e9c56c7fa060 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
@@ -53,6 +53,7 @@ export const Timeout: Story = {
     notification: {
       id: 'Timeout',
       onClear,
+      onClick,
       content: {
         headline: 'Storybook cool!',
       },
diff --git a/code/ui/manager/src/components/notifications/NotificationItem.tsx b/code/ui/manager/src/components/notifications/NotificationItem.tsx
index 35403fab8296..d47f539a3f1c 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.tsx
@@ -61,6 +61,9 @@ const Notification = styled.div<{ duration?: number }>(
 
 const NotificationWithInteractiveStates = styled(Notification)(() => ({
   cursor: 'pointer',
+  border: 'none',
+  outline: 'none',
+  textAlign: 'left',
   transition: 'all 150ms ease-out',
   transform: 'translate3d(0, 0, 0)',
   '&:hover': {
@@ -75,9 +78,10 @@ const NotificationWithInteractiveStates = styled(Notification)(() => ({
   },
   '&:focus': {
     boxShadow:
-      '0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)',
+      'rgba(2,156,253,1) 0 0 0 1px inset, 0 1px 3px 0 rgba(30,167,253,0.5), 0 2px 5px 0 rgba(0,0,0,0.05), 0 5px 15px 0 rgba(0,0,0,0.1)',
   },
 }));
+const NotificationButton = NotificationWithInteractiveStates.withComponent('button');
 const NotificationLink = NotificationWithInteractiveStates.withComponent(Link);
 
 const NotificationIconWrapper = styled.div(() => ({
@@ -207,10 +211,10 @@ const NotificationItem: FC<{
 
   if (onClick) {
     return (
-      <NotificationWithInteractiveStates onClick={() => onClick({ onDismiss })} duration={duration}>
+      <NotificationButton duration={duration} onClick={() => onClick({ onDismiss })}>
         <ItemContent icon={icon} content={content} />
         <DismissNotificationItem onDismiss={onDismiss} />
-      </NotificationWithInteractiveStates>
+      </NotificationButton>
     );
   }
 

From b280b720ad8ac7d92864e3781a9266539b97357e Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Sun, 31 Mar 2024 15:57:00 +0200
Subject: [PATCH 12/37] Verify callback functionality

---
 .../NotificationItem.stories.tsx              | 23 ++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
index e9c56c7fa060..af4c7fcc8e57 100644
--- a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
+++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx
@@ -8,6 +8,7 @@ import {
   BookIcon as BookIconIcon,
   FaceHappyIcon,
 } from '@storybook/icons';
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
 
 const meta = {
   component: NotificationItem,
@@ -33,8 +34,8 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-const onClear = action('onClear');
-const onClick = action('onClick');
+const onClear = fn(action('onClear'));
+const onClick = fn(action('onClick'));
 
 export const Simple: Story = {
   args: {
@@ -57,9 +58,19 @@ export const Timeout: Story = {
       content: {
         headline: 'Storybook cool!',
       },
-      duration: 5000,
+      duration: 3000,
     },
   },
+  play: async ({ args }) => {
+    await waitFor(
+      () => {
+        expect(args.notification.onClear).toHaveBeenCalledWith({ dismissed: false, timeout: true });
+      },
+      {
+        timeout: 4000,
+      }
+    );
+  },
 };
 
 export const LongHeadline: Story = {
@@ -86,6 +97,12 @@ export const Clickable: Story = {
       },
     },
   },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+    const [button] = await canvas.findAllByRole('button');
+    await userEvent.click(button);
+    await expect(args.notification.onClick).toHaveBeenCalledWith({ onDismiss: expect.anything() });
+  },
 };
 
 export const Link: Story = {

From aa6984a67eda912a5f7c01707d5e080c69198c44 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Sun, 31 Mar 2024 21:51:06 +0200
Subject: [PATCH 13/37] Fix next/font transformation on Windows machines

---
 code/frameworks/nextjs/src/css/webpack.ts           |  2 +-
 .../nextjs/src/font/webpack/configureNextFont.ts    |  2 +-
 .../webpack/loader/storybook-nextjs-font-loader.ts  | 13 +++++++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/code/frameworks/nextjs/src/css/webpack.ts b/code/frameworks/nextjs/src/css/webpack.ts
index 75718527e7dd..a2723529e2fd 100644
--- a/code/frameworks/nextjs/src/css/webpack.ts
+++ b/code/frameworks/nextjs/src/css/webpack.ts
@@ -36,7 +36,7 @@ export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig):
         ],
         // We transform the "target.css" files from next.js into Javascript
         // for Next.js to support fonts, so it should be ignored by the css-loader.
-        exclude: /next\/.*\/target.css$/,
+        exclude: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css/,
       };
     }
   });
diff --git a/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts b/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts
index b1e3851611d6..bd3f1640ff36 100644
--- a/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts
+++ b/code/frameworks/nextjs/src/font/webpack/configureNextFont.ts
@@ -7,7 +7,7 @@ export function configureNextFont(baseConfig: Configuration, isSWC?: boolean) {
 
   if (isSWC) {
     baseConfig.module?.rules?.push({
-      test: /next\/.*\/target.css$/,
+      test: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css$/,
       loader: fontLoaderPath,
     });
   } else {
diff --git a/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts b/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts
index 2110701aae61..055d934f57a4 100644
--- a/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts
+++ b/code/frameworks/nextjs/src/font/webpack/loader/storybook-nextjs-font-loader.ts
@@ -3,6 +3,7 @@ import { getFontFaceDeclarations as getLocalFontFaceDeclarations } from './local
 import type { LoaderOptions } from './types';
 import { getCSSMeta } from './utils/get-css-meta';
 import { setFontDeclarationsInHead } from './utils/set-font-declarations-in-head';
+import path from 'path';
 
 type FontFaceDeclaration = {
   id: string;
@@ -39,11 +40,19 @@ export default async function storybookNextjsFontLoader(this: any) {
 
   let fontFaceDeclaration: FontFaceDeclaration | undefined;
 
-  if (options.source.endsWith('next/font/google') || options.source.endsWith('@next/font/google')) {
+  const pathSep = path.sep;
+
+  if (
+    options.source.endsWith(`next${pathSep}font${pathSep}google`) ||
+    options.source.endsWith(`@next${pathSep}font${pathSep}google`)
+  ) {
     fontFaceDeclaration = await getGoogleFontFaceDeclarations(options);
   }
 
-  if (options.source.endsWith('next/font/local') || options.source.endsWith('@next/font/local')) {
+  if (
+    options.source.endsWith(`next${pathSep}font${pathSep}local`) ||
+    options.source.endsWith(`@next${pathSep}font${pathSep}local`)
+  ) {
     fontFaceDeclaration = await getLocalFontFaceDeclarations(options, rootCtx, swcMode);
   }
 

From 4267475bdb68e6222942c2be1126902b37a39c40 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Sun, 31 Mar 2024 21:52:20 +0200
Subject: [PATCH 14/37] Fix local next/fonts on Windows machines

---
 .../webpack/loader/local/get-font-face-declarations.ts    | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts
index f3f35c2fc065..e980d15b0e3d 100644
--- a/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts
+++ b/code/frameworks/nextjs/src/font/webpack/loader/local/get-font-face-declarations.ts
@@ -39,13 +39,9 @@ export async function getFontFaceDeclarations(
     .map(({ prop, value }: { prop: string; value: string }) => `${prop}: ${value};`)
     .join('\n');
 
-  const arePathsWin32Format = /^[a-z]:\\/iu.test(options.filename);
-  const cleanWin32Path = (pathString: string): string =>
-    arePathsWin32Format ? pathString.replace(/\\/gu, '/') : pathString;
-
   const getFontFaceCSS = () => {
     if (typeof localFontSrc === 'string') {
-      const localFontPath = cleanWin32Path(path.join(parentFolder, localFontSrc));
+      const localFontPath = path.join(parentFolder, localFontSrc).replaceAll('\\', '/');
 
       return `@font-face {
           font-family: ${id};
@@ -55,7 +51,7 @@ export async function getFontFaceDeclarations(
     }
     return localFontSrc
       .map((font) => {
-        const localFontPath = cleanWin32Path(path.join(parentFolder, font.path));
+        const localFontPath = path.join(parentFolder, font.path).replaceAll('\\', '/');
 
         return `@font-face {
           font-family: ${id};

From e40d7840ba89965a7aedfcbfc12c53acb6218d62 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Sun, 31 Mar 2024 22:04:06 +0200
Subject: [PATCH 15/37] Escape . character in regex

---
 code/frameworks/nextjs/src/css/webpack.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/frameworks/nextjs/src/css/webpack.ts b/code/frameworks/nextjs/src/css/webpack.ts
index a2723529e2fd..f6c7d7838f0a 100644
--- a/code/frameworks/nextjs/src/css/webpack.ts
+++ b/code/frameworks/nextjs/src/css/webpack.ts
@@ -36,7 +36,7 @@ export const configureCss = (baseConfig: WebpackConfig, nextConfig: NextConfig):
         ],
         // We transform the "target.css" files from next.js into Javascript
         // for Next.js to support fonts, so it should be ignored by the css-loader.
-        exclude: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css/,
+        exclude: /next(\\|\/|\\\\).*(\\|\/|\\\\)target\.css$/,
       };
     }
   });

From e6bbb1411f2aead6bd5a9c586e6c351ee5f5c4a9 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Sun, 17 Mar 2024 21:09:57 -0600
Subject: [PATCH 16/37] WIP: Update multiple components guidance

---
 ...checked.ts.mdx => reuse-story-csf2.ts.mdx} | 15 +---
 .../reuse-story-render-function.ts.mdx        | 36 ++++++++++
 .../reuse-story-csf2.js.mdx}                  |  8 +--
 ...ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} |  8 +--
 ...checked.ts.mdx => reuse-story-csf2.ts.mdx} |  8 +--
 .../react/reuse-story-portable.js.mdx         | 22 ++++++
 .../react/reuse-story-portable.ts-4-9.mdx     | 26 +++++++
 .../react/reuse-story-portable.ts.mdx         | 29 ++++++++
 .../reuse-story-csf2.js.mdx}                  |  8 +--
 ...ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} |  8 +--
 ...checked.ts.mdx => reuse-story-csf2.ts.mdx} |  8 +--
 .../solid/reuse-story-render-function.js.mdx  | 19 +++++
 .../reuse-story-render-function.ts-4-9.mdx    | 24 +++++++
 .../solid/reuse-story-render-function.ts.mdx  | 24 +++++++
 ...ecked.3.js.mdx => reuse-story-csf2.js.mdx} | 14 ++--
 ...ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} |  8 +--
 ...ecked.3.ts.mdx => reuse-story-csf2.ts.mdx} |  8 +--
 docs/snippets/vue/reuse-story-portable.js.mdx | 28 ++++++++
 .../vue/reuse-story-portable.ts-4-9.mdx       | 32 +++++++++
 docs/snippets/vue/reuse-story-portable.ts.mdx | 32 +++++++++
 ...checked.js.mdx => reuse-story-csf2.js.mdx} |  3 +-
 ...checked.ts.mdx => reuse-story-csf2.ts.mdx} |  3 +-
 .../reuse-story-render-function.js.mdx        | 16 +++++
 .../reuse-story-render-function.ts.mdx        | 21 ++++++
 .../stories-for-multiple-components.md        | 69 +++++++++++++++----
 25 files changed, 381 insertions(+), 96 deletions(-)
 rename docs/snippets/angular/{list-story-unchecked.ts.mdx => reuse-story-csf2.ts.mdx} (63%)
 create mode 100644 docs/snippets/angular/reuse-story-render-function.ts.mdx
 rename docs/snippets/{solid/list-story-unchecked.js.mdx => react/reuse-story-csf2.js.mdx} (53%)
 rename docs/snippets/react/{list-story-unchecked.ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} (64%)
 rename docs/snippets/react/{list-story-unchecked.ts.mdx => reuse-story-csf2.ts.mdx} (63%)
 create mode 100644 docs/snippets/react/reuse-story-portable.js.mdx
 create mode 100644 docs/snippets/react/reuse-story-portable.ts-4-9.mdx
 create mode 100644 docs/snippets/react/reuse-story-portable.ts.mdx
 rename docs/snippets/{react/list-story-unchecked.js.mdx => solid/reuse-story-csf2.js.mdx} (53%)
 rename docs/snippets/solid/{list-story-unchecked.ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} (64%)
 rename docs/snippets/solid/{list-story-unchecked.ts.mdx => reuse-story-csf2.ts.mdx} (63%)
 create mode 100644 docs/snippets/solid/reuse-story-render-function.js.mdx
 create mode 100644 docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/reuse-story-render-function.ts.mdx
 rename docs/snippets/vue/{list-story-unchecked.3.js.mdx => reuse-story-csf2.js.mdx} (74%)
 rename docs/snippets/vue/{list-story-unchecked.3.ts-4-9.mdx => reuse-story-csf2.ts-4-9.mdx} (78%)
 rename docs/snippets/vue/{list-story-unchecked.3.ts.mdx => reuse-story-csf2.ts.mdx} (77%)
 create mode 100644 docs/snippets/vue/reuse-story-portable.js.mdx
 create mode 100644 docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
 create mode 100644 docs/snippets/vue/reuse-story-portable.ts.mdx
 rename docs/snippets/web-components/{list-story-unchecked.js.mdx => reuse-story-csf2.js.mdx} (84%)
 rename docs/snippets/web-components/{list-story-unchecked.ts.mdx => reuse-story-csf2.ts.mdx} (88%)
 create mode 100644 docs/snippets/web-components/reuse-story-render-function.js.mdx
 create mode 100644 docs/snippets/web-components/reuse-story-render-function.ts.mdx

diff --git a/docs/snippets/angular/list-story-unchecked.ts.mdx b/docs/snippets/angular/reuse-story-csf2.ts.mdx
similarity index 63%
rename from docs/snippets/angular/list-story-unchecked.ts.mdx
rename to docs/snippets/angular/reuse-story-csf2.ts.mdx
index 31b0be7651c7..968d8f6c12d5 100644
--- a/docs/snippets/angular/list-story-unchecked.ts.mdx
+++ b/docs/snippets/angular/reuse-story-csf2.ts.mdx
@@ -1,24 +1,16 @@
 ```ts
 // List.stories.ts
-
 import type { Meta, StoryObj } from '@storybook/angular';
-
 import { moduleMetadata } from '@storybook/angular';
-
 import { CommonModule } from '@angular/common';
 
 import { List } from './list.component';
 import { ListItem } from './list-item.component';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
   decorators: [
     moduleMetadata({
@@ -31,11 +23,6 @@ const meta: Meta<List> = {
 export default meta;
 type Story = StoryObj<List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const OneItem: Story = {
   render: (args) => ({
     props: args,
diff --git a/docs/snippets/angular/reuse-story-render-function.ts.mdx b/docs/snippets/angular/reuse-story-render-function.ts.mdx
new file mode 100644
index 000000000000..dd16565a95c1
--- /dev/null
+++ b/docs/snippets/angular/reuse-story-render-function.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// List.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+import { moduleMetadata } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
+
+import { List } from './list.component';
+import { ListItem } from './list-item.component';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+const meta: Meta<List> = {
+  component: List,
+  decorators: [
+    moduleMetadata({
+      declarations: [List, ListItem],
+      imports: [CommonModule],
+    }),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<List>;
+
+export const OneItem: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-list>
+        ${Unchecked.render({ ...Unchecked.args })}
+      </app-list>
+   `,
+  }),
+};
+```
diff --git a/docs/snippets/solid/list-story-unchecked.js.mdx b/docs/snippets/react/reuse-story-csf2.js.mdx
similarity index 53%
rename from docs/snippets/solid/list-story-unchecked.js.mdx
rename to docs/snippets/react/reuse-story-csf2.js.mdx
index e9df70ee1467..24d8894648a9 100644
--- a/docs/snippets/solid/list-story-unchecked.js.mdx
+++ b/docs/snippets/react/reuse-story-csf2.js.mdx
@@ -1,17 +1,11 @@
 ```js
 // List.stories.js|jsx
-
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/react/list-story-unchecked.ts-4-9.mdx b/docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
similarity index 64%
rename from docs/snippets/react/list-story-unchecked.ts-4-9.mdx
rename to docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
index e3664a92818f..183ee1c2d037 100644
--- a/docs/snippets/react/list-story-unchecked.ts-4-9.mdx
+++ b/docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
@@ -1,19 +1,13 @@
 ```ts
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/reuse-story-csf2.ts.mdx
similarity index 63%
rename from docs/snippets/react/list-story-unchecked.ts.mdx
rename to docs/snippets/react/reuse-story-csf2.ts.mdx
index 8ff062ecc89f..2d7bc40aa229 100644
--- a/docs/snippets/react/list-story-unchecked.ts.mdx
+++ b/docs/snippets/react/reuse-story-csf2.ts.mdx
@@ -1,19 +1,13 @@
 ```tsx
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/react/reuse-story-portable.js.mdx b/docs/snippets/react/reuse-story-portable.js.mdx
new file mode 100644
index 000000000000..205b04a171ed
--- /dev/null
+++ b/docs/snippets/react/reuse-story-portable.js.mdx
@@ -0,0 +1,22 @@
+```js
+// List.stories.js|jsx
+import { composeStories } from '@storybook/react';
+
+import { List } from './List';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+// 👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export default {
+  component: List,
+};
+
+export const OneItem = {
+  render: (args) => (
+    <List {...args}><Unchecked /></List>
+  ),
+};
+```
diff --git a/docs/snippets/react/reuse-story-portable.ts-4-9.mdx b/docs/snippets/react/reuse-story-portable.ts-4-9.mdx
new file mode 100644
index 000000000000..24a54edbd7fc
--- /dev/null
+++ b/docs/snippets/react/reuse-story-portable.ts-4-9.mdx
@@ -0,0 +1,26 @@
+```ts
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { composeStories } from '@storybook/react';
+
+import { List } from './List';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+// 👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}><Unchecked /></List>
+  ),
+};
+```
diff --git a/docs/snippets/react/reuse-story-portable.ts.mdx b/docs/snippets/react/reuse-story-portable.ts.mdx
new file mode 100644
index 000000000000..c7e287a09b5f
--- /dev/null
+++ b/docs/snippets/react/reuse-story-portable.ts.mdx
@@ -0,0 +1,29 @@
+```tsx
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { composeStories } from '@storybook/react';
+
+import { List } from './List';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+// 👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export const meta: Meta<typeof List> = {
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}><Unchecked /></List>
+  ),
+};
+```
+
+
+
diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/solid/reuse-story-csf2.js.mdx
similarity index 53%
rename from docs/snippets/react/list-story-unchecked.js.mdx
rename to docs/snippets/solid/reuse-story-csf2.js.mdx
index e9df70ee1467..24d8894648a9 100644
--- a/docs/snippets/react/list-story-unchecked.js.mdx
+++ b/docs/snippets/solid/reuse-story-csf2.js.mdx
@@ -1,17 +1,11 @@
 ```js
 // List.stories.js|jsx
-
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx b/docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
similarity index 64%
rename from docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
rename to docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
index c88e42c9dbed..79ebacf11f73 100644
--- a/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
+++ b/docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
@@ -1,19 +1,13 @@
 ```tsx
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/list-story-unchecked.ts.mdx b/docs/snippets/solid/reuse-story-csf2.ts.mdx
similarity index 63%
rename from docs/snippets/solid/list-story-unchecked.ts.mdx
rename to docs/snippets/solid/reuse-story-csf2.ts.mdx
index 30cc4d698609..ed0e86ec488f 100644
--- a/docs/snippets/solid/list-story-unchecked.ts.mdx
+++ b/docs/snippets/solid/reuse-story-csf2.ts.mdx
@@ -1,19 +1,13 @@
 ```tsx
 // List.stories.ts|tsx
-
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Instead of importing ListItem, we import the stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/solid/reuse-story-render-function.js.mdx b/docs/snippets/solid/reuse-story-render-function.js.mdx
new file mode 100644
index 000000000000..5d9511565367
--- /dev/null
+++ b/docs/snippets/solid/reuse-story-render-function.js.mdx
@@ -0,0 +1,19 @@
+```js
+// List.stories.js|jsx
+import { List } from './List';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+export default {
+  component: List,
+};
+
+export const OneItem = {
+  render: (args) => (
+    <List {...args}>
+      {Unchecked.render({...Unchecked.args})}
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx b/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
new file mode 100644
index 000000000000..2bc85bc8e315
--- /dev/null
+++ b/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```tsx
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+export const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      {Unchecked.render({...Unchecked.args})}
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/solid/reuse-story-render-function.ts.mdx b/docs/snippets/solid/reuse-story-render-function.ts.mdx
new file mode 100644
index 000000000000..42ad3235ffd6
--- /dev/null
+++ b/docs/snippets/solid/reuse-story-render-function.ts.mdx
@@ -0,0 +1,24 @@
+```tsx
+// List.stories.ts|tsx
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { List } from './List';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './ListItem.stories';
+
+export const meta: Meta<typeof List> = {
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  render: (args) => (
+    <List {...args}>
+      {Unchecked.render({...Unchecked.args})}>
+    </List>
+  ),
+};
+```
diff --git a/docs/snippets/vue/list-story-unchecked.3.js.mdx b/docs/snippets/vue/reuse-story-csf2.js.mdx
similarity index 74%
rename from docs/snippets/vue/list-story-unchecked.3.js.mdx
rename to docs/snippets/vue/reuse-story-csf2.js.mdx
index 8d521c737efe..3499760b547b 100644
--- a/docs/snippets/vue/list-story-unchecked.3.js.mdx
+++ b/docs/snippets/vue/reuse-story-csf2.js.mdx
@@ -1,18 +1,12 @@
 ```js
 // List.stories.js
-
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
@@ -22,9 +16,6 @@ export default {
  * to learn how to use render functions.
  */
 export const OneItem = {
-  args: {
-    ...Unchecked.args,
-  },
   render: (args) => ({
     components: { List, ListItem },
     setup() {
@@ -33,5 +24,8 @@ export const OneItem = {
     },
     template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
   }),
+  args: {
+    ...Unchecked.args,
+  },
 };
 ```
diff --git a/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx b/docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
similarity index 78%
rename from docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
rename to docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
index 478e65d6f878..068f78d8006e 100644
--- a/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
+++ b/docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
@@ -1,20 +1,14 @@
 ```ts
 // List.stories.js
-
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/vue/list-story-unchecked.3.ts.mdx b/docs/snippets/vue/reuse-story-csf2.ts.mdx
similarity index 77%
rename from docs/snippets/vue/list-story-unchecked.3.ts.mdx
rename to docs/snippets/vue/reuse-story-csf2.ts.mdx
index d928c99296a3..fd99cc271851 100644
--- a/docs/snippets/vue/list-story-unchecked.3.ts.mdx
+++ b/docs/snippets/vue/reuse-story-csf2.ts.mdx
@@ -1,20 +1,14 @@
 ```ts
 // List.stories.js
-
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Imports a specific story from ListItem stories
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
-  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/vue/reuse-story-portable.js.mdx b/docs/snippets/vue/reuse-story-portable.js.mdx
new file mode 100644
index 000000000000..a2a57cbb1c5b
--- /dev/null
+++ b/docs/snippets/vue/reuse-story-portable.js.mdx
@@ -0,0 +1,28 @@
+```js
+// List.stories.js
+import { composeStories } from '@storybook/vue3'
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+//👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+export default {
+  component: List,
+};
+
+export const OneItem = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><Unchecked /></List>',
+  }),
+};
+```
diff --git a/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx b/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
new file mode 100644
index 000000000000..964ffbb467e9
--- /dev/null
+++ b/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
@@ -0,0 +1,32 @@
+```ts
+// List.stories.js
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { composeStories } from '@storybook/vue3'
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+//👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+const meta = {
+  component: List,
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><Unchecked /></List>',
+  }),
+};
+```
diff --git a/docs/snippets/vue/reuse-story-portable.ts.mdx b/docs/snippets/vue/reuse-story-portable.ts.mdx
new file mode 100644
index 000000000000..eab1b1ea72b9
--- /dev/null
+++ b/docs/snippets/vue/reuse-story-portable.ts.mdx
@@ -0,0 +1,32 @@
+```ts
+// List.stories.js
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { composeStories } from '@storybook/vue3'
+
+import List from './List.vue';
+import ListItem from './ListItem.vue';
+
+//👇 Import the stories and their meta from the stories file
+import * as stories from './ListItem.stories';
+
+//👇 Compose the story
+const { Unchecked } = composeStories(stories);
+
+const meta: Meta<typeof List> = {
+  component: List,
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+export const OneItem: Story = {
+  render: (args) => ({
+    components: { List, ListItem },
+    setup() {
+      //👇 The args will now be passed down to the template
+      return { args };
+    },
+    template: '<List v-bind="args"><Unchecked /></List>',
+  }),
+};
+```
diff --git a/docs/snippets/web-components/list-story-unchecked.js.mdx b/docs/snippets/web-components/reuse-story-csf2.js.mdx
similarity index 84%
rename from docs/snippets/web-components/list-story-unchecked.js.mdx
rename to docs/snippets/web-components/reuse-story-csf2.js.mdx
index be30704c8341..0b04e69da378 100644
--- a/docs/snippets/web-components/list-story-unchecked.js.mdx
+++ b/docs/snippets/web-components/reuse-story-csf2.js.mdx
@@ -1,9 +1,8 @@
 ```js
 // MyList.stories.js
-
 import { html } from 'lit';
 
-// 👇 Import the stories of MyListItem
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './MyListItem.stories';
 
 export default {
diff --git a/docs/snippets/web-components/list-story-unchecked.ts.mdx b/docs/snippets/web-components/reuse-story-csf2.ts.mdx
similarity index 88%
rename from docs/snippets/web-components/list-story-unchecked.ts.mdx
rename to docs/snippets/web-components/reuse-story-csf2.ts.mdx
index 80c135f68a4f..1b6ca2af48ab 100644
--- a/docs/snippets/web-components/list-story-unchecked.ts.mdx
+++ b/docs/snippets/web-components/reuse-story-csf2.ts.mdx
@@ -1,11 +1,10 @@
 ```ts
 // MyList.stories.ts
-
 import { Meta, StoryObj } from '@storybook/web-components';
 
 import { html } from 'lit';
 
-// 👇 Import the stories of MyListItem
+//👇 Import the story from the CSF 2 stories file
 import { Unchecked } from './my-list-item.stories';
 
 const meta: Meta = {
diff --git a/docs/snippets/web-components/reuse-story-render-function.js.mdx b/docs/snippets/web-components/reuse-story-render-function.js.mdx
new file mode 100644
index 000000000000..57ac1aa0fbd8
--- /dev/null
+++ b/docs/snippets/web-components/reuse-story-render-function.js.mdx
@@ -0,0 +1,16 @@
+```js
+// MyList.stories.js
+import { html } from 'lit';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './MyListItem.stories';
+
+export default {
+  title: 'MyList',
+  component: 'demo-my-list',
+};
+
+export const OneItem = {
+  render: () => html` <List> ${Unchecked.render({ ...Unchecked.args })} </List> `,
+};
+```
diff --git a/docs/snippets/web-components/reuse-story-render-function.ts.mdx b/docs/snippets/web-components/reuse-story-render-function.ts.mdx
new file mode 100644
index 000000000000..f77d65410fc7
--- /dev/null
+++ b/docs/snippets/web-components/reuse-story-render-function.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// MyList.stories.ts
+import { Meta, StoryObj } from '@storybook/web-components';
+
+import { html } from 'lit';
+
+//👇 Import the story with a render function from the CSF 3 stories file
+import { Unchecked } from './my-list-item.stories';
+
+const meta: Meta = {
+  title: 'MyList',
+  component: 'demo-my-list',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const OneItem: Story = {
+  render: () => html` <List> ${Unchecked.render({ ...Unchecked.args })} </List> `,
+};
+```
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 708ccce28787..2c326f5b1c46 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -2,7 +2,7 @@
 title: 'Stories for multiple components'
 ---
 
-It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroups`, `Lists`, and `Page` components. Here's an example with `List` and `ListItem` components:
+It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup` or `List` components. Here's an example with `List` and `ListItem` components:
 
 <!-- prettier-ignore-start -->
 
@@ -35,28 +35,71 @@ Let's talk about some techniques you can use to mitigate the above, which are es
 
 ## Reusing subcomponent stories
 
-The simplest change we can make to the above is to reuse the stories of the `ListItem` in the `List`:
+We can also reuse the stories of the `ListItem` subcomponent in `List` stories.
+
+If the story to be reused is written in [CSF 2](../../../release-6-5/docs/api/csf.md), we can reuse it directly:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/reuse-story-csf2.js.mdx', 
+    'react/reuse-story-csf2.ts.mdx',
+    'vue/reuse-story-csf2.js.mdx',
+    'vue/reuse-story-csf2.ts.mdx',
+    'angular/reuse-story-csf2.ts.mdx',
+    'web-components/reuse-story-csf2.js.mdx',
+    'web-components/reuse-story-csf2.ts.mdx',
+    'solid/reuse-story-csf2.js.mdx',
+    'solid/reuse-story-csf2.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+<If renderer={['react', 'vue', 'svelte']}>
+
+If the story to be reused is written in [CSF 3](../api/csf.md), we can reuse it by composing it into a [portable story](../api/portable-stories-jest.md):
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/list-story-unchecked.js.mdx',
-    'react/list-story-unchecked.ts.mdx',
-    'vue/list-story-unchecked.3.js.mdx',
-    'vue/list-story-unchecked.3.ts.mdx',
-    'angular/list-story-unchecked.ts.mdx',
-    'web-components/list-story-unchecked.js.mdx',
-    'web-components/list-story-unchecked.ts.mdx',
-    'solid/list-story-unchecked.js.mdx',
-    'solid/list-story-unchecked.ts.mdx',
+    'react/reuse-story-portable.js.mdx',
+    'react/reuse-story-portable.ts.mdx',
+    'vue/reuse-story-portable.3.js.mdx',
+    'vue/reuse-story-portable.3.ts.mdx',
   ]}
   usesCsf3
-  csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-unchecked"
 />
 
 <!-- prettier-ignore-end -->
 
+<!-- END if react, vue, svelte -->
+</If>
+
+<If notRenderer={['react', 'vue', 'svelte']}>
+
+If the story to be reused is written in [CSF 3](../api/csf.md) and defines a [`render` function](../api/csf.md#custom-render-functions), we can use that `render` function to reuse the story:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'angular/reuse-story-render-function.ts.mdx',
+    'web-components/reuse-story-render-function.js.mdx',
+    'web-components/reuse-story-render-function.ts.mdx',
+    'solid/reuse-story-render-function.js.mdx',
+    'solid/reuse-story-render-function.ts.mdx',
+  ]}
+  usesCsf3
+/>
+
+<!-- prettier-ignore-end -->
+
+<!-- END if not react, vue, svelte -->
+</If>
+
 By rendering the `Unchecked` story with its args, we are able to reuse the input data from the `ListItem` stories in the `List`.
 
 However, we still aren’t using args to control the `ListItem` stories, which means we cannot change them with controls and we cannot reuse them in other, more complex component stories.
@@ -65,6 +108,8 @@ However, we still aren’t using args to control the `ListItem` stories, which m
 
 One way we improve that situation is by pulling the rendered subcomponent out into a `children` arg:
 
+<!-- TODO: Update this snippet, too -->
+
 <!-- prettier-ignore-start -->
 
 <CodeSnippets

From df0bf8bce97ac7c3015254947276e79b391fb4e0 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Wed, 20 Mar 2024 14:12:31 -0600
Subject: [PATCH 17/37] Revert "WIP: Update multiple components guidance"

This reverts commit dba4179e2f4ca8a9c8669ecd28f36ca41f449a08.
---
 ...sf2.ts.mdx => list-story-unchecked.ts.mdx} | 15 +++-
 .../reuse-story-render-function.ts.mdx        | 36 ----------
 .../list-story-unchecked.js.mdx}              |  8 ++-
 ...-9.mdx => list-story-unchecked.ts-4-9.mdx} |  8 ++-
 ...sf2.ts.mdx => list-story-unchecked.ts.mdx} |  8 ++-
 .../react/reuse-story-portable.js.mdx         | 22 ------
 .../react/reuse-story-portable.ts-4-9.mdx     | 26 -------
 .../react/reuse-story-portable.ts.mdx         | 29 --------
 .../list-story-unchecked.js.mdx}              |  8 ++-
 ...-9.mdx => list-story-unchecked.ts-4-9.mdx} |  8 ++-
 ...sf2.ts.mdx => list-story-unchecked.ts.mdx} |  8 ++-
 .../solid/reuse-story-render-function.js.mdx  | 19 -----
 .../reuse-story-render-function.ts-4-9.mdx    | 24 -------
 .../solid/reuse-story-render-function.ts.mdx  | 24 -------
 ...2.js.mdx => list-story-unchecked.3.js.mdx} | 14 ++--
 ....mdx => list-story-unchecked.3.ts-4-9.mdx} |  8 ++-
 ...2.ts.mdx => list-story-unchecked.3.ts.mdx} |  8 ++-
 docs/snippets/vue/reuse-story-portable.js.mdx | 28 --------
 .../vue/reuse-story-portable.ts-4-9.mdx       | 32 ---------
 docs/snippets/vue/reuse-story-portable.ts.mdx | 32 ---------
 ...sf2.js.mdx => list-story-unchecked.js.mdx} |  3 +-
 ...sf2.ts.mdx => list-story-unchecked.ts.mdx} |  3 +-
 .../reuse-story-render-function.js.mdx        | 16 -----
 .../reuse-story-render-function.ts.mdx        | 21 ------
 .../stories-for-multiple-components.md        | 69 ++++---------------
 25 files changed, 96 insertions(+), 381 deletions(-)
 rename docs/snippets/angular/{reuse-story-csf2.ts.mdx => list-story-unchecked.ts.mdx} (63%)
 delete mode 100644 docs/snippets/angular/reuse-story-render-function.ts.mdx
 rename docs/snippets/{solid/reuse-story-csf2.js.mdx => react/list-story-unchecked.js.mdx} (53%)
 rename docs/snippets/react/{reuse-story-csf2.ts-4-9.mdx => list-story-unchecked.ts-4-9.mdx} (64%)
 rename docs/snippets/react/{reuse-story-csf2.ts.mdx => list-story-unchecked.ts.mdx} (63%)
 delete mode 100644 docs/snippets/react/reuse-story-portable.js.mdx
 delete mode 100644 docs/snippets/react/reuse-story-portable.ts-4-9.mdx
 delete mode 100644 docs/snippets/react/reuse-story-portable.ts.mdx
 rename docs/snippets/{react/reuse-story-csf2.js.mdx => solid/list-story-unchecked.js.mdx} (53%)
 rename docs/snippets/solid/{reuse-story-csf2.ts-4-9.mdx => list-story-unchecked.ts-4-9.mdx} (64%)
 rename docs/snippets/solid/{reuse-story-csf2.ts.mdx => list-story-unchecked.ts.mdx} (63%)
 delete mode 100644 docs/snippets/solid/reuse-story-render-function.js.mdx
 delete mode 100644 docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
 delete mode 100644 docs/snippets/solid/reuse-story-render-function.ts.mdx
 rename docs/snippets/vue/{reuse-story-csf2.js.mdx => list-story-unchecked.3.js.mdx} (74%)
 rename docs/snippets/vue/{reuse-story-csf2.ts-4-9.mdx => list-story-unchecked.3.ts-4-9.mdx} (78%)
 rename docs/snippets/vue/{reuse-story-csf2.ts.mdx => list-story-unchecked.3.ts.mdx} (77%)
 delete mode 100644 docs/snippets/vue/reuse-story-portable.js.mdx
 delete mode 100644 docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/reuse-story-portable.ts.mdx
 rename docs/snippets/web-components/{reuse-story-csf2.js.mdx => list-story-unchecked.js.mdx} (84%)
 rename docs/snippets/web-components/{reuse-story-csf2.ts.mdx => list-story-unchecked.ts.mdx} (88%)
 delete mode 100644 docs/snippets/web-components/reuse-story-render-function.js.mdx
 delete mode 100644 docs/snippets/web-components/reuse-story-render-function.ts.mdx

diff --git a/docs/snippets/angular/reuse-story-csf2.ts.mdx b/docs/snippets/angular/list-story-unchecked.ts.mdx
similarity index 63%
rename from docs/snippets/angular/reuse-story-csf2.ts.mdx
rename to docs/snippets/angular/list-story-unchecked.ts.mdx
index 968d8f6c12d5..31b0be7651c7 100644
--- a/docs/snippets/angular/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/angular/list-story-unchecked.ts.mdx
@@ -1,16 +1,24 @@
 ```ts
 // List.stories.ts
+
 import type { Meta, StoryObj } from '@storybook/angular';
+
 import { moduleMetadata } from '@storybook/angular';
+
 import { CommonModule } from '@angular/common';
 
 import { List } from './list.component';
 import { ListItem } from './list-item.component';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
   decorators: [
     moduleMetadata({
@@ -23,6 +31,11 @@ const meta: Meta<List> = {
 export default meta;
 type Story = StoryObj<List>;
 
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
 export const OneItem: Story = {
   render: (args) => ({
     props: args,
diff --git a/docs/snippets/angular/reuse-story-render-function.ts.mdx b/docs/snippets/angular/reuse-story-render-function.ts.mdx
deleted file mode 100644
index dd16565a95c1..000000000000
--- a/docs/snippets/angular/reuse-story-render-function.ts.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
-```ts
-// List.stories.ts
-import type { Meta, StoryObj } from '@storybook/angular';
-import { moduleMetadata } from '@storybook/angular';
-import { CommonModule } from '@angular/common';
-
-import { List } from './list.component';
-import { ListItem } from './list-item.component';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './ListItem.stories';
-
-const meta: Meta<List> = {
-  component: List,
-  decorators: [
-    moduleMetadata({
-      declarations: [List, ListItem],
-      imports: [CommonModule],
-    }),
-  ],
-};
-
-export default meta;
-type Story = StoryObj<List>;
-
-export const OneItem: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-      <app-list>
-        ${Unchecked.render({ ...Unchecked.args })}
-      </app-list>
-   `,
-  }),
-};
-```
diff --git a/docs/snippets/solid/reuse-story-csf2.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx
similarity index 53%
rename from docs/snippets/solid/reuse-story-csf2.js.mdx
rename to docs/snippets/react/list-story-unchecked.js.mdx
index 24d8894648a9..e9df70ee1467 100644
--- a/docs/snippets/solid/reuse-story-csf2.js.mdx
+++ b/docs/snippets/react/list-story-unchecked.js.mdx
@@ -1,11 +1,17 @@
 ```js
 // List.stories.js|jsx
+
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/react/reuse-story-csf2.ts-4-9.mdx b/docs/snippets/react/list-story-unchecked.ts-4-9.mdx
similarity index 64%
rename from docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
rename to docs/snippets/react/list-story-unchecked.ts-4-9.mdx
index 183ee1c2d037..e3664a92818f 100644
--- a/docs/snippets/react/reuse-story-csf2.ts-4-9.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts-4-9.mdx
@@ -1,13 +1,19 @@
 ```ts
 // List.stories.ts|tsx
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/react/reuse-story-csf2.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx
similarity index 63%
rename from docs/snippets/react/reuse-story-csf2.ts.mdx
rename to docs/snippets/react/list-story-unchecked.ts.mdx
index 2d7bc40aa229..8ff062ecc89f 100644
--- a/docs/snippets/react/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/react/list-story-unchecked.ts.mdx
@@ -1,13 +1,19 @@
 ```tsx
 // List.stories.ts|tsx
+
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/react/reuse-story-portable.js.mdx b/docs/snippets/react/reuse-story-portable.js.mdx
deleted file mode 100644
index 205b04a171ed..000000000000
--- a/docs/snippets/react/reuse-story-portable.js.mdx
+++ /dev/null
@@ -1,22 +0,0 @@
-```js
-// List.stories.js|jsx
-import { composeStories } from '@storybook/react';
-
-import { List } from './List';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-// 👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-export default {
-  component: List,
-};
-
-export const OneItem = {
-  render: (args) => (
-    <List {...args}><Unchecked /></List>
-  ),
-};
-```
diff --git a/docs/snippets/react/reuse-story-portable.ts-4-9.mdx b/docs/snippets/react/reuse-story-portable.ts-4-9.mdx
deleted file mode 100644
index 24a54edbd7fc..000000000000
--- a/docs/snippets/react/reuse-story-portable.ts-4-9.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```ts
-// List.stories.ts|tsx
-import type { Meta, StoryObj } from '@storybook/react';
-import { composeStories } from '@storybook/react';
-
-import { List } from './List';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-// 👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-export const meta = {
-  component: List,
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const OneItem: Story = {
-  render: (args) => (
-    <List {...args}><Unchecked /></List>
-  ),
-};
-```
diff --git a/docs/snippets/react/reuse-story-portable.ts.mdx b/docs/snippets/react/reuse-story-portable.ts.mdx
deleted file mode 100644
index c7e287a09b5f..000000000000
--- a/docs/snippets/react/reuse-story-portable.ts.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
-```tsx
-// List.stories.ts|tsx
-import type { Meta, StoryObj } from '@storybook/react';
-import { composeStories } from '@storybook/react';
-
-import { List } from './List';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-// 👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-export const meta: Meta<typeof List> = {
-  component: List,
-};
-
-export default meta;
-type Story = StoryObj<typeof List>;
-
-export const OneItem: Story = {
-  render: (args) => (
-    <List {...args}><Unchecked /></List>
-  ),
-};
-```
-
-
-
diff --git a/docs/snippets/react/reuse-story-csf2.js.mdx b/docs/snippets/solid/list-story-unchecked.js.mdx
similarity index 53%
rename from docs/snippets/react/reuse-story-csf2.js.mdx
rename to docs/snippets/solid/list-story-unchecked.js.mdx
index 24d8894648a9..e9df70ee1467 100644
--- a/docs/snippets/react/reuse-story-csf2.js.mdx
+++ b/docs/snippets/solid/list-story-unchecked.js.mdx
@@ -1,11 +1,17 @@
 ```js
 // List.stories.js|jsx
+
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
similarity index 64%
rename from docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
rename to docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
index 79ebacf11f73..c88e42c9dbed 100644
--- a/docs/snippets/solid/reuse-story-csf2.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-unchecked.ts-4-9.mdx
@@ -1,13 +1,19 @@
 ```tsx
 // List.stories.ts|tsx
+
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/solid/reuse-story-csf2.ts.mdx b/docs/snippets/solid/list-story-unchecked.ts.mdx
similarity index 63%
rename from docs/snippets/solid/reuse-story-csf2.ts.mdx
rename to docs/snippets/solid/list-story-unchecked.ts.mdx
index ed0e86ec488f..30cc4d698609 100644
--- a/docs/snippets/solid/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/solid/list-story-unchecked.ts.mdx
@@ -1,13 +1,19 @@
 ```tsx
 // List.stories.ts|tsx
+
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { List } from './List';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Instead of importing ListItem, we import the stories
 import { Unchecked } from './ListItem.stories';
 
 export const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/solid/reuse-story-render-function.js.mdx b/docs/snippets/solid/reuse-story-render-function.js.mdx
deleted file mode 100644
index 5d9511565367..000000000000
--- a/docs/snippets/solid/reuse-story-render-function.js.mdx
+++ /dev/null
@@ -1,19 +0,0 @@
-```js
-// List.stories.js|jsx
-import { List } from './List';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './ListItem.stories';
-
-export default {
-  component: List,
-};
-
-export const OneItem = {
-  render: (args) => (
-    <List {...args}>
-      {Unchecked.render({...Unchecked.args})}
-    </List>
-  ),
-};
-```
diff --git a/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx b/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
deleted file mode 100644
index 2bc85bc8e315..000000000000
--- a/docs/snippets/solid/reuse-story-render-function.ts-4-9.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-```tsx
-// List.stories.ts|tsx
-import type { Meta, StoryObj } from 'storybook-solidjs';
-
-import { List } from './List';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './ListItem.stories';
-
-export const meta = {
-  component: List,
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const OneItem: Story = {
-  render: (args) => (
-    <List {...args}>
-      {Unchecked.render({...Unchecked.args})}
-    </List>
-  ),
-};
-```
diff --git a/docs/snippets/solid/reuse-story-render-function.ts.mdx b/docs/snippets/solid/reuse-story-render-function.ts.mdx
deleted file mode 100644
index 42ad3235ffd6..000000000000
--- a/docs/snippets/solid/reuse-story-render-function.ts.mdx
+++ /dev/null
@@ -1,24 +0,0 @@
-```tsx
-// List.stories.ts|tsx
-import type { Meta, StoryObj } from 'storybook-solidjs';
-
-import { List } from './List';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './ListItem.stories';
-
-export const meta: Meta<typeof List> = {
-  component: List,
-};
-
-export default meta;
-type Story = StoryObj<typeof List>;
-
-export const OneItem: Story = {
-  render: (args) => (
-    <List {...args}>
-      {Unchecked.render({...Unchecked.args})}>
-    </List>
-  ),
-};
-```
diff --git a/docs/snippets/vue/reuse-story-csf2.js.mdx b/docs/snippets/vue/list-story-unchecked.3.js.mdx
similarity index 74%
rename from docs/snippets/vue/reuse-story-csf2.js.mdx
rename to docs/snippets/vue/list-story-unchecked.3.js.mdx
index 3499760b547b..8d521c737efe 100644
--- a/docs/snippets/vue/reuse-story-csf2.js.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.js.mdx
@@ -1,12 +1,18 @@
 ```js
 // List.stories.js
+
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
 export default {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
@@ -16,6 +22,9 @@ export default {
  * to learn how to use render functions.
  */
 export const OneItem = {
+  args: {
+    ...Unchecked.args,
+  },
   render: (args) => ({
     components: { List, ListItem },
     setup() {
@@ -24,8 +33,5 @@ export const OneItem = {
     },
     template: '<List v-bind="args"><ListItem v-bind="args"/></List>',
   }),
-  args: {
-    ...Unchecked.args,
-  },
 };
 ```
diff --git a/docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx b/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
similarity index 78%
rename from docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
rename to docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
index 068f78d8006e..478e65d6f878 100644
--- a/docs/snippets/vue/reuse-story-csf2.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.ts-4-9.mdx
@@ -1,14 +1,20 @@
 ```ts
 // List.stories.js
+
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
 const meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 } satisfies Meta<typeof List>;
 
diff --git a/docs/snippets/vue/reuse-story-csf2.ts.mdx b/docs/snippets/vue/list-story-unchecked.3.ts.mdx
similarity index 77%
rename from docs/snippets/vue/reuse-story-csf2.ts.mdx
rename to docs/snippets/vue/list-story-unchecked.3.ts.mdx
index fd99cc271851..d928c99296a3 100644
--- a/docs/snippets/vue/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/vue/list-story-unchecked.3.ts.mdx
@@ -1,14 +1,20 @@
 ```ts
 // List.stories.js
+
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import List from './List.vue';
 import ListItem from './ListItem.vue';
 
-//👇 Import the story from the CSF 2 stories file
+//👇 Imports a specific story from ListItem stories
 import { Unchecked } from './ListItem.stories';
 
 const meta: Meta<typeof List> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/configure/#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'List',
   component: List,
 };
 
diff --git a/docs/snippets/vue/reuse-story-portable.js.mdx b/docs/snippets/vue/reuse-story-portable.js.mdx
deleted file mode 100644
index a2a57cbb1c5b..000000000000
--- a/docs/snippets/vue/reuse-story-portable.js.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-// List.stories.js
-import { composeStories } from '@storybook/vue3'
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-//👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-export default {
-  component: List,
-};
-
-export const OneItem = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return { args };
-    },
-    template: '<List v-bind="args"><Unchecked /></List>',
-  }),
-};
-```
diff --git a/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx b/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
deleted file mode 100644
index 964ffbb467e9..000000000000
--- a/docs/snippets/vue/reuse-story-portable.ts-4-9.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-```ts
-// List.stories.js
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { composeStories } from '@storybook/vue3'
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-//👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-const meta = {
-  component: List,
-} satisfies Meta<typeof List>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const OneItem: Story = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return { args };
-    },
-    template: '<List v-bind="args"><Unchecked /></List>',
-  }),
-};
-```
diff --git a/docs/snippets/vue/reuse-story-portable.ts.mdx b/docs/snippets/vue/reuse-story-portable.ts.mdx
deleted file mode 100644
index eab1b1ea72b9..000000000000
--- a/docs/snippets/vue/reuse-story-portable.ts.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
-```ts
-// List.stories.js
-import type { Meta, StoryObj } from '@storybook/vue3';
-import { composeStories } from '@storybook/vue3'
-
-import List from './List.vue';
-import ListItem from './ListItem.vue';
-
-//👇 Import the stories and their meta from the stories file
-import * as stories from './ListItem.stories';
-
-//👇 Compose the story
-const { Unchecked } = composeStories(stories);
-
-const meta: Meta<typeof List> = {
-  component: List,
-};
-
-export default meta;
-type Story = StoryObj<typeof List>;
-
-export const OneItem: Story = {
-  render: (args) => ({
-    components: { List, ListItem },
-    setup() {
-      //👇 The args will now be passed down to the template
-      return { args };
-    },
-    template: '<List v-bind="args"><Unchecked /></List>',
-  }),
-};
-```
diff --git a/docs/snippets/web-components/reuse-story-csf2.js.mdx b/docs/snippets/web-components/list-story-unchecked.js.mdx
similarity index 84%
rename from docs/snippets/web-components/reuse-story-csf2.js.mdx
rename to docs/snippets/web-components/list-story-unchecked.js.mdx
index 0b04e69da378..be30704c8341 100644
--- a/docs/snippets/web-components/reuse-story-csf2.js.mdx
+++ b/docs/snippets/web-components/list-story-unchecked.js.mdx
@@ -1,8 +1,9 @@
 ```js
 // MyList.stories.js
+
 import { html } from 'lit';
 
-//👇 Import the story from the CSF 2 stories file
+// 👇 Import the stories of MyListItem
 import { Unchecked } from './MyListItem.stories';
 
 export default {
diff --git a/docs/snippets/web-components/reuse-story-csf2.ts.mdx b/docs/snippets/web-components/list-story-unchecked.ts.mdx
similarity index 88%
rename from docs/snippets/web-components/reuse-story-csf2.ts.mdx
rename to docs/snippets/web-components/list-story-unchecked.ts.mdx
index 1b6ca2af48ab..80c135f68a4f 100644
--- a/docs/snippets/web-components/reuse-story-csf2.ts.mdx
+++ b/docs/snippets/web-components/list-story-unchecked.ts.mdx
@@ -1,10 +1,11 @@
 ```ts
 // MyList.stories.ts
+
 import { Meta, StoryObj } from '@storybook/web-components';
 
 import { html } from 'lit';
 
-//👇 Import the story from the CSF 2 stories file
+// 👇 Import the stories of MyListItem
 import { Unchecked } from './my-list-item.stories';
 
 const meta: Meta = {
diff --git a/docs/snippets/web-components/reuse-story-render-function.js.mdx b/docs/snippets/web-components/reuse-story-render-function.js.mdx
deleted file mode 100644
index 57ac1aa0fbd8..000000000000
--- a/docs/snippets/web-components/reuse-story-render-function.js.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-```js
-// MyList.stories.js
-import { html } from 'lit';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './MyListItem.stories';
-
-export default {
-  title: 'MyList',
-  component: 'demo-my-list',
-};
-
-export const OneItem = {
-  render: () => html` <List> ${Unchecked.render({ ...Unchecked.args })} </List> `,
-};
-```
diff --git a/docs/snippets/web-components/reuse-story-render-function.ts.mdx b/docs/snippets/web-components/reuse-story-render-function.ts.mdx
deleted file mode 100644
index f77d65410fc7..000000000000
--- a/docs/snippets/web-components/reuse-story-render-function.ts.mdx
+++ /dev/null
@@ -1,21 +0,0 @@
-```ts
-// MyList.stories.ts
-import { Meta, StoryObj } from '@storybook/web-components';
-
-import { html } from 'lit';
-
-//👇 Import the story with a render function from the CSF 3 stories file
-import { Unchecked } from './my-list-item.stories';
-
-const meta: Meta = {
-  title: 'MyList',
-  component: 'demo-my-list',
-};
-export default meta;
-
-type Story = StoryObj;
-
-export const OneItem: Story = {
-  render: () => html` <List> ${Unchecked.render({ ...Unchecked.args })} </List> `,
-};
-```
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 2c326f5b1c46..708ccce28787 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -2,7 +2,7 @@
 title: 'Stories for multiple components'
 ---
 
-It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup` or `List` components. Here's an example with `List` and `ListItem` components:
+It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroups`, `Lists`, and `Page` components. Here's an example with `List` and `ListItem` components:
 
 <!-- prettier-ignore-start -->
 
@@ -35,71 +35,28 @@ Let's talk about some techniques you can use to mitigate the above, which are es
 
 ## Reusing subcomponent stories
 
-We can also reuse the stories of the `ListItem` subcomponent in `List` stories.
-
-If the story to be reused is written in [CSF 2](../../../release-6-5/docs/api/csf.md), we can reuse it directly:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'react/reuse-story-csf2.js.mdx', 
-    'react/reuse-story-csf2.ts.mdx',
-    'vue/reuse-story-csf2.js.mdx',
-    'vue/reuse-story-csf2.ts.mdx',
-    'angular/reuse-story-csf2.ts.mdx',
-    'web-components/reuse-story-csf2.js.mdx',
-    'web-components/reuse-story-csf2.ts.mdx',
-    'solid/reuse-story-csf2.js.mdx',
-    'solid/reuse-story-csf2.ts.mdx',
-  ]}
-/>
-
-<!-- prettier-ignore-end -->
-
-<If renderer={['react', 'vue', 'svelte']}>
-
-If the story to be reused is written in [CSF 3](../api/csf.md), we can reuse it by composing it into a [portable story](../api/portable-stories-jest.md):
+The simplest change we can make to the above is to reuse the stories of the `ListItem` in the `List`:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/reuse-story-portable.js.mdx',
-    'react/reuse-story-portable.ts.mdx',
-    'vue/reuse-story-portable.3.js.mdx',
-    'vue/reuse-story-portable.3.ts.mdx',
+    'react/list-story-unchecked.js.mdx',
+    'react/list-story-unchecked.ts.mdx',
+    'vue/list-story-unchecked.3.js.mdx',
+    'vue/list-story-unchecked.3.ts.mdx',
+    'angular/list-story-unchecked.ts.mdx',
+    'web-components/list-story-unchecked.js.mdx',
+    'web-components/list-story-unchecked.ts.mdx',
+    'solid/list-story-unchecked.js.mdx',
+    'solid/list-story-unchecked.ts.mdx',
   ]}
   usesCsf3
+  csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-unchecked"
 />
 
 <!-- prettier-ignore-end -->
 
-<!-- END if react, vue, svelte -->
-</If>
-
-<If notRenderer={['react', 'vue', 'svelte']}>
-
-If the story to be reused is written in [CSF 3](../api/csf.md) and defines a [`render` function](../api/csf.md#custom-render-functions), we can use that `render` function to reuse the story:
-
-<!-- prettier-ignore-start -->
-
-<CodeSnippets
-  paths={[
-    'angular/reuse-story-render-function.ts.mdx',
-    'web-components/reuse-story-render-function.js.mdx',
-    'web-components/reuse-story-render-function.ts.mdx',
-    'solid/reuse-story-render-function.js.mdx',
-    'solid/reuse-story-render-function.ts.mdx',
-  ]}
-  usesCsf3
-/>
-
-<!-- prettier-ignore-end -->
-
-<!-- END if not react, vue, svelte -->
-</If>
-
 By rendering the `Unchecked` story with its args, we are able to reuse the input data from the `ListItem` stories in the `List`.
 
 However, we still aren’t using args to control the `ListItem` stories, which means we cannot change them with controls and we cannot reuse them in other, more complex component stories.
@@ -108,8 +65,6 @@ However, we still aren’t using args to control the `ListItem` stories, which m
 
 One way we improve that situation is by pulling the rendered subcomponent out into a `children` arg:
 
-<!-- TODO: Update this snippet, too -->
-
 <!-- prettier-ignore-start -->
 
 <CodeSnippets

From 82e9f71cc78ab63cb13e7623ad3792df68a260b2 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 26 Mar 2024 13:13:27 -0600
Subject: [PATCH 18/37] Update multiple components guidance

- Remove guidance to reuse entire stories
- Clarify other guidance
---
 .../angular/list-story-reuse-data.ts.mdx      |  5 ---
 .../html/list-story-reuse-data.js.mdx         |  9 ----
 .../html/list-story-reuse-data.ts.mdx         |  9 ----
 .../react/list-story-reuse-data.js.mdx        |  6 ---
 .../react/list-story-reuse-data.ts-4-9.mdx    |  5 ---
 .../react/list-story-reuse-data.ts.mdx        |  5 ---
 .../solid/list-story-reuse-data.js.mdx        |  6 ---
 .../solid/list-story-reuse-data.ts-4-9.mdx    |  5 ---
 .../solid/list-story-reuse-data.ts.mdx        |  5 ---
 .../vue/list-story-reuse-data.3.js.mdx        |  5 ---
 .../vue/list-story-reuse-data.3.ts-4-9.mdx    |  5 ---
 .../vue/list-story-reuse-data.3.ts.mdx        |  5 ---
 docs/writing-stories/index.md                 |  4 +-
 .../stories-for-multiple-components.md        | 42 ++++++++++++-------
 14 files changed, 30 insertions(+), 86 deletions(-)

diff --git a/docs/snippets/angular/list-story-reuse-data.ts.mdx b/docs/snippets/angular/list-story-reuse-data.ts.mdx
index 3ff20f0d824a..7f531c257527 100644
--- a/docs/snippets/angular/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/angular/list-story-reuse-data.ts.mdx
@@ -26,11 +26,6 @@ const meta: Meta<List> = {
 export default meta;
 type Story = StoryObj<List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   args: {
     Selected: Selected.args.isSelected,
diff --git a/docs/snippets/html/list-story-reuse-data.js.mdx b/docs/snippets/html/list-story-reuse-data.js.mdx
index 76a6f8820a3b..fe46d1a44f71 100644
--- a/docs/snippets/html/list-story-reuse-data.js.mdx
+++ b/docs/snippets/html/list-story-reuse-data.js.mdx
@@ -8,18 +8,9 @@ import { createListItem } from './ListItem';
 import { Selected, Unselected } from './ListItem.stories';
 
 export default {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
   title: 'List',
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems = {
   render: (args) => {
     const list = createList(args);
diff --git a/docs/snippets/html/list-story-reuse-data.ts.mdx b/docs/snippets/html/list-story-reuse-data.ts.mdx
index 999a38a65c25..50f984c0bb85 100644
--- a/docs/snippets/html/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/html/list-story-reuse-data.ts.mdx
@@ -10,21 +10,12 @@ import { createListItem } from './ListItem';
 import { Selected, Unselected } from './ListItem.stories';
 
 const meta: Meta<ListArgs> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/configure/#configure-story-loading
-   * to learn how to generate automatic titles
-   */
   title: 'List',
 };
 
 export default meta;
 type Story = StoryObj<ListArgs>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => {
     const list = createList(args);
diff --git a/docs/snippets/react/list-story-reuse-data.js.mdx b/docs/snippets/react/list-story-reuse-data.js.mdx
index 2e35ca9c2dab..6f99fad942ef 100644
--- a/docs/snippets/react/list-story-reuse-data.js.mdx
+++ b/docs/snippets/react/list-story-reuse-data.js.mdx
@@ -13,12 +13,6 @@ export default {
   component: List,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-
 export const ManyItems = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx b/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx
index 07767df39468..6fbee90aa76a 100644
--- a/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx
+++ b/docs/snippets/react/list-story-reuse-data.ts-4-9.mdx
@@ -16,11 +16,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/react/list-story-reuse-data.ts.mdx b/docs/snippets/react/list-story-reuse-data.ts.mdx
index 006e28639c99..5e8382162d6a 100644
--- a/docs/snippets/react/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/react/list-story-reuse-data.ts.mdx
@@ -16,11 +16,6 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/solid/list-story-reuse-data.js.mdx b/docs/snippets/solid/list-story-reuse-data.js.mdx
index 812843a505e6..e893f403e914 100644
--- a/docs/snippets/solid/list-story-reuse-data.js.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.js.mdx
@@ -11,12 +11,6 @@ export default {
   component: List,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-
 export const ManyItems = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
index 5d4e5aae4e28..78e8b4d089fb 100644
--- a/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.ts-4-9.mdx
@@ -16,11 +16,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/solid/list-story-reuse-data.ts.mdx b/docs/snippets/solid/list-story-reuse-data.ts.mdx
index 636f66d6b020..cccd2b421cc8 100644
--- a/docs/snippets/solid/list-story-reuse-data.ts.mdx
+++ b/docs/snippets/solid/list-story-reuse-data.ts.mdx
@@ -16,11 +16,6 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => (
     <List {...args}>
diff --git a/docs/snippets/vue/list-story-reuse-data.3.js.mdx b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
index d9384dd001d2..ab3b3f042072 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.js.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.js.mdx
@@ -11,11 +11,6 @@ export default {
   component: List,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems = {
   render: (args) => ({
     components: { List, ListItem },
diff --git a/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx b/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx
index 37c83e2a7edc..bfcc9be89175 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.ts-4-9.mdx
@@ -16,11 +16,6 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => ({
     components: { List, ListItem },
diff --git a/docs/snippets/vue/list-story-reuse-data.3.ts.mdx b/docs/snippets/vue/list-story-reuse-data.3.ts.mdx
index 99c0bde71faa..93bf88a25d67 100644
--- a/docs/snippets/vue/list-story-reuse-data.3.ts.mdx
+++ b/docs/snippets/vue/list-story-reuse-data.3.ts.mdx
@@ -16,11 +16,6 @@ const meta: Meta<typeof List> = {
 export default meta;
 type Story = StoryObj<typeof List>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const ManyItems: Story = {
   render: (args) => ({
     components: { List, ListItem },
diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md
index abc6632d90f8..7a99a45e1df7 100644
--- a/docs/writing-stories/index.md
+++ b/docs/writing-stories/index.md
@@ -357,7 +357,7 @@ Decorators [can be more complex](./decorators.md#context-for-mocking) and are of
 
 ## Stories for two or more components
 
-When building design systems or component libraries, you may have two or more components created to work together. For instance, if you have a parent `List` component, it may require child `ListItem` components.
+Sometimes, you may have two or more components created to work together. For instance, if you have a parent `List` component, it may require child `ListItem` components.
 
 <!-- prettier-ignore-start -->
 
@@ -405,7 +405,7 @@ In such cases, it makes sense to render a different function for each story:
 
 <!-- prettier-ignore-end -->
 
-You can also reuse stories from the child `ListItem` in your `List` component. That’s easier to maintain because you don’t have to keep the identical story definitions updated in multiple places.
+You can also reuse story definitions from the child `ListItem` in your `List` component. That’s easier to maintain because you don’t have to keep the identical details updated in multiple places.
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 708ccce28787..5a9889f17b4c 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -2,7 +2,13 @@
 title: 'Stories for multiple components'
 ---
 
-It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroups`, `Lists`, and `Page` components. Here's an example with `List` and `ListItem` components:
+It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup`, `List`, and `Page` components.
+
+## Subcomponents
+
+When the components you're documenting have a parent-child relationship, you can use the `subcomponents` property to document them together. This is especially useful when the child component is not meant to be used on its own, but only as part of the parent component.
+
+Here's an example with `List` and `ListItem` components:
 
 <!-- prettier-ignore-start -->
 
@@ -33,32 +39,36 @@ Subcomponents are only intended for documentation purposes and have some limitat
 
 Let's talk about some techniques you can use to mitigate the above, which are especially useful in more complicated situations.
 
-## Reusing subcomponent stories
+## Reusing story definitions
 
-The simplest change we can make to the above is to reuse the stories of the `ListItem` in the `List`:
+We can also reduce repitition in our stories by reusing story definitions. Here, we can reuse the `ListItem` stories' args in the story for `List`:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/list-story-unchecked.js.mdx',
-    'react/list-story-unchecked.ts.mdx',
-    'vue/list-story-unchecked.3.js.mdx',
-    'vue/list-story-unchecked.3.ts.mdx',
-    'angular/list-story-unchecked.ts.mdx',
-    'web-components/list-story-unchecked.js.mdx',
-    'web-components/list-story-unchecked.ts.mdx',
-    'solid/list-story-unchecked.js.mdx',
-    'solid/list-story-unchecked.ts.mdx',
+    'react/list-story-reuse-data.js.mdx',
+    'react/list-story-reuse-data.ts.mdx',
+    'angular/list-story-reuse-data.ts.mdx',
+    'vue/list-story-reuse-data.3.js.mdx',
+    'vue/list-story-reuse-data.3.ts.mdx',
+    'web-components/list-story-reuse-data.js.mdx',
+    'web-components/list-story-reuse-data.ts.mdx',
+    'html/list-story-reuse-data.js.mdx',
+    'html/list-story-reuse-data.ts.mdx',
+    'solid/list-story-reuse-data.js.mdx',
+    'solid/list-story-reuse-data.ts.mdx',
   ]}
   usesCsf3
-  csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-unchecked"
+  csf2Path="writing-stories/#snippet-list-story-reuse-data"
 />
 
 <!-- prettier-ignore-end -->
 
 By rendering the `Unchecked` story with its args, we are able to reuse the input data from the `ListItem` stories in the `List`.
 
+<If renderer="react">
+
 However, we still aren’t using args to control the `ListItem` stories, which means we cannot change them with controls and we cannot reuse them in other, more complex component stories.
 
 ## Using children as an arg
@@ -82,9 +92,10 @@ Now that `children` is an arg, we can potentially reuse it in another story.
 
 However, there are some caveats when using this approach that you should be aware of.
 
-The `children` `args` as any other arg needs to be JSON serializable. It means that you should:
+The `children` arg, just like all args, needs to be JSON serializable. It means that you should:
 
 - Avoid using empty values
+- Use [mapping](../essentials/controls.md#dealing-with-complex-values) if you want to adjust the value with [controls](../essentials/controls.md)
 - Use caution with components that include third party libraries
 
 As they could lead into errors with your Storybook.
@@ -95,6 +106,9 @@ We're currently working on improving the overall experience for the children arg
 
 </Callout>
 
+<!-- End if react -->
+</If>
+
 ## Creating a Template Component
 
 Another option that is more “data”-based is to create a special “story-generating” template component:

From 30e39545504d9d34cac2a21b66ff433241babdcf Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Mon, 1 Apr 2024 08:54:37 -0600
Subject: [PATCH 19/37] Apply suggestions from code review

Co-authored-by: Michael Shilman <shilman@users.noreply.github.com>
Co-authored-by: jonniebigodes <joaocontadesenvolvimento@gmail.com>
---
 docs/writing-stories/index.md                           | 4 ++--
 docs/writing-stories/stories-for-multiple-components.md | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/writing-stories/index.md b/docs/writing-stories/index.md
index 7a99a45e1df7..ec51a7dc1d39 100644
--- a/docs/writing-stories/index.md
+++ b/docs/writing-stories/index.md
@@ -357,7 +357,7 @@ Decorators [can be more complex](./decorators.md#context-for-mocking) and are of
 
 ## Stories for two or more components
 
-Sometimes, you may have two or more components created to work together. For instance, if you have a parent `List` component, it may require child `ListItem` components.
+Sometimes you may have two or more components created to work together. For instance, if you have a parent `List` component, it may require child `ListItem` components.
 
 <!-- prettier-ignore-start -->
 
@@ -405,7 +405,7 @@ In such cases, it makes sense to render a different function for each story:
 
 <!-- prettier-ignore-end -->
 
-You can also reuse story definitions from the child `ListItem` in your `List` component. That’s easier to maintain because you don’t have to keep the identical details updated in multiple places.
+You can also reuse _story data_ from the child `ListItem` in your `List` component. That’s easier to maintain because you don’t have to update it in multiple places.
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 5a9889f17b4c..5ae20d893ae6 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -2,7 +2,7 @@
 title: 'Stories for multiple components'
 ---
 
-It's useful to write stories that [render two or more components](../writing-stories/index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup`, `List`, and `Page` components.
+It's useful to write stories that [render two or more components](./index.md#stories-for-two-or-more-components) at once if those components are designed to work together. For example, `ButtonGroup`, `List`, and `Page` components.
 
 ## Subcomponents
 

From b8e46fea16c340a9ee38d6e7979bcc2446f3659b Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Mon, 1 Apr 2024 08:58:36 -0600
Subject: [PATCH 20/37] Address feedback

---
 docs/writing-stories/stories-for-multiple-components.md | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md
index 5ae20d893ae6..a51a58867445 100644
--- a/docs/writing-stories/stories-for-multiple-components.md
+++ b/docs/writing-stories/stories-for-multiple-components.md
@@ -41,7 +41,7 @@ Let's talk about some techniques you can use to mitigate the above, which are es
 
 ## Reusing story definitions
 
-We can also reduce repitition in our stories by reusing story definitions. Here, we can reuse the `ListItem` stories' args in the story for `List`:
+We can also reduce repetition in our stories by reusing story definitions. Here, we can reuse the `ListItem` stories' args in the story for `List`:
 
 <!-- prettier-ignore-start -->
 
@@ -92,14 +92,12 @@ Now that `children` is an arg, we can potentially reuse it in another story.
 
 However, there are some caveats when using this approach that you should be aware of.
 
-The `children` arg, just like all args, needs to be JSON serializable. It means that you should:
+The `children` arg, just like all args, needs to be JSON serializable. To avoid errors with your Storybook, you should:
 
 - Avoid using empty values
 - Use [mapping](../essentials/controls.md#dealing-with-complex-values) if you want to adjust the value with [controls](../essentials/controls.md)
 - Use caution with components that include third party libraries
 
-As they could lead into errors with your Storybook.
-
 <Callout variant="info">
 
 We're currently working on improving the overall experience for the children arg and allow you to edit children arg in a control and allow you to use other types of components in the near future. But for now you need to factor in this caveat when you're implementing your stories.

From 6957b500eca2807fe670aa7355fcc81e32314353 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 1 Apr 2024 20:53:15 +0200
Subject: [PATCH 21/37] Update postcss-loader in Next.js framework

---
 code/frameworks/nextjs/package.json |  4 +-
 code/yarn.lock                      | 57 +++++++++++------------------
 2 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index a24a7896181f..a4fdc13f0c88 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -108,8 +108,8 @@
     "loader-utils": "^3.2.1",
     "node-polyfill-webpack-plugin": "^2.0.1",
     "pnp-webpack-plugin": "^1.7.0",
-    "postcss": "^8.4.21",
-    "postcss-loader": "^7.0.2",
+    "postcss": "^8.4.38",
+    "postcss-loader": "^8.1.1",
     "react-refresh": "^0.14.0",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.4.0",
diff --git a/code/yarn.lock b/code/yarn.lock
index f4deb1517325..c1b3d7720d4c 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5956,8 +5956,8 @@ __metadata:
     next: "npm:^14.1.0"
     node-polyfill-webpack-plugin: "npm:^2.0.1"
     pnp-webpack-plugin: "npm:^1.7.0"
-    postcss: "npm:^8.4.21"
-    postcss-loader: "npm:^7.0.2"
+    postcss: "npm:^8.4.38"
+    postcss-loader: "npm:^8.1.1"
     react-refresh: "npm:^0.14.0"
     resolve-url-loader: "npm:^5.0.0"
     sass-loader: "npm:^12.4.0"
@@ -12020,23 +12020,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^8.3.5":
-  version: 8.3.6
-  resolution: "cosmiconfig@npm:8.3.6"
-  dependencies:
-    import-fresh: "npm:^3.3.0"
-    js-yaml: "npm:^4.1.0"
-    parse-json: "npm:^5.2.0"
-    path-type: "npm:^4.0.0"
-  peerDependencies:
-    typescript: ">=4.9.5"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 10c0/0382a9ed13208f8bfc22ca2f62b364855207dffdb73dc26e150ade78c3093f1cf56172df2dd460c8caf2afa91c0ed4ec8a88c62f8f9cd1cf423d26506aa8797a
-  languageName: node
-  linkType: hard
-
 "cosmiconfig@npm:^9.0.0":
   version: 9.0.0
   resolution: "cosmiconfig@npm:9.0.0"
@@ -22656,7 +22639,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-loader@npm:8.1.1":
+"postcss-loader@npm:8.1.1, postcss-loader@npm:^8.1.1":
   version: 8.1.1
   resolution: "postcss-loader@npm:8.1.1"
   dependencies:
@@ -22676,20 +22659,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-loader@npm:^7.0.2":
-  version: 7.3.4
-  resolution: "postcss-loader@npm:7.3.4"
-  dependencies:
-    cosmiconfig: "npm:^8.3.5"
-    jiti: "npm:^1.20.0"
-    semver: "npm:^7.5.4"
-  peerDependencies:
-    postcss: ^7.0.0 || ^8.0.1
-    webpack: ^5.0.0
-  checksum: 10c0/1bf7614aeea9ad1f8ee6be3a5451576c059391688ea67f825aedc2674056369597faeae4e4a81fe10843884c9904a71403d9a54197e1f560e8fbb9e61f2a2680
-  languageName: node
-  linkType: hard
-
 "postcss-media-query-parser@npm:^0.2.3":
   version: 0.2.3
   resolution: "postcss-media-query-parser@npm:0.2.3"
@@ -22827,7 +22796,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:8.4.35, postcss@npm:^8.2.14, postcss@npm:^8.4.21, postcss@npm:^8.4.23, postcss@npm:^8.4.27, postcss@npm:^8.4.32, postcss@npm:^8.4.33, postcss@npm:^8.4.35":
+"postcss@npm:8.4.35, postcss@npm:^8.2.14, postcss@npm:^8.4.23, postcss@npm:^8.4.27, postcss@npm:^8.4.32, postcss@npm:^8.4.33, postcss@npm:^8.4.35":
   version: 8.4.35
   resolution: "postcss@npm:8.4.35"
   dependencies:
@@ -22848,6 +22817,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10c0/955407b8f70cf0c14acf35dab3615899a2a60a26718a63c848cf3c29f2467b0533991b985a2b994430d890bd7ec2b1963e36352b0774a19143b5f591540f7c06
+  languageName: node
+  linkType: hard
+
 "preact@npm:^10.5.13":
   version: 10.19.3
   resolution: "preact@npm:10.19.3"
@@ -25793,6 +25773,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 10c0/7e5f896ac10a3a50fe2898e5009c58ff0dc102dcb056ed27a354623a0ece8954d4b2649e1a1b2b52ef2e161d26f8859c7710350930751640e71e374fe2d321a4
+  languageName: node
+  linkType: hard
+
 "source-map-loader@npm:5.0.0":
   version: 5.0.0
   resolution: "source-map-loader@npm:5.0.0"

From 2ef2c8042b0274791248d13450c4de41ee60184d Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 1 Apr 2024 21:16:43 +0200
Subject: [PATCH 22/37] Update TypeScript

---
 code/package.json    |  2 +-
 code/yarn.lock       | 22 +++++++++++++++++++++-
 scripts/package.json |  2 +-
 scripts/yarn.lock    | 18 +++++++++---------
 4 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/code/package.json b/code/package.json
index 399bf6dd0b11..0daa82df94f1 100644
--- a/code/package.json
+++ b/code/package.json
@@ -223,7 +223,7 @@
     "trash": "^7.0.0",
     "ts-dedent": "^2.0.0",
     "ts-node": "^10.9.1",
-    "typescript": "^5.3.2",
+    "typescript": "^5.4.3",
     "util": "^0.12.4",
     "vite": "^4.0.0",
     "vitest": "^1.2.2",
diff --git a/code/yarn.lock b/code/yarn.lock
index f4deb1517325..1a4f5cdae397 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6458,7 +6458,7 @@ __metadata:
     trash: "npm:^7.0.0"
     ts-dedent: "npm:^2.0.0"
     ts-node: "npm:^10.9.1"
-    typescript: "npm:^5.3.2"
+    typescript: "npm:^5.4.3"
     util: "npm:^0.12.4"
     vite: "npm:^4.0.0"
     vitest: "npm:^1.2.2"
@@ -27534,6 +27534,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^5.4.3":
+  version: 5.4.3
+  resolution: "typescript@npm:5.4.3"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@npm%3A^3.8.3#optional!builtin<compat/typescript>":
   version: 3.9.10
   resolution: "typescript@patch:typescript@npm%3A3.9.10#optional!builtin<compat/typescript>::version=3.9.10&hash=3bd3d3"
@@ -27554,6 +27564,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@npm%3A^5.4.3#optional!builtin<compat/typescript>":
+  version: 5.4.3
+  resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin<compat/typescript>::version=5.4.3&hash=5adc0c"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828
+  languageName: node
+  linkType: hard
+
 "ufo@npm:^1.3.0":
   version: 1.3.2
   resolution: "ufo@npm:1.3.2"
diff --git a/scripts/package.json b/scripts/package.json
index bff065475ea5..bf44133234b4 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -177,7 +177,7 @@
     "ts-dedent": "^2.0.0",
     "tsup": "^6.7.0",
     "type-fest": "~2.19",
-    "typescript": "^5.3.2",
+    "typescript": "^5.4.3",
     "util": "^0.12.4",
     "uuid": "^9.0.0",
     "vitest": "^1.2.2",
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index e48f40c7ef08..fb585cb2070b 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -2827,7 +2827,7 @@ __metadata:
     ts-loader: "npm:^9.4.2"
     tsup: "npm:^6.7.0"
     type-fest: "npm:~2.19"
-    typescript: "npm:^5.3.2"
+    typescript: "npm:^5.4.3"
     util: "npm:^0.12.4"
     uuid: "npm:^9.0.0"
     verdaccio: "npm:^5.19.1"
@@ -14963,23 +14963,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typescript@npm:^5.3.2":
-  version: 5.4.2
-  resolution: "typescript@npm:5.4.2"
+"typescript@npm:^5.4.3":
+  version: 5.4.3
+  resolution: "typescript@npm:5.4.3"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/583ff68cafb0c076695f72d61df6feee71689568179fb0d3a4834dac343df6b6ed7cf7b6f6c801fa52d43cd1d324e2f2d8ae4497b09f9e6cfe3d80a6d6c9ca52
+  checksum: 10c0/22443a8760c3668e256c0b34b6b45c359ef6cecc10c42558806177a7d500ab1a7d7aac1f976d712e26989ddf6731d2fbdd3212b7c73290a45127c1c43ba2005a
   languageName: node
   linkType: hard
 
-"typescript@patch:typescript@npm%3A^5.3.2#optional!builtin<compat/typescript>":
-  version: 5.4.2
-  resolution: "typescript@patch:typescript@npm%3A5.4.2#optional!builtin<compat/typescript>::version=5.4.2&hash=5adc0c"
+"typescript@patch:typescript@npm%3A^5.4.3#optional!builtin<compat/typescript>":
+  version: 5.4.3
+  resolution: "typescript@patch:typescript@npm%3A5.4.3#optional!builtin<compat/typescript>::version=5.4.3&hash=5adc0c"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/fcf6658073d07283910d9a0e04b1d5d0ebc822c04dbb7abdd74c3151c7aa92fcddbac7d799404e358197222006ccdc4c0db219d223d2ee4ccd9e2b01333b49be
+  checksum: 10c0/6e51f8b7e6ec55b897b9e56b67e864fe8f44e30f4a14357aad5dc0f7432db2f01efc0522df0b6c36d361c51f2dc3dcac5c832efd96a404cfabf884e915d38828
   languageName: node
   linkType: hard
 

From 403fd8e5b25b4c55f61661858454d441dde782d2 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 1 Apr 2024 21:34:42 +0200
Subject: [PATCH 23/37] Fix issues after TypeScript update

---
 .../core-common/src/js-package-manager/Yarn2Proxy.test.ts  | 1 -
 code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts  | 7 +++++--
 .../renderers/react/src/__test__/portable-stories.test.tsx | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts
index f024d19c1133..985d0dbecf83 100644
--- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts
+++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.test.ts
@@ -1,5 +1,4 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
-import dedent from 'ts-dedent';
 import { Yarn2Proxy } from './Yarn2Proxy';
 
 describe('Yarn 2 Proxy', () => {
diff --git a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts
index 7014357cc44b..8ed0de57e826 100644
--- a/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts
+++ b/code/lib/core-common/src/js-package-manager/Yarn2Proxy.ts
@@ -36,6 +36,7 @@ const CRITICAL_YARN2_ERROR_CODES = {
   YN0083: 'AUTOMERGE_GIT_ERROR',
 };
 
+// @ts-expect-error The error codes might be helpful in the future
 const YARN2_ERROR_CODES = {
   ...CRITICAL_YARN2_ERROR_CODES,
   YN0000: 'UNNAMED',
@@ -306,10 +307,12 @@ export class Yarn2Proxy extends JsPackageManager {
     while ((match = regex.exec(logs)) !== null) {
       const code = match[1];
       const message = match[2].replace(/[┌│└]/g, '').trim();
-      if (CRITICAL_YARN2_ERROR_CODES[code]) {
+      if (code in CRITICAL_YARN2_ERROR_CODES) {
         errorCodesWithMessages.push({
           code,
-          message: `${CRITICAL_YARN2_ERROR_CODES[code]}\n-> ${message}\n`,
+          message: `${
+            CRITICAL_YARN2_ERROR_CODES[code as keyof typeof CRITICAL_YARN2_ERROR_CODES]
+          }\n-> ${message}\n`,
         });
       }
     }
diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx
index f80a1bbd2cc6..6c3c38055065 100644
--- a/code/renderers/react/src/__test__/portable-stories.test.tsx
+++ b/code/renderers/react/src/__test__/portable-stories.test.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import { vi, it, expect, afterEach, describe } from 'vitest';
 import { render, screen, cleanup } from '@testing-library/react';
 import { addons } from '@storybook/preview-api';
-//@ts-expect-error our tsconfig.jsn#moduleResolution is set to 'node', which doesn't support this import
 
 import * as addonInteractionsPreview from '@storybook/addon-interactions/preview';
 
@@ -92,6 +91,7 @@ describe('projectAnnotations', () => {
   });
 
   it('has spies when addon-interactions annotations are added', async () => {
+    //@ts-expect-error TODO investigate
     const Story = composeStory(stories.WithActionArg, stories.default, addonInteractionsPreview);
     expect(vi.mocked(Story.args.someActionArg!).mock).toBeDefined();
 

From 88e5b0e0e8b33a48ea65f68d738094d9d02581c2 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Tue, 2 Apr 2024 09:13:26 +0200
Subject: [PATCH 24/37] Add missing dependency

---
 code/presets/create-react-app/package.json | 1 +
 code/presets/create-react-app/src/types.ts | 1 +
 code/yarn.lock                             | 1 +
 3 files changed, 3 insertions(+)

diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 4d0db3310dc4..405e368aad5f 100644
--- a/code/presets/create-react-app/package.json
+++ b/code/presets/create-react-app/package.json
@@ -50,6 +50,7 @@
   },
   "dependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
+    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
     "@storybook/types": "workspace:*",
     "@types/semver": "^7.5.6",
     "pnp-webpack-plugin": "^1.7.0",
diff --git a/code/presets/create-react-app/src/types.ts b/code/presets/create-react-app/src/types.ts
index 14d9b6b59d88..197a4c9f467e 100644
--- a/code/presets/create-react-app/src/types.ts
+++ b/code/presets/create-react-app/src/types.ts
@@ -1,4 +1,5 @@
 import type { Options } from '@storybook/types';
+
 import type { PluginOptions as RDTSPluginOptions } from '@storybook/react-docgen-typescript-plugin';
 
 export interface PluginOptions extends Options {
diff --git a/code/yarn.lock b/code/yarn.lock
index 1a4f5cdae397..28f3aa376755 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -6048,6 +6048,7 @@ __metadata:
   dependencies:
     "@pmmmwh/react-refresh-webpack-plugin": "npm:^0.5.1"
     "@storybook/node-logger": "workspace:*"
+    "@storybook/react-docgen-typescript-plugin": "npm:1.0.6--canary.9.0c3f3b7.0"
     "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     "@types/semver": "npm:^7.5.6"

From 385f9b97f5e5446c88539b75e4fa9ae8d3c61da6 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 2 Apr 2024 16:53:47 +0200
Subject: [PATCH 25/37] Update tests

---
 .../src/tests/notifications.test.js           | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/code/lib/manager-api/src/tests/notifications.test.js b/code/lib/manager-api/src/tests/notifications.test.js
index 51a53be2b1e3..105b973f3b3b 100644
--- a/code/lib/manager-api/src/tests/notifications.test.js
+++ b/code/lib/manager-api/src/tests/notifications.test.js
@@ -2,34 +2,33 @@ import { describe, it, expect, vi } from 'vitest';
 import { init as initNotifications } from '../modules/notifications';
 
 describe('notifications API', () => {
-  it('allows adding notifications', () => {
-    const store = {
-      getState: () => ({
-        notifications: [],
-      }),
-      setState: vi.fn(),
-    };
+  const store = {
+    state: { notifications: [] },
+    getState: () => store.state,
+    setState: (update) => {
+      if (typeof update === 'function') {
+        store.state = update(store.state);
+      } else {
+        store.state = update;
+      }
+    },
+  };
 
+  it.only('allows adding notifications', () => {
     const { api } = initNotifications({ store });
 
     api.addNotification({ id: '1' });
-    expect(store.setState).toHaveBeenCalledWith({
+    expect(store.getState()).toEqual({
       notifications: [{ id: '1' }],
     });
   });
 
   it('allows removing notifications', () => {
-    const store = {
-      getState: () => ({
-        notifications: [{ id: '1' }, { id: '2' }, { id: '3' }],
-      }),
-      setState: vi.fn(),
-    };
-
+    store.setState({ notifications: [{ id: '1' }, { id: '2' }, { id: '3' }] });
     const { api } = initNotifications({ store });
 
     api.clearNotification('2');
-    expect(store.setState).toHaveBeenCalledWith({
+    expect(store.getState()).toEqual({
       notifications: [{ id: '1' }, { id: '3' }],
     });
   });

From f3c4e001f50e1cdca08201bbc923a7d770172f21 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Tue, 2 Apr 2024 20:20:00 +0200
Subject: [PATCH 26/37] Remove .only modifier

---
 code/lib/manager-api/src/tests/notifications.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/code/lib/manager-api/src/tests/notifications.test.js b/code/lib/manager-api/src/tests/notifications.test.js
index 105b973f3b3b..8d2005db6837 100644
--- a/code/lib/manager-api/src/tests/notifications.test.js
+++ b/code/lib/manager-api/src/tests/notifications.test.js
@@ -14,7 +14,7 @@ describe('notifications API', () => {
     },
   };
 
-  it.only('allows adding notifications', () => {
+  it('allows adding notifications', () => {
     const { api } = initNotifications({ store });
 
     api.addNotification({ id: '1' });

From 9dc6fe3d402567e6e22c225d0c01141707af68e5 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 2 Apr 2024 14:00:37 -0600
Subject: [PATCH 27/37] Rename snippet

---
 ...-default-exports.js.mdx => button-story-default-export.js.mdx} | 0
 ...-default-exports.ts.mdx => button-story-default-export.ts.mdx} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename docs/snippets/html/{button-story-default-exports.js.mdx => button-story-default-export.js.mdx} (100%)
 rename docs/snippets/html/{button-story-default-exports.ts.mdx => button-story-default-export.ts.mdx} (100%)

diff --git a/docs/snippets/html/button-story-default-exports.js.mdx b/docs/snippets/html/button-story-default-export.js.mdx
similarity index 100%
rename from docs/snippets/html/button-story-default-exports.js.mdx
rename to docs/snippets/html/button-story-default-export.js.mdx
diff --git a/docs/snippets/html/button-story-default-exports.ts.mdx b/docs/snippets/html/button-story-default-export.ts.mdx
similarity index 100%
rename from docs/snippets/html/button-story-default-exports.ts.mdx
rename to docs/snippets/html/button-story-default-export.ts.mdx

From 65e66987c0a93be7606bdbf3573f33d65ab87b9b Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Apr 2024 10:06:08 +0200
Subject: [PATCH 28/37] CLI: Add --config-dir flag to migrate command

---
 code/lib/cli/src/generate.ts |  2 +-
 code/lib/cli/src/migrate.ts  | 29 ++++++++++++++++++++++++-----
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts
index 6830aea3d1c2..36de347730a7 100644
--- a/code/lib/cli/src/generate.ts
+++ b/code/lib/cli/src/generate.ts
@@ -126,6 +126,7 @@ command('migrate [migration]')
   .option('-l --list', 'List available migrations')
   .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', '**/*.js')
   .option('-p --parser <babel | babylon | flow | ts | tsx>', 'jscodeshift parser')
+  .option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
   .option(
     '-n --dry-run',
     'Dry run: verify the migration exists and show the files to which it will be applied'
@@ -142,7 +143,6 @@ command('migrate [migration]')
       list,
       rename,
       parser,
-      logger: consoleLogger,
     }).catch((err) => {
       logger.error(err);
       process.exit(1);
diff --git a/code/lib/cli/src/migrate.ts b/code/lib/cli/src/migrate.ts
index 29ee10dc82a3..fc85c75d9609 100644
--- a/code/lib/cli/src/migrate.ts
+++ b/code/lib/cli/src/migrate.ts
@@ -11,7 +11,25 @@ import { getStorybookVersionSpecifier } from './helpers';
 
 const logger = console;
 
-export async function migrate(migration: any, { glob, dryRun, list, rename, parser }: any) {
+type CLIOptions = {
+  glob: string;
+  configDir?: string;
+  dryRun?: boolean;
+  list?: string[];
+  /**
+   * Rename suffix of matching files after codemod has been applied, e.g. ".js:.ts"
+   */
+  rename?: string;
+  /**
+   * jscodeshift parser
+   */
+  parser?: 'babel' | 'babylon' | 'flow' | 'ts' | 'tsx';
+};
+
+export async function migrate(
+  migration: any,
+  { glob, dryRun, list, rename, parser, configDir: userSpecifiedConfigDir }: CLIOptions
+) {
   if (list) {
     listCodemods().forEach((key: any) => logger.log(key));
   } else if (migration) {
@@ -19,13 +37,14 @@ export async function migrate(migration: any, { glob, dryRun, list, rename, pars
       const packageManager = JsPackageManagerFactory.getPackageManager();
 
       const [packageJson, storybookVersion] = await Promise.all([
-        //
         packageManager.retrievePackageJson(),
         getCoercedStorybookVersion(packageManager),
       ]);
-      const { configDir: inferredConfigDir, mainConfig: mainConfigPath } =
-        getStorybookInfo(packageJson);
-      const configDir = inferredConfigDir || '.storybook';
+      const { configDir: inferredConfigDir, mainConfig: mainConfigPath } = getStorybookInfo(
+        packageJson,
+        userSpecifiedConfigDir
+      );
+      const configDir = userSpecifiedConfigDir || inferredConfigDir || '.storybook';
 
       // GUARDS
       if (!storybookVersion) {

From d7e5d5a52d4d4edfeae717d07c5159e90b0026ef Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 3 Apr 2024 14:14:02 +0200
Subject: [PATCH 29/37] Documentation: add migrate and automigrate to the CLI
 Options page

---
 docs/api/cli-options.md | 153 ++++++++++++++++++++++++++++++++--------
 1 file changed, 123 insertions(+), 30 deletions(-)

diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index 3aa9f0a3f0a1..e7078d552a5f 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -35,8 +35,10 @@ Options include:
 | `--help`                        | Output usage information <br/>`storybook dev --help`                                                                                                                      |
 | `-V`, `--version`               | Output the version number <br/>`storybook dev -V`                                                                                                                         |
 | `-p`, `--port [number]`         | Port to run Storybook <br/>`storybook dev -p 9009`                                                                                                                        |
+| `--exact-port [number]`         | Use desired port and exit process if it's not available <br/>`storybook dev --exact-port 9009`                                                                            |
 | `-h`, `--host [string]`         | Host to run Storybook <br/>`storybook dev -h my-host.com`                                                                                                                 |
 | `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`storybook dev -c .storybook`                                                                                  |
+| `--loglevel [level]`            | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook dev --loglevel warn`       |
 | `--https`                       | Serve Storybook over HTTPS. Note: You must provide your own certificate information<br/>`storybook dev --https`                                                           |
 | `--ssl-ca`                      | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)<br/>`storybook dev --ssl-ca my-certificate`                    |
 | `--ssl-cert`                    | Provide an SSL certificate. (Required with --https)<br/>`storybook dev --ssl-cert my-ssl-certificate`                                                                     |
@@ -45,9 +47,15 @@ Options include:
 | `--ci`                          | CI mode (skip interactive prompts, don't open browser)<br/>`storybook dev --ci`                                                                                           |
 | `--no-open`                     | Do not open Storybook automatically in the browser<br/>`storybook dev --no-open`                                                                                          |
 | `--quiet`                       | Suppress verbose build output<br/>`storybook dev --quiet`                                                                                                                 |
+| `--debug`                       | Outputs more logs in the CLI to assist debugging<br/>`storybook dev --debug`                                                                                              |
 | `--debug-webpack`               | Display final webpack configurations for debugging purposes<br/>`storybook dev --debug-webpack`                                                                           |
-| `--stats-json`          | Write  stats JSON to disk<br/>`storybook dev ---stats-json /tmp/stats`<br/>NOTE: only works for webpack.                                                                              |
+| `--stats-json [dir-name]`       | Write stats JSON to disk<br/>`storybook dev --stats-json /tmp/stats`<br/>NOTE: only works for Webpack.                                                                    |
+| `--no-version-updates`          | Suppress Storybook's update check<br/>`storybook dev --no-version-updates`                                                                                                |
 | `--docs`                        | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)<br/>`storybook dev --docs` |
+| `--initial-path [path]`         | URL path to be appended when visiting Storybook for the first time<br/>`storybook dev --initial-path=/docs/getting-started--docs`                                         |
+| `--preview-url [path]`          | Disables the default Storybook preview and lets your use your own<br/>`storybook dev --preview-url=http://localhost:1337/external-iframe.html`                            |
+| `--force-build-preview`         | Build the preview iframe even if you are using --preview-url<br/>`storybook dev --force-build-preview`                                                                    |
+| `--enable-crash-reports`        | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook dev --disable-telemetry`                     |
 | `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook dev --disable-telemetry`                                             |
 
 <Callout variant="warning" id="static-dir-deprecation">
@@ -74,11 +82,15 @@ Options include:
 | `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from<br/>`storybook build -c .storybook`                                                                                                             |
 | `--loglevel [level]`            | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook build --loglevel warn`                                 |
 | `--quiet`                       | Suppress verbose build output<br/>`storybook build --quiet`                                                                                                                                           |
+| `--debug`                       | Outputs more logs in the CLI to assist debugging<br/>`storybook build --debug`                                                                                                                        |
 | `--debug-webpack`               | Display final webpack configurations for debugging purposes<br/>`storybook build --debug-webpack`                                                                                                     |
-| `---stats-json`          | Write stats JSON to disk<br/>`storybook build -stats-json /my-storybook/-stats`                                                                                               |
+| `--stats-json [dir-name]`       | Write stats JSON to disk<br/>`storybook build --stats-json /tmp/stats`                                                                                                                                |
 | `--docs`                        | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs`                           |
-| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry`                                                                      |
 | `--test`                        | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).<br/>`storybook build --test` |
+| `--preview-url [path]`          | Disables the default Storybook preview and lets your use your own<br/>`storybook build --preview-url=http://localhost:1337/external-iframe.html`                                                      |
+| `--force-build-preview`         | Build the preview iframe even if you are using --preview-url<br/>`storybook build --force-build-preview`                                                                                              |
+| `--enable-crash-reports`        | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry`                                               |
+| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry`                                                                      |
 
 <!-- Re-read this for accuracy -->
 
@@ -94,15 +106,20 @@ For example, `storybook@latest init` will install the latest version of Storyboo
 
 Options include:
 
-| Option                 | Description                                                                                                                                                                    |
-| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `-b`, `--builder`      | Defines the [builder](../builders/index.md) to use for your Storybook instance<br/>`storybook init --builder webpack5`                                                         |
-| `-f`,`--force`         | Forcefully installs Storybook into your project, prompting you to overwrite existing files<br/>`storybook init --force`                                                        |
-| `-s`, `--skip-install` | Skips the dependency installation step. Used only when you need to configure Storybook manually<br/>`storybook init --skip-install`                                            |
-| `-t`, `--type`         | Defines the [framework](../configure/frameworks.md) to use for your Storybook instance<br/>`storybook init --type solid`                                                       |
-| `-y`, `--yes`          | Skips interactive prompts and automatically installs Storybook per specified version<br/>`storybook init --yes`                                                                |
-| `--package-manager`    | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook init --package-manager pnpm`       |
-| `--use-pnp`            | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager<br/>`storybook init --use-pnp` |
+| Option                   | Description                                                                                                                                                                                 |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--help`                 | Output usage information <br/>`storybook init --help`                                                                                                                                       |
+| `-b`, `--builder`        | Defines the [builder](../builders/index.md) to use for your Storybook instance<br/>`storybook init --builder webpack5`                                                                      |
+| `-f`,`--force`           | Forcefully installs Storybook into your project, prompting you to overwrite existing files<br/>`storybook init --force`                                                                     |
+| `-s`, `--skip-install`   | Skips the dependency installation step. Used only when you need to configure Storybook manually<br/>`storybook init --skip-install`                                                         |
+| `-t`, `--type`           | Defines the [framework](../configure/frameworks.md) to use for your Storybook instance<br/>`storybook init --type solid`                                                                    |
+| `-y`, `--yes`            | Skips interactive prompts and automatically installs Storybook per specified version<br/>`storybook init --yes`                                                                             |
+| `--package-manager`      | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook init --package-manager pnpm`                    |
+| `--use-pnp`              | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager<br/>`storybook init --use-pnp`              |
+| `-p`, `--parser`         | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br/> Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`<br/>`storybook init --parser tsx` |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook init --debug`                                                                                                               |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook init --disable-telemetry`                                                              |
+| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook init --disable-telemetry`                                      |
 
 ### `add`
 
@@ -116,8 +133,12 @@ Options include:
 
 | Option                     | Description                                                                                                                                                                     |
 | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--help`                   | Output usage information <br/>`storybook add --help`                                                                                                                            |
 | `--package-manager`        | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook add [addon] --package-manager pnpm` |
 | `-s`, `--skip-postinstall` | Skips post-install configuration. Used only when you need to configure the addon yourself<br/>`storybook add [addon] --skip-postinstall`                                        |
+| `--debug`                  | Outputs more logs in the CLI to assist debugging<br/>`storybook add --debug`                                                                                                    |
+| `--disable-telemetry`      | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook add --disable-telemetry`                                                   |
+| `--enable-crash-reports`   | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook add --disable-telemetry`                           |
 
 ### `remove`
 
@@ -129,9 +150,13 @@ storybook remove [addon] [options]
 
 Options include:
 
-| Option              | Description                                                                                                                                                                     |
-| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--package-manager` | Sets the package manager to use when removing the addon.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook remove  [addon]--package-manager pnpm` |
+| Option                   | Description                                                                                                                                                                    |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--help`                 | Output usage information <br/>`storybook remove --help`                                                                                                                        |
+| `--package-manager`      | Sets the package manager to use when removing the addon.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook remove [addon]--package-manager pnpm` |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook remove --debug`                                                                                                |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook remove --disable-telemetry`                                               |
+| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook remove --disable-telemetry`                       |
 
 ### `upgrade`
 
@@ -145,13 +170,75 @@ For example, `storybook@latest upgrade --dry-run` will perform a dry run (no act
 
 Options include:
 
-| Option               | Description                                                                                                                                                                 |
-| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br/>`storybook upgrade --config-dir .storybook`                                                                       |
-| `-n`, `--dry-run`    | Checks for version upgrades without installing them<br/>`storybook upgrade --dry-run`                                                                                       |
-| `-s`, `--skip-check` | Skips the migration check step during the upgrade process<br/> `storybook upgrade --skip-check`                                                                             |
-| `-y`, `--yes`        | Skips interactive prompts and automatically upgrades Storybook to the latest version<br/>`storybook upgrade --yes`                                                          |
-| `--package-manager`  | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook upgrade --package-manager pnpm` |
+| Option                   | Description                                                                                                                                                                 |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--help`                 | Output usage information <br/>`storybook upgrade --help`                                                                                                                    |
+| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook upgrade --config-dir .storybook`                                                                       |
+| `-n`, `--dry-run`        | Checks for version upgrades without installing them<br/>`storybook upgrade --dry-run`                                                                                       |
+| `-s`, `--skip-check`     | Skips the migration check step during the upgrade process<br/> `storybook upgrade --skip-check`                                                                             |
+| `-y`, `--yes`            | Skips interactive prompts and automatically upgrades Storybook to the latest version<br/>`storybook upgrade --yes`                                                          |
+| `-f`,`--force`           | Force the upgrade, skipping autoblockers check<br/>`storybook upgrade --force`                                                                                              |
+| `--package-manager`      | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook upgrade --package-manager pnpm` |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook upgrade --debug`                                                                                            |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook upgrade --disable-telemetry`                                           |
+| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook upgrade --disable-telemetry`                   |
+
+### `migrate`
+
+Runs a specified codemod to migrate your project to use more modern Storybook standards.
+
+```shell
+storybook[@version] migrate [codemod] [options]
+```
+
+<Callout variant="info">
+
+The command needs a specific codemod to be specified, e.g. `csf-2-to-3`. To get a list of available codemods, run the CLI command with the `--list` flag.
+
+</Callout>
+
+For example, `storybook@latest migrate csf-2-to-3 --dry-run` will verify that the codemod is applicable to your files and will show which files would be affected by the codemod in a dry run (no actual changes).
+
+Options include:
+
+| Option                     | Description                                                                                                                                                                                    |
+| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `--help`                   | Output usage information <br/>`storybook migrate --help`                                                                                                                                       |
+| `-c`, `--config-dir`       | Directory where to load Storybook configurations from<br/>`storybook migrate --config-dir .storybook`                                                                                          |
+| `-n`, `--dry-run`          | Verify the migration exists and show the files to which it will be applied<br/>`storybook migrate --dry-run`                                                                                   |
+| `-l`, `--list`             | Shows a list of available codemods<br/> `storybook migrate --list`                                                                                                                             |
+| `-g`, `--glob`             | Glob for files upon which to apply the codemods<br/>`storybook migrate --glob src/**/*.stories.tsx`                                                                                            |
+| `-p`, `--parser`           | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br/> Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`<br/>`storybook migrate --parser tsx` |
+| `-r`, `--rename [from-to]` | Rename suffix of matching files after codemod has been applied, e.g. `.js:.ts`<br/>`storybook migrate --rename ".js:.ts"`                                                                      |
+| `--debug`                  | Outputs more logs in the CLI to assist debugging<br/>`storybook migrate --debug`                                                                                                               |
+| `--disable-telemetry`      | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook migrate --disable-telemetry`                                                              |
+| `--enable-crash-reports`   | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook migrate --disable-telemetry`                                      |
+
+### `automigrate`
+
+Check Storybook for incompatibilities or migrations and apply fixes.
+
+```shell
+storybook[@version] automigrate [fixId] [options]
+```
+
+For example, `storybook@latest automigrate --dry-run` will scan your codebase and tell which automigrations are applicable in a dry run (no actual changes).
+
+Options include:
+
+| Option                   | Description                                                                                                                                                                                                          |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
+| `--help`                 | Output usage information <br/>`storybook automigrate --help`                                                                                                                                                         |
+| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook automigrate --config-dir .storybook`                                                                                                            |
+| `-n`, `--dry-run`        | Only checks for fixes, not actually executing them<br/>`storybook automigrate --dry-run`                                                                                                                             |
+| `-s`, `--skip-install`   | Skip installing dependencies whenever applicable<br/> `storybook automigrate --skip-install`                                                                                                                         |
+| `-y`, `--yes`            | Skips interactive prompts and automatically accepts automigrations<br/>`storybook automigrate --yes`                                                                                                                 |
+| `-l`, `--list`           | Shows a list of available automigrations<br/> `storybook automigrate --list`                                                                                                                                         |
+| `--package-manager`      | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook automigrate --package-manager pnpm`                                      |     |
+| `--renderer`             | Sets the renderer package for the framework Storybook is using.<br/> Useful for monorepo settings where multiple Storybook renderers are present in the same package.json<br/>`storybook automigrate --renderer vue` |     |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook automigrate --debug`                                                                                                                                 |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook automigrate --disable-telemetry`                                                                                |
+| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook automigrate --disable-telemetry`                                                        |
 
 ### `doctor`
 
@@ -163,10 +250,13 @@ storybook doctor [options]
 
 Options include:
 
-| Option               | Description                                                                                                                                                                   |
-| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br/>`storybook doctor --config-dir .storybook`                                                                          |
-| `--package-manager`  | Sets the package manager to use when running the health check.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook doctor --package-manager pnpm` |
+| Option                   | Description                                                                                                                                                                   |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook doctor --config-dir .storybook`                                                                          |
+| `--package-manager`      | Sets the package manager to use when running the health check.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook doctor --package-manager pnpm` |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook doctor --debug`                                                                                               |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook doctor --disable-telemetry`                                              |
+| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook doctor --disable-telemetry`                      |
 
 ### `info`
 
@@ -219,10 +309,13 @@ The `framework-filter` argument is optional and can filter the list of available
 
 Options include:
 
-| Option                      | Description                                                                                          |
-| --------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `-o`, `--output [dir-name]` | Configures the location of the sandbox project<br/>`storybook sandbox --output /my-sandbox-project`  |
-| `--no-init`                 | Generates a sandbox project without without initializing Storybook<br/>`storybook sandbox --no-init` |
+| Option                      | Description                                                                                                                                               |
+| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-o`, `--output [dir-name]` | Configures the location of the sandbox project<br/>`storybook sandbox --output /my-sandbox-project`                                                       |
+| `--no-init`                 | Generates a sandbox project without without initializing Storybook<br/>`storybook sandbox --no-init`                                                      |
+| `--debug`                   | Outputs more logs in the CLI to assist debugging<br/>`storybook sandbox --debug`                                                                          |
+| `--disable-telemetry`       | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook sandbox --disable-telemetry`                         |
+| `--enable-crash-reports`    | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook sandbox --disable-telemetry` |
 
 <Callout variant="info">
 

From d77f72ee8a42dd39d602be2bfdeb02ccef0aef90 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Thu, 4 Apr 2024 09:17:31 +0200
Subject: [PATCH 30/37] adjust docs based on review comments

---
 docs/api/cli-options.md | 200 ++++++++++++++++++++--------------------
 1 file changed, 98 insertions(+), 102 deletions(-)

diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index e7078d552a5f..9e5bc10fb428 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -30,33 +30,33 @@ storybook dev [options]
 
 Options include:
 
-| Option                          | Description                                                                                                                                                               |
-| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--help`                        | Output usage information <br/>`storybook dev --help`                                                                                                                      |
-| `-V`, `--version`               | Output the version number <br/>`storybook dev -V`                                                                                                                         |
-| `-p`, `--port [number]`         | Port to run Storybook <br/>`storybook dev -p 9009`                                                                                                                        |
-| `--exact-port [number]`         | Use desired port and exit process if it's not available <br/>`storybook dev --exact-port 9009`                                                                            |
-| `-h`, `--host [string]`         | Host to run Storybook <br/>`storybook dev -h my-host.com`                                                                                                                 |
-| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`storybook dev -c .storybook`                                                                                  |
-| `--loglevel [level]`            | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook dev --loglevel warn`       |
-| `--https`                       | Serve Storybook over HTTPS. Note: You must provide your own certificate information<br/>`storybook dev --https`                                                           |
-| `--ssl-ca`                      | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)<br/>`storybook dev --ssl-ca my-certificate`                    |
-| `--ssl-cert`                    | Provide an SSL certificate. (Required with --https)<br/>`storybook dev --ssl-cert my-ssl-certificate`                                                                     |
-| `--ssl-key`                     | Provide an SSL key. (Required with --https)<br/>`storybook dev --ssl-key my-ssl-key`                                                                                      |
-| `--smoke-test`                  | Exit after successful start<br/>`storybook dev --smoke-test`                                                                                                              |
-| `--ci`                          | CI mode (skip interactive prompts, don't open browser)<br/>`storybook dev --ci`                                                                                           |
-| `--no-open`                     | Do not open Storybook automatically in the browser<br/>`storybook dev --no-open`                                                                                          |
-| `--quiet`                       | Suppress verbose build output<br/>`storybook dev --quiet`                                                                                                                 |
-| `--debug`                       | Outputs more logs in the CLI to assist debugging<br/>`storybook dev --debug`                                                                                              |
-| `--debug-webpack`               | Display final webpack configurations for debugging purposes<br/>`storybook dev --debug-webpack`                                                                           |
-| `--stats-json [dir-name]`       | Write stats JSON to disk<br/>`storybook dev --stats-json /tmp/stats`<br/>NOTE: only works for Webpack.                                                                    |
-| `--no-version-updates`          | Suppress Storybook's update check<br/>`storybook dev --no-version-updates`                                                                                                |
-| `--docs`                        | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)<br/>`storybook dev --docs` |
-| `--initial-path [path]`         | URL path to be appended when visiting Storybook for the first time<br/>`storybook dev --initial-path=/docs/getting-started--docs`                                         |
-| `--preview-url [path]`          | Disables the default Storybook preview and lets your use your own<br/>`storybook dev --preview-url=http://localhost:1337/external-iframe.html`                            |
-| `--force-build-preview`         | Build the preview iframe even if you are using --preview-url<br/>`storybook dev --force-build-preview`                                                                    |
-| `--enable-crash-reports`        | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook dev --disable-telemetry`                     |
-| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook dev --disable-telemetry`                                             |
+| Option                          | Description                                                                                                                                                                                            |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `--help`                        | Output usage information <br/>`storybook dev --help`                                                                                                                                                   |
+| `-V`, `--version`               | Output the version number <br/>`storybook dev -V`                                                                                                                                                      |
+| `-p`, `--port [number]`         | Port to run Storybook <br/>`storybook dev -p 9009`                                                                                                                                                     |
+| `--exact-port [number]`         | Attempts to run Storybook on the exact port number specified.<br/>If the port is already in use, Storybook will exit with an error message <br/>`storybook dev --exact-port 9009`                      |
+| `-h`, `--host [string]`         | Host to run Storybook <br/>`storybook dev -h my-host.com`                                                                                                                                              |
+| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`storybook dev -c .storybook`                                                                                                               |
+| `--loglevel [level]`            | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook dev --loglevel warn`                                    |
+| `--https`                       | Serve Storybook over HTTPS. Note: You must provide your own certificate information<br/>`storybook dev --https`                                                                                        |
+| `--ssl-ca`                      | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)<br/>`storybook dev --ssl-ca my-certificate`                                                 |
+| `--ssl-cert`                    | Provide an SSL certificate. (Required with --https)<br/>`storybook dev --ssl-cert my-ssl-certificate`                                                                                                  |
+| `--ssl-key`                     | Provide an SSL key. (Required with --https)<br/>`storybook dev --ssl-key my-ssl-key`                                                                                                                   |
+| `--smoke-test`                  | Exit after successful start<br/>`storybook dev --smoke-test`                                                                                                                                           |
+| `--ci`                          | CI mode (skip interactive prompts, don't open browser)<br/>`storybook dev --ci`                                                                                                                        |
+| `--no-open`                     | Do not open Storybook automatically in the browser<br/>`storybook dev --no-open`                                                                                                                       |
+| `--quiet`                       | Suppress verbose build output<br/>`storybook dev --quiet`                                                                                                                                              |
+| `--debug`                       | Outputs more logs in the CLI to assist debugging<br/>`storybook dev --debug`                                                                                                                           |
+| `--debug-webpack`               | Display final webpack configurations for debugging purposes<br/>`storybook dev --debug-webpack`                                                                                                        |
+| `--stats-json [dir-name]`       | Write stats JSON to disk<br/>Requires Webpack<br/>`storybook dev --stats-json /tmp/stats`                                                                                                              |
+| `--no-version-updates`          | Skips Storybook's update check<br/>`storybook dev --no-version-updates`                                                                                                                                |
+| `--docs`                        | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)<br/>`storybook dev --docs`                              |
+| `--initial-path [path]`         | Configures the URL Storybook should open when it opens the browser for the first time<br/>`storybook dev --initial-path=/docs/getting-started--docs`                                                   |
+| `--preview-url [path]`          | Overrides the default Storybook preview with a custom built preview URL<br/>`storybook dev --preview-url=http://localhost:1337/external-iframe.html`                                                   |
+| `--force-build-preview`         | Forcefully builds Storybook's preview iframe.<br/>Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date<br/>`storybook dev --force-build-preview` |
+| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook dev --disable-telemetry`                                                           |
+| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook dev --enable-crash-reports`            |
 
 <Callout variant="warning" id="static-dir-deprecation">
 
@@ -87,10 +87,10 @@ Options include:
 | `--stats-json [dir-name]`       | Write stats JSON to disk<br/>`storybook build --stats-json /tmp/stats`                                                                                                                                |
 | `--docs`                        | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs`                           |
 | `--test`                        | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).<br/>`storybook build --test` |
-| `--preview-url [path]`          | Disables the default Storybook preview and lets your use your own<br/>`storybook build --preview-url=http://localhost:1337/external-iframe.html`                                                      |
+| `--preview-url [path]`          | Overrides the default Storybook preview with a custom built preview URL<br/>`storybook build --preview-url=http://localhost:1337/external-iframe.html`                                                |
 | `--force-build-preview`         | Build the preview iframe even if you are using --preview-url<br/>`storybook build --force-build-preview`                                                                                              |
-| `--enable-crash-reports`        | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry`                                               |
-| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry`                                                                      |
+| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out).<br/>`storybook build --disable-telemetry`                                                       |
+| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook build --enable-crash-reports`         |
 
 <!-- Re-read this for accuracy -->
 
@@ -106,20 +106,20 @@ For example, `storybook@latest init` will install the latest version of Storyboo
 
 Options include:
 
-| Option                   | Description                                                                                                                                                                                 |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--help`                 | Output usage information <br/>`storybook init --help`                                                                                                                                       |
-| `-b`, `--builder`        | Defines the [builder](../builders/index.md) to use for your Storybook instance<br/>`storybook init --builder webpack5`                                                                      |
-| `-f`,`--force`           | Forcefully installs Storybook into your project, prompting you to overwrite existing files<br/>`storybook init --force`                                                                     |
-| `-s`, `--skip-install`   | Skips the dependency installation step. Used only when you need to configure Storybook manually<br/>`storybook init --skip-install`                                                         |
-| `-t`, `--type`           | Defines the [framework](../configure/frameworks.md) to use for your Storybook instance<br/>`storybook init --type solid`                                                                    |
-| `-y`, `--yes`            | Skips interactive prompts and automatically installs Storybook per specified version<br/>`storybook init --yes`                                                                             |
-| `--package-manager`      | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook init --package-manager pnpm`                    |
-| `--use-pnp`              | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager<br/>`storybook init --use-pnp`              |
-| `-p`, `--parser`         | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br/> Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`<br/>`storybook init --parser tsx` |
-| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook init --debug`                                                                                                               |
-| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook init --disable-telemetry`                                                              |
-| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook init --disable-telemetry`                                      |
+| Option                   | Description                                                                                                                                                                                  |
+| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`           | Output usage information <br/>`storybook init --help`                                                                                                                                        |
+| `-b`, `--builder`        | Defines the [builder](../builders/index.md) to use for your Storybook instance<br/>`storybook init --builder webpack5`                                                                       |
+| `-f`,`--force`           | Forcefully installs Storybook into your project, prompting you to overwrite existing files<br/>`storybook init --force`                                                                      |
+| `-s`, `--skip-install`   | Skips the dependency installation step. Used only when you need to configure Storybook manually<br/>`storybook init --skip-install`                                                          |
+| `-t`, `--type`           | Defines the [framework](../configure/frameworks.md) to use for your Storybook instance<br/>`storybook init --type solid`                                                                     |
+| `-y`, `--yes`            | Skips interactive prompts and automatically installs Storybook per specified version<br/>`storybook init --yes`                                                                              |
+| `--package-manager`      | Sets the package manager to use when installing Storybook.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook init --package-manager pnpm`                     |
+| `--use-pnp`              | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager<br/>`storybook init --use-pnp`               |
+| `-p`, `--parser`         | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br/> Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`<br/>`storybook init --parser tsx`  |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook init --debug`                                                                                                                |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook init --disable-telemetry`                                                |
+| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook init --enable-crash-reports` |
 
 ### `add`
 
@@ -133,12 +133,10 @@ Options include:
 
 | Option                     | Description                                                                                                                                                                     |
 | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--help`                   | Output usage information <br/>`storybook add --help`                                                                                                                            |
+| `-h`, `--help`             | Output usage information <br/>`storybook add --help`                                                                                                                            |
 | `--package-manager`        | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook add [addon] --package-manager pnpm` |
 | `-s`, `--skip-postinstall` | Skips post-install configuration. Used only when you need to configure the addon yourself<br/>`storybook add [addon] --skip-postinstall`                                        |
 | `--debug`                  | Outputs more logs in the CLI to assist debugging<br/>`storybook add --debug`                                                                                                    |
-| `--disable-telemetry`      | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook add --disable-telemetry`                                                   |
-| `--enable-crash-reports`   | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook add --disable-telemetry`                           |
 
 ### `remove`
 
@@ -150,13 +148,13 @@ storybook remove [addon] [options]
 
 Options include:
 
-| Option                   | Description                                                                                                                                                                    |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `--help`                 | Output usage information <br/>`storybook remove --help`                                                                                                                        |
-| `--package-manager`      | Sets the package manager to use when removing the addon.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook remove [addon]--package-manager pnpm` |
-| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook remove --debug`                                                                                                |
-| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook remove --disable-telemetry`                                               |
-| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook remove --disable-telemetry`                       |
+| Option                   | Description                                                                                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`           | Output usage information <br/>`storybook remove --help`                                                                                                                                        |
+| `--package-manager`      | Sets the package manager to use when removing the addon.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook remove [addon]--package-manager pnpm`                 |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook remove --debug`                                                                                                                |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook remove --disable-telemetry`                                                |
+| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook remove --enable-crash-reports` |
 
 ### `upgrade`
 
@@ -170,22 +168,22 @@ For example, `storybook@latest upgrade --dry-run` will perform a dry run (no act
 
 Options include:
 
-| Option                   | Description                                                                                                                                                                 |
-| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--help`                 | Output usage information <br/>`storybook upgrade --help`                                                                                                                    |
-| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook upgrade --config-dir .storybook`                                                                       |
-| `-n`, `--dry-run`        | Checks for version upgrades without installing them<br/>`storybook upgrade --dry-run`                                                                                       |
-| `-s`, `--skip-check`     | Skips the migration check step during the upgrade process<br/> `storybook upgrade --skip-check`                                                                             |
-| `-y`, `--yes`            | Skips interactive prompts and automatically upgrades Storybook to the latest version<br/>`storybook upgrade --yes`                                                          |
-| `-f`,`--force`           | Force the upgrade, skipping autoblockers check<br/>`storybook upgrade --force`                                                                                              |
-| `--package-manager`      | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook upgrade --package-manager pnpm` |
-| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook upgrade --debug`                                                                                            |
-| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook upgrade --disable-telemetry`                                           |
-| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook upgrade --disable-telemetry`                   |
+| Option                   | Description                                                                                                                                                                                     |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`           | Output usage information <br/>`storybook upgrade --help`                                                                                                                                        |
+| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook upgrade --config-dir .storybook`                                                                                           |
+| `-n`, `--dry-run`        | Checks for version upgrades without installing them<br/>`storybook upgrade --dry-run`                                                                                                           |
+| `-s`, `--skip-check`     | Skips the migration check step during the upgrade process<br/> `storybook upgrade --skip-check`                                                                                                 |
+| `-y`, `--yes`            | Skips interactive prompts and automatically upgrades Storybook to the latest version<br/>`storybook upgrade --yes`                                                                              |
+| `-f`,`--force`           | Force the upgrade, skipping autoblockers check<br/>`storybook upgrade --force`                                                                                                                  |
+| `--package-manager`      | Sets the package manager to use when upgrading Storybook.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook upgrade --package-manager pnpm`                      |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook upgrade --debug`                                                                                                                |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook upgrade --disable-telemetry`                                                |
+| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook upgrade --enable-crash-reports` |
 
 ### `migrate`
 
-Runs a specified codemod to migrate your project to use more modern Storybook standards.
+Runs the provided codemod to ensure your Storybook project is compatible with the specified version. Read more in the [migration guide](../configure/upgrading.md).
 
 ```shell
 storybook[@version] migrate [codemod] [options]
@@ -193,52 +191,50 @@ storybook[@version] migrate [codemod] [options]
 
 <Callout variant="info">
 
-The command needs a specific codemod to be specified, e.g. `csf-2-to-3`. To get a list of available codemods, run the CLI command with the `--list` flag.
+The command requires the codemod name (e.g., `csf-2-to-3`) as an argument to apply the necessary changes to your project. You can find the list of available codemods by running `storybook migrate --list`.
 
 </Callout>
 
-For example, `storybook@latest migrate csf-2-to-3 --dry-run` will verify that the codemod is applicable to your files and will show which files would be affected by the codemod in a dry run (no actual changes).
+For example, `storybook@latest migrate csf-2-to-3 --dry-run`, checks your project to verify if the codemod can be applied without making any changes, providing you with a report of which files would be affected.
 
 Options include:
 
 | Option                     | Description                                                                                                                                                                                    |
 | -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `--help`                   | Output usage information <br/>`storybook migrate --help`                                                                                                                                       |
+| `-h`, `--help`             | Output usage information <br/>`storybook migrate --help`                                                                                                                                       |
 | `-c`, `--config-dir`       | Directory where to load Storybook configurations from<br/>`storybook migrate --config-dir .storybook`                                                                                          |
 | `-n`, `--dry-run`          | Verify the migration exists and show the files to which it will be applied<br/>`storybook migrate --dry-run`                                                                                   |
 | `-l`, `--list`             | Shows a list of available codemods<br/> `storybook migrate --list`                                                                                                                             |
 | `-g`, `--glob`             | Glob for files upon which to apply the codemods<br/>`storybook migrate --glob src/**/*.stories.tsx`                                                                                            |
 | `-p`, `--parser`           | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br/> Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`<br/>`storybook migrate --parser tsx` |
-| `-r`, `--rename [from-to]` | Rename suffix of matching files after codemod has been applied, e.g. `.js:.ts`<br/>`storybook migrate --rename ".js:.ts"`                                                                      |
+| `-r`, `--rename [from-to]` | Renames the files affected by the codemod to include the provided suffix<br/>`storybook migrate --rename ".js:.ts"`                                                                            |
 | `--debug`                  | Outputs more logs in the CLI to assist debugging<br/>`storybook migrate --debug`                                                                                                               |
-| `--disable-telemetry`      | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook migrate --disable-telemetry`                                                              |
-| `--enable-crash-reports`   | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook migrate --disable-telemetry`                                      |
 
 ### `automigrate`
 
-Check Storybook for incompatibilities or migrations and apply fixes.
+Perform standard configuration checks to determine if your Storybook project can be automatically migrated to the specified version. Read more in the [migration guide](../configure/upgrading.md#automigrate-script).
 
 ```shell
 storybook[@version] automigrate [fixId] [options]
 ```
 
-For example, `storybook@latest automigrate --dry-run` will scan your codebase and tell which automigrations are applicable in a dry run (no actual changes).
+For example, `storybook@latest automigrate --dry-run` scans your project for potential migrations that can be applied automatically without making any changes.
 
 Options include:
 
-| Option                   | Description                                                                                                                                                                                                          |
-| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
-| `--help`                 | Output usage information <br/>`storybook automigrate --help`                                                                                                                                                         |
-| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook automigrate --config-dir .storybook`                                                                                                            |
-| `-n`, `--dry-run`        | Only checks for fixes, not actually executing them<br/>`storybook automigrate --dry-run`                                                                                                                             |
-| `-s`, `--skip-install`   | Skip installing dependencies whenever applicable<br/> `storybook automigrate --skip-install`                                                                                                                         |
-| `-y`, `--yes`            | Skips interactive prompts and automatically accepts automigrations<br/>`storybook automigrate --yes`                                                                                                                 |
-| `-l`, `--list`           | Shows a list of available automigrations<br/> `storybook automigrate --list`                                                                                                                                         |
-| `--package-manager`      | Sets the package manager to use when installing the addon.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook automigrate --package-manager pnpm`                                      |     |
-| `--renderer`             | Sets the renderer package for the framework Storybook is using.<br/> Useful for monorepo settings where multiple Storybook renderers are present in the same package.json<br/>`storybook automigrate --renderer vue` |     |
-| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook automigrate --debug`                                                                                                                                 |
-| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook automigrate --disable-telemetry`                                                                                |
-| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook automigrate --disable-telemetry`                                                        |
+| Option                   | Description                                                                                                                                                                                                             |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
+| `-h`, `--help`           | Output usage information <br/>`storybook automigrate --help`                                                                                                                                                            |
+| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook automigrate --config-dir .storybook`                                                                                                               |
+| `-n`, `--dry-run`        | Checks for available migrations without applying them<br/>`storybook automigrate --dry-run`                                                                                                                             |
+| `-s`, `--skip-install`   | Skip installing dependencies whenever applicable<br/> `storybook automigrate --skip-install`                                                                                                                            |
+| `-y`, `--yes`            | Applies available migrations automatically without prompting for confirmation<br/>`storybook automigrate --yes`                                                                                                         |
+| `-l`, `--list`           | Shows a list of available automigrations<br/> `storybook automigrate --list`                                                                                                                                            |
+| `--package-manager`      | Sets the package manager to use when running the auto migration.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook automigrate --package-manager pnpm`                                   |     |
+| `--renderer`             | Specifies Storybook's renderer to use when running the automigration.<br/> Useful for monorepo environments where multiple Storybook instances can exist in the same project<br/>`storybook automigrate --renderer vue` |     |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook automigrate --debug`                                                                                                                                    |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook automigrate --disable-telemetry`                                                                    |
+| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook automigrate --enable-crash-reports`                     |
 
 ### `doctor`
 
@@ -250,13 +246,12 @@ storybook doctor [options]
 
 Options include:
 
-| Option                   | Description                                                                                                                                                                   |
-| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook doctor --config-dir .storybook`                                                                          |
-| `--package-manager`      | Sets the package manager to use when running the health check.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook doctor --package-manager pnpm` |
-| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook doctor --debug`                                                                                               |
-| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook doctor --disable-telemetry`                                              |
-| `--enable-crash-reports` | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook doctor --disable-telemetry`                      |
+| Option               | Description                                                                                                                                                                   |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`       | Output usage information <br/>`storybook doctor --help`                                                                                                                       |
+| `-c`, `--config-dir` | Directory where to load Storybook configurations from<br/>`storybook doctor --config-dir .storybook`                                                                          |
+| `--package-manager`  | Sets the package manager to use when running the health check.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook doctor --package-manager pnpm` |
+| `--debug`            | Outputs more logs in the CLI to assist debugging<br/>`storybook doctor --debug`                                                                                               |
 
 ### `info`
 
@@ -309,13 +304,14 @@ The `framework-filter` argument is optional and can filter the list of available
 
 Options include:
 
-| Option                      | Description                                                                                                                                               |
-| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-o`, `--output [dir-name]` | Configures the location of the sandbox project<br/>`storybook sandbox --output /my-sandbox-project`                                                       |
-| `--no-init`                 | Generates a sandbox project without without initializing Storybook<br/>`storybook sandbox --no-init`                                                      |
-| `--debug`                   | Outputs more logs in the CLI to assist debugging<br/>`storybook sandbox --debug`                                                                          |
-| `--disable-telemetry`       | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook sandbox --disable-telemetry`                         |
-| `--enable-crash-reports`    | Enable sending crash reprots to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook sandbox --disable-telemetry` |
+| Option                      | Description                                                                                                                                                                                     |
+| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`              | Output usage information <br/>`storybook sandbox --help`                                                                                                                                        |
+| `-o`, `--output [dir-name]` | Configures the location of the sandbox project<br/>`storybook sandbox --output /my-sandbox-project`                                                                                             |
+| `--no-init`                 | Generates a sandbox project without without initializing Storybook<br/>`storybook sandbox --no-init`                                                                                            |
+| `--debug`                   | Outputs more logs in the CLI to assist debugging<br/>`storybook sandbox --debug`                                                                                                                |
+| `--disable-telemetry`       | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook sandbox --disable-telemetry`                                                |
+| `--enable-crash-reports`    | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook sandbox --enable-crash-reports` |
 
 <Callout variant="info">
 

From 5819511fca6d9fc2f4433eb9226b1a25c5334d7a Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 4 Apr 2024 11:00:20 +0200
Subject: [PATCH 31/37] Bump globby dependency

---
 code/lib/cli/package.json                     |  2 +-
 .../cli/src/automigrate/fixes/mdx-1-to-3.ts   |  4 +-
 .../cli/src/automigrate/fixes/mdx-gfm.test.ts |  2 +-
 code/lib/cli/src/automigrate/fixes/mdx-gfm.ts |  6 ++-
 code/lib/cli/src/warn.test.ts                 | 27 +++++++----
 code/lib/cli/src/warn.ts                      | 11 +++--
 code/lib/codemod/package.json                 |  2 +-
 code/lib/codemod/src/index.ts                 |  4 +-
 code/lib/core-server/package.json             |  2 +-
 .../src/utils/StoryIndexGenerator.ts          |  7 ++-
 .../src/utils/watch-story-specifiers.ts       |  7 ++-
 code/yarn.lock                                | 45 ++++++++++++++++---
 12 files changed, 91 insertions(+), 28 deletions(-)

diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 3c0c985c8963..b54f29308a15 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -80,7 +80,7 @@
     "fs-extra": "^11.1.0",
     "get-npm-tarball-url": "^2.0.3",
     "giget": "^1.0.0",
-    "globby": "^11.0.2",
+    "globby": "^14.0.1",
     "jscodeshift": "^0.15.1",
     "leven": "^3.1.0",
     "ora": "^5.4.1",
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts b/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts
index 3d81d0934447..8b556033a6ac 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts
+++ b/code/lib/cli/src/automigrate/fixes/mdx-1-to-3.ts
@@ -2,7 +2,6 @@ import chalk from 'chalk';
 import { dedent } from 'ts-dedent';
 import { basename } from 'path';
 import fse from 'fs-extra';
-import globby from 'globby';
 import type { Fix } from '../types';
 
 const MDX1_STYLE_START = /<style>{`/g;
@@ -48,6 +47,9 @@ export const mdx1to3: Fix<Mdx1to3Options> = {
   versionRange: ['<7.0.0', '>=8.0.0-alpha.0'],
 
   async check() {
+    // Dynamically import globby because it is a pure ESM module
+    const { globby } = await import('globby');
+
     const storiesMdxFiles = await globby('./!(node_modules)**/*.(story|stories).mdx');
     return storiesMdxFiles.length ? { storiesMdxFiles } : null;
   },
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts b/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts
index c917fe321ee9..6131d84553ab 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts
+++ b/code/lib/cli/src/automigrate/fixes/mdx-gfm.test.ts
@@ -4,7 +4,7 @@ import { mdxgfm } from './mdx-gfm';
 
 vi.mock('globby', () => ({
   __esModule: true,
-  default: vi.fn().mockResolvedValue(['a/fake/file.mdx']),
+  globby: vi.fn().mockResolvedValue(['a/fake/file.mdx']),
 }));
 
 const check = async ({
diff --git a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts b/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts
index 98bcaa736b87..605b66a824f5 100644
--- a/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts
+++ b/code/lib/cli/src/automigrate/fixes/mdx-gfm.ts
@@ -1,7 +1,6 @@
 import { dedent } from 'ts-dedent';
 import { join } from 'path';
 import slash from 'slash';
-import glob from 'globby';
 import { commonGlobOptions } from '@storybook/core-common';
 import { updateMainConfig } from '../helpers/mainConfigFile';
 import type { Fix } from '../types';
@@ -46,7 +45,10 @@ export const mdxgfm: Fix<Options> = {
         return false;
       }
 
-      const files = await glob(pattern, commonGlobOptions(pattern));
+      // Dynamically import globby because it is a pure ESM module
+      const { globby } = await import('globby');
+
+      const files = await globby(pattern, commonGlobOptions(pattern));
 
       return files.some((f) => f.endsWith('.mdx'));
     }, Promise.resolve(false));
diff --git a/code/lib/cli/src/warn.test.ts b/code/lib/cli/src/warn.test.ts
index 91614db1f1b0..ef2de3d331d7 100644
--- a/code/lib/cli/src/warn.test.ts
+++ b/code/lib/cli/src/warn.test.ts
@@ -1,10 +1,21 @@
 import { describe, beforeEach, it, expect, vi } from 'vitest';
-import globby from 'globby';
 import { logger } from '@storybook/node-logger';
 import { warn } from './warn';
 
 vi.mock('@storybook/node-logger');
-vi.mock('globby');
+
+const mocks = vi.hoisted(() => {
+  return {
+    globby: vi.fn(),
+  };
+});
+
+vi.mock('globby', async (importOriginal) => {
+  return {
+    ...(await importOriginal<typeof import('globby')>()),
+    globby: mocks.globby,
+  };
+});
 
 describe('warn', () => {
   beforeEach(() => {
@@ -21,17 +32,17 @@ describe('warn', () => {
   });
 
   describe('when TypeScript is not installed as a dependency', () => {
-    it('should not warn if `.tsx?` files are not found', () => {
-      vi.mocked(globby.sync).mockReturnValueOnce([]);
-      warn({
+    it('should not warn if `.tsx?` files are not found', async () => {
+      mocks.globby.mockResolvedValue([]);
+      await warn({
         hasTSDependency: false,
       });
       expect(logger.warn).toHaveBeenCalledTimes(0);
     });
 
-    it('should warn if `.tsx?` files are found', () => {
-      vi.mocked(globby.sync).mockReturnValueOnce(['a.ts']);
-      warn({
+    it('should warn if `.tsx?` files are found', async () => {
+      mocks.globby.mockResolvedValue(['a.ts']);
+      await warn({
         hasTSDependency: false,
       });
       expect(logger.warn).toHaveBeenCalledTimes(2);
diff --git a/code/lib/cli/src/warn.ts b/code/lib/cli/src/warn.ts
index a0614112ac87..9d4fe08df997 100644
--- a/code/lib/cli/src/warn.ts
+++ b/code/lib/cli/src/warn.ts
@@ -1,13 +1,18 @@
-import globby from 'globby';
 import { logger } from '@storybook/node-logger';
 
 interface Options {
   hasTSDependency: boolean;
 }
 
-export const warn = ({ hasTSDependency }: Options) => {
+export const warn = async ({ hasTSDependency }: Options) => {
   if (!hasTSDependency) {
-    const hasTSFiles = !!globby.sync(['**/*.@(ts|tsx)', '!**/node_modules', '!**/*.d.ts']).length;
+    // Dynamically import globby because it is a pure ESM module
+    const { globby } = await import('globby');
+
+    const files = await globby(['**/*.@(ts|tsx)', '!**/node_modules', '!**/*.d.ts']);
+
+    const hasTSFiles = !!files.length;
+
     if (hasTSFiles) {
       logger.warn(
         'We have detected TypeScript files in your project directory, however TypeScript is not listed as a project dependency.'
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index fb16575f724e..ba65696a3584 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -63,7 +63,7 @@
     "@storybook/types": "workspace:*",
     "@types/cross-spawn": "^6.0.2",
     "cross-spawn": "^7.0.3",
-    "globby": "^11.0.2",
+    "globby": "^14.0.1",
     "jscodeshift": "^0.15.1",
     "lodash": "^4.17.21",
     "prettier": "^3.1.1",
diff --git a/code/lib/codemod/src/index.ts b/code/lib/codemod/src/index.ts
index a5299921a211..f820e47d82a7 100644
--- a/code/lib/codemod/src/index.ts
+++ b/code/lib/codemod/src/index.ts
@@ -2,7 +2,6 @@
 import fs from 'fs';
 import path from 'path';
 import { promisify } from 'util';
-import globby from 'globby';
 import { sync as spawnSync } from 'cross-spawn';
 import { jscodeshiftToPrettierParser } from './lib/utils';
 
@@ -63,6 +62,9 @@ export async function runCodemod(
     if (knownParser !== 'babel') inferredParser = extension;
   }
 
+  // Dynamically import globby because it is a pure ESM module
+  const { globby } = await import('globby');
+
   const files = await globby([glob, '!**/node_modules', '!**/dist']);
   const extensions = new Set(files.map((file) => path.extname(file).slice(1)));
   const commaSeparatedExtensions = Array.from(extensions).join(',');
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 3ca426d6bfb0..260ca2a949da 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -83,7 +83,7 @@
     "detect-port": "^1.3.0",
     "express": "^4.17.3",
     "fs-extra": "^11.1.0",
-    "globby": "^11.0.2",
+    "globby": "^14.0.1",
     "ip": "^2.0.1",
     "lodash": "^4.17.21",
     "open": "^8.4.0",
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index a650f04c1ffa..09a5c95fff05 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -1,7 +1,6 @@
 import path from 'path';
 import chalk from 'chalk';
 import fs from 'fs-extra';
-import glob from 'globby';
 import slash from 'slash';
 import invariant from 'tiny-invariant';
 
@@ -124,7 +123,11 @@ export class StoryIndexGenerator {
         const fullGlob = slash(
           path.join(this.options.workingDir, specifier.directory, specifier.files)
         );
-        const files = await glob(fullGlob, commonGlobOptions(fullGlob));
+
+        // Dynamically import globby because it is a pure ESM module
+        const { globby } = await import('globby');
+
+        const files = await globby(fullGlob, commonGlobOptions(fullGlob));
 
         if (files.length === 0) {
           once.warn(
diff --git a/code/lib/core-server/src/utils/watch-story-specifiers.ts b/code/lib/core-server/src/utils/watch-story-specifiers.ts
index 245639579748..70ec0d4eb7fb 100644
--- a/code/lib/core-server/src/utils/watch-story-specifiers.ts
+++ b/code/lib/core-server/src/utils/watch-story-specifiers.ts
@@ -2,7 +2,6 @@ import Watchpack from 'watchpack';
 import slash from 'slash';
 import fs from 'fs';
 import path from 'path';
-import glob from 'globby';
 import uniq from 'lodash/uniq.js';
 
 import type { NormalizedStoriesSpecifier, Path } from '@storybook/types';
@@ -74,8 +73,12 @@ export function watchStorySpecifiers(
               // because the directoru could already be within the files part (e.g. './x/foo/bar')
               path.basename(specifier.files)
             );
+
+            // Dynamically import globby because it is a pure ESM module
+            const { globby } = await import('globby');
+
             // glob only supports forward slashes
-            const files = await glob(slash(dirGlob), commonGlobOptions(dirGlob));
+            const files = await globby(slash(dirGlob), commonGlobOptions(dirGlob));
 
             files.forEach((filePath) => {
               const fileImportPath = toImportPath(
diff --git a/code/yarn.lock b/code/yarn.lock
index 83667da7f637..de9f47dd250a 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -4707,6 +4707,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/merge-streams@npm:^2.1.0":
+  version: 2.3.0
+  resolution: "@sindresorhus/merge-streams@npm:2.3.0"
+  checksum: 10c0/69ee906f3125fb2c6bb6ec5cdd84e8827d93b49b3892bce8b62267116cc7e197b5cccf20c160a1d32c26014ecd14470a72a5e3ee37a58f1d6dadc0db1ccf3894
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-a11y@workspace:*, @storybook/addon-a11y@workspace:addons/a11y":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-a11y@workspace:addons/a11y"
@@ -5402,7 +5409,7 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     get-npm-tarball-url: "npm:^2.0.3"
     giget: "npm:^1.0.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     leven: "npm:^3.1.0"
     ora: "npm:^5.4.1"
@@ -5447,7 +5454,7 @@ __metadata:
     "@types/jscodeshift": "npm:^0.11.10"
     ansi-regex: "npm:^5.0.1"
     cross-spawn: "npm:^7.0.3"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     lodash: "npm:^4.17.21"
     mdast-util-mdx-jsx: "npm:^3.0.0"
@@ -5594,7 +5601,7 @@ __metadata:
     detect-port: "npm:^1.3.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     ip: "npm:^2.0.1"
     lodash: "npm:^4.17.21"
     node-fetch: "npm:^3.3.1"
@@ -14725,7 +14732,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:3.3.2, fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1":
+"fast-glob@npm:3.3.2, fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.1, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -15920,7 +15927,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.1.0":
+"globby@npm:^11.0.1, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:
@@ -15947,6 +15954,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^14.0.1":
+  version: 14.0.1
+  resolution: "globby@npm:14.0.1"
+  dependencies:
+    "@sindresorhus/merge-streams": "npm:^2.1.0"
+    fast-glob: "npm:^3.3.2"
+    ignore: "npm:^5.2.4"
+    path-type: "npm:^5.0.0"
+    slash: "npm:^5.1.0"
+    unicorn-magic: "npm:^0.1.0"
+  checksum: 10c0/749a6be91cf455c161ebb5c9130df3991cb9fd7568425db850a8279a6cf45acd031c5069395beb7aeb4dd606b64f0d6ff8116c93726178d8e6182fee58c2736d
+  languageName: node
+  linkType: hard
+
 "globby@npm:^7.1.1":
   version: 7.1.1
   resolution: "globby@npm:7.1.1"
@@ -22342,6 +22363,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "path-type@npm:5.0.0"
+  checksum: 10c0/e8f4b15111bf483900c75609e5e74e3fcb79f2ddb73e41470028fcd3e4b5162ec65da9907be077ee5012c18801ff7fffb35f9f37a077f3f81d85a0b7d6578efd
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^1.1.0, pathe@npm:^1.1.1":
   version: 1.1.1
   resolution: "pathe@npm:1.1.1"
@@ -27645,6 +27673,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicorn-magic@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "unicorn-magic@npm:0.1.0"
+  checksum: 10c0/e4ed0de05b0a05e735c7d8a2930881e5efcfc3ec897204d5d33e7e6247f4c31eac92e383a15d9a6bccb7319b4271ee4bea946e211bf14951fec6ff2cbbb66a92
+  languageName: node
+  linkType: hard
+
 "unified-args@npm:^11.0.0":
   version: 11.0.1
   resolution: "unified-args@npm:11.0.1"

From 1b5acd24eca0b259943706c7237bc8c5a88e02c3 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 4 Apr 2024 11:12:06 +0200
Subject: [PATCH 32/37] Update lock files in kitchen sinks

---
 .../nextjs/yarn.lock                          | 356 +++++++++++-------
 .../react/yarn.lock                           |  52 ++-
 .../svelte/package.json                       |   2 +-
 .../svelte/yarn.lock                          |  54 ++-
 .../vue3/package.json                         |   2 +-
 .../vue3/yarn.lock                            |  52 ++-
 6 files changed, 355 insertions(+), 163 deletions(-)

diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock
index 3c63bde1488d..22cc9c3e3a02 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock
@@ -2352,6 +2352,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/merge-streams@npm:^2.1.0":
+  version: 2.3.0
+  resolution: "@sindresorhus/merge-streams@npm:2.3.0"
+  checksum: 10/798bcb53cd1ace9df84fcdd1ba86afdc9e0cd84f5758d26ae9b1eefd8e8887e5fc30051132b9e74daf01bb41fa5a2faf1369361f83d76a3b3d7ee938058fd71c
+  languageName: node
+  linkType: hard
+
 "@sinonjs/commons@npm:^3.0.0":
   version: 3.0.1
   resolution: "@sinonjs/commons@npm:3.0.1"
@@ -2371,8 +2378,8 @@ __metadata:
   linkType: hard
 
 "@storybook/addon-actions@file:../../../code/addons/actions::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=8577f4&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-actions@file:../../../code/addons/actions#../../../code/addons/actions::hash=e88010&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
@@ -2380,35 +2387,35 @@ __metadata:
     dequal: "npm:^2.0.2"
     polished: "npm:^4.2.2"
     uuid: "npm:^9.0.0"
-  checksum: 10/16331c7395829f30124e520d8a3b920d5db79a14a4a1ffa240c8a7a38eda86694dff3c4ebde2c558cd90b9d9900f41e15d988b445d4ffa0a7401ee527ad48929
+  checksum: 10/9e15238cca3e78b2e24c8cd78c10bc7541a467c0d495bc64312d1e963e5085c049167650e55a6d049340f2a9c552751e2655fabcd320cd7b6b78415c77808aac
   languageName: node
   linkType: hard
 
 "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=1de6d7&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-backgrounds@file:../../../code/addons/backgrounds#../../../code/addons/backgrounds::hash=ae8cf2&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     memoizerific: "npm:^1.11.3"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/090724de0e29b560306cbc7f73a7028d0ffe2232859d33a302da8eef92ae4dd7bef2fb0ca87653093cd6d49ed447926b931dfd6a41b1c18c97349422cbc3e9ad
+  checksum: 10/73e820d4ee0c7fc6b3c0c6c92783617ed516d558f00b9dbd6573fad96dd4069f93a5a5b895eda32972266595de8cd48fbda061d28e0b4d30756ed831556942f4
   languageName: node
   linkType: hard
 
 "@storybook/addon-controls@file:../../../code/addons/controls::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=124f11&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-controls@file:../../../code/addons/controls#../../../code/addons/controls::hash=b0a330&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/blocks": "workspace:*"
     lodash: "npm:^4.17.21"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/e85682655cb29035210829d7c50dc1035ea2023c8b85a889e439b6a19dc60a6a18859d738dba5c1753f265c27dddab4d5bc5cea0f97fedcdd88d202881a1f668
+  checksum: 10/dcdc61154006c8575e612d77b7cfa0e2266f12429e2560afe49d4ca74b56a40ba4823e2b2a55e6803006e5fbad8ea848ed4d1ec753063763f01b53236b7ba223
   languageName: node
   linkType: hard
 
 "@storybook/addon-docs@file:../../../code/addons/docs::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=fe95ad&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-docs@file:../../../code/addons/docs#../../../code/addons/docs::hash=20043e&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@babel/core": "npm:^7.12.3"
     "@mdx-js/react": "npm:^3.0.0"
@@ -2430,13 +2437,13 @@ __metadata:
     rehype-external-links: "npm:^3.0.0"
     rehype-slug: "npm:^6.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/44f85ac6a7f442acfa81f0d7f5ae5a80cd716bc52e8c7e949fa97e0c3bde12ae4954664347a07276d9d2ac1e8adf368b0ed40811e6c4bfcc35ea00d2ef4a0d01
+  checksum: 10/4e28ead6b979994717c2184eb2b8a38297ef363bd4289e932d0d72af09783edbb87e0cd706223517b90f9b5cb9d6b8fccd91d74295b4259d9d0d76d6bb75c1c5
   languageName: node
   linkType: hard
 
 "@storybook/addon-essentials@file:../../../code/addons/essentials::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=b4ef2d&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-essentials@file:../../../code/addons/essentials#../../../code/addons/essentials::hash=516d29&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/addon-actions": "workspace:*"
     "@storybook/addon-backgrounds": "workspace:*"
@@ -2452,22 +2459,22 @@ __metadata:
     "@storybook/node-logger": "workspace:*"
     "@storybook/preview-api": "workspace:*"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/7d2271908719148827258089e3c808381896242f9aa9d21234645f0451436f88830e2955ce443ae6a53e12f947328fede59583eca8f34dcdcd71863437b4fd9b
+  checksum: 10/a112d664bbbb4e027c3302ddc47f41a94c8b77b31282e927d3c639388cf8c475c5be21c0311d9c7e3e042e4571367641f257818cb42b48de3809ca06bbbaeef0
   languageName: node
   linkType: hard
 
 "@storybook/addon-highlight@file:../../../code/addons/highlight::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=c010b8&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-highlight@file:../../../code/addons/highlight#../../../code/addons/highlight::hash=1b0e4c&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-  checksum: 10/d43fb7264a85009bcaf18ccbf334dc8c9467fa71aaf878c33bb537314940a4d451e21abf45962faf51a8ab6673b8dcebb79a0a4af3ef181789a690097b185d10
+  checksum: 10/2dbc0b704c71ed09839d4a2cef0758e47f67b7864d1963d2a41a56cf71d90a73fdb1934fe35f6b4457036894149cb1bc7acbffa5dc46744a1dbf7968dd626648
   languageName: node
   linkType: hard
 
 "@storybook/addon-interactions@file:../../../code/addons/interactions::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=96e45d&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-interactions@file:../../../code/addons/interactions#../../../code/addons/interactions::hash=08cdfe&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     "@storybook/instrumenter": "workspace:*"
@@ -2475,49 +2482,49 @@ __metadata:
     "@storybook/types": "workspace:*"
     polished: "npm:^4.2.2"
     ts-dedent: "npm:^2.2.0"
-  checksum: 10/d0f9e59163d14ec981402a254812b1d0ad7b969278a22b6d07016c9f6c1a09b9f98b821dec56f5ea81af2a830f322826460647e59b181021f234702530625904
+  checksum: 10/3614ecd2a3265ac36e540416030ec9435fc41127fcdd4e457c52099193f0aeb6553cf56bef179cf2d13053b68843869ddab2c7863dd6b69280375dd3f5c64603
   languageName: node
   linkType: hard
 
 "@storybook/addon-measure@file:../../../code/addons/measure::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=c20fd2&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-measure@file:../../../code/addons/measure#../../../code/addons/measure::hash=fcfca4&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     tiny-invariant: "npm:^1.3.1"
-  checksum: 10/0b82bd7b5d709d8521c59ffbd9e4e7ea83d13a5f9a70e84eccccc906ecb42eec6f69cbb2f1c7bd605a8cd15b2078c55712e796abdb62db75f4a1c7d961ccc6c0
+  checksum: 10/74778d016ac62b314e1029419403c29d0218ba08e061bb51da6a273e1ffbc89675739dac85f2c7cc8f28552847410996ebcad6513074ea1fbf7eb571a2c6582b
   languageName: node
   linkType: hard
 
 "@storybook/addon-outline@file:../../../code/addons/outline::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=9cf011&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-outline@file:../../../code/addons/outline#../../../code/addons/outline::hash=df13d0&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/fa9cdf353844271123f97787d2a8c485ae0c6cd168f2afbaa920468a87f002c3d3f9a2577b1b4c53392b4d6a5e816c232b292296dd23e131789412c5d4b5d638
+  checksum: 10/c2ee4e8e4fb74916918bc16c1a76f24f88c8313aec39b8f8cee5c53c3c1e9e9808ab82f236cf53da416d985bdcf8104f3e896401d8d3f3390b6f15c43ae30731
   languageName: node
   linkType: hard
 
 "@storybook/addon-toolbars@file:../../../code/addons/toolbars::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=0d7d56&locator=portable-stories-nextjs%40workspace%3A."
-  checksum: 10/84f201b162dd82ba1ca248d65abc667e123190e4c474cbdcd050a0cdad6dd223028c8b157ab86a0c765e33134bf64e29e66096bfeca2254db3698c4d021556cf
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-toolbars@file:../../../code/addons/toolbars#../../../code/addons/toolbars::hash=16af1f&locator=portable-stories-nextjs%40workspace%3A."
+  checksum: 10/aa26ca213d4191b2af638a44841d2cab0034092b27c426879be7037c3f2f3cfd9dcd668dbc15824e9129b002e9babb9b78638abb42f4c0e5a26070d24c35eb43
   languageName: node
   linkType: hard
 
 "@storybook/addon-viewport@file:../../../code/addons/viewport::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=72a1e7&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/addon-viewport@file:../../../code/addons/viewport#../../../code/addons/viewport::hash=bb6a19&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     memoizerific: "npm:^1.11.3"
-  checksum: 10/fe9fce8c1533af03f0b3b5c674945285bf73d18d4c0c2a6d2ea7b529226516b33d346416f68d003da612f618882e5e83b2d6d198bd8e2717e52d7e04cb984919
+  checksum: 10/02aaa2b1d56d2f348712b49be2f034c7875b2e8ab5afd431785c25d089b42a1c103059335790b54e655ae38048dfdefe2d6ef8db0af1ee7182e314d1852fa94e
   languageName: node
   linkType: hard
 
 "@storybook/blocks@file:../../../code/ui/blocks::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=2145ba&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/blocks@file:../../../code/ui/blocks#../../../code/ui/blocks::hash=11aaa5&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2551,13 +2558,13 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 10/afea8f85de19ab461bc87b0b51f994c9d2bef4f10c63db2e4dc33f93e4cdbf97c9b402eac7052922adb0b51bfd91f878311b6c9842cfddbc972d363e171406bc
+  checksum: 10/edb8ff4f8f87654a18a45368043f272c26a4b8d04ef8ac4c6c67893c503fff1af666d62de426f56ce0eafc93db39763519140b08b3cf1734f3687c20ceeaec6c
   languageName: node
   linkType: hard
 
 "@storybook/builder-manager@file:../../../code/builders/builder-manager::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=32bb4b&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/builder-manager@file:../../../code/builders/builder-manager#../../../code/builders/builder-manager::hash=40c69f&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@fal-works/esbuild-plugin-global-externals": "npm:^2.1.2"
     "@storybook/core-common": "workspace:*"
@@ -2573,13 +2580,13 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     process: "npm:^0.11.10"
     util: "npm:^0.12.4"
-  checksum: 10/1e0da31302f7385d53a0710695d4affa575082a27edeeeecc6e1836681e5305a06e8f524321d5242eaed61208f674c44644273a58139adbe7a05b27bc16c81e0
+  checksum: 10/92ae16c32ced613cd0a603ff2f139356c1bf81f2aae2268ef6de2ca6345cb7e7de49b6aea356c7828d752efb05fff3c14ef949ab58dffe1ae08979a37524ff6c
   languageName: node
   linkType: hard
 
 "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=f4e809&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=da3ffc&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2618,26 +2625,26 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/c883367d3ad2f1780d18135bf63ec256270dc7434bc88dd6442e3a259a49efd7102193f8a013c020527b790b6b8031dde25b75316bb48182b668f3077975c4f6
+  checksum: 10/27a2d18c41a52d0828fd7f979cfb581a8b540a2ce34d93fef6a17f6b1bcbd25b8769ea7782b480d54c0d0a3485872a99400555bf767430c0d83526b055019eab
   languageName: node
   linkType: hard
 
 "@storybook/channels@file:../../../code/lib/channels::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=b9965f&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/channels@file:../../../code/lib/channels#../../../code/lib/channels::hash=dc1f24&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
     "@storybook/global": "npm:^5.0.0"
     telejson: "npm:^7.2.0"
     tiny-invariant: "npm:^1.3.1"
-  checksum: 10/9fe96041ca296c9c96eb60ca65a5582cb50d6f7a826c035133c692747ba7c1daa428afdd3be2521d2a0288447fadd77fa63d878e5d0fc80caafdb6cb664c0bcc
+  checksum: 10/fa9b6ab69319c46e17a6b9eb3fee4bb3ef12d12c02ee068077a920e9aa08df7fb9b666fafd4c67b686a330f5a37488c2e504427dd748accd7fb76f7cc21dbf3e
   languageName: node
   linkType: hard
 
 "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=70da18&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=d82dd3&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@babel/core": "npm:^7.23.0"
     "@babel/types": "npm:^7.23.0"
@@ -2663,7 +2670,7 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     get-npm-tarball-url: "npm:^2.0.3"
     giget: "npm:^1.0.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     leven: "npm:^3.1.0"
     ora: "npm:^5.4.1"
@@ -2678,22 +2685,22 @@ __metadata:
   bin:
     getstorybook: ./bin/index.js
     sb: ./bin/index.js
-  checksum: 10/692ba7b6088a0a02637c204e608cde04442f3f15eb7788ed3e7882c7620f68ff90edbdb4b88ba9cf285ee888c494a4603563d37c85f05bbec81d99e6fc5a7953
+  checksum: 10/ea22cf7a46a855caad1de0176dd3c5dc53d7a1abd69932bb4153a3fa10cf87523567ebc6b47ab6669edd78c870717ee70020b9f8ebb89a58827b6e4b1aff8f59
   languageName: node
   linkType: hard
 
 "@storybook/client-logger@file:../../../code/lib/client-logger::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=75f933&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/client-logger@file:../../../code/lib/client-logger#../../../code/lib/client-logger::hash=c3badc&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-  checksum: 10/e6a611935b670e0d2f84cff498f43abf1a2e7f12087278e31699c2cfe28934ca6fa12e874696f8fce9ce121bc9a307140540b6b4ad2f7383fade1f3c9e1ec7d6
+  checksum: 10/3b4619cefc5256d914bddae60d853762addb185eb0dbd4052bb4aae9db3b59f3ca2db3a1bbf7e81547a4e047415f52c1f8b9208717741a6d332d47f99d1ed7c0
   languageName: node
   linkType: hard
 
 "@storybook/codemod@file:../../../code/lib/codemod::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=09db23&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/codemod@file:../../../code/lib/codemod#../../../code/lib/codemod::hash=34bae5&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@babel/core": "npm:^7.23.2"
     "@babel/preset-env": "npm:^7.23.2"
@@ -2704,19 +2711,19 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/cross-spawn": "npm:^6.0.2"
     cross-spawn: "npm:^7.0.3"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     lodash: "npm:^4.17.21"
     prettier: "npm:^3.1.1"
     recast: "npm:^0.23.5"
     tiny-invariant: "npm:^1.3.1"
-  checksum: 10/6d979326eb86e0ad45c40e6e6c5312f2258b5d3d6f5b2b4aba5fe14311cae3a51d149d96ac36d0b28906c62abff3ade3f538102883679781c2205ec0e0a85fb9
+  checksum: 10/004e68f27b836994ae7cf798d05e4e71230230b3d2bb23237ba60f91930db9ad213eb4a1fdf99d66bb2ce27b4dc2c8603b3eeacc8d3350975321bb207f0076b2
   languageName: node
   linkType: hard
 
 "@storybook/components@file:../../../code/ui/components::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=414fcd&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/components@file:../../../code/ui/components#../../../code/ui/components::hash=3b9d9f&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@radix-ui/react-slot": "npm:^1.0.2"
     "@storybook/client-logger": "workspace:*"
@@ -2730,13 +2737,13 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/a4c957b11432d5b64f839f62e79b76872f08977a7482d73d9bd2191ebc5228b9109d80f34ffd0a56928e2cd99157dab043b6a64b9cd7fac8e3f8893e30636574
+  checksum: 10/a3580c09bb4fb59402e496a50334f00f9bcf426af95499c351c5ca186b2eed7bf3f35afc88ffe1ea626886fddef4be415cc929ece95827a6a3989f33d7203bce
   languageName: node
   linkType: hard
 
 "@storybook/core-common@file:../../../code/lib/core-common::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=4507ef&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/core-common@file:../../../code/lib/core-common#../../../code/lib/core-common::hash=d6f826&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-events": "workspace:*"
     "@storybook/csf-tools": "workspace:*"
@@ -2766,22 +2773,22 @@ __metadata:
     tiny-invariant: "npm:^1.3.1"
     ts-dedent: "npm:^2.0.0"
     util: "npm:^0.12.4"
-  checksum: 10/ceedc644f6a9adda2c092cd5764ae698c856b11b68b70eec2101d9c24f9ecc7e5cb69e61e290599af7983c5ee62bc0def2c5ff7ed4a59e668301e2b478a339a4
+  checksum: 10/5a82e69805fd612b9bb7eaf370d93bbadf34f18401b96b16a1b33eaf8dc9c472fa143ab9dc62f0ca82c27555ac73245bb0fc681264d3485a281132de98458089
   languageName: node
   linkType: hard
 
 "@storybook/core-events@file:../../../code/lib/core-events::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=42784a&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/core-events@file:../../../code/lib/core-events#../../../code/lib/core-events::hash=398882&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/c2e4605a50ee0893bfbd69b37da922b697ae19d24af7fd1c9c65a9d9268294b8821f55de55c8967d9906c136d3380ef71d46bad8c13bf599ca176958f15db66d
+  checksum: 10/4b324946e1c4a859417f99a67f0033696d43ed699c7b6715c136455039cbafb23079ac1e49ca5f8b3891abb9fd91f5dd33dbe6873f566ea722da4a111ebad830
   languageName: node
   linkType: hard
 
 "@storybook/core-server@file:../../../code/lib/core-server::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=b5e6fa&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/core-server@file:../../../code/lib/core-server#../../../code/lib/core-server::hash=be7821&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@aw-web-design/x-default-browser": "npm:1.4.126"
     "@babel/core": "npm:^7.23.9"
@@ -2811,7 +2818,7 @@ __metadata:
     detect-port: "npm:^1.3.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     ip: "npm:^2.0.1"
     lodash: "npm:^4.17.21"
     open: "npm:^8.4.0"
@@ -2826,36 +2833,36 @@ __metadata:
     util-deprecate: "npm:^1.0.2"
     watchpack: "npm:^2.2.0"
     ws: "npm:^8.2.3"
-  checksum: 10/dc19de17da0a6c11d04a137dbcafdb3dc6f5e82b48a00ff70a9e6d8c0652b49462634a74a0ed6c0922bcb045bdb511a2e7d8252805b604c1fd4ebd7977ed7f35
+  checksum: 10/e479f05a9461416849ffa168f31a3cb1b3584b6521e618e9478d92f1061dcfc67e80f80ed29315a72e1ea19552ed475a890194597c2bba4eaf9c3d313ca507d1
   languageName: node
   linkType: hard
 
 "@storybook/core-webpack@file:../../../code/lib/core-webpack::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=3009b3&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/core-webpack@file:../../../code/lib/core-webpack#../../../code/lib/core-webpack::hash=149c77&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-common": "workspace:*"
     "@storybook/node-logger": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/node": "npm:^18.0.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/52559ca1f06d43d449896b7d3a7382a7f0be97423c62ef587c23843f42d8e4a850b0be8136d275666d007f03f25cc38a00db154c5276f38d9f2adec0a0e218f0
+  checksum: 10/1280b36bad4121176016ff5d7c9c4677361ac6aa61d0319daf9812ca29bba2bb52a5acd9696a7cc749b4559e2e459808bbb97aaa75dc00d3a1a355367f58beeb
   languageName: node
   linkType: hard
 
 "@storybook/csf-plugin@file:../../../code/lib/csf-plugin::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=a168b3&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/csf-plugin@file:../../../code/lib/csf-plugin#../../../code/lib/csf-plugin::hash=82231f&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/csf-tools": "workspace:*"
     unplugin: "npm:^1.3.1"
-  checksum: 10/b60b3f12d423adb48c515fba94ea83f514d339e50fcb39072c23ce8ea1f0a91377dfb5c0dc5b8ba4e2d94f14d52ec9a30d7dcaf744c3a8c0f13111b54695038b
+  checksum: 10/de0d6aa14f4317ddeaf95d2fb481c9ca074d324a2d234f9f6faccf60f5e2980c4100732532071a4cdd57cb9036e6d1a119ffa2eaf0133f53a399fbeb974cd6a3
   languageName: node
   linkType: hard
 
 "@storybook/csf-tools@file:../../../code/lib/csf-tools::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=1c6958&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/csf-tools@file:../../../code/lib/csf-tools#../../../code/lib/csf-tools::hash=add4b8&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@babel/generator": "npm:^7.23.0"
     "@babel/parser": "npm:^7.23.0"
@@ -2866,7 +2873,7 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     recast: "npm:^0.23.5"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/9d875a81b8f848d5130c6f00f08bd651be3395b5d0b67c4f165172f135ef5fb22ae9e4d8b8459e840213da28192419d6fc366f20f3e340d71a21bf040b97e026
+  checksum: 10/ecd61bff068425cfa58dc33ea9a6f11c2952a1be42309980af22a1ae6bbe80cc9dfaab90b0d7ebd7c42ef8264fdd2176e85a70bf296239adec6b04223d425291
   languageName: node
   linkType: hard
 
@@ -2896,8 +2903,8 @@ __metadata:
   linkType: hard
 
 "@storybook/docs-tools@file:../../../code/lib/docs-tools::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=bd888e&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/docs-tools@file:../../../code/lib/docs-tools#../../../code/lib/docs-tools::hash=64b2ff&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-common": "workspace:*"
     "@storybook/preview-api": "workspace:*"
@@ -2906,7 +2913,7 @@ __metadata:
     assert: "npm:^2.1.0"
     doctrine: "npm:^3.0.0"
     lodash: "npm:^4.17.21"
-  checksum: 10/f2db8bfc3bc613adc261e8cbcbbfddc6afade8688e3ef87d87e326c44d31aa2d0e179b0043168f211e885c7d0ab551caf21042bb5017cfb72d3d856330271b76
+  checksum: 10/3b50a5959d8fbd8e71b5341e9d57b0da51ad4292b9252b7e218b98c59b9a9f889eb7fcae8f51661cb3b58c33b11e79e46c0594caa9b4aaee262794cdf8188e03
   languageName: node
   linkType: hard
 
@@ -2928,8 +2935,8 @@ __metadata:
   linkType: hard
 
 "@storybook/instrumenter@file:../../../code/lib/instrumenter::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=dfe116&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/instrumenter@file:../../../code/lib/instrumenter#../../../code/lib/instrumenter::hash=56e904&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2938,13 +2945,13 @@ __metadata:
     "@storybook/preview-api": "workspace:*"
     "@vitest/utils": "npm:^1.3.1"
     util: "npm:^0.12.4"
-  checksum: 10/a1d9c4e0743ff7611a918e4b213c60fbf7cb7b5383699001f0d62fb30834f5cc5a35858000d4aa708e905fb8258765bf45c293aef914f3d07864dfe8a1d200f0
+  checksum: 10/1a320261c9124db9c502de624acae1e098dc8bb0ab6813b377fed432eafb1f732ad0808f2164bcfbdd0b1aefed6b894f7058a9ea8e796fc123d9f3afe4ac6df7
   languageName: node
   linkType: hard
 
 "@storybook/manager-api@file:../../../code/lib/manager-api::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=9931df&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/manager-api@file:../../../code/lib/manager-api#../../../code/lib/manager-api::hash=92b465&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2961,20 +2968,20 @@ __metadata:
     store2: "npm:^2.14.2"
     telejson: "npm:^7.2.0"
     ts-dedent: "npm:^2.0.0"
-  checksum: 10/258fe407f71adfdd763ee1326959bdbb60aae4066b4ae9ef98cf4efaa5971c94557d611e8ced6ed7cad00e068e6d1420f828bc3b8af72ac3860c09f65e96796f
+  checksum: 10/a2580bef8fa439ce74a2e9f7c4f1642bd94a508ea31b8f9876e0d8a856f2d8dc78d6e8d942fb4c5d482f91c482708f3cf42708fe05807899fd8a5a1fc9254171
   languageName: node
   linkType: hard
 
 "@storybook/manager@file:../../../code/ui/manager::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=9cb69c&locator=portable-stories-nextjs%40workspace%3A."
-  checksum: 10/03eadd30498a56fe2cd4c7aca04e3598c3be04579ea8c297c63673dcbb4cf1a23b62efe192c4dcd7e51e8bd16548380e29273e1ba2803ff0a2f751a5670169c5
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/manager@file:../../../code/ui/manager#../../../code/ui/manager::hash=4b786e&locator=portable-stories-nextjs%40workspace%3A."
+  checksum: 10/8415ceca059644634f0c46e2536713c5f889a4e949a73fc5502ac9bc4c3fc1562ec9633a2910053cff233a06e90279dd1b4a8f6a63c0ae98459224046a2fac7e
   languageName: node
   linkType: hard
 
 "@storybook/nextjs@file:../../../code/frameworks/nextjs::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=cc008c&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/nextjs@file:../../../code/frameworks/nextjs#../../../code/frameworks/nextjs::hash=07534e&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@babel/core": "npm:^7.23.2"
     "@babel/plugin-syntax-bigint": "npm:^7.8.3"
@@ -3009,8 +3016,8 @@ __metadata:
     loader-utils: "npm:^3.2.1"
     node-polyfill-webpack-plugin: "npm:^2.0.1"
     pnp-webpack-plugin: "npm:^1.7.0"
-    postcss: "npm:^8.4.21"
-    postcss-loader: "npm:^7.0.2"
+    postcss: "npm:^8.4.38"
+    postcss-loader: "npm:^8.1.1"
     react-refresh: "npm:^0.14.0"
     resolve-url-loader: "npm:^5.0.0"
     sass-loader: "npm:^12.4.0"
@@ -3031,20 +3038,20 @@ __metadata:
       optional: true
     webpack:
       optional: true
-  checksum: 10/c16ca2e510ae63b191a433a72f300d2195a44754dc480f1e8bab841a1f143a14e728b2b81086f752f660b3a4f0422722622e6b4734d58d888a6d02b64a300b0e
+  checksum: 10/fe6e9c489eea6455ff7e5021777715a157b70ac54cf2e85f1f73d8afd5a55e964a08ebda581172d51fb3f4a6a2c33b48f2299ba24e54bdd7d65a11bfd6c96863
   languageName: node
   linkType: hard
 
 "@storybook/node-logger@file:../../../code/lib/node-logger::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=9efa90&locator=portable-stories-nextjs%40workspace%3A."
-  checksum: 10/b236c45c0cde1c0622d8142394297e3286ef7d1185ed02548220e3d9353640ddaade53dc55ca83fa22e71fb4e928e9cba5f615ab1ca09572c0034fe074bbb6e4
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/node-logger@file:../../../code/lib/node-logger#../../../code/lib/node-logger::hash=ee9425&locator=portable-stories-nextjs%40workspace%3A."
+  checksum: 10/2cef663554d4c27c7e49d51432e53d7a847c1ad5072ef479201b648a61a5d039f136451583175b0798fcacee2a1bd824fd6ca0eb3a87f6a81ebca26170821ef7
   languageName: node
   linkType: hard
 
 "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=62c804&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/preset-react-webpack@file:../../../code/presets/react-webpack#../../../code/presets/react-webpack::hash=b3541b&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/core-webpack": "workspace:*"
     "@storybook/docs-tools": "workspace:*"
@@ -3067,13 +3074,13 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/b242b7c8d14a631dc44a851769e58fc4abd08c0b30d493c9ec229cbd9dd6f9fa593aea44dec13173ae8078b0847051be9485dc6ba35bd2ba22168570cc5623a9
+  checksum: 10/eebfdb7f679a3909d2d7905b2b83acc4ef359c1d4c78048128725c2fce667725c75588fc9d89eaf28998df6f5a6daeee36ff2dee570aa4210b3a92bc83d84ff9
   languageName: node
   linkType: hard
 
 "@storybook/preview-api@file:../../../code/lib/preview-api::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=d9cdf7&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/preview-api@file:../../../code/lib/preview-api#../../../code/lib/preview-api::hash=249991&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -3089,14 +3096,14 @@ __metadata:
     tiny-invariant: "npm:^1.3.1"
     ts-dedent: "npm:^2.0.0"
     util-deprecate: "npm:^1.0.2"
-  checksum: 10/33ff4c7435df3196ea3386a530a93c9cf279d3e8f084c18195e532cde83e5f987fa2533b7868723d82b1db1f239a9ef43bd7734163beb3a4aa0b020c395cf9ec
+  checksum: 10/8c479853d76c40af94ce80270579f312989465d3e9ba72bbf91d244e58ecbd1d096892ccb739af223600b36e6e585505a59fd103266da99ee6d03421fec654c2
   languageName: node
   linkType: hard
 
 "@storybook/preview@file:../../../code/lib/preview::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=2b3419&locator=portable-stories-nextjs%40workspace%3A."
-  checksum: 10/3164314f3a2b165e0184da2f9554eaa25911bbbb23ad6edbf02c92f10f8e89c08e1ba6b13dd6f1b96605f938e70fb8128a052964086999eff3fc46d2ee3e8405
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/preview@file:../../../code/lib/preview#../../../code/lib/preview::hash=0b541b&locator=portable-stories-nextjs%40workspace%3A."
+  checksum: 10/a8cccf3680dd96e3855c2ebba9eaa66b37bc142023fbdf189ccd60053bb883d201a02bceda3f5682e9fc3878ceebe474a483f110e05caf365f8a2f632ac24aba
   languageName: node
   linkType: hard
 
@@ -3119,18 +3126,18 @@ __metadata:
   linkType: hard
 
 "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=4ae7af&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/react-dom-shim@file:../../../code/lib/react-dom-shim#../../../code/lib/react-dom-shim::hash=b5101f&locator=portable-stories-nextjs%40workspace%3A."
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10/7aeb81262d70e3b69482937b2a04e14001891a523dc386253d7b6ba3ead8e9bda524bfff28d384525f2ee2bc03faa0a1db1425cb22790cd3b13526737250da99
+  checksum: 10/2c271219da5c20c6a952df9b07313652bf67f00e426370b9bbf93c9b890f7438c24fe005e3cde6c2eeae648f4bd8928b6ec58c40e07299b5be9dc3eec532d75a
   languageName: node
   linkType: hard
 
 "@storybook/react@file:../../../code/renderers/react::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=7ac8c7&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/react@file:../../../code/renderers/react#../../../code/renderers/react::hash=074121&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/docs-tools": "workspace:*"
@@ -3160,24 +3167,24 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/dee7f81cf36fc74cb71f21cbc9ac7a8136bf83b80b098a8fe054df6ba1ef19a8ebbf6a3cfaa8f63cfb88b27b2a723031feb00b76390359b982f2bf5916d17d0e
+  checksum: 10/82db446f16311861c75d9aab37d5db52f2e8c3d015e033fc7f723895609431e9fa8e741c0e634f6b0548fdf3f4d7fb740781d146e3ed9d37495d4f95abfbd641
   languageName: node
   linkType: hard
 
 "@storybook/router@file:../../../code/lib/router::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=7d8999&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/router@file:../../../code/lib/router#../../../code/lib/router::hash=7a6ed9&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     memoizerific: "npm:^1.11.3"
     qs: "npm:^6.10.0"
-  checksum: 10/add579d44115b5a4e6a57542378eafdacbc4206ce88fccaa8a65fd77e583b07c99dd67ba27489e65d0273d2e15abdb84d9cfa402aaf30ed8c16b191292e7ffce
+  checksum: 10/3cef95a81959cc85dd6e43966f0c10b32f29b592e354088b76369b29a357db83d5eb35a637f90b5120222543f65b139de3ba865eb806b565de3525285c8ac846
   languageName: node
   linkType: hard
 
 "@storybook/telemetry@file:../../../code/lib/telemetry::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=c8b7cc&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/telemetry@file:../../../code/lib/telemetry#../../../code/lib/telemetry::hash=6e2d8d&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-common": "workspace:*"
@@ -3187,13 +3194,13 @@ __metadata:
     fetch-retry: "npm:^5.0.2"
     fs-extra: "npm:^11.1.0"
     read-pkg-up: "npm:^7.0.1"
-  checksum: 10/bf52177ca60aac4b95f7ecdd122c154e76817286643f9d87004d5986c3e670ee41423ac7018f5d414668f2197db6694925f0e15f6fe514b0cc237ded2c4fe3bf
+  checksum: 10/eb476498e119b62ac7fc0e06073cc440902ffc859b0f49bb2a6072d3ef949033cd4b675cb93b8847f2b5dd9bfe9ae1e9ee191ff9de5898a32ab873dcdeb1d6eb
   languageName: node
   linkType: hard
 
 "@storybook/test@file:../../../code/lib/test::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=ff0c36&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/test@file:../../../code/lib/test#../../../code/lib/test::hash=45d0f8&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/client-logger": "workspace:*"
     "@storybook/core-events": "workspace:*"
@@ -3206,13 +3213,13 @@ __metadata:
     "@vitest/spy": "npm:^1.3.1"
     chai: "npm:^4.4.1"
     util: "npm:^0.12.4"
-  checksum: 10/ce2dc5971277cebcc8f3205c95718b715ad19465502bc5e7334c058ed57e96cc22df0b875d8af576d41625d05bc79e9dabf9f64430e9712ae62c2242cd66a109
+  checksum: 10/6101f14b80197cb9a500e4a7872f873abc7c93f6946e5890b2d49b77c503c52ff7b7a4125fb2263466fd0345754c64538a41be6222364660b35e33cc2b549ce9
   languageName: node
   linkType: hard
 
 "@storybook/theming@file:../../../code/lib/theming::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=268ff4&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/theming@file:../../../code/lib/theming#../../../code/lib/theming::hash=acc5fc&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.1"
     "@storybook/client-logger": "workspace:*"
@@ -3226,18 +3233,18 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 10/36087a6877a9f9dcfb54b6130c2aaca353e52bc30b50d8108c350872b93c784cc3cac62965f63ffd7faf0b4f99f3488b2756977743278d4dc41bef07c12cfa93
+  checksum: 10/95ee62ab3810f96e3d16924110bc2a267973e32b67b1cd08b57e6111616f8d488c9cfd8f354bda8ee3db343437b8acdaa5f9ee923671b8783efbcffc4fc3397c
   languageName: node
   linkType: hard
 
 "@storybook/types@file:../../../code/lib/types::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=f4d935&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "@storybook/types@file:../../../code/lib/types#../../../code/lib/types::hash=22b151&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@types/express": "npm:^4.7.0"
     file-system-cache: "npm:2.3.0"
-  checksum: 10/254e61bf4995c160512bb595722a6792220e8c70d01576ee54e997fc61709b09f02ac25ffd813b0bb319962e4a80ad6f0b7769c0a0238e9bafb6879e4955612b
+  checksum: 10/9029701cc4326e000e4f2866601633e54c3167bf5363c97b5190cec9ea762750dcbbc09767695a225bf0804cff6d0e8b9eb55143ef9207798800c6c1dfe7856a
   languageName: node
   linkType: hard
 
@@ -5629,20 +5636,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cosmiconfig@npm:^8.3.5":
-  version: 8.3.6
-  resolution: "cosmiconfig@npm:8.3.6"
+"cosmiconfig@npm:^9.0.0":
+  version: 9.0.0
+  resolution: "cosmiconfig@npm:9.0.0"
   dependencies:
+    env-paths: "npm:^2.2.1"
     import-fresh: "npm:^3.3.0"
     js-yaml: "npm:^4.1.0"
     parse-json: "npm:^5.2.0"
-    path-type: "npm:^4.0.0"
   peerDependencies:
     typescript: ">=4.9.5"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/91d082baca0f33b1c085bf010f9ded4af43cbedacba8821da0fb5667184d0a848addc52c31fadd080007f904a555319c238cf5f4c03e6d58ece2e4876b2e73d6
+  checksum: 10/8bdf1dfbb6fdb3755195b6886dc0649a3c742ec75afa4cb8da7b070936aed22a4f4e5b7359faafe03180358f311dbc300d248fd6586c458203d376a40cc77826
   languageName: node
   linkType: hard
 
@@ -6386,7 +6393,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"env-paths@npm:^2.2.0":
+"env-paths@npm:^2.2.0, env-paths@npm:^2.2.1":
   version: 2.2.1
   resolution: "env-paths@npm:2.2.1"
   checksum: 10/65b5df55a8bab92229ab2b40dad3b387fad24613263d103a97f91c9fe43ceb21965cd3392b1ccb5d77088021e525c4e0481adb309625d0cb94ade1d1fb8dc17e
@@ -6929,7 +6936,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9":
+"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -7479,7 +7486,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.1.0":
+"globby@npm:^11.0.1, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:
@@ -7493,6 +7500,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^14.0.1":
+  version: 14.0.1
+  resolution: "globby@npm:14.0.1"
+  dependencies:
+    "@sindresorhus/merge-streams": "npm:^2.1.0"
+    fast-glob: "npm:^3.3.2"
+    ignore: "npm:^5.2.4"
+    path-type: "npm:^5.0.0"
+    slash: "npm:^5.1.0"
+    unicorn-magic: "npm:^0.1.0"
+  checksum: 10/b36f57afc45a857a884d82657603c7e1663b1e6f3f9afbeb53d12e42230469fc5b26a7e14a01e51086f3f25c138f58a7002036fcc8f3ca054097b6dd7c71d639
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -10435,6 +10456,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "path-type@npm:5.0.0"
+  checksum: 10/15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^1.1.1, pathe@npm:^1.1.2":
   version: 1.1.2
   resolution: "pathe@npm:1.1.2"
@@ -10591,17 +10619,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss-loader@npm:^7.0.2":
-  version: 7.3.4
-  resolution: "postcss-loader@npm:7.3.4"
+"postcss-loader@npm:^8.1.1":
+  version: 8.1.1
+  resolution: "postcss-loader@npm:8.1.1"
   dependencies:
-    cosmiconfig: "npm:^8.3.5"
+    cosmiconfig: "npm:^9.0.0"
     jiti: "npm:^1.20.0"
     semver: "npm:^7.5.4"
   peerDependencies:
+    "@rspack/core": 0.x || 1.x
     postcss: ^7.0.0 || ^8.0.1
     webpack: ^5.0.0
-  checksum: 10/234b01149a966a6190290c6d265b8e3df10f43262dd679451c1e7370bae74e27b746b02e660d204b901e3cf1ad28759c2679a93c64a3eb499169d8dec39df1c1
+  peerDependenciesMeta:
+    "@rspack/core":
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10/7ae38e635119a808ec05e25a5d1327afd40f5f07e1ae40827e4be5e9d1d0adf0e8e277252c13ddbc8909a1bc53fecb15741db340b98966c2bd9cab867cfe5f10
   languageName: node
   linkType: hard
 
@@ -10677,7 +10711,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"postcss@npm:^8.2.14, postcss@npm:^8.4.21, postcss@npm:^8.4.33":
+"postcss@npm:^8.2.14, postcss@npm:^8.4.33":
   version: 8.4.35
   resolution: "postcss@npm:8.4.35"
   dependencies:
@@ -10688,6 +10722,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.38":
+  version: 8.4.38
+  resolution: "postcss@npm:8.4.38"
+  dependencies:
+    nanoid: "npm:^3.3.7"
+    picocolors: "npm:^1.0.0"
+    source-map-js: "npm:^1.2.0"
+  checksum: 10/6e44a7ed835ffa9a2b096e8d3e5dfc6bcf331a25c48aeb862dd54e3aaecadf814fa22be224fd308f87d08adf2299164f88c5fd5ab1c4ef6cbd693ceb295377f4
+  languageName: node
+  linkType: hard
+
 "prebuild-install@npm:^7.1.1":
   version: 7.1.1
   resolution: "prebuild-install@npm:7.1.1"
@@ -11832,6 +11877,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "slash@npm:5.1.0"
+  checksum: 10/2c41ec6fb1414cd9bba0fa6b1dd00e8be739e3fe85d079c69d4b09ca5f2f86eafd18d9ce611c0c0f686428638a36c272a6ac14799146a8295f259c10cc45cde4
+  languageName: node
+  linkType: hard
+
 "smart-buffer@npm:^4.2.0":
   version: 4.2.0
   resolution: "smart-buffer@npm:4.2.0"
@@ -11867,6 +11919,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"source-map-js@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "source-map-js@npm:1.2.0"
+  checksum: 10/74f331cfd2d121c50790c8dd6d3c9de6be21926de80583b23b37029b0f37aefc3e019fa91f9a10a5e120c08135297e1ecf312d561459c45908cb1e0e365f49e5
+  languageName: node
+  linkType: hard
+
 "source-map-support@npm:0.5.13":
   version: 0.5.13
   resolution: "source-map-support@npm:0.5.13"
@@ -12005,14 +12064,14 @@ __metadata:
   linkType: hard
 
 "storybook@file:../../../code/lib/cli-storybook::locator=portable-stories-nextjs%40workspace%3A.":
-  version: 8.1.0-alpha.3
-  resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=3ce62a&locator=portable-stories-nextjs%40workspace%3A."
+  version: 8.1.0-alpha.5
+  resolution: "storybook@file:../../../code/lib/cli-storybook#../../../code/lib/cli-storybook::hash=6f2e56&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/cli": "workspace:*"
   bin:
     sb: ./index.js
     storybook: ./index.js
-  checksum: 10/7814817ce1a5e25390562a93db32f832de9b0183404ab0437583adff8f0ed7223c9179e18ff5edccfd5feec4a3eee21bd6b015a14e223bf0179b4716ef7155e8
+  checksum: 10/d2acea2b4b4a262aab8a97f90847cb53f62e004b1c18d2f583983f43bf781ef5f3cb2a0cec84b8ac00c8ad0f030982f5cb07643c078bccf403a629986d66871d
   languageName: node
   linkType: hard
 
@@ -12762,6 +12821,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicorn-magic@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "unicorn-magic@npm:0.1.0"
+  checksum: 10/9b4d0e9809807823dc91d0920a4a4c0cff2de3ebc54ee87ac1ee9bc75eafd609b09d1f14495e0173aef26e01118706196b6ab06a75fe0841028b3983a8af313f
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-filename@npm:3.0.0"
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
index 4f4e16a37526..372fc7f46326 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
@@ -2530,6 +2530,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/merge-streams@npm:^2.1.0":
+  version: 2.3.0
+  resolution: "@sindresorhus/merge-streams@npm:2.3.0"
+  checksum: 10/798bcb53cd1ace9df84fcdd1ba86afdc9e0cd84f5758d26ae9b1eefd8e8887e5fc30051132b9e74daf01bb41fa5a2faf1369361f83d76a3b3d7ee938058fd71c
+  languageName: node
+  linkType: hard
+
 "@sinonjs/commons@npm:^3.0.0":
   version: 3.0.1
   resolution: "@sinonjs/commons@npm:3.0.1"
@@ -2818,7 +2825,7 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     get-npm-tarball-url: "npm:^2.0.3"
     giget: "npm:^1.0.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     leven: "npm:^3.1.0"
     ora: "npm:^5.4.1"
@@ -2857,7 +2864,7 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/cross-spawn": "npm:^6.0.2"
     cross-spawn: "npm:^7.0.3"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     lodash: "npm:^4.17.21"
     prettier: "npm:^3.1.1"
@@ -2960,7 +2967,7 @@ __metadata:
     detect-port: "npm:^1.3.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     ip: "npm:^2.0.1"
     lodash: "npm:^4.17.21"
     open: "npm:^8.4.0"
@@ -6607,7 +6614,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9":
+"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -7189,7 +7196,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.1.0":
+"globby@npm:^11.0.1, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:
@@ -7203,6 +7210,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^14.0.1":
+  version: 14.0.1
+  resolution: "globby@npm:14.0.1"
+  dependencies:
+    "@sindresorhus/merge-streams": "npm:^2.1.0"
+    fast-glob: "npm:^3.3.2"
+    ignore: "npm:^5.2.4"
+    path-type: "npm:^5.0.0"
+    slash: "npm:^5.1.0"
+    unicorn-magic: "npm:^0.1.0"
+  checksum: 10/b36f57afc45a857a884d82657603c7e1663b1e6f3f9afbeb53d12e42230469fc5b26a7e14a01e51086f3f25c138f58a7002036fcc8f3ca054097b6dd7c71d639
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -9828,6 +9849,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "path-type@npm:5.0.0"
+  checksum: 10/15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^1.1.1, pathe@npm:^1.1.2":
   version: 1.1.2
   resolution: "pathe@npm:1.1.2"
@@ -10964,6 +10992,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "slash@npm:5.1.0"
+  checksum: 10/2c41ec6fb1414cd9bba0fa6b1dd00e8be739e3fe85d079c69d4b09ca5f2f86eafd18d9ce611c0c0f686428638a36c272a6ac14799146a8295f259c10cc45cde4
+  languageName: node
+  linkType: hard
+
 "slice-ansi@npm:^3.0.0":
   version: 3.0.0
   resolution: "slice-ansi@npm:3.0.0"
@@ -11762,6 +11797,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicorn-magic@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "unicorn-magic@npm:0.1.0"
+  checksum: 10/9b4d0e9809807823dc91d0920a4a4c0cff2de3ebc54ee87ac1ee9bc75eafd609b09d1f14495e0173aef26e01118706196b6ab06a75fe0841028b3983a8af313f
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-filename@npm:3.0.0"
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json
index 249e9521a400..a89bd0b66141 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/package.json
@@ -115,4 +115,4 @@
     "vitest": "^1.3.1"
   },
   "packageManager": "yarn@4.1.1"
-}
\ No newline at end of file
+}
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock
index d902b450d343..4067d4983991 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock
@@ -2182,6 +2182,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/merge-streams@npm:^2.1.0":
+  version: 2.3.0
+  resolution: "@sindresorhus/merge-streams@npm:2.3.0"
+  checksum: 10/798bcb53cd1ace9df84fcdd1ba86afdc9e0cd84f5758d26ae9b1eefd8e8887e5fc30051132b9e74daf01bb41fa5a2faf1369361f83d76a3b3d7ee938058fd71c
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-actions@portal:../../../code/addons/actions::locator=portable-stories-svelte%40workspace%3A.":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-actions@portal:../../../code/addons/actions::locator=portable-stories-svelte%40workspace%3A."
@@ -2452,7 +2459,7 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     get-npm-tarball-url: "npm:^2.0.3"
     giget: "npm:^1.0.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     leven: "npm:^3.1.0"
     ora: "npm:^5.4.1"
@@ -2491,7 +2498,7 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/cross-spawn": "npm:^6.0.2"
     cross-spawn: "npm:^7.0.3"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     lodash: "npm:^4.17.21"
     prettier: "npm:^3.1.1"
@@ -2594,7 +2601,7 @@ __metadata:
     detect-port: "npm:^1.3.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     ip: "npm:^2.0.1"
     lodash: "npm:^4.17.21"
     open: "npm:^8.4.0"
@@ -5513,7 +5520,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9":
+"fast-glob@npm:^3.2.7, fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -6068,7 +6075,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.0.1, globby@npm:^11.0.2":
+"globby@npm:^11.0.1":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:
@@ -6082,6 +6089,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^14.0.1":
+  version: 14.0.1
+  resolution: "globby@npm:14.0.1"
+  dependencies:
+    "@sindresorhus/merge-streams": "npm:^2.1.0"
+    fast-glob: "npm:^3.3.2"
+    ignore: "npm:^5.2.4"
+    path-type: "npm:^5.0.0"
+    slash: "npm:^5.1.0"
+    unicorn-magic: "npm:^0.1.0"
+  checksum: 10/b36f57afc45a857a884d82657603c7e1663b1e6f3f9afbeb53d12e42230469fc5b26a7e14a01e51086f3f25c138f58a7002036fcc8f3ca054097b6dd7c71d639
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -6353,7 +6374,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ignore@npm:^5.2.0":
+"ignore@npm:^5.2.0, ignore@npm:^5.2.4":
   version: 5.3.1
   resolution: "ignore@npm:5.3.1"
   checksum: 10/0a884c2fbc8c316f0b9f92beaf84464253b73230a4d4d286697be45fca081199191ca33e1c2e82d9e5f851f5e9a48a78e25a35c951e7eb41e59f150db3530065
@@ -8146,6 +8167,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "path-type@npm:5.0.0"
+  checksum: 10/15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^1.1.0, pathe@npm:^1.1.1, pathe@npm:^1.1.2":
   version: 1.1.2
   resolution: "pathe@npm:1.1.2"
@@ -9230,6 +9258,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "slash@npm:5.1.0"
+  checksum: 10/2c41ec6fb1414cd9bba0fa6b1dd00e8be739e3fe85d079c69d4b09ca5f2f86eafd18d9ce611c0c0f686428638a36c272a6ac14799146a8295f259c10cc45cde4
+  languageName: node
+  linkType: hard
+
 "slice-ansi@npm:^3.0.0":
   version: 3.0.0
   resolution: "slice-ansi@npm:3.0.0"
@@ -10077,6 +10112,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicorn-magic@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "unicorn-magic@npm:0.1.0"
+  checksum: 10/9b4d0e9809807823dc91d0920a4a4c0cff2de3ebc54ee87ac1ee9bc75eafd609b09d1f14495e0173aef26e01118706196b6ab06a75fe0841028b3983a8af313f
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-filename@npm:3.0.0"
diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json
index f6020761c74f..f576b4dd3ee8 100644
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/package.json
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/package.json
@@ -115,4 +115,4 @@
     "sb": "portal:../../../code/lib/cli-sb",
     "storybook": "portal:../../../code/lib/cli-storybook"
   }
-}
\ No newline at end of file
+}
diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock
index ca81b9bef0f2..106045b2d4eb 100644
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock
@@ -2214,6 +2214,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sindresorhus/merge-streams@npm:^2.1.0":
+  version: 2.3.0
+  resolution: "@sindresorhus/merge-streams@npm:2.3.0"
+  checksum: 10/798bcb53cd1ace9df84fcdd1ba86afdc9e0cd84f5758d26ae9b1eefd8e8887e5fc30051132b9e74daf01bb41fa5a2faf1369361f83d76a3b3d7ee938058fd71c
+  languageName: node
+  linkType: hard
+
 "@storybook/addon-actions@portal:../../../code/addons/actions::locator=portable-stories-vue3%40workspace%3A.":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-actions@portal:../../../code/addons/actions::locator=portable-stories-vue3%40workspace%3A."
@@ -2484,7 +2491,7 @@ __metadata:
     fs-extra: "npm:^11.1.0"
     get-npm-tarball-url: "npm:^2.0.3"
     giget: "npm:^1.0.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     leven: "npm:^3.1.0"
     ora: "npm:^5.4.1"
@@ -2523,7 +2530,7 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/cross-spawn": "npm:^6.0.2"
     cross-spawn: "npm:^7.0.3"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     jscodeshift: "npm:^0.15.1"
     lodash: "npm:^4.17.21"
     prettier: "npm:^3.1.1"
@@ -2626,7 +2633,7 @@ __metadata:
     detect-port: "npm:^1.3.0"
     express: "npm:^4.17.3"
     fs-extra: "npm:^11.1.0"
-    globby: "npm:^11.0.2"
+    globby: "npm:^14.0.1"
     ip: "npm:^2.0.1"
     lodash: "npm:^4.17.21"
     open: "npm:^8.4.0"
@@ -5806,7 +5813,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.9":
+"fast-glob@npm:^3.2.9, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
   dependencies:
@@ -6350,7 +6357,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globby@npm:^11.0.1, globby@npm:^11.0.2, globby@npm:^11.1.0":
+"globby@npm:^11.0.1, globby@npm:^11.1.0":
   version: 11.1.0
   resolution: "globby@npm:11.1.0"
   dependencies:
@@ -6364,6 +6371,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"globby@npm:^14.0.1":
+  version: 14.0.1
+  resolution: "globby@npm:14.0.1"
+  dependencies:
+    "@sindresorhus/merge-streams": "npm:^2.1.0"
+    fast-glob: "npm:^3.3.2"
+    ignore: "npm:^5.2.4"
+    path-type: "npm:^5.0.0"
+    slash: "npm:^5.1.0"
+    unicorn-magic: "npm:^0.1.0"
+  checksum: 10/b36f57afc45a857a884d82657603c7e1663b1e6f3f9afbeb53d12e42230469fc5b26a7e14a01e51086f3f25c138f58a7002036fcc8f3ca054097b6dd7c71d639
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -8335,6 +8356,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"path-type@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "path-type@npm:5.0.0"
+  checksum: 10/15ec24050e8932c2c98d085b72cfa0d6b4eeb4cbde151a0a05726d8afae85784fc5544f733d8dfc68536587d5143d29c0bd793623fad03d7e61cc00067291cd5
+  languageName: node
+  linkType: hard
+
 "pathe@npm:^1.1.1, pathe@npm:^1.1.2":
   version: 1.1.2
   resolution: "pathe@npm:1.1.2"
@@ -9469,6 +9497,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"slash@npm:^5.1.0":
+  version: 5.1.0
+  resolution: "slash@npm:5.1.0"
+  checksum: 10/2c41ec6fb1414cd9bba0fa6b1dd00e8be739e3fe85d079c69d4b09ca5f2f86eafd18d9ce611c0c0f686428638a36c272a6ac14799146a8295f259c10cc45cde4
+  languageName: node
+  linkType: hard
+
 "slice-ansi@npm:^3.0.0":
   version: 3.0.0
   resolution: "slice-ansi@npm:3.0.0"
@@ -10175,6 +10210,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unicorn-magic@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "unicorn-magic@npm:0.1.0"
+  checksum: 10/9b4d0e9809807823dc91d0920a4a4c0cff2de3ebc54ee87ac1ee9bc75eafd609b09d1f14495e0173aef26e01118706196b6ab06a75fe0841028b3983a8af313f
+  languageName: node
+  linkType: hard
+
 "unique-filename@npm:^3.0.0":
   version: 3.0.0
   resolution: "unique-filename@npm:3.0.0"

From 4c28d887caf06bbdaf1cd52235064e1aa25ea1cc Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Thu, 4 Apr 2024 13:24:51 +0200
Subject: [PATCH 33/37] Bump es-module-lexer

---
 code/builders/builder-vite/package.json       |  2 +-
 .../src/plugins/inject-export-order-plugin.ts |  6 ++++--
 code/builders/builder-webpack5/package.json   |  2 +-
 code/yarn.lock                                | 19 ++++++-------------
 .../nextjs/yarn.lock                          | 18 +++++++++---------
 .../react/yarn.lock                           | 10 +++++-----
 .../svelte/yarn.lock                          | 10 +++++-----
 .../vue3/yarn.lock                            | 10 +++++-----
 8 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 33a9b5ce1edb..f8967dca56fb 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -54,7 +54,7 @@
     "@storybook/types": "workspace:*",
     "@types/find-cache-dir": "^3.2.1",
     "browser-assert": "^1.2.1",
-    "es-module-lexer": "^0.9.3",
+    "es-module-lexer": "^1.5.0",
     "express": "^4.17.3",
     "find-cache-dir": "^3.0.0",
     "fs-extra": "^11.1.0",
diff --git a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts
index 621dae80e647..9587b23fdaf7 100644
--- a/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts
+++ b/code/builders/builder-vite/src/plugins/inject-export-order-plugin.ts
@@ -19,12 +19,14 @@ export async function injectExportOrderPlugin() {
       //  instead of calling `await parse()` every time.
       const [, exports] = await parse(code);
 
-      if (exports.includes('__namedExportsOrder')) {
+      const exportNames = exports.map((e) => code.substring(e.s, e.e));
+
+      if (exportNames.includes('__namedExportsOrder')) {
         // user has defined named exports already
         return undefined;
       }
       const s = new MagicString(code);
-      const orderedExports = exports.filter((e) => e !== 'default');
+      const orderedExports = exportNames.filter((e) => e !== 'default');
       s.append(`;export const __namedExportsOrder = ${JSON.stringify(orderedExports)};`);
       return {
         code: s.toString(),
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 86a394065112..ffd1e7dff39a 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -78,7 +78,7 @@
     "cjs-module-lexer": "^1.2.3",
     "constants-browserify": "^1.0.0",
     "css-loader": "^6.7.1",
-    "es-module-lexer": "^1.4.1",
+    "es-module-lexer": "^1.5.0",
     "express": "^4.17.3",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "fs-extra": "^11.1.0",
diff --git a/code/yarn.lock b/code/yarn.lock
index de9f47dd250a..472dd503b241 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -5288,7 +5288,7 @@ __metadata:
     "@types/find-cache-dir": "npm:^3.2.1"
     "@types/node": "npm:^18.0.0"
     browser-assert: "npm:^1.2.1"
-    es-module-lexer: "npm:^0.9.3"
+    es-module-lexer: "npm:^1.5.0"
     express: "npm:^4.17.3"
     find-cache-dir: "npm:^3.0.0"
     fs-extra: "npm:^11.1.0"
@@ -5336,7 +5336,7 @@ __metadata:
     cjs-module-lexer: "npm:^1.2.3"
     constants-browserify: "npm:^1.0.0"
     css-loader: "npm:^6.7.1"
-    es-module-lexer: "npm:^1.4.1"
+    es-module-lexer: "npm:^1.5.0"
     express: "npm:^4.17.3"
     fork-ts-checker-webpack-plugin: "npm:^8.0.0"
     fs-extra: "npm:^11.1.0"
@@ -13624,17 +13624,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-module-lexer@npm:^0.9.3":
-  version: 0.9.3
-  resolution: "es-module-lexer@npm:0.9.3"
-  checksum: 10c0/be77d73aee709fdc68d22b9938da81dfee3bc45e8d601629258643fe5bfdab253d6e2540035e035cfa8cf52a96366c1c19b46bcc23b4507b1d44e5907d2e7f6c
-  languageName: node
-  linkType: hard
-
-"es-module-lexer@npm:^1.2.1, es-module-lexer@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "es-module-lexer@npm:1.4.1"
-  checksum: 10c0/b7260a138668554d3f0ddcc728cb4b60c2fa463f15545cf155ecbdd5450a1348952d58298a7f48642e900ee579f21d7f5304b6b3c61b3d9fc2d4b2109b5a9dff
+"es-module-lexer@npm:^1.2.1, es-module-lexer@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "es-module-lexer@npm:1.5.0"
+  checksum: 10c0/d199853404f3381801eb102befb84a8fc48f93ed86b852c2461c2c4ad4bbbc91128f3d974ff9b8718628260ae3f36e661295ab3e419222868aa31269284e34c9
   languageName: node
   linkType: hard
 
diff --git a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock
index 22cc9c3e3a02..64f5d683addd 100644
--- a/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/nextjs/yarn.lock
@@ -2586,7 +2586,7 @@ __metadata:
 
 "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5::locator=portable-stories-nextjs%40workspace%3A.":
   version: 8.1.0-alpha.5
-  resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=da3ffc&locator=portable-stories-nextjs%40workspace%3A."
+  resolution: "@storybook/builder-webpack5@file:../../../code/builders/builder-webpack5#../../../code/builders/builder-webpack5::hash=5fa617&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@storybook/channels": "workspace:*"
     "@storybook/client-logger": "workspace:*"
@@ -2603,7 +2603,7 @@ __metadata:
     cjs-module-lexer: "npm:^1.2.3"
     constants-browserify: "npm:^1.0.0"
     css-loader: "npm:^6.7.1"
-    es-module-lexer: "npm:^1.4.1"
+    es-module-lexer: "npm:^1.5.0"
     express: "npm:^4.17.3"
     fork-ts-checker-webpack-plugin: "npm:^8.0.0"
     fs-extra: "npm:^11.1.0"
@@ -2625,7 +2625,7 @@ __metadata:
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10/27a2d18c41a52d0828fd7f979cfb581a8b540a2ce34d93fef6a17f6b1bcbd25b8769ea7782b480d54c0d0a3485872a99400555bf767430c0d83526b055019eab
+  checksum: 10/8576dca36ea1621e2b7c1723b4729a96d648a54c372175081a11763ad346ba1209a02fb6819beae592a0cc6a69a55cab44f47e92a05ce8552ca729434520a836
   languageName: node
   linkType: hard
 
@@ -2644,7 +2644,7 @@ __metadata:
 
 "@storybook/cli@file:../../../code/lib/cli::locator=portable-stories-nextjs%40workspace%3A.":
   version: 8.1.0-alpha.5
-  resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=d82dd3&locator=portable-stories-nextjs%40workspace%3A."
+  resolution: "@storybook/cli@file:../../../code/lib/cli#../../../code/lib/cli::hash=d07615&locator=portable-stories-nextjs%40workspace%3A."
   dependencies:
     "@babel/core": "npm:^7.23.0"
     "@babel/types": "npm:^7.23.0"
@@ -2685,7 +2685,7 @@ __metadata:
   bin:
     getstorybook: ./bin/index.js
     sb: ./bin/index.js
-  checksum: 10/ea22cf7a46a855caad1de0176dd3c5dc53d7a1abd69932bb4153a3fa10cf87523567ebc6b47ab6669edd78c870717ee70020b9f8ebb89a58827b6e4b1aff8f59
+  checksum: 10/ca2d93c888ae68445728b0dfad15917ca75e7f193c3da8e2e115386cee359246a701d4cad9edd71ebb1377bebaecf9147a267963e972c4085f10082ec4cccf93
   languageName: node
   linkType: hard
 
@@ -6467,10 +6467,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-module-lexer@npm:^1.2.1, es-module-lexer@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "es-module-lexer@npm:1.4.1"
-  checksum: 10/cf453613468c417af6e189b03d9521804033fdd5a229a36fedec28d37ea929fccf6822d42abff1126eb01ba1d2aa2845a48d5d1772c0724f8204464d9d3855f6
+"es-module-lexer@npm:^1.2.1, es-module-lexer@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "es-module-lexer@npm:1.5.0"
+  checksum: 10/d0e198d8642cb42aa82d86f2c6830cb6786916171a3e693046c11500c0cb62e77703940e58757db8aafa8a86fa2a9cc1c493dcd22c0b03c4a72dede3ce5c7dd1
   languageName: node
   linkType: hard
 
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
index 372fc7f46326..ca0b7a5ede87 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/react/yarn.lock
@@ -2764,7 +2764,7 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/find-cache-dir": "npm:^3.2.1"
     browser-assert: "npm:^1.2.1"
-    es-module-lexer: "npm:^0.9.3"
+    es-module-lexer: "npm:^1.5.0"
     express: "npm:^4.17.3"
     find-cache-dir: "npm:^3.0.0"
     fs-extra: "npm:^11.1.0"
@@ -6008,10 +6008,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-module-lexer@npm:^0.9.3":
-  version: 0.9.3
-  resolution: "es-module-lexer@npm:0.9.3"
-  checksum: 10/c3e39465d06a6ecd103ccdb746508c88ee4bdd56c15238b0013de38b949a4eca91d5e44d2a9b88d772fe7821547c5fe9200ba0f3353116e208d44bb50c7bc1ea
+"es-module-lexer@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "es-module-lexer@npm:1.5.0"
+  checksum: 10/d0e198d8642cb42aa82d86f2c6830cb6786916171a3e693046c11500c0cb62e77703940e58757db8aafa8a86fa2a9cc1c493dcd22c0b03c4a72dede3ce5c7dd1
   languageName: node
   linkType: hard
 
diff --git a/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock
index 4067d4983991..c741bf702794 100644
--- a/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/svelte/yarn.lock
@@ -2398,7 +2398,7 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/find-cache-dir": "npm:^3.2.1"
     browser-assert: "npm:^1.2.1"
-    es-module-lexer: "npm:^0.9.3"
+    es-module-lexer: "npm:^1.5.0"
     express: "npm:^4.17.3"
     find-cache-dir: "npm:^3.0.0"
     fs-extra: "npm:^11.1.0"
@@ -4979,10 +4979,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-module-lexer@npm:^0.9.3":
-  version: 0.9.3
-  resolution: "es-module-lexer@npm:0.9.3"
-  checksum: 10/c3e39465d06a6ecd103ccdb746508c88ee4bdd56c15238b0013de38b949a4eca91d5e44d2a9b88d772fe7821547c5fe9200ba0f3353116e208d44bb50c7bc1ea
+"es-module-lexer@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "es-module-lexer@npm:1.5.0"
+  checksum: 10/d0e198d8642cb42aa82d86f2c6830cb6786916171a3e693046c11500c0cb62e77703940e58757db8aafa8a86fa2a9cc1c493dcd22c0b03c4a72dede3ce5c7dd1
   languageName: node
   linkType: hard
 
diff --git a/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock b/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock
index 106045b2d4eb..6a3a4679f469 100644
--- a/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock
+++ b/test-storybooks/portable-stories-kitchen-sink/vue3/yarn.lock
@@ -2430,7 +2430,7 @@ __metadata:
     "@storybook/types": "workspace:*"
     "@types/find-cache-dir": "npm:^3.2.1"
     browser-assert: "npm:^1.2.1"
-    es-module-lexer: "npm:^0.9.3"
+    es-module-lexer: "npm:^1.5.0"
     express: "npm:^4.17.3"
     find-cache-dir: "npm:^3.0.0"
     fs-extra: "npm:^11.1.0"
@@ -5263,10 +5263,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-module-lexer@npm:^0.9.3":
-  version: 0.9.3
-  resolution: "es-module-lexer@npm:0.9.3"
-  checksum: 10/c3e39465d06a6ecd103ccdb746508c88ee4bdd56c15238b0013de38b949a4eca91d5e44d2a9b88d772fe7821547c5fe9200ba0f3353116e208d44bb50c7bc1ea
+"es-module-lexer@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "es-module-lexer@npm:1.5.0"
+  checksum: 10/d0e198d8642cb42aa82d86f2c6830cb6786916171a3e693046c11500c0cb62e77703940e58757db8aafa8a86fa2a9cc1c493dcd22c0b03c4a72dede3ce5c7dd1
   languageName: node
   linkType: hard
 

From 4b1752de052a260113a7fa5211f4daf2bdc82a9f Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 4 Apr 2024 15:18:08 +0100
Subject: [PATCH 34/37] Docs: Update Styling and CSS

---
 docs/configure/styling-and-css.md                   |  6 ++----
 ...ybook-preview-head-import-global-styles.html.mdx | 13 +++++++++++++
 2 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 docs/snippets/common/storybook-preview-head-import-global-styles.html.mdx

diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index 630e6e25ab7d..63fe7b6c9447 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -37,8 +37,7 @@ However, these files will not be subject to HMR, so you'll need to restart your
 
 <CodeSnippets
   paths={[
-    'common/storybook-preview-import-global-styles.js.mdx',
-    'common/storybook-preview-import-global-styles.ts.mdx',
+    'common/storybook-preview-head-import-global-styles.html.mdx',
   ]}
 />
 
@@ -138,7 +137,7 @@ To add global styles to your Storybook, you can add them to the `styles` array i
 Don't forget to also add your global styles to your `build-storybook` target in your `angular.json` file. This will ensure that your global styles are included in the static build of your Storybook as well.
 
 ```json
-  {
+{
   "storybook": {
     "builder": "@storybook/angular:start-storybook",
     "options": {
@@ -234,4 +233,3 @@ Starting with version 14.1.8, Nx uses the Storybook builder directly, which mean
 When Nx runs, it will load Storybook's configuration and styling based on [`storybook.browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
 
 </IfRenderer>
-
diff --git a/docs/snippets/common/storybook-preview-head-import-global-styles.html.mdx b/docs/snippets/common/storybook-preview-head-import-global-styles.html.mdx
new file mode 100644
index 000000000000..5fc69fa6bad7
--- /dev/null
+++ b/docs/snippets/common/storybook-preview-head-import-global-styles.html.mdx
@@ -0,0 +1,13 @@
+```html
+<!-- .storybook/preview-head.html -->
+
+<!-- Loads a font from a CDN -->
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
+  rel="stylesheet"
+/>
+<!-- Load your CSS file -->
+<link rel="stylesheet" href="path/to/your/styles.css" />
+```

From c1f50bd6653f6f8e25f2a821fa25a27a418c172f Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 4 Apr 2024 17:00:03 +0100
Subject: [PATCH 35/37] minor adjustments for consistency

---
 docs/api/cli-options.md | 36 +++++++++++++++++-------------------
 1 file changed, 17 insertions(+), 19 deletions(-)

diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index 9e5bc10fb428..43c13bef8ae0 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -74,25 +74,23 @@ storybook build [options]
 
 Options include:
 
-| Option                          | Description                                                                                                                                                                                           |
-| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-h`, `--help`                  | Output usage information<br/>`storybook build --help`                                                                                                                                                 |
-| `-V`, `--version`               | Output the version number<br/>`storybook build -V`                                                                                                                                                    |
-| `-o`, `--output-dir [dir-name]` | Directory where to store built files<br/>`storybook build -o /my-deployed-storybook`                                                                                                                  |
-| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from<br/>`storybook build -c .storybook`                                                                                                             |
-| `--loglevel [level]`            | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook build --loglevel warn`                                 |
-| `--quiet`                       | Suppress verbose build output<br/>`storybook build --quiet`                                                                                                                                           |
-| `--debug`                       | Outputs more logs in the CLI to assist debugging<br/>`storybook build --debug`                                                                                                                        |
-| `--debug-webpack`               | Display final webpack configurations for debugging purposes<br/>`storybook build --debug-webpack`                                                                                                     |
-| `--stats-json [dir-name]`       | Write stats JSON to disk<br/>`storybook build --stats-json /tmp/stats`                                                                                                                                |
-| `--docs`                        | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs`                           |
-| `--test`                        | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).<br/>`storybook build --test` |
-| `--preview-url [path]`          | Overrides the default Storybook preview with a custom built preview URL<br/>`storybook build --preview-url=http://localhost:1337/external-iframe.html`                                                |
-| `--force-build-preview`         | Build the preview iframe even if you are using --preview-url<br/>`storybook build --force-build-preview`                                                                                              |
-| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out).<br/>`storybook build --disable-telemetry`                                                       |
-| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook build --enable-crash-reports`         |
-
-<!-- Re-read this for accuracy -->
+| Option                          | Description                                                                                                                                                                                              |
+| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`                  | Output usage information<br/>`storybook build --help`                                                                                                                                                    |
+| `-V`, `--version`               | Output the version number<br/>`storybook build -V`                                                                                                                                                       |
+| `-o`, `--output-dir [dir-name]` | Directory where to store built files<br/>`storybook build -o /my-deployed-storybook`                                                                                                                     |
+| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from<br/>`storybook build -c .storybook`                                                                                                                |
+| `--loglevel [level]`            | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook build --loglevel warn`                                    |
+| `--quiet`                       | Suppress verbose build output<br/>`storybook build --quiet`                                                                                                                                              |
+| `--debug`                       | Outputs more logs in the CLI to assist debugging<br/>`storybook build --debug`                                                                                                                           |
+| `--debug-webpack`               | Display final webpack configurations for debugging purposes<br/>`storybook build --debug-webpack`                                                                                                        |
+| `--stats-json [dir-name]`       | Write stats JSON to disk<br/>Requires Webpack<br/>`storybook build --stats-json /tmp/stats`                                                                                                              |
+| `--docs`                        | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs`                              |
+| `--test`                        | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).<br/>`storybook build --test`    |
+| `--preview-url [path]`          | Overrides the default Storybook preview with a custom built preview URL<br/>`storybook build --preview-url=http://localhost:1337/external-iframe.html`                                                   |
+| `--force-build-preview`         | Forcefully builds Storybook's preview iframe.<br/>Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date<br/>`storybook build --force-build-preview` |
+| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out).<br/>`storybook build --disable-telemetry`                                                          |
+| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook build --enable-crash-reports`            |
 
 ### `init`
 

From 928eed4f751b32b2cbc13e12c7eeb09c217b0fc5 Mon Sep 17 00:00:00 2001
From: jonniebigodes <joaocontadesenvolvimento@gmail.com>
Date: Thu, 4 Apr 2024 18:28:37 +0100
Subject: [PATCH 36/37] fix automigrate table

---
 docs/api/cli-options.md | 96 ++++++++++++++++++++---------------------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index 43c13bef8ae0..24c0c5d8b002 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -56,7 +56,7 @@ Options include:
 | `--preview-url [path]`          | Overrides the default Storybook preview with a custom built preview URL<br/>`storybook dev --preview-url=http://localhost:1337/external-iframe.html`                                                   |
 | `--force-build-preview`         | Forcefully builds Storybook's preview iframe.<br/>Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date<br/>`storybook dev --force-build-preview` |
 | `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook dev --disable-telemetry`                                                           |
-| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook dev --enable-crash-reports`            |
+| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default)<br/>`storybook dev --enable-crash-reports`             |
 
 <Callout variant="warning" id="static-dir-deprecation">
 
@@ -89,8 +89,8 @@ Options include:
 | `--test`                        | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).<br/>`storybook build --test`    |
 | `--preview-url [path]`          | Overrides the default Storybook preview with a custom built preview URL<br/>`storybook build --preview-url=http://localhost:1337/external-iframe.html`                                                   |
 | `--force-build-preview`         | Forcefully builds Storybook's preview iframe.<br/>Useful if you're experiencing issues, or combined with `--preview-url` to ensure the preview is up-to-date<br/>`storybook build --force-build-preview` |
-| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out).<br/>`storybook build --disable-telemetry`                                                          |
-| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook build --enable-crash-reports`            |
+| `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook build --disable-telemetry`                                                           |
+| `--enable-crash-reports`        | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default)<br/>`storybook build --enable-crash-reports`             |
 
 ### `init`
 
@@ -104,20 +104,20 @@ For example, `storybook@latest init` will install the latest version of Storyboo
 
 Options include:
 
-| Option                   | Description                                                                                                                                                                                  |
-| ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-h`, `--help`           | Output usage information <br/>`storybook init --help`                                                                                                                                        |
-| `-b`, `--builder`        | Defines the [builder](../builders/index.md) to use for your Storybook instance<br/>`storybook init --builder webpack5`                                                                       |
-| `-f`,`--force`           | Forcefully installs Storybook into your project, prompting you to overwrite existing files<br/>`storybook init --force`                                                                      |
-| `-s`, `--skip-install`   | Skips the dependency installation step. Used only when you need to configure Storybook manually<br/>`storybook init --skip-install`                                                          |
-| `-t`, `--type`           | Defines the [framework](../configure/frameworks.md) to use for your Storybook instance<br/>`storybook init --type solid`                                                                     |
-| `-y`, `--yes`            | Skips interactive prompts and automatically installs Storybook per specified version<br/>`storybook init --yes`                                                                              |
-| `--package-manager`      | Sets the package manager to use when installing Storybook.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook init --package-manager pnpm`                     |
-| `--use-pnp`              | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager<br/>`storybook init --use-pnp`               |
-| `-p`, `--parser`         | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br/> Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`<br/>`storybook init --parser tsx`  |
-| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook init --debug`                                                                                                                |
-| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook init --disable-telemetry`                                                |
-| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook init --enable-crash-reports` |
+| Option                   | Description                                                                                                                                                                                 |
+| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`           | Output usage information <br/>`storybook init --help`                                                                                                                                       |
+| `-b`, `--builder`        | Defines the [builder](../builders/index.md) to use for your Storybook instance<br/>`storybook init --builder webpack5`                                                                      |
+| `-f`,`--force`           | Forcefully installs Storybook into your project, prompting you to overwrite existing files<br/>`storybook init --force`                                                                     |
+| `-s`, `--skip-install`   | Skips the dependency installation step. Used only when you need to configure Storybook manually<br/>`storybook init --skip-install`                                                         |
+| `-t`, `--type`           | Defines the [framework](../configure/frameworks.md) to use for your Storybook instance<br/>`storybook init --type solid`                                                                    |
+| `-y`, `--yes`            | Skips interactive prompts and automatically installs Storybook per specified version<br/>`storybook init --yes`                                                                             |
+| `--package-manager`      | Sets the package manager to use when installing Storybook.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook init --package-manager pnpm`                    |
+| `--use-pnp`              | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager<br/>`storybook init --use-pnp`              |
+| `-p`, `--parser`         | Sets the [jscodeshift parser](https://github.com/facebook/jscodeshift#parser).<br/> Available parsers include `babel`, `babylon`, `flow`, `ts`, and `tsx`<br/>`storybook init --parser tsx` |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook init --debug`                                                                                                               |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook init --disable-telemetry`                                               |
+| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default)<br/>`storybook init --enable-crash-reports` |
 
 ### `add`
 
@@ -146,13 +146,13 @@ storybook remove [addon] [options]
 
 Options include:
 
-| Option                   | Description                                                                                                                                                                                    |
-| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-h`, `--help`           | Output usage information <br/>`storybook remove --help`                                                                                                                                        |
-| `--package-manager`      | Sets the package manager to use when removing the addon.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook remove [addon]--package-manager pnpm`                 |
-| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook remove --debug`                                                                                                                |
-| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook remove --disable-telemetry`                                                |
-| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook remove --enable-crash-reports` |
+| Option                   | Description                                                                                                                                                                                   |
+| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`           | Output usage information <br/>`storybook remove --help`                                                                                                                                       |
+| `--package-manager`      | Sets the package manager to use when removing the addon.<br/>Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook remove [addon]--package-manager pnpm`                |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook remove --debug`                                                                                                               |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook remove --disable-telemetry`                                               |
+| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default)<br/>`storybook remove --enable-crash-reports` |
 
 ### `upgrade`
 
@@ -166,18 +166,18 @@ For example, `storybook@latest upgrade --dry-run` will perform a dry run (no act
 
 Options include:
 
-| Option                   | Description                                                                                                                                                                                     |
-| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-h`, `--help`           | Output usage information <br/>`storybook upgrade --help`                                                                                                                                        |
-| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook upgrade --config-dir .storybook`                                                                                           |
-| `-n`, `--dry-run`        | Checks for version upgrades without installing them<br/>`storybook upgrade --dry-run`                                                                                                           |
-| `-s`, `--skip-check`     | Skips the migration check step during the upgrade process<br/> `storybook upgrade --skip-check`                                                                                                 |
-| `-y`, `--yes`            | Skips interactive prompts and automatically upgrades Storybook to the latest version<br/>`storybook upgrade --yes`                                                                              |
-| `-f`,`--force`           | Force the upgrade, skipping autoblockers check<br/>`storybook upgrade --force`                                                                                                                  |
-| `--package-manager`      | Sets the package manager to use when upgrading Storybook.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook upgrade --package-manager pnpm`                      |
-| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook upgrade --debug`                                                                                                                |
-| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook upgrade --disable-telemetry`                                                |
-| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook upgrade --enable-crash-reports` |
+| Option                   | Description                                                                                                                                                                                    |
+| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`           | Output usage information <br/>`storybook upgrade --help`                                                                                                                                       |
+| `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook upgrade --config-dir .storybook`                                                                                          |
+| `-n`, `--dry-run`        | Checks for version upgrades without installing them<br/>`storybook upgrade --dry-run`                                                                                                          |
+| `-s`, `--skip-check`     | Skips the migration check step during the upgrade process<br/> `storybook upgrade --skip-check`                                                                                                |
+| `-y`, `--yes`            | Skips interactive prompts and automatically upgrades Storybook to the latest version<br/>`storybook upgrade --yes`                                                                             |
+| `-f`,`--force`           | Force the upgrade, skipping autoblockers check<br/>`storybook upgrade --force`                                                                                                                 |
+| `--package-manager`      | Sets the package manager to use when upgrading Storybook.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook upgrade --package-manager pnpm`                     |
+| `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook upgrade --debug`                                                                                                               |
+| `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook upgrade --disable-telemetry`                                               |
+| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default)<br/>`storybook upgrade --enable-crash-reports` |
 
 ### `migrate`
 
@@ -221,18 +221,18 @@ For example, `storybook@latest automigrate --dry-run` scans your project for pot
 Options include:
 
 | Option                   | Description                                                                                                                                                                                                             |
-| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `-h`, `--help`           | Output usage information <br/>`storybook automigrate --help`                                                                                                                                                            |
 | `-c`, `--config-dir`     | Directory where to load Storybook configurations from<br/>`storybook automigrate --config-dir .storybook`                                                                                                               |
 | `-n`, `--dry-run`        | Checks for available migrations without applying them<br/>`storybook automigrate --dry-run`                                                                                                                             |
 | `-s`, `--skip-install`   | Skip installing dependencies whenever applicable<br/> `storybook automigrate --skip-install`                                                                                                                            |
 | `-y`, `--yes`            | Applies available migrations automatically without prompting for confirmation<br/>`storybook automigrate --yes`                                                                                                         |
 | `-l`, `--list`           | Shows a list of available automigrations<br/> `storybook automigrate --list`                                                                                                                                            |
-| `--package-manager`      | Sets the package manager to use when running the auto migration.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook automigrate --package-manager pnpm`                                   |     |
-| `--renderer`             | Specifies Storybook's renderer to use when running the automigration.<br/> Useful for monorepo environments where multiple Storybook instances can exist in the same project<br/>`storybook automigrate --renderer vue` |     |
+| `--package-manager`      | Sets the package manager to use when running the auto migration.<br/> Available package managers include `npm`, `yarn`, and `pnpm`<br/>`storybook automigrate --package-manager pnpm`                                   |
+| `--renderer`             | Specifies Storybook's renderer to use when running the automigration.<br/> Useful for monorepo environments where multiple Storybook instances can exist in the same project<br/>`storybook automigrate --renderer vue` |
 | `--debug`                | Outputs more logs in the CLI to assist debugging<br/>`storybook automigrate --debug`                                                                                                                                    |
 | `--disable-telemetry`    | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook automigrate --disable-telemetry`                                                                    |
-| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook automigrate --enable-crash-reports`                     |
+| `--enable-crash-reports` | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default)<br/>`storybook automigrate --enable-crash-reports`                      |
 
 ### `doctor`
 
@@ -302,14 +302,14 @@ The `framework-filter` argument is optional and can filter the list of available
 
 Options include:
 
-| Option                      | Description                                                                                                                                                                                     |
-| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `-h`, `--help`              | Output usage information <br/>`storybook sandbox --help`                                                                                                                                        |
-| `-o`, `--output [dir-name]` | Configures the location of the sandbox project<br/>`storybook sandbox --output /my-sandbox-project`                                                                                             |
-| `--no-init`                 | Generates a sandbox project without without initializing Storybook<br/>`storybook sandbox --no-init`                                                                                            |
-| `--debug`                   | Outputs more logs in the CLI to assist debugging<br/>`storybook sandbox --debug`                                                                                                                |
-| `--disable-telemetry`       | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook sandbox --disable-telemetry`                                                |
-| `--enable-crash-reports`    | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default).<br/>`storybook sandbox --enable-crash-reports` |
+| Option                      | Description                                                                                                                                                                                    |
+| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-h`, `--help`              | Output usage information <br/>`storybook sandbox --help`                                                                                                                                       |
+| `-o`, `--output [dir-name]` | Configures the location of the sandbox project<br/>`storybook sandbox --output /my-sandbox-project`                                                                                            |
+| `--no-init`                 | Generates a sandbox project without without initializing Storybook<br/>`storybook sandbox --no-init`                                                                                           |
+| `--debug`                   | Outputs more logs in the CLI to assist debugging<br/>`storybook sandbox --debug`                                                                                                               |
+| `--disable-telemetry`       | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#how-to-opt-out)<br/>`storybook sandbox --disable-telemetry`                                               |
+| `--enable-crash-reports`    | Enables sending crash reports to Storybook's telemetry. Learn more about it [here](../configure/telemetry.md#crash-reports-disabled-by-default)<br/>`storybook sandbox --enable-crash-reports` |
 
 <Callout variant="info">
 

From 8c43be3f6d270544da02ff1262c41e757ec5b592 Mon Sep 17 00:00:00 2001
From: storybook-bot <32066757+storybook-bot@users.noreply.github.com>
Date: Thu, 4 Apr 2024 17:54:49 +0000
Subject: [PATCH 37/37] Write changelog for 8.1.0-alpha.6 [skip ci]

---
 CHANGELOG.prerelease.md | 10 ++++++++++
 code/package.json       |  3 ++-
 docs/versions/next.json |  2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index a956bce6d243..ada76261b3cb 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,13 @@
+## 8.1.0-alpha.6
+
+- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!
+- Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld!
+- Dependency: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic!
+- Dependency: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic!
+- Dependency: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic!
+- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!
+- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!
+
 ## 8.1.0-alpha.5
 
 - Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
diff --git a/code/package.json b/code/package.json
index 0daa82df94f1..bc158b22574f 100644
--- a/code/package.json
+++ b/code/package.json
@@ -299,5 +299,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.1.0-alpha.6"
 }
diff --git a/docs/versions/next.json b/docs/versions/next.json
index c240220d9778..a2ba413b8e56 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.1.0-alpha.5","info":{"plain":"- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!\n- Args: Add possibility to mark controls as read-only - [#26577](https://github.com/storybookjs/storybook/pull/26577), thanks @valentinpalkovic!\n- Automigrations: Add migration note about new react-docgen default - [#26620](https://github.com/storybookjs/storybook/pull/26620), thanks @valentinpalkovic!\n- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!\n- CLI: Automigrations copy edits - [#26342](https://github.com/storybookjs/storybook/pull/26342), thanks @joevaugh4n!\n- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!\n- Codemods: Escape filename given as argument - [#26430](https://github.com/storybookjs/storybook/pull/26430), thanks @YukiKitagata!\n- NextJS: Support path aliases when no base url is set - [#26651](https://github.com/storybookjs/storybook/pull/26651), thanks @yannbf!\n- Node: Safe use of `document` for preview - [#24248](https://github.com/storybookjs/storybook/pull/24248), thanks @DylanPiercey!\n- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!\n- Test: Add @storybook/test as dev dependency - [#26458](https://github.com/storybookjs/storybook/pull/26458), thanks @arnabsen!\n- Theming: Update emotion dependencies - [#26623](https://github.com/storybookjs/storybook/pull/26623), thanks @SimenB!\n- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!\n- Webpack: Hide runtime errors - [#23175](https://github.com/storybookjs/storybook/pull/23175), thanks @donaldpipowitch!"}}
+{"version":"8.1.0-alpha.6","info":{"plain":"- CLI: Add --config-dir flag to migrate command - [#26721](https://github.com/storybookjs/storybook/pull/26721), thanks @yannbf!\n- Core: Add `duration` and `onClick` support to Notification API and improve Notification UI - [#26696](https://github.com/storybookjs/storybook/pull/26696), thanks @ghengeveld!\n- Dependency: Bump es-module-lexer - [#26737](https://github.com/storybookjs/storybook/pull/26737), thanks @valentinpalkovic!\n- Dependency: Update globby dependency - [#26733](https://github.com/storybookjs/storybook/pull/26733), thanks @valentinpalkovic!\n- Dependency: Update postcss-loader in Next.js framework - [#26707](https://github.com/storybookjs/storybook/pull/26707), thanks @valentinpalkovic!\n- Next.js: Fix next/font usage on Windows machines - [#26700](https://github.com/storybookjs/storybook/pull/26700), thanks @valentinpalkovic!\n- Webpack: Fix sourcemap generation in webpack react-docgen-loader - [#26676](https://github.com/storybookjs/storybook/pull/26676), thanks @valentinpalkovic!"}}