diff --git a/packages/design-docs/.storybook/main.js b/packages/design-docs/.storybook/main.js
index 3f5357b49c7..e1c0bcbaa00 100644
--- a/packages/design-docs/.storybook/main.js
+++ b/packages/design-docs/.storybook/main.js
@@ -16,12 +16,12 @@ const STORIES = [
 	`${rootPath}src/Principles.mdx`,
 	// `${rootPath}src/Status.mdx`,
 	// `${rootPath}src/Catalog.mdx`,
-	`${rootPath}src/tokens/**/*.mdx`,
 	`${rootPath}src/content/VoiceAndTone.@(js|tsx|mdx)`,
 	`${rootPath}src/content/Internationalization.@(js|tsx|mdx)`,
 	`${rootPath}src/content/Conventions.@(js|tsx|mdx)`,
 	`${rootPath}src/content/Capitalization.@(js|tsx|mdx)`,
 	`${rootPath}src/content/Wording.@(js|tsx|mdx)`,
+	`${rootPath}src/tokens/**/*.mdx`,
 	`${rootPath}../design-system/src/stories/**/*.@(stories.tsx|mdx)`,
 	// `${rootPath}src/components/**/*.@(stories.tsx|mdx)`,
 ];
diff --git a/packages/design-system/src/stories/clickable/About.mdx b/packages/design-system/src/stories/clickable/About.mdx
index 825be640379..5315bda81b1 100644
--- a/packages/design-system/src/stories/clickable/About.mdx
+++ b/packages/design-system/src/stories/clickable/About.mdx
@@ -17,7 +17,7 @@ Clickables are just the things that look like buttons. It's a UI pattern that ha
 Use `Button` when you need highly readable CTAs that trigger an action on the page.
 
 <Canvas withSource="closed">
-	<Story story={ButtonVariations} />
+	<Story of={ButtonVariations} />
 </Canvas>
 
 ## ButtonAsLinks
@@ -27,7 +27,7 @@ Use `Button` when you need highly readable CTAs that trigger an action on the pa
 Use `ButtonAsLink` when you need a CTA that will navigate to a new page.
 
 <Canvas withSource="closed">
-	<Story story={ButtonAsLinkVariations} />
+	<Story of={ButtonAsLinkVariations} />
 </Canvas>
 
 ## ButtonIcon
@@ -37,5 +37,5 @@ Use `ButtonAsLink` when you need a CTA that will navigate to a new page.
 Use `ButtonIcon` when you need to click on a standalone icon. This should never be a hyperlink.
 
 <Canvas withSource="closed">
-	<Story story={ButtonIconVariations} />
+	<Story of={ButtonIconVariations} />
 </Canvas>
diff --git a/packages/design-system/src/stories/clickable/Button.mdx b/packages/design-system/src/stories/clickable/Button.mdx
index 874e2eaf50a..511d0de4693 100644
--- a/packages/design-system/src/stories/clickable/Button.mdx
+++ b/packages/design-system/src/stories/clickable/Button.mdx
@@ -38,17 +38,17 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.Variations} />
+	<Story of={Stories.Variations} />
 </Canvas>
 
 #### Primary
 
 <Canvas withSource="closed">
-	<Story story={Stories.PrimaryVariations} />
+	<Story of={Stories.PrimaryVariations} />
 </Canvas>
 
 <Canvas>
-	<Story story={Stories.Primary} />
+	<Story of={Stories.Primary} />
 </Canvas>
 
 <ArgTypes of={Stories.Primary} />
@@ -56,11 +56,11 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s
 #### Destructive
 
 <Canvas withSource="closed">
-	<Story story={Stories.DestructiveVariations} />
+	<Story of={Stories.DestructiveVariations} />
 </Canvas>
 
 <Canvas>
-	<Story story={Stories.Destructive} />
+	<Story of={Stories.Destructive} />
 </Canvas>
 
 <ArgTypes of={Stories.Destructive} />
@@ -68,11 +68,11 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s
 #### Secondary
 
 <Canvas withSource="closed">
-	<Story story={Stories.SecondaryVariations} />
+	<Story of={Stories.SecondaryVariations} />
 </Canvas>
 
 <Canvas>
-	<Story story={Stories.Secondary} />
+	<Story of={Stories.Secondary} />
 </Canvas>
 
 <ArgTypes of={Stories.Secondary} />
@@ -80,11 +80,11 @@ The small size can only display icons from [SizedIcon's "S" batch](/docs/icons-s
 #### Tertiary
 
 <Canvas withSource="closed">
-	<Story story={Stories.TertiaryVariations} />
+	<Story of={Stories.TertiaryVariations} />
 </Canvas>
 
 <Canvas>
-	<Story story={Stories.Tertiary} />
+	<Story of={Stories.Tertiary} />
 </Canvas>
 
 <ArgTypes of={Stories.Tertiary} />
@@ -98,7 +98,7 @@ All buttons have interactive states for "hover", "active" and "disabled". A focu
 Use `SkeletonButton` or `Skeleton variant="button"` to represent a placeholder for a button.
 
 <Canvas>
-	<Story story={Stories.SkeletonButton} />
+	<Story of={Stories.SkeletonButton} />
 </Canvas>
 
 [The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
@@ -108,7 +108,7 @@ Use `SkeletonButton` or `Skeleton variant="button"` to represent a placeholder f
 Buttons can have a tooltip on hover displaying additional description.
 
 <Canvas>
-	<Story story={Stories.TooltipButton} />
+	<Story of={Stories.TooltipButton} />
 </Canvas>
 
 ### Async buttons
@@ -118,7 +118,7 @@ If the button has an icon, the spinner will temporarily replace this icon as lon
 No action will be possible until it's done.
 
 <Canvas>
-	<Story story={Stories.Loading} />
+	<Story of={Stories.Loading} />
 </Canvas>
 
 ## Usage
@@ -127,7 +127,7 @@ As you've seen, each variant has its own component. But you may want to switch f
 You can, using the `<Button>` generic component.
 
 <Canvas>
-	<Story story={Stories.VariantComponent} />
+	<Story of={Stories.VariantComponent} />
 </Canvas>
 
 Each variant has the same usage rules as their standalone component counterparts seen above.
diff --git a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx
index bebe6f1374a..9a877e7dd00 100644
--- a/packages/design-system/src/stories/clickable/ButtonAsLink.mdx
+++ b/packages/design-system/src/stories/clickable/ButtonAsLink.mdx
@@ -43,13 +43,13 @@ They are otherwise available in the same sizes and with the same iconset.
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.Variations} />
+	<Story of={Stories.Variations} />
 </Canvas>
 
 #### ButtonPrimaryAsLink
 
 <Canvas>
-	<Story story={Stories.PrimaryAsLink} />
+	<Story of={Stories.PrimaryAsLink} />
 </Canvas>
 
 <ArgTypes of={Stories.PrimaryAsLink} />
@@ -57,7 +57,7 @@ They are otherwise available in the same sizes and with the same iconset.
 #### ButtonDestructiveAsLink
 
 <Canvas>
-	<Story story={Stories.DestructiveAsLink} />
+	<Story of={Stories.DestructiveAsLink} />
 </Canvas>
 
 <ArgTypes of={Stories.DestructiveAsLink} />
@@ -65,7 +65,7 @@ They are otherwise available in the same sizes and with the same iconset.
 #### ButtonSecondaryAsLink
 
 <Canvas>
-	<Story story={Stories.SecondaryAsLink} />
+	<Story of={Stories.SecondaryAsLink} />
 </Canvas>
 
 <ArgTypes of={Stories.SecondaryAsLink} />
@@ -73,7 +73,7 @@ They are otherwise available in the same sizes and with the same iconset.
 #### ButtonTertiaryAsLink
 
 <Canvas>
-	<Story story={Stories.TertiaryAsLink} />
+	<Story of={Stories.TertiaryAsLink} />
 </Canvas>
 
 <ArgTypes of={Stories.TertiaryAsLink} />
@@ -85,7 +85,7 @@ If you need to switch from one variant to another, using a prop can be easier th
 `ButtonAsLink` is a standalone component made just for that.
 
 <Canvas>
-	<Story story={Stories.VariantComponent} />
+	<Story of={Stories.VariantComponent} />
 </Canvas>
 
 ## States
@@ -103,7 +103,7 @@ The loading state has been removed as well.
 Use the same Skeletons as `Button`.
 
 <Canvas>
-	<Story story={ButtonStories.SkeletonButton} />
+	<Story of={ButtonStories.SkeletonButton} />
 </Canvas>
 
 [The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
@@ -113,7 +113,7 @@ Use the same Skeletons as `Button`.
 ButtonsAsLinks can also have a tooltip on hover displaying additional description.
 
 <Canvas>
-	<Story story={Stories.TooltipButton} />
+	<Story of={Stories.TooltipButton} />
 </Canvas>
 
 ## Content
@@ -127,13 +127,13 @@ Links in React SPAs are often handled through React Router and similar packages.
 Each `ButtonAsLink` is therefore able to shape itself around them, here React Router's `<Link />` for instance:
 
 <Canvas>
-	<Story story={Stories.ButtonAsRouterLink} />
+	<Story of={Stories.ButtonAsRouterLink} />
 </Canvas>
 
 The usual `ButtonAsLink` collection component also enables the same behaviour, if you prefer props to standalone variants.
 
 <Canvas>
-	<Story story={Stories.ButtonAsRouterLinkVariant} />
+	<Story of={Stories.ButtonAsRouterLinkVariant} />
 </Canvas>
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/clickable/ButtonIcon.mdx b/packages/design-system/src/stories/clickable/ButtonIcon.mdx
index 4fd9f24e0c2..8d0bc0d4b27 100644
--- a/packages/design-system/src/stories/clickable/ButtonIcon.mdx
+++ b/packages/design-system/src/stories/clickable/ButtonIcon.mdx
@@ -40,7 +40,7 @@ It handles the two largest usecases we have for clickable icons: actions and tog
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.Variations} />
+	<Story of={Stories.Variations} />
 </Canvas>
 
 #### Default
@@ -48,7 +48,7 @@ It handles the two largest usecases we have for clickable icons: actions and tog
 This is the go-to ButtonIcon for most generic actions.
 
 <Canvas>
-	<Story story={Stories.DefaultButtonIcon} />
+	<Story of={Stories.DefaultButtonIcon} />
 </Canvas>
 
 #### Toggle
@@ -58,7 +58,7 @@ If the button needs to hold an active / inactive state, then it is a Toggle.
 Don’t use Toggles in series, opt for badge dropdowns instead.
 
 <Canvas>
-	<Story story={Stories.DefaultButtonIconToggle} />
+	<Story of={Stories.DefaultButtonIconToggle} />
 </Canvas>
 
 #### Floating
@@ -68,7 +68,7 @@ This variant is only used when the button floats on top of content.
 It could be it's sitting on top of a line connecting two nodes, or sticky on top of a draggable scene for instance.
 
 <Canvas>
-	<Story story={Stories.DefaultButtonIconFloating} />
+	<Story of={Stories.DefaultButtonIconFloating} />
 </Canvas>
 
 ## States
@@ -80,7 +80,7 @@ ButtonIcons can display a "loading" state for asynchronous actions.
 Only use when necessary to avoid multiple clicks when the action is not instant.
 
 <Canvas>
-	<Story story={Stories.Loading} />
+	<Story of={Stories.Loading} />
 </Canvas>
 
 ### Skeleton
@@ -92,7 +92,7 @@ The Loading state is for asynchronous tasks where the Button (and the button onl
 Skeleton needs are handled by the Skeleton component. Use `SkeletonButtonIcon` or the right `variant` prop on `Skeleton`.
 
 <Canvas>
-	<Story story={Stories.ButtonIconSkeletons} />
+	<Story of={Stories.ButtonIconSkeletons} />
 </Canvas>
 
 [The Skeleton Documentation is over there!](/docs/feedback-skeleton--docs)
@@ -112,7 +112,7 @@ You have access to three components with curated props for each.
 ### ButtonIcon
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 <ArgTypes of={Stories.Default} />
@@ -120,7 +120,7 @@ You have access to three components with curated props for each.
 ### ButtonIconToggle
 
 <Canvas>
-	<Story story={Stories.Toggle} />
+	<Story of={Stories.Toggle} />
 </Canvas>
 
 <ArgTypes of={Stories.Toggle} />
@@ -128,7 +128,7 @@ You have access to three components with curated props for each.
 ### ButtonIconFloating
 
 <Canvas>
-	<Story story={Stories.Floating} />
+	<Story of={Stories.Floating} />
 </Canvas>
 
 <ArgTypes of={Stories.Floating} />
@@ -138,7 +138,7 @@ You have access to three components with curated props for each.
 Of course all buttons can also use natural `<button>` attributes (but not `classNames` nor `style`).
 
 <Canvas>
-	<Story story={Stories.NaturalButtonProps} />
+	<Story of={Stories.NaturalButtonProps} />
 </Canvas>
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/clickable/Link.mdx b/packages/design-system/src/stories/clickable/Link.mdx
index 3feaccfd69c..2adf7513383 100644
--- a/packages/design-system/src/stories/clickable/Link.mdx
+++ b/packages/design-system/src/stories/clickable/Link.mdx
@@ -33,19 +33,19 @@ Still need to be convinced? Please, take the time to read [this article written
 ### Default
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 ### With icon
 
 <Canvas>
-	<Story story={Stories.WithIcon} />
+	<Story of={Stories.WithIcon} />
 </Canvas>
 
 ### Multi lines
 
 <Canvas>
-	<Story story={Stories.MultiLines} />
+	<Story of={Stories.MultiLines} />
 </Canvas>
 
 ### Disabled
@@ -53,7 +53,7 @@ Still need to be convinced? Please, take the time to read [this article written
 When the link is disabled the whole component is displayed with $opacity.disabled.
 
 <Canvas>
-	<Story story={Stories.Disabled} />
+	<Story of={Stories.Disabled} />
 </Canvas>
 
 ### External
@@ -61,13 +61,13 @@ When the link is disabled the whole component is displayed with $opacity.disable
 When the link targets a new domain, we add an external-link icon right after.
 
 <Canvas>
-	<Story story={Stories.External} />
+	<Story of={Stories.External} />
 </Canvas>
 
 Even if it's the same domain, when the link opens in a new window or tab, the title `open in a new tab` is added or appended to an existing title.
 
 <Canvas>
-	<Story story={Stories.TargetBlank} />
+	<Story of={Stories.TargetBlank} />
 </Canvas>
 
 The attribute `rel="noopener noreferrer"` is added if its target is `_blank`.
@@ -77,7 +77,7 @@ The attribute `rel="noopener noreferrer"` is added if its target is `_blank`.
 In React SPAs, most links are handled by libraries such as React Router. `Link` takes that into account.
 
 <Canvas>
-	<Story story={Stories.RouterLinkStory} />
+	<Story of={Stories.RouterLinkStory} />
 </Canvas>
 
 ### As a button
@@ -86,7 +86,7 @@ In extreme cases we do not condone, you may need the style of a link but the beh
 If your action open a new tab, you can use the `openInNewTab` props to trigger the display of the `external-link` icon, and add `open in a new tab` in the link title.
 
 <Canvas>
-	<Story story={StoriesButton.LinkAsButtonStory} />
+	<Story of={StoriesButton.LinkAsButtonStory} />
 </Canvas>
 
 <ArgTypes of={StoriesButton.LinkAsButtonStory} />
diff --git a/packages/design-system/src/stories/feedback/EmptyState.mdx b/packages/design-system/src/stories/feedback/EmptyState.mdx
index c9231966d34..fbd84e3956a 100644
--- a/packages/design-system/src/stories/feedback/EmptyState.mdx
+++ b/packages/design-system/src/stories/feedback/EmptyState.mdx
@@ -29,7 +29,7 @@ Use empty states to communicate about the current state of the system or to tell
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.Demo} />
+	<Story of={Stories.Demo} />
 </Canvas>
 
 ### Purposes
@@ -48,7 +48,7 @@ Empty states come in different sizes to accommodate to empty state types and pag
 #### EmptyStateLarge (with Spot illustration)
 
 <Canvas>
-	<Story story={Stories.Large} />
+	<Story of={Stories.Large} />
 </Canvas>
 
 **Content guidelines**
@@ -66,7 +66,7 @@ Use large empty states when the empty content area on screen takes up at least 5
 #### EmptyStateMedium (with Icon illustration)
 
 <Canvas>
-	<Story story={Stories.MediumWithAction} />
+	<Story of={Stories.MediumWithAction} />
 </Canvas>
 
 <ArgTypes of={Stories.MediumWithAction} />
@@ -86,7 +86,7 @@ Use medium empty states when the empty content area on screen takes up less than
 #### EmptyStateSmall (with no Icon illustration)
 
 <Canvas>
-	<Story story={Stories.Small} />
+	<Story of={Stories.Small} />
 </Canvas>
 
 **Content guidelines**
@@ -164,7 +164,7 @@ N/A
 ### Components props
 
 <Canvas withSource="closed">
-	<Story story={Stories.Usage} />
+	<Story of={Stories.Usage} />
 </Canvas>
 
 <ArgTypes of={Stories.Usage} />
@@ -176,5 +176,5 @@ You may need your CTA to redirect to a page. The `action` props is tailored to m
 You can therefore easily set-up a button that's actually a link:
 
 <Canvas>
-	<Story story={Stories.LargeWithLinkButton} />
+	<Story of={Stories.LargeWithLinkButton} />
 </Canvas>
diff --git a/packages/design-system/src/stories/feedback/ErrorState.mdx b/packages/design-system/src/stories/feedback/ErrorState.mdx
index 56e2326b5c8..72b82fea923 100644
--- a/packages/design-system/src/stories/feedback/ErrorState.mdx
+++ b/packages/design-system/src/stories/feedback/ErrorState.mdx
@@ -59,31 +59,31 @@ Error state visually varies depending on what features are provided through the
 #### Default (with a title and a description)
 
 <Canvas>
-	<Story story={Stories.DefaultStory} />
+	<Story of={Stories.DefaultStory} />
 </Canvas>
 
 #### With a link (default features, plus a link)
 
 <Canvas>
-	<Story story={Stories.WithLink} />
+	<Story of={Stories.WithLink} />
 </Canvas>
 
 #### With a link built from `<Link />` props
 
 <Canvas>
-	<Story story={Stories.WithLinkProps} />
+	<Story of={Stories.WithLinkProps} />
 </Canvas>
 
 #### With an action (default features, plus an action)
 
 <Canvas>
-	<Story story={Stories.WithAction} />
+	<Story of={Stories.WithAction} />
 </Canvas>
 
 #### With an action and a link (default features, plus an action and a link)
 
 <Canvas>
-	<Story story={Stories.WithActionAndLink} />
+	<Story of={Stories.WithActionAndLink} />
 </Canvas>
 
 ## States
diff --git a/packages/design-system/src/stories/feedback/Loading.mdx b/packages/design-system/src/stories/feedback/Loading.mdx
index 46400ed3168..43d2ec35b84 100644
--- a/packages/design-system/src/stories/feedback/Loading.mdx
+++ b/packages/design-system/src/stories/feedback/Loading.mdx
@@ -15,7 +15,7 @@ import * as Stories from './Loading.stories';
 ## Style
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 ## States
diff --git a/packages/design-system/src/stories/feedback/Skeleton.mdx b/packages/design-system/src/stories/feedback/Skeleton.mdx
index ca18b5addda..9724967f062 100644
--- a/packages/design-system/src/stories/feedback/Skeleton.mdx
+++ b/packages/design-system/src/stories/feedback/Skeleton.mdx
@@ -35,7 +35,7 @@ Skeleton is used as placeholder to fill the space while the real content is load
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3530%3A188" />
 
 <Canvas>
-	<Story story={Stories.SkeletonButtonStory} />
+	<Story of={Stories.SkeletonButtonStory} />
 </Canvas>
 
 <ArgTypes of={Stories.SkeletonButtonStory} />
@@ -45,7 +45,7 @@ Skeleton is used as placeholder to fill the space while the real content is load
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3530%3A189" />
 
 <Canvas>
-	<Story story={Stories.SkeletonButtonIconStory} />
+	<Story of={Stories.SkeletonButtonIconStory} />
 </Canvas>
 
 <ArgTypes story={Stories.SkeletonButtonIconStory} />
@@ -59,7 +59,7 @@ It illustrates any heading element.
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3530%3A187" />
 
 <Canvas>
-	<Story story={Stories.SkeletonHeadingStory} />
+	<Story of={Stories.SkeletonHeadingStory} />
 </Canvas>
 
 <ArgTypes story={Stories.SkeletonHeadingStory} />
@@ -71,7 +71,7 @@ It illustrates any paragraph or small copy element.
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3530%3A182" />
 
 <Canvas>
-	<Story story={Stories.SkeletonParagraphStory} />
+	<Story of={Stories.SkeletonParagraphStory} />
 </Canvas>
 
 <ArgTypes story={Stories.SkeletonParagraphStory} />
@@ -83,7 +83,7 @@ It illustrates any input element.
 <FigmaImage src="https://www.figma.com/file/RMs7GdNC3mnAwHgG4Firw9/Skeletons?node-id=3705%3A92" />
 
 <Canvas>
-	<Story story={Stories.SkeletonInputStory} />
+	<Story of={Stories.SkeletonInputStory} />
 </Canvas>
 
 #### Composition example
@@ -91,7 +91,7 @@ It illustrates any input element.
 Combine all of them to mock content!
 
 <Canvas>
-	<Story story={Stories.CompositionExample} />
+	<Story of={Stories.CompositionExample} />
 </Canvas>
 
 ## States
@@ -120,5 +120,5 @@ As you've seen above, `Skeleton` can be used by importing the single variant you
 You can also use `Skeleton` and specify the variant you need to use: its props will then match the variant's own.
 
 <Canvas>
-	<Story story={Stories.ButtonVariants} />
+	<Story of={Stories.ButtonVariants} />
 </Canvas>
diff --git a/packages/design-system/src/stories/feedback/Status.mdx b/packages/design-system/src/stories/feedback/Status.mdx
index 42c17568e90..df441c41a0d 100644
--- a/packages/design-system/src/stories/feedback/Status.mdx
+++ b/packages/design-system/src/stories/feedback/Status.mdx
@@ -33,21 +33,21 @@ The status component displays state information using semantic colors and icons.
 #### With text
 
 <Canvas>
-	<Story story={Stories.InProgress} />
-	<Story story={Stories.Successful} />
-	<Story story={Stories.Failed} />
-	<Story story={Stories.Warning} />
-	<Story story={Stories.Canceled} />
+	<Story of={Stories.InProgress} />
+	<Story of={Stories.Successful} />
+	<Story of={Stories.Failed} />
+	<Story of={Stories.Warning} />
+	<Story of={Stories.Canceled} />
 </Canvas>
 
 #### Without text
 
 <Canvas>
-	<Story story={Stories.InProgressIcon} />
-	<Story story={Stories.SuccessfulIcon} />
-	<Story story={Stories.FailedIcon} />
-	<Story story={Stories.WarningIcon} />
-	<Story story={Stories.CanceledIcon} />
+	<Story of={Stories.InProgressIcon} />
+	<Story of={Stories.SuccessfulIcon} />
+	<Story of={Stories.FailedIcon} />
+	<Story of={Stories.WarningIcon} />
+	<Story of={Stories.CanceledIcon} />
 </Canvas>
 
 ## States
@@ -78,8 +78,8 @@ By default, each Status variants has a label:
 Depending on the use case, it is possible to have another label instead but keeping the same meaning.
 
 <Canvas>
-	<Story story={Stories.CustomSuccessful} />
-	<Story story={Stories.CustomInProgressIcon} />
+	<Story of={Stories.CustomSuccessful} />
+	<Story of={Stories.CustomInProgressIcon} />
 </Canvas>
 
 ## Usage
@@ -89,7 +89,7 @@ You can directly use the presets `StatusInProgress` etc... but in some cases you
 You can.
 
 <Canvas>
-	<Story story={Stories.Usage} />
+	<Story of={Stories.Usage} />
 </Canvas>
 
 <ArgTypes story={Stories.Usage} />
diff --git a/packages/design-system/src/stories/form/About.mdx b/packages/design-system/src/stories/form/About.mdx
index 87ac1d1357e..18eb8b64acc 100644
--- a/packages/design-system/src/stories/form/About.mdx
+++ b/packages/design-system/src/stories/form/About.mdx
@@ -40,13 +40,13 @@ Used to wrap fields that must stand next to one another.
 By default, the fields will only take the space that they need to:
 
 <Canvas withSource="closed">
-	<Story story={AboutRowsDefault} />
+	<Story of={AboutRowsDefault} />
 </Canvas>
 
 If necessary, `Row` can stretch to fill the form's width:
 
 <Canvas withSource="closed">
-	<Story story={AboutRowsStretch} />
+	<Story of={AboutRowsStretch} />
 </Canvas>
 
 In both cases, a gap of `spacing-l` is enforced between the fields.
diff --git a/packages/design-system/src/stories/form/Affix/Affixes.mdx b/packages/design-system/src/stories/form/Affix/Affixes.mdx
index 8ee9a3e1da1..227170aadb1 100644
--- a/packages/design-system/src/stories/form/Affix/Affixes.mdx
+++ b/packages/design-system/src/stories/form/Affix/Affixes.mdx
@@ -34,7 +34,7 @@ Fill in their `prefix` or `suffix` prop and the deed is done.
 Affixes are either `prefix` or `suffix`. They are one of the following types:
 
 <Canvas>
-	<Story story={Stories.QuickStart} />
+	<Story of={Stories.QuickStart} />
 </Canvas>
 
 Both `prefix` and `affix` accept the same 3 kinds of objects.
@@ -47,7 +47,7 @@ Both `prefix` and `affix` accept the same 3 kinds of objects.
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.AffixSelect} />
+	<Story of={Stories.AffixSelect} />
 </Canvas>
 
 ##### Button affixes
@@ -58,7 +58,7 @@ Both `prefix` and `affix` accept the same 3 kinds of objects.
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.AffixButton} />
+	<Story of={Stories.AffixButton} />
 </Canvas>
 
 ##### Text affixes
@@ -69,7 +69,7 @@ Both `prefix` and `affix` accept the same 3 kinds of objects.
 />
 
 <Canvas withSource="closed">
-	<Story story={Stories.AffixText} />
+	<Story of={Stories.AffixText} />
 </Canvas>
 
 #### Datalist and multiple select
@@ -77,7 +77,7 @@ Both `prefix` and `affix` accept the same 3 kinds of objects.
 `Form.Datalist` and multiple selects also works with the same ruleset.
 
 <Canvas>
-	<Story story={Stories.DatalistAffix} />
+	<Story of={Stories.DatalistAffix} />
 </Canvas>
 
 #### Mix and match
@@ -90,7 +90,7 @@ An input can mix multiple types of affixes indiscriminately.
 />
 
 <Canvas>
-	<Story story={Stories.Mix} />
+	<Story of={Stories.Mix} />
 </Canvas>
 
 ## States
diff --git a/packages/design-system/src/stories/form/Buttons/FormButtons.mdx b/packages/design-system/src/stories/form/Buttons/FormButtons.mdx
index e4cf0b2d4d5..1ac04915b7b 100644
--- a/packages/design-system/src/stories/form/Buttons/FormButtons.mdx
+++ b/packages/design-system/src/stories/form/Buttons/FormButtons.mdx
@@ -35,7 +35,7 @@ A Form always displays buttons in order to be cancelled or validated.
 />
 
 <Canvas>
-	<Story story={Stories.FormButtonsSkeleton} />
+	<Story of={Stories.FormButtonsSkeleton} />
 </Canvas>
 
 ### Default
@@ -46,7 +46,7 @@ A Form always displays buttons in order to be cancelled or validated.
 />
 
 <Canvas>
-	<Story story={Stories.FormButtonsDefault} />
+	<Story of={Stories.FormButtonsDefault} />
 </Canvas>
 
 ### Loading
@@ -57,7 +57,7 @@ A Form always displays buttons in order to be cancelled or validated.
 />
 
 <Canvas>
-	<Story story={Stories.FormButtonsLoading} />
+	<Story of={Stories.FormButtonsLoading} />
 </Canvas>
 
 ## Content
@@ -78,13 +78,13 @@ Sort the buttons from the least to the most important.
 />
 
 <Canvas>
-	<Story story={Stories.FormButtonsOrder} />
+	<Story of={Stories.FormButtonsOrder} />
 </Canvas>
 
 If there is only one button accompanying the form, then it should stick to the right.
 
 <Canvas withSource="closed">
-	<Story story={Stories.FormButtonsSingle} />
+	<Story of={Stories.FormButtonsSingle} />
 </Canvas>
 
 ### Buttons with icons
diff --git a/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx b/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx
index 5cdd2a3551c..1000e19a771 100644
--- a/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx
+++ b/packages/design-system/src/stories/form/Field/Datalist/Input.Datalist.mdx
@@ -26,7 +26,7 @@ import * as Stories from './Input.Datalist.stories';
 ## States
 
 <Canvas>
-	<Story story={Stories.Datalist} />
+	<Story of={Stories.Datalist} />
 </Canvas>
 
 ## Content
diff --git a/packages/design-system/src/stories/form/Field/FormField.mdx b/packages/design-system/src/stories/form/Field/FormField.mdx
index f998d236f9a..47017f28b50 100644
--- a/packages/design-system/src/stories/form/Field/FormField.mdx
+++ b/packages/design-system/src/stories/form/Field/FormField.mdx
@@ -34,7 +34,7 @@ The user must correct the error within the field. Once the error is corrected, t
 />
 
 <Canvas>
-	<Story story={Stories.FormFieldError} />
+	<Story of={Stories.FormFieldError} />
 </Canvas>
 
 ## Content
@@ -49,7 +49,7 @@ The default behavior is to highlight the mandatory fields by using the asterisk
 />
 
 <Canvas>
-	<Story story={Stories.FormFieldRequired} />
+	<Story of={Stories.FormFieldRequired} />
 </Canvas>
 
 ### Information
@@ -62,7 +62,7 @@ A message can be displayed below the input to help the user by recommending appr
 />
 
 <Canvas>
-	<Story story={Stories.FormFieldInformation} />
+	<Story of={Stories.FormFieldInformation} />
 </Canvas>
 
 ### Link
@@ -77,7 +77,7 @@ If a description or an error is applied to the field, it must be displayed betwe
 />
 
 <Canvas>
-	<Story story={Stories.FormFieldPassword} />
+	<Story of={Stories.FormFieldPassword} />
 </Canvas>
 
 ## Usage
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx
index ecb668678c2..b81f25d1001 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Checkbox.mdx
@@ -34,31 +34,31 @@ If there is only two options (on/off), consider using a SwitchToggle. If the use
 ### Default
 
 <Canvas>
-	<Story story={Stories.CheckboxFillStates} />
+	<Story of={Stories.CheckboxFillStates} />
 </Canvas>
 
 ### Disabled
 
 <Canvas>
-	<Story story={Stories.CheckboxFillStatesDisabled} />
+	<Story of={Stories.CheckboxFillStatesDisabled} />
 </Canvas>
 
 ### Read only
 
 <Canvas>
-	<Story story={Stories.CheckboxFillStatesReadonly} />
+	<Story of={Stories.CheckboxFillStatesReadonly} />
 </Canvas>
 
 ### Multiple checkboxes
 
 <Canvas>
-	<Story story={Stories.CheckboxReactHooksForm} />
+	<Story of={Stories.CheckboxReactHooksForm} />
 </Canvas>
 
 ### Controlled checkbox
 
 <Canvas>
-	<Story story={Stories.CheckboxControlled} />
+	<Story of={Stories.CheckboxControlled} />
 </Canvas>
 
 ## Content
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx
index 40987f867c2..4ed2caac025 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Color.mdx
@@ -28,7 +28,7 @@ Only simple colors (without alpha channel) are allowed though CSS colors has mor
 ## States
 
 <Canvas>
-	<Story story={Stories.ColorStates} />
+	<Story of={Stories.ColorStates} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx
index 55d2ae51e22..bcc4a2933c9 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Copy.mdx
@@ -29,13 +29,13 @@ A shortcut to a read-only `Form.Text` field with prefix and a state, it's used t
 ### Default
 
 <Canvas>
-	<Story story={Stories.CopyStates} />
+	<Story of={Stories.CopyStates} />
 </Canvas>
 
 ### Filled
 
 <Canvas>
-	<Story story={Stories.CopyStatesWithContents} />
+	<Story of={Stories.CopyStatesWithContents} />
 </Canvas>
 
 ### Prefix
@@ -43,7 +43,7 @@ A shortcut to a read-only `Form.Text` field with prefix and a state, it's used t
 `Form.Copy` uses `Form.Text` internally and is therefore able to display a prefix as well.
 
 <Canvas>
-	<Story story={Stories.CopyWithPrefix} />
+	<Story of={Stories.CopyWithPrefix} />
 </Canvas>
 
 Read the [Affixes documentation here](/docs/form-affic-affixes) for more details.
@@ -55,7 +55,7 @@ Read the [Affixes documentation here](/docs/form-affic-affixes) for more details
 When using Rhf, if you want the confirmation message to disappear in case of input change, you must use `watch` on the value or defaultValue.
 
 <Canvas>
-	<Story story={Stories.ReactHookForm} />
+	<Story of={Stories.ReactHookForm} />
 </Canvas>
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx
index 2435d5bb36b..4e228866632 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Date.mdx
@@ -25,7 +25,7 @@ It creates input fields that let the user enter a date, either with a textbox th
 ## States
 
 <Canvas>
-	<Story story={Stories.Date} />
+	<Story of={Stories.Date} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx b/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx
index c17bb693c02..0bd5ef84034 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.DatetimeLocal.mdx
@@ -28,7 +28,7 @@ Browser behaviour with the field varies and they don't all display the same plac
 ## States
 
 <Canvas>
-	<Story story={Stories.DatetimeLocal} />
+	<Story of={Stories.DatetimeLocal} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx
index 835536bf6a8..afefe50142b 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Email.mdx
@@ -26,7 +26,7 @@ import * as Stories from './Input.Email.stories';
 ## States
 
 <Canvas>
-	<Story story={Stories.Email} />
+	<Story of={Stories.Email} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.File.mdx b/packages/design-system/src/stories/form/Field/Input/Input.File.mdx
index e58d5c47d8f..cd790372b7a 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.File.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.File.mdx
@@ -35,19 +35,19 @@ The `Form.File` inputs allows users to select a file through drag and drop or by
 ### Default
 
 <Canvas>
-	<Story story={Stories.File} />
+	<Story of={Stories.File} />
 </Canvas>
 
 ### Multiple
 
 <Canvas>
-	<Story story={Stories.FileMultiple} />
+	<Story of={Stories.FileMultiple} />
 </Canvas>
 
 ### Error
 
 <Canvas>
-	<Story story={Stories.FileError} />
+	<Story of={Stories.FileError} />
 </Canvas>
 
 ## Content
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx
index bc061c74e31..804d6bfb8e1 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Month.mdx
@@ -26,7 +26,7 @@ import * as Stories from './Input.Month.stories';
 ## States
 
 <Canvas>
-	<Story story={Stories.Month} />
+	<Story of={Stories.Month} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx
index cf21d9affed..1a65f31f881 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Number.mdx
@@ -28,7 +28,7 @@ The browser may opt to provide stepper arrows to let the user increase and decre
 ## States
 
 <Canvas>
-	<Story story={Stories.Number} />
+	<Story of={Stories.Number} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx
index 46f8666a124..733fb69e1a1 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Radio.mdx
@@ -37,25 +37,25 @@ Otherwise, consider using [checkboxes](components-form-form-fields-checkbox--che
 ### Default
 
 <Canvas>
-	<Story story={Stories.RadioFillStates} />
+	<Story of={Stories.RadioFillStates} />
 </Canvas>
 
 ### Disabled
 
 <Canvas>
-	<Story story={Stories.RadioFillStatesDisabled} />
+	<Story of={Stories.RadioFillStatesDisabled} />
 </Canvas>
 
 ### Read only
 
 <Canvas>
-	<Story story={Stories.RadioFillStatesReadonly} />
+	<Story of={Stories.RadioFillStatesReadonly} />
 </Canvas>
 
 ### Multiple radios
 
 <Canvas>
-	<Story story={Stories.RadioReactHooksForm} />
+	<Story of={Stories.RadioReactHooksForm} />
 </Canvas>
 
 ## Content
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx
index 7f17dcaad33..e794ba927bb 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Search.mdx
@@ -31,7 +31,7 @@ import * as Stories from './Input.Search.stories';
 ## States
 
 <Canvas>
-	<Story story={Stories.Search} />
+	<Story of={Stories.Search} />
 </Canvas>
 
 ## Content
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx
index eee76cdc300..5a58a826676 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Tel.mdx
@@ -27,7 +27,7 @@ import * as Stories from './Input.Tel.stories';
 ### Default
 
 <Canvas>
-	<Story story={Stories.Tel} />
+	<Story of={Stories.Tel} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx
index 6293d62291a..c085aebb1f0 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Text.mdx
@@ -30,7 +30,7 @@ import * as Stories from './Input.Text.stories';
 ## States
 
 <Canvas>
-	<Story story={Stories.Text} />
+	<Story of={Stories.Text} />
 </Canvas>
 
 ## Content
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx
index ee264696e51..a1d3be344c9 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Time.mdx
@@ -28,7 +28,7 @@ It is a semantic field where the validation and display may be browser-specific.
 ## States
 
 <Canvas>
-	<Story story={Stories.Time} />
+	<Story of={Stories.Time} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx b/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx
index 4f939c8a2fb..15a54d57fc7 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.ToggleSwitch.mdx
@@ -31,19 +31,19 @@ ToggleSwitches are a quick way to view and switch between two states or on-off s
 ## States
 
 <Canvas>
-	<Story story={Stories.ToggleSwitch} />
+	<Story of={Stories.ToggleSwitch} />
 </Canvas>
 
 ### Inline
 
 <Canvas>
-	<Story story={Stories.ToggleSwitchInline} />
+	<Story of={Stories.ToggleSwitchInline} />
 </Canvas>
 
 ### Long content
 
 <Canvas>
-	<Story story={Stories.ToggleSwitchWithLongLabel} />
+	<Story of={Stories.ToggleSwitchWithLongLabel} />
 </Canvas>
 
 ## Content
@@ -77,13 +77,13 @@ Labels for switches should give users a strong indication of what they are selec
 ### Controlled switch
 
 <Canvas>
-	<Story story={Stories.ToggleSwitchControlled} />
+	<Story of={Stories.ToggleSwitchControlled} />
 </Canvas>
 
 ## Usage
 
 <Canvas>
-	<Story story={Stories.ToggleSwitchReactHooksForm} />
+	<Story of={Stories.ToggleSwitchReactHooksForm} />
 </Canvas>
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx
index 0078ca5d832..a5c6fb59e5f 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Url.mdx
@@ -28,7 +28,7 @@ N/C
 ## States
 
 <Canvas>
-	<Story story={Stories.Url} />
+	<Story of={Stories.Url} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx b/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx
index 1fc1dd5bd70..84ab1e4f640 100644
--- a/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Input.Week.mdx
@@ -30,7 +30,7 @@ N/C
 ## States
 
 <Canvas>
-	<Story story={Stories.Week} />
+	<Story of={Stories.Week} />
 </Canvas>
 
 ## Interactions
diff --git a/packages/design-system/src/stories/form/Field/Input/Password.mdx b/packages/design-system/src/stories/form/Field/Input/Password.mdx
index 65efb3357ce..b602828044e 100644
--- a/packages/design-system/src/stories/form/Field/Input/Password.mdx
+++ b/packages/design-system/src/stories/form/Field/Input/Password.mdx
@@ -33,7 +33,7 @@ It will vary depending on the user agent and OS.
 ## States
 
 <Canvas>
-	<Story story={Stories.Password} />
+	<Story of={Stories.Password} />
 </Canvas>
 
 ## Content
diff --git a/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx b/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx
index 97ed0694b8d..ce71c4899b2 100644
--- a/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx
+++ b/packages/design-system/src/stories/form/Field/Select/Input.Select.mdx
@@ -33,25 +33,25 @@ import * as Stories from './Input.Select.stories';
 ### Default
 
 <Canvas>
-	<Story story={Stories.Select} />
+	<Story of={Stories.Select} />
 </Canvas>
 
 ### Filled
 
 <Canvas>
-	<Story story={Stories.SelectWithValue} />
+	<Story of={Stories.SelectWithValue} />
 </Canvas>
 
 ### Multiple
 
 <Canvas>
-	<Story story={Stories.SelectMultiple} />
+	<Story of={Stories.SelectMultiple} />
 </Canvas>
 
 ### With option groups
 
 <Canvas>
-	<Story story={Stories.SelectOptionGroups} />
+	<Story of={Stories.SelectOptionGroups} />
 </Canvas>
 
 ## Content
diff --git a/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx b/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx
index 84d156a4fdd..01ce3a75032 100644
--- a/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx
+++ b/packages/design-system/src/stories/form/Field/Textarea/Input.Textarea.mdx
@@ -31,7 +31,7 @@ import * as Stories from './Input.Textarea.stories';
 ## States
 
 <Canvas>
-	<Story story={Stories.Textarea} />
+	<Story of={Stories.Textarea} />
 </Canvas>
 
 ## Interactions
@@ -39,7 +39,7 @@ import * as Stories from './Input.Textarea.stories';
 A vertical scrollbar appears when the content exceeds the available space.
 
 <Canvas>
-	<Story story={Stories.TextareaMaxedOut} />
+	<Story of={Stories.TextareaMaxedOut} />
 </Canvas>
 
 Textarea fields can be resized vertically, up to a max-height described by the token `sizing-xxxl`.
diff --git a/packages/design-system/src/stories/form/FieldCombobox.mdx b/packages/design-system/src/stories/form/FieldCombobox.mdx
index 4959430a6b8..45048d5eb8f 100644
--- a/packages/design-system/src/stories/form/FieldCombobox.mdx
+++ b/packages/design-system/src/stories/form/FieldCombobox.mdx
@@ -60,7 +60,7 @@ Custom values are still possible like a datalist.
 />
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 <ArgTypes of={Stories.Default} />
diff --git a/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx b/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx
index 779db565d79..d820c742433 100644
--- a/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx
+++ b/packages/design-system/src/stories/form/Fieldset/Fieldset.mdx
@@ -35,7 +35,7 @@ If the fields are even more closely related, display them on the same line using
 />
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 ## States
@@ -50,7 +50,7 @@ A fieldset usually does not carry error state. Its individual fields do.
 />
 
 <Canvas>
-	<Story story={Stories.Error} />
+	<Story of={Stories.Error} />
 </Canvas>
 
 In case of more than one error or a horizontal fieldset, display the errors under each affected field.
@@ -61,7 +61,7 @@ In case of more than one error or a horizontal fieldset, display the errors unde
 />
 
 <Canvas>
-	<Story story={Stories.Errors} />
+	<Story of={Stories.Errors} />
 </Canvas>
 
 ## Content
@@ -100,7 +100,7 @@ The trigger can be any "on / off" interactions available in a form:
 Use sparingly as it makes a form harder to predict and understand at a glance.
 
 <Canvas>
-	<Story story={Stories.ConditionalFieldset} />
+	<Story of={Stories.ConditionalFieldset} />
 </Canvas>
 
 ## Usage
diff --git a/packages/design-system/src/stories/form/Form.mdx b/packages/design-system/src/stories/form/Form.mdx
index cd6c9419691..a63272f2a72 100644
--- a/packages/design-system/src/stories/form/Form.mdx
+++ b/packages/design-system/src/stories/form/Form.mdx
@@ -39,7 +39,7 @@ The `Form` component is a slightly opinionated `<form>` tag with a flex layout a
 />
 
 <Canvas>
-	<Story story={Stories.FormSkeleton} />
+	<Story of={Stories.FormSkeleton} />
 </Canvas>
 
 ### Field states
@@ -77,7 +77,7 @@ The `Form` component is a slightly opinionated `<form>` tag with a flex layout a
 />
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 ### Error
@@ -90,7 +90,7 @@ When an error occurs at a level that is not specific to one field, use `InlineMe
 />
 
 <Canvas>
-	<Story story={Stories.Error} />
+	<Story of={Stories.Error} />
 </Canvas>
 
 [The InlineMessage docs can be found here.](/docs/messaging-inlinemessage--docs)
@@ -107,7 +107,7 @@ Consider using an [Inline message](/?path=/docs/messaging-inlinemessage--docs) w
 />
 
 <Canvas>
-	<Story story={Stories.InlineHelp} />
+	<Story of={Stories.InlineHelp} />
 </Canvas>
 
 ## Interactions
@@ -120,7 +120,7 @@ Consider using an [Inline message](/?path=/docs/messaging-inlinemessage--docs) w
 />
 
 <Canvas>
-	<Story story={Stories.Loading} />
+	<Story of={Stories.Loading} />
 </Canvas>
 
 ### Data loss message
diff --git a/packages/design-system/src/stories/form/InlineEditing.mdx b/packages/design-system/src/stories/form/InlineEditing.mdx
index fe47d5ec051..15bf9c17598 100644
--- a/packages/design-system/src/stories/form/InlineEditing.mdx
+++ b/packages/design-system/src/stories/form/InlineEditing.mdx
@@ -42,7 +42,7 @@ User can perform inline editing by using inline form.
 />
 
 <Canvas>
-	<Story story={Stories.Text} />
+	<Story of={Stories.Text} />
 </Canvas>
 
 **Empty single line with a placeholder**
@@ -53,7 +53,7 @@ User can perform inline editing by using inline form.
 />
 
 <Canvas>
-	<Story story={Stories.EmptyTextWithPlaceholder} />
+	<Story of={Stories.EmptyTextWithPlaceholder} />
 </Canvas>
 
 **Controlled component**
@@ -64,7 +64,7 @@ User can perform inline editing by using inline form.
 />
 
 <Canvas>
-	<Story story={Stories.ControlledComponent} />
+	<Story of={Stories.ControlledComponent} />
 </Canvas>
 
 **Multi lines**
@@ -75,7 +75,7 @@ User can perform inline editing by using inline form.
 />
 
 <Canvas>
-	<Story story={Stories.Textarea} />
+	<Story of={Stories.Textarea} />
 </Canvas>
 
 ## States
@@ -88,7 +88,7 @@ User can perform inline editing by using inline form.
 />
 
 <Canvas>
-	<Story story={Stories.LoadingMode} />
+	<Story of={Stories.LoadingMode} />
 </Canvas>
 
 ### Error
@@ -101,7 +101,7 @@ User can perform inline editing by using inline form.
 In this example, async submit will always end up with an error.
 
 <Canvas>
-	<Story story={Stories.InUse} />
+	<Story of={Stories.InUse} />
 </Canvas>
 
 ## Interactions
@@ -123,11 +123,11 @@ Non-regression testing can be performed using:
 ## Usage
 
 <Canvas>
-	<Story story={Stories.Default} />
-	<Story story={Stories.WithEllipsis} />
-	<Story story={Stories.WithTextarea} />
-	<Story story={Stories.LongTextInTextarea} />
-	<Story story={Stories.AsHeading} />
+	<Story of={Stories.Default} />
+	<Story of={Stories.WithEllipsis} />
+	<Story of={Stories.WithTextarea} />
+	<Story of={Stories.LongTextInTextarea} />
+	<Story of={Stories.AsHeading} />
 </Canvas>
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/form/RichRadioButton.mdx b/packages/design-system/src/stories/form/RichRadioButton.mdx
index 13820fc03ab..076f4fe1799 100644
--- a/packages/design-system/src/stories/form/RichRadioButton.mdx
+++ b/packages/design-system/src/stories/form/RichRadioButton.mdx
@@ -19,37 +19,37 @@ Selectable card with the same behavior as a radio button with multiple parameter
 ### Default
 
 <Canvas>
-	<Story story={Stories.DefaultStory} />
+	<Story of={Stories.DefaultStory} />
 </Canvas>
 
 ### Rich Radio Button with text and tags
 
 <Canvas>
-	<Story story={Stories.RichRadioButtonWithTags} />
+	<Story of={Stories.RichRadioButtonWithTags} />
 </Canvas>
 
 ### Rich Radio Button with text, tags and icon
 
 <Canvas>
-	<Story story={Stories.RichRadioButtonWithTagsAndIcon} />
+	<Story of={Stories.RichRadioButtonWithTagsAndIcon} />
 </Canvas>
 
 ### Rich Radio Button with an illustration
 
 <Canvas>
-	<Story story={Stories.RichRadioButtonWithTagsAndIllustration} />
+	<Story of={Stories.RichRadioButtonWithTagsAndIllustration} />
 </Canvas>
 
 ### Rich Radio Button disabled
 
 <Canvas>
-	<Story story={Stories.RichRadioButtonDisabled} />
+	<Story of={Stories.RichRadioButtonDisabled} />
 </Canvas>
 
 ### Rich Radio Button readonly
 
 <Canvas>
-	<Story story={Stories.RichRadioButtonReadOnly} />
+	<Story of={Stories.RichRadioButtonReadOnly} />
 </Canvas>
 
 ## States
@@ -57,43 +57,43 @@ Selectable card with the same behavior as a radio button with multiple parameter
 ### Checked
 
 <Canvas>
-	<Story story={Stories.CheckedRichRadioButton} />
+	<Story of={Stories.CheckedRichRadioButton} />
 </Canvas>
 
 ### Checked Rich Radio Button with text and tags
 
 <Canvas>
-	<Story story={Stories.CheckedRichRadioButtonWithTags} />
+	<Story of={Stories.CheckedRichRadioButtonWithTags} />
 </Canvas>
 
 ### Checked Rich Radio Button with text, tags and icon
 
 <Canvas>
-	<Story story={Stories.CheckedRichRadioButtonWithTagsAndIcon} />
+	<Story of={Stories.CheckedRichRadioButtonWithTagsAndIcon} />
 </Canvas>
 
 ### Checked Rich Radio Button with an illustration
 
 <Canvas>
-	<Story story={Stories.CheckedRichRadioButtonWithTagsAndIllustration} />
+	<Story of={Stories.CheckedRichRadioButtonWithTagsAndIllustration} />
 </Canvas>
 
 ### Checked Rich Radio Button with an Logo
 
 <Canvas>
-	<Story story={Stories.CheckedRichRadioButtonWithTagsAndLogo} />
+	<Story of={Stories.CheckedRichRadioButtonWithTagsAndLogo} />
 </Canvas>
 
 ### Checked Rich Radio Button disabled
 
 <Canvas>
-	<Story story={Stories.CheckedRichRadioButtonDisabled} />
+	<Story of={Stories.CheckedRichRadioButtonDisabled} />
 </Canvas>
 
 ### Checked Rich Radio Button readonly
 
 <Canvas>
-	<Story story={Stories.CheckedRichRadioButtonReadOnly} />
+	<Story of={Stories.CheckedRichRadioButtonReadOnly} />
 </Canvas>
 
 ## Content
diff --git a/packages/design-system/src/stories/form/Switch.mdx b/packages/design-system/src/stories/form/Switch.mdx
index b8bf03883c9..abda36da41d 100644
--- a/packages/design-system/src/stories/form/Switch.mdx
+++ b/packages/design-system/src/stories/form/Switch.mdx
@@ -26,7 +26,7 @@ Switches are a quick way to make a selection between two states (or three someti
 ## Style
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 ## States
@@ -61,7 +61,7 @@ Labels for switches should give users a strong indication of what they are selec
 ## Usage
 
 <Canvas>
-	<Story story={Stories.Uncontrolled} />
+	<Story of={Stories.Uncontrolled} />
 </Canvas>
 
 ## Changelog
diff --git a/packages/design-system/src/stories/icons/Icon.mdx b/packages/design-system/src/stories/icons/Icon.mdx
index 5ccb0d723d5..c0c90be60da 100644
--- a/packages/design-system/src/stories/icons/Icon.mdx
+++ b/packages/design-system/src/stories/icons/Icon.mdx
@@ -15,7 +15,7 @@ import { AllIconsDocs } from './Icons';
 This component is generic and can be seens as a Primitive to display SVG, img, remote or not.
 
 <Canvas>
-	<Story story={Stories.Usage} />
+	<Story of={Stories.Usage} />
 </Canvas>
 
 ## Remote icon
diff --git a/packages/design-system/src/stories/icons/SizedIcon.mdx b/packages/design-system/src/stories/icons/SizedIcon.mdx
index 83360d9bb30..1fd01f9a660 100644
--- a/packages/design-system/src/stories/icons/SizedIcon.mdx
+++ b/packages/design-system/src/stories/icons/SizedIcon.mdx
@@ -28,7 +28,7 @@ You may need to wrap your icon with a `span` node to target it specifically.
 #### Size XS
 
 <Canvas>
-	<Story story={Stories.IconXS} />
+	<Story of={Stories.IconXS} />
 </Canvas>
 
 <Controls of={Stories.IconXS} />
@@ -36,7 +36,7 @@ You may need to wrap your icon with a `span` node to target it specifically.
 #### Size S
 
 <Canvas>
-	<Story story={Stories.IconS} />
+	<Story of={Stories.IconS} />
 </Canvas>
 
 <Controls of={Stories.IconS} />
@@ -44,7 +44,7 @@ You may need to wrap your icon with a `span` node to target it specifically.
 #### Size M
 
 <Canvas>
-	<Story story={Stories.IconM} />
+	<Story of={Stories.IconM} />
 </Canvas>
 
 <Controls of={Stories.IconM} />
@@ -52,7 +52,7 @@ You may need to wrap your icon with a `span` node to target it specifically.
 #### Size L
 
 <Canvas>
-	<Story story={Stories.IconL} />
+	<Story of={Stories.IconL} />
 </Canvas>
 
 <Controls of={Stories.IconL} />
diff --git a/packages/design-system/src/stories/layout/Card.mdx b/packages/design-system/src/stories/layout/Card.mdx
index ceb9f7c7f81..e173bcf8093 100644
--- a/packages/design-system/src/stories/layout/Card.mdx
+++ b/packages/design-system/src/stories/layout/Card.mdx
@@ -46,7 +46,7 @@ WIP
 **Default card**
 
 <Canvas>
-	<Story story={Stories.DefaultCard} />
+	<Story of={Stories.DefaultCard} />
 </Canvas>
 
 ## States
diff --git a/packages/design-system/src/stories/layout/Stack.mdx b/packages/design-system/src/stories/layout/Stack.mdx
index 52f914df306..8baebbb37be 100644
--- a/packages/design-system/src/stories/layout/Stack.mdx
+++ b/packages/design-system/src/stories/layout/Stack.mdx
@@ -76,7 +76,7 @@ function myComponent() {
 ### Simple StackHorizontal
 
 <Canvas>
-	<Story story={Stories.TestHorizontal} />
+	<Story of={Stories.TestHorizontal} />
 </Canvas>
 
 <ArgTypes story={Stories.TestHorizontal} />
@@ -86,7 +86,7 @@ function myComponent() {
 Spacing can also be set as an object `{ x: SizeToken, y: SizeToken }` or `{top: SizeToken, left: SizeToken, right: SizeToken, bottom: SizeToken}` like this:
 
 <Canvas>
-	<Story story={Stories.TestHorizontalWithExplicitSpacing} />
+	<Story of={Stories.TestHorizontalWithExplicitSpacing} />
 </Canvas>
 
 <ArgTypes story={Stories.TestHorizontalWithExplicitSpacing} />
@@ -96,7 +96,7 @@ You do need to set all the values for each of these objects when using them.
 ### Simple StackVertical
 
 <Canvas>
-	<Story story={Stories.TestVertical} />
+	<Story of={Stories.TestVertical} />
 </Canvas>
 
 <ArgTypes story={Stories.TestVertical} />
@@ -104,13 +104,13 @@ You do need to set all the values for each of these objects when using them.
 ### Nesting Stacks to compose a layout
 
 <Canvas>
-	<Story story={Stories.StackNesting} />
+	<Story of={Stories.StackNesting} />
 </Canvas>
 
 ### Using StackItem
 
 <Canvas>
-	<Story story={Stories.StackWithStackItem} />
+	<Story of={Stories.StackWithStackItem} />
 </Canvas>
 
 <ArgTypes story={Stories.StackWithStackItem} />
diff --git a/packages/design-system/src/stories/messaging/Badge.mdx b/packages/design-system/src/stories/messaging/Badge.mdx
index ea1c8caaf14..0975d2003b6 100644
--- a/packages/design-system/src/stories/messaging/Badge.mdx
+++ b/packages/design-system/src/stories/messaging/Badge.mdx
@@ -27,25 +27,25 @@ A wonderful Badge
 #### Badge
 
 <Canvas isColumn>
-	<Story story={Stories.StoryBadgeValue} />
+	<Story of={Stories.StoryBadgeValue} />
 </Canvas>
 
 #### BadgeTag
 
 <Canvas isColumn>
-	<Story story={Stories.StoryBadgeTag} />
+	<Story of={Stories.StoryBadgeTag} />
 </Canvas>
 
 #### BadgeDropdown
 
 <Canvas isColumn>
-	<Story story={Stories.StoryBadgeDropdown} />
+	<Story of={Stories.StoryBadgeDropdown} />
 </Canvas>
 
 #### BadgePopover
 
 <Canvas isColumn>
-	<Story story={Stories.StoryBadgePopover} />
+	<Story of={Stories.StoryBadgePopover} />
 </Canvas>
 
 ## States
diff --git a/packages/design-system/src/stories/messaging/InlineMessage.mdx b/packages/design-system/src/stories/messaging/InlineMessage.mdx
index 84f0ed6678d..cffe5524bd9 100644
--- a/packages/design-system/src/stories/messaging/InlineMessage.mdx
+++ b/packages/design-system/src/stories/messaging/InlineMessage.mdx
@@ -34,13 +34,13 @@ The text should adapt to the surrounding layout. Depending on the context, if th
 **Default**
 
 <Canvas>
-	<Story story={Stories.DefaultDemo} />
+	<Story of={Stories.DefaultDemo} />
 </Canvas>
 
 **With background**
 
 <Canvas>
-	<Story story={Stories.BackgroundDemo} />
+	<Story of={Stories.BackgroundDemo} />
 </Canvas>
 
 ## Interactions
@@ -111,7 +111,7 @@ If you need a message to change from one semantic type to another, a prop may be
 `<InlineMessage />` is here just for that purpose.
 
 <Canvas>
-	<Story story={Stories.Variant} />
+	<Story of={Stories.Variant} />
 </Canvas>
 
 It behaves like the standalone components but with a `variant` prop.
@@ -123,7 +123,7 @@ It behaves like the standalone components but with a `variant` prop.
 If the link you need is not external, chances are you're using a routing library.
 
 <Canvas>
-	<Story story={Stories.WithRouterLink} />
+	<Story of={Stories.WithRouterLink} />
 </Canvas>
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/messaging/Message.mdx b/packages/design-system/src/stories/messaging/Message.mdx
index 3ac00372a1f..46f8d5ebf4f 100644
--- a/packages/design-system/src/stories/messaging/Message.mdx
+++ b/packages/design-system/src/stories/messaging/Message.mdx
@@ -30,13 +30,13 @@ It's still advise to keep the text short and concise.
 **Default**
 
 <Canvas>
-	<Story story={Stories.DefaultMessageDemo} />
+	<Story of={Stories.DefaultMessageDemo} />
 </Canvas>
 
 **With optional props**
 
 <Canvas>
-	<Story story={Stories.WithPropVariation} />
+	<Story of={Stories.WithPropVariation} />
 </Canvas>
 
 ## Interactions
@@ -99,7 +99,7 @@ Main action :
 ## Usage
 
 <Canvas>
-	<Story story={Stories.MessageInformationTemplateStory} />
+	<Story of={Stories.MessageInformationTemplateStory} />
 </Canvas>
 
 <ArgTypes of={Stories.MessageInformationTemplateStory} />
@@ -113,13 +113,13 @@ MessageCollection is used for multiple messages about the same purpose
 **Default**
 
 <Canvas>
-	<Story story={Stories.DefaultMessageCollectionDemo} />
+	<Story of={Stories.DefaultMessageCollectionDemo} />
 </Canvas>
 
 **With optional props**
 
 <Canvas>
-	<Story story={Stories.MessageCollectionWithPropVariation} />
+	<Story of={Stories.MessageCollectionWithPropVariation} />
 </Canvas>
 
 ## Interactions
@@ -181,7 +181,7 @@ Action :
 ## Usage
 
 <Canvas>
-	<Story story={Stories.MessageCollectionInformationTemplateStory} />
+	<Story of={Stories.MessageCollectionInformationTemplateStory} />
 </Canvas>
 
 <ArgTypes of={Stories.MessageCollectionInformationTemplateStory} />
diff --git a/packages/design-system/src/stories/messaging/Tag.mdx b/packages/design-system/src/stories/messaging/Tag.mdx
index d2a055c39bf..0efeedd2ea7 100644
--- a/packages/design-system/src/stories/messaging/Tag.mdx
+++ b/packages/design-system/src/stories/messaging/Tag.mdx
@@ -31,23 +31,23 @@ The Tag component is useful to emphasize information to the user, works best wit
 ### Variations
 
 <Canvas>
-	<Story story={Stories.Default} />
-	<Story story={Stories.Information} />
-	<Story story={Stories.Success} />
-	<Story story={Stories.Warning} />
-	<Story story={Stories.Destructive} />
-	<Story story={Stories.Beta} />
+	<Story of={Stories.Default} />
+	<Story of={Stories.Information} />
+	<Story of={Stories.Success} />
+	<Story of={Stories.Warning} />
+	<Story of={Stories.Destructive} />
+	<Story of={Stories.Beta} />
 </Canvas>
 
 Or you can use variant props as well
 
 <Canvas>
-	<Story story={Stories.VariantDefault} />
-	<Story story={Stories.VariantInformation} />
-	<Story story={Stories.VariantSuccess} />
-	<Story story={Stories.VariantWarning} />
-	<Story story={Stories.VariantDestructive} />
-	<Story story={Stories.VariantBeta} />
+	<Story of={Stories.VariantDefault} />
+	<Story of={Stories.VariantInformation} />
+	<Story of={Stories.VariantSuccess} />
+	<Story of={Stories.VariantWarning} />
+	<Story of={Stories.VariantDestructive} />
+	<Story of={Stories.VariantBeta} />
 </Canvas>
 
 ## States
@@ -55,7 +55,7 @@ Or you can use variant props as well
 ### Default
 
 <Canvas>
-	<Story story={Stories.Ellipsis} />
+	<Story of={Stories.Ellipsis} />
 </Canvas>
 
 ## Content
@@ -90,7 +90,7 @@ N/A
 ## Usage
 
 <Canvas>
-	<Story story={Stories.Usage} />
+	<Story of={Stories.Usage} />
 </Canvas>
 
 <ArgTypes story={Stories.Usage} />
diff --git a/packages/design-system/src/stories/messaging/Tooltip.mdx b/packages/design-system/src/stories/messaging/Tooltip.mdx
index 9ab499867ab..461675ad90d 100644
--- a/packages/design-system/src/stories/messaging/Tooltip.mdx
+++ b/packages/design-system/src/stories/messaging/Tooltip.mdx
@@ -26,10 +26,10 @@ Tooltips provide helpful, additional content for their paired elements on hover.
 <FigmaImage src="https://www.figma.com/file/93AaDV2pC1tK9J1O6IbHho/Tooltips?node-id=895%3A5" />
 
 <Canvas>
-	<Story story={Stories.Top} />
-	<Story story={Stories.Left} />
-	<Story story={Stories.Bottom} />
-	<Story story={Stories.Right} />
+	<Story of={Stories.Top} />
+	<Story of={Stories.Left} />
+	<Story of={Stories.Bottom} />
+	<Story of={Stories.Right} />
 </Canvas>
 
 ## Content
@@ -71,7 +71,7 @@ Otherwise, you’ll just add information pollution to your UI and waste the time
 ## Usage
 
 <Canvas>
-	<Story story={Stories.Usage} />
+	<Story of={Stories.Usage} />
 </Canvas>
 
 <ArgTypes of={Stories.Usage} />
diff --git a/packages/design-system/src/stories/navigation/Breadcrumbs.mdx b/packages/design-system/src/stories/navigation/Breadcrumbs.mdx
index 5765f5f08aa..43ce005f635 100644
--- a/packages/design-system/src/stories/navigation/Breadcrumbs.mdx
+++ b/packages/design-system/src/stories/navigation/Breadcrumbs.mdx
@@ -30,7 +30,7 @@ It helps them locate the current page within a larger workflow.
 	alt="Breadcrumb in various states"
 />
 <Canvas>
-	<Story story={Stories.Basic} />
+	<Story of={Stories.Basic} />
 </Canvas>
 
 ### Variations
@@ -50,7 +50,7 @@ The individual items of a `Breadcrumbs` component have a max-width of 320px.
 If they do not have enough space to spread that wide, the text-overflow sets in as needed:
 
 <Canvas>
-	<Story story={Stories.FullWidth} />
+	<Story of={Stories.FullWidth} />
 </Canvas>
 
 ## Interactions
@@ -66,7 +66,7 @@ If they do not have enough space to spread that wide, the text-overflow sets in
 This enables third-party router links to be used in a breadcrumb.
 
 <Canvas>
-	<Story story={Stories.Usage} />
+	<Story of={Stories.Usage} />
 </Canvas>
 
 ## Accessibility
diff --git a/packages/design-system/src/stories/navigation/Divider.mdx b/packages/design-system/src/stories/navigation/Divider.mdx
index b3edf42116c..057d6f76fd0 100644
--- a/packages/design-system/src/stories/navigation/Divider.mdx
+++ b/packages/design-system/src/stories/navigation/Divider.mdx
@@ -27,19 +27,19 @@ A divider that separates and distinguishes sections of content or groups of menu
 <FigmaImage src="https://www.figma.com/file/OGrnGJ6dCVvU0CRYsOuiTZ/Divider?node-id=0%3A43" alt="" />
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 It can be vertically oriented
 
 <Canvas>
-	<Story story={Stories.Horizontal} />
+	<Story of={Stories.Horizontal} />
 </Canvas>
 
 or horizontally oriented by default
 
 <Canvas>
-	<Story story={Stories.Vertical} />
+	<Story of={Stories.Vertical} />
 </Canvas>
 
 ## States
diff --git a/packages/design-system/src/stories/navigation/FloatingDrawer.mdx b/packages/design-system/src/stories/navigation/FloatingDrawer.mdx
index aa5c5937b6a..a126f86e3e1 100644
--- a/packages/design-system/src/stories/navigation/FloatingDrawer.mdx
+++ b/packages/design-system/src/stories/navigation/FloatingDrawer.mdx
@@ -65,15 +65,15 @@ It aims to display extra information while keeping the navigation enabled on the
 ### Variations
 
 <Canvas withSource="none">
-	<Story story={Stories.Simple} />
+	<Story of={Stories.Simple} />
 </Canvas>
 
 <Canvas withSource="none">
-	<Story story={Stories.WithDisclosure} />
+	<Story of={Stories.WithDisclosure} />
 </Canvas>
 
 <Canvas withSource="none">
-	<Story story={Stories.WithControlledVisibility} />
+	<Story of={Stories.WithControlledVisibility} />
 </Canvas>
 
 ## States
@@ -101,5 +101,5 @@ When Drawer is visible, disclosure has `aria-expanded` set to `true`. When Drawe
 ## Usage
 
 <Canvas>
-	<Story story={Stories.Usage} />
+	<Story of={Stories.Usage} />
 </Canvas>
diff --git a/packages/design-system/src/stories/navigation/Stepper.Step.mdx b/packages/design-system/src/stories/navigation/Stepper.Step.mdx
index ab93b30822b..4efcb6eeee5 100644
--- a/packages/design-system/src/stories/navigation/Stepper.Step.mdx
+++ b/packages/design-system/src/stories/navigation/Stepper.Step.mdx
@@ -32,7 +32,7 @@ Steps are the main elements for the stepper.
 />
 
 <Canvas>
-	<Story story={Stories.Default} />
+	<Story of={Stories.Default} />
 </Canvas>
 
 ### Sizes
@@ -40,7 +40,7 @@ Steps are the main elements for the stepper.
 The max-width for a step is 20rem, if the label is longer we display an ellipsis.
 
 <Canvas>
-	<Story story={Stories.Overflow} />
+	<Story of={Stories.Overflow} />
 </Canvas>
 
 ## States
diff --git a/packages/design-system/src/stories/navigation/Stepper.mdx b/packages/design-system/src/stories/navigation/Stepper.mdx
index 4f961482083..27711fc24c6 100644
--- a/packages/design-system/src/stories/navigation/Stepper.mdx
+++ b/packages/design-system/src/stories/navigation/Stepper.mdx
@@ -44,7 +44,7 @@ Consider using a vertical stepper when there are workflows greater than 3 steps.
 />
 
 <Canvas>
-	<Story story={Stories.Vertical} />
+	<Story of={Stories.Vertical} />
 </Canvas>
 
 **Horizontal**
@@ -59,7 +59,7 @@ A horizontal stepper should not have more than 3 steps.
 />
 
 <Canvas>
-	<Story story={Stories.Horizontal} />
+	<Story of={Stories.Horizontal} />
 </Canvas>
 
 ## States
@@ -69,13 +69,13 @@ A horizontal stepper should not have more than 3 steps.
 **Vertical**
 
 <Canvas>
-	<Story story={Stories.VerticalLoading} />
+	<Story of={Stories.VerticalLoading} />
 </Canvas>
 
 **Horizontal**
 
 <Canvas>
-	<Story story={Stories.HorizontalLoading} />
+	<Story of={Stories.HorizontalLoading} />
 </Canvas>
 
 ### Overflowing steps
@@ -83,7 +83,7 @@ A horizontal stepper should not have more than 3 steps.
 The space dedicated to step is limited. No reflow strategy has been put in place, so text overflow is truncated with an ellipsis.
 
 <Canvas>
-	<Story story={Stories.Overflows} />
+	<Story of={Stories.Overflows} />
 </Canvas>
 
 ## Content
@@ -142,7 +142,7 @@ In case of an error in the current step, please inform the user by using an inli
 ## Usage
 
 <Canvas>
-	<Story story={Stories.Usage}></Story>
+	<Story of={Stories.Usage}></Story>
 </Canvas>
 
 <ArgTypes story={Stories.Usage} />
diff --git a/packages/design-system/src/stories/navigation/Tabs.mdx b/packages/design-system/src/stories/navigation/Tabs.mdx
index 004ad5a416e..ecc6fb4635a 100644
--- a/packages/design-system/src/stories/navigation/Tabs.mdx
+++ b/packages/design-system/src/stories/navigation/Tabs.mdx
@@ -46,7 +46,7 @@ Tabs are used for switching between different views, functional aspects or categ
 />
 
 <Canvas>
-	<Story story={Stories.Styles} />
+	<Story of={Stories.Styles} />
 </Canvas>
 
 ### Variations
@@ -72,7 +72,7 @@ Only use the large size when tabs act as a second level of navigation on page-wi
 Icons can be used with tabs to help users differentiate among them. Tabs with icons has the same behaviours.
 
 <Canvas>
-	<Story story={Stories.TabsWithIcon} />
+	<Story of={Stories.TabsWithIcon} />
 </Canvas>
 
 #### Tabs with tags
@@ -89,7 +89,7 @@ The default max value of an item is 999. When the value to display is greater th
 Mouse over the label will display the exact number item.
 
 <Canvas>
-	<Story story={Stories.TabsWithTag} />
+	<Story of={Stories.TabsWithTag} />
 </Canvas>
 
 ## States
@@ -101,7 +101,7 @@ Please display a tooltip on hover that contains the full name.
 Max width item: 22rem (token: $coral-sizing-xxl).
 
 <Canvas>
-	<Story story={Stories.TabsWithLongTitles} />
+	<Story of={Stories.TabsWithLongTitles} />
 </Canvas>
 
 ## Content
@@ -142,13 +142,13 @@ To accommodate these two options, we provide two ways to implement Tabs in your
 This is the standard, most straightforward way to use Tabs.
 
 <Canvas>
-	<Story story={Stories.TabStandalone} />
+	<Story of={Stories.TabStandalone} />
 </Canvas>
 
 It also works for large Tabs if needed:
 
 <Canvas withSource="closed">
-	<Story story={Stories.TabStandaloneLarge} />
+	<Story of={Stories.TabStandaloneLarge} />
 </Canvas>
 
 #### Composition
@@ -158,13 +158,13 @@ This is the "I know what I am doing" mode. It lets you build the Tabs through co
 This is also the implementation that is most likely to break. Use only when necessary!
 
 <Canvas>
-	<Story story={Stories.TabsWithComposition} />
+	<Story of={Stories.TabsWithComposition} />
 </Canvas>
 
 This method supports the same features as the API one:
 
 <Canvas withSource="closed">
-	<Story story={Stories.TabsWithCompositionLarge} />
+	<Story of={Stories.TabsWithCompositionLarge} />
 </Canvas>
 
 ### Default tab mode
@@ -172,13 +172,13 @@ This method supports the same features as the API one:
 You may need to set a default opened tab from the outside. You can:
 
 <Canvas>
-	<Story story={Stories.TabStandaloneControlled} />
+	<Story of={Stories.TabStandaloneControlled} />
 </Canvas>
 
 or in composition mode:
 
 <Canvas withSource="closed">
-	<Story story={Stories.TabsWithCompositionControlled} />
+	<Story of={Stories.TabsWithCompositionControlled} />
 </Canvas>
 
 ### Use Tabs as router links
@@ -188,5 +188,5 @@ You may need something that looks like tabs but is actually a navigation pattern
 For this we have a dedicated component that gives you a list of links and make them look like tabs:
 
 <Canvas>
-	<Story story={Stories.TabsAsLinks} />
+	<Story of={Stories.TabsAsLinks} />
 </Canvas>