docs(Modal): add import sections to let consumers know where to consu…

…me from

packages/core/src/components/Modal/Modal/__stories__/Modal.mdx

@@ -22,6 +22,7 @@ import {
 # Modal
 
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Accessibility](#accessibility)
@@ -37,6 +38,26 @@ import {
   We have 3 different modal component, each one provide a different layout for a different use case:
 </p>
 
+### Import
+
+All the Modal-related components can be imported from `@vibe/core/next`.
+
+Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+
+```ts
+import {
+  Modal,
+  ModalHeader,
+  ModalContent,
+  ModalMedia,
+  ModalFooter,
+  ModalFooterWizard,
+  ModalBasicLayout,
+  ModalSideBySideLayout,
+  ModalMediaLayout
+} from "@vibe/core/next";
+```
+
 ### Basic modal
 
 The <StorybookLink page="Components/Modal [New]/Basic modal">Basic Modal</StorybookLink> is intended for straightforward tasks, like selecting items or gathering basic information. Basic Modals help users focus on a single task without distractions. These modals do not support images or videos.

packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx

@@ -15,6 +15,7 @@ import { BasicModalTip } from "./ModalBasicLayout.stories.helpers";
 # Basic modal
 
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Variants](#variants)
@@ -30,6 +31,16 @@ The Basic Modal is intended for straightforward tasks, like selecting items or g
 
 <Canvas of={ModalBasicLayoutStories.Overview} />
 
+### Import
+
+All the Basic Modal layout components can be imported from `@vibe/core/next`.
+
+Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+
+```ts
+import { Modal, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, ModalBasicLayout } from "@vibe/core/next";
+```
+
 ## Props
 
 <PropsTable />

packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx

@@ -16,6 +16,7 @@ import { MediaModalTip } from "./ModalMediaLayout.stories.helpers";
 # Media Modal
 
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Use cases and examples](#use-cases-and-examples)
@@ -29,6 +30,16 @@ The Media Modal includes a highlighted media section, followed by a textual cont
 
 <Canvas of={MediaModalStories.Overview} />
 
+### Import
+
+All the Media Modal layout components can be imported from `@vibe/core/next`.
+
+Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+
+```ts
+import { Modal, ModalHeader, ModalContent, ModalMedia, ModalFooter, ModalFooterWizard, ModalMediaLayout } from "@vibe/core/next";
+```
+
 ## Props
 
 <PropsTable />

packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx

@@ -19,6 +19,7 @@ import { SideBySideModalTip } from "./ModalSideBySideLayout.stories.helpers";
 # Side-by-side modal
 
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Use cases and examples](#use-cases-and-examples)
@@ -32,6 +33,16 @@ The Side-by-side Modal offers a layout with two distinct sections. The left side
 
 <Canvas of={SideBySideModalStories.Overview} />
 
+### Import
+
+All the Side-by-side Modal layout components can be imported from `@vibe/core/next`.
+
+Notice not to import components directly from the `@vibe/core` package, as they are deprecated.
+
+```ts
+import { Modal, ModalHeader, ModalContent, ModalMedia, ModalFooter, ModalFooterWizard, ModalSideBySideLayout } from "@vibe/core/next";
+```
+
 ## Props
 
 <PropsTable />