@kaizen/components 1.39.2 → 1.40.0

package/src/Select/_docs/Select.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as SelectStories from "./Select.stories"
 
 <Meta of={SelectStories} />
@@ -13,11 +13,7 @@ import * as SelectStories from "./Select.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Select } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Select" />
 
 ## Overview
 

package/src/Skirt/_docs/Skirt.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as SkirtStories from "./Skirt.stories"
 
 <Meta of={SkirtStories} />
@@ -13,11 +13,7 @@ import * as SkirtStories from "./Skirt.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Skirt, SkirtCard } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames={["Skirt", "SkirtCard"]} />
 
 ## Overview
 

package/src/Slider/_docs/Slider.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as SliderStories from "./Slider.stories"
 
 <Meta of={SliderStories} />
@@ -13,11 +13,7 @@ import * as SliderStories from "./Slider.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Slider } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Slider" />
 
 ## Overview
 

package/src/SplitButton/_docs/SplitButton.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, LinkTo } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
 import * as SplitButtonStories from "./SplitButton.stories"
 
 <Meta of={SplitButtonStories} />
@@ -13,11 +13,7 @@ import * as SplitButtonStories from "./SplitButton.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { SplitButton } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="SplitButton" />
 
 ## Overview
 

package/src/Table/_docs/Table.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TableStories from "./Table.stories"
 
 <Meta of={TableStories} />
@@ -13,10 +13,8 @@ import * as TableStories from "./Table.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { TableCard, TableContainer, TableHeader, TableHeaderRowCell, TableRow, TableRowCell } from "@kaizen/components"'
+<KAIOInstallation
+  exportNames={["TableCard", "TableContainer", "TableHeader", "TableHeaderRow", "TableHeaderRowCell", "TableRow", "TableRowCell"]}
 />
 
 ## Overview
@@ -53,4 +51,3 @@ A table displays rows of data, including all data in a set, making it efficient
 
 ### Reversed
 <Canvas of={TableStories.Reversed} />
-

package/src/Tabs/_docs/Tabs.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TabsStories from "./Tabs.stories"
 
 <Meta of={TabsStories} />
@@ -13,10 +13,8 @@ import * as TabsStories from "./Tabs.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@kaizen/components"'
+<KAIOInstallation
+  exportNames={["Tabs", "TabList", "Tab", "TabPanels", "TabPanel"]}
 />
 
 ## Overview

package/src/Tag/_docs/Tag.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls , Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TagStories from "./Tag.stories"
 
 <Meta of={TagStories} />
@@ -13,11 +13,7 @@ import * as TagStories from "./Tag.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Tag } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Tag" />
 
 ## Overview
 

package/src/Text/_docs/Text.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TextStories from "./Text.stories"
 
 <Meta of={TextStories} />
@@ -12,11 +12,7 @@ import * as TextStories from "./Text.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Text } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Text" />
 
 ## Overview
 

package/src/TextArea/_docs/TextArea.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import { LinkTo } from "~storybook/components/LinkTo"
 import * as TextAreaStories from "./TextArea.stories"
 
@@ -12,11 +12,7 @@ import * as TextAreaStories from "./TextArea.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { TextArea } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="TextArea" />
 
 ## Overview
 
@@ -47,4 +43,3 @@ For linking text that isn't in a `Label` you can use `aria-labelledBy`
 <Text id="exampleTextArea">My free form text label<Text>
 <TextArea aria-labelledby="exampleTextArea" />
 ```
-

package/src/TextAreaField/_docs/TextAreaField.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TextAreaFieldStories from "./TextAreaField.stories"
 
 <Meta of={TextAreaFieldStories} />
@@ -13,11 +13,7 @@ import * as TextAreaFieldStories from "./TextAreaField.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { TextAreaField } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="TextAreaField" />
 
 ## Overview
 

package/src/TextField/_docs/TextField.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import { LinkTo } from "~storybook/components/LinkTo"
 import * as TextFieldStories from "./TextField.stories"
 
@@ -14,11 +14,7 @@ import * as TextFieldStories from "./TextField.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { TextField } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="TextField" />
 
 ## Overview
 

package/src/Tile/InformationTile/_docs/InformationTile.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as InformationTileStories from "./InformationTile.stories"
 
 <Meta of={InformationTileStories} />
@@ -13,11 +13,7 @@ import * as InformationTileStories from "./InformationTile.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { InformationTile } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="InformationTile" />
 
 ## Overview
 

package/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as MultiActionTileStories from "./MultiActionTile.stories"
 
 <Meta of={MultiActionTileStories} />
@@ -13,11 +13,7 @@ import * as MultiActionTileStories from "./MultiActionTile.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { MultiActionTile } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="MultiActionTile" />
 
 ## Overview
 

package/src/Tile/TileGrid/_docs/TileGrid.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TileGridStories from "./TileGrid.stories"
 
 <Meta of={TileGridStories} />
@@ -12,11 +12,7 @@ import * as TileGridStories from "./TileGrid.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { TileGrid } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="TileGrid" />
 
 ## Overview
 

package/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx

@@ -1,8 +1,6 @@
 import React from "react"
-import { expect } from "@storybook/jest"
 import type { Meta, StoryObj } from "@storybook/react"
-
-import { within, userEvent } from "@storybook/testing-library"
+import { expect, within, userEvent } from "@storybook/test"
 
 import { GenericTile } from "./GenericTile"
 

package/src/TimeField/_docs/TimeField.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TimeFieldStories from "./TimeField.stories"
 
 <Meta of={TimeFieldStories} />
@@ -13,11 +13,7 @@ import * as TimeFieldStories from "./TimeField.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { TimeField } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="TimeField" />
 
 ## Overview
 

package/src/TitleBlockZen/_docs/TitleBlockZen.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TitleBlockZenStories from "./TitleBlockZen.stories"
 
 <Meta of={TitleBlockZenStories} />
@@ -12,11 +12,7 @@ import * as TitleBlockZenStories from "./TitleBlockZen.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { TitleBlockZen } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="TitleBlockZen" />
 
 ## Overview
 

package/src/ToggleSwitch/ToggleSwitch/_docs/ToggleSwitch.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, LinkTo } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
 import * as ToggleSwitchStories from "./ToggleSwitch.stories"
 
 <Meta of={ToggleSwitchStories} />
@@ -11,11 +11,7 @@ import * as ToggleSwitchStories from "./ToggleSwitch.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { ToggleSwitch } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="ToggleSwitch" />
 
 ## Overview
 

package/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as ToggleSwitchFieldStories from "./ToggleSwitchField.stories"
 
 <Meta of={ToggleSwitchFieldStories} />
@@ -12,11 +12,7 @@ import * as ToggleSwitchFieldStories from "./ToggleSwitchField.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { ToggleSwitchField } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="ToggleSwitchField" />
 
 ## Overview
 

package/src/Tooltip/_docs/Tooltip.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TooltipStories from "./Tooltip.stories"
 
 <Meta of={TooltipStories} />
@@ -13,11 +13,7 @@ import * as TooltipStories from "./Tooltip.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Tooltip } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Tooltip" />
 
 ## Overview
 

package/src/VisuallyHidden/_docs/VisuallyHidden.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as VisuallyHiddenStories from "./VisuallyHidden.stories"
 
 <Meta of={VisuallyHiddenStories} />
@@ -11,11 +11,7 @@ import * as VisuallyHiddenStories from "./VisuallyHidden.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { VisuallyHidden } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="VisuallyHidden" />
 
 ## Overview
 

package/src/Well/_docs/Well.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as WellStories from "./Well.stories"
 
 <Meta of={WellStories} />
@@ -13,11 +13,7 @@ import * as WellStories from "./Well.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Well } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Well" />
 
 ## Overview
 

package/src/Workflow/_docs/ProgressStepper.stories.tsx

@@ -18,7 +18,7 @@ const meta = {
       container: ComponentDocsTemplate,
     },
     installation: [
-      "yarn add @kaizen/workflow",
+      "pnpm add @kaizen/workflow",
       "import { ProgressStepper } from `@kaizen/components`",
     ],
     resourceLinks: {

package/src/Workflow/_docs/Workflow.mdx

@@ -1,6 +1,6 @@
 import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
 import { InlineNotification } from "~components/Notification"
-import { Installation, ResourceLinks } from "~storybook/components"
+import { KAIOInstallation, ResourceLinks } from "~storybook/components"
 import * as Workflow from "./Workflow.stories"
 import * as WorkflowFooter from "./WorkflowFooter.stories"
 import * as WorkflowHeader from "./WorkflowHeader.stories"
@@ -20,11 +20,7 @@ import * as WorkflowHeader from "./WorkflowHeader.stories"
   Import from "@kaizen/components/future" for the latest version.`}
 </InlineNotification>
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components"'
-/>
-
+<KAIOInstallation exportNames="Workflow" />
 
 ## Overview
 

package/src/Workflow/_docs/WorkflowFooter.stories.tsx

@@ -15,7 +15,7 @@ const meta = {
       container: ComponentDocsTemplate,
     },
     installation: [
-      "yarn add @kaizen/components",
+      "pnpm add @kaizen/components",
       "import { Workflow } from `@kaizen/components`",
     ],
     resourceLinks: {

package/src/Workflow/_docs/WorkflowHeader.stories.tsx

@@ -16,7 +16,7 @@ const meta = {
       container: ComponentDocsTemplate,
     },
     installation: [
-      "yarn add @kaizen/components",
+      "pnpm add @kaizen/components",
       "import { Workflow } from `@kaizen/components`",
     ],
     resourceLinks: {

package/src/__future__/Select/_docs/Select.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as SelectStories from "./Select.stories"
 
 <Meta of={SelectStories} />
@@ -13,11 +13,7 @@ import * as SelectStories from "./Select.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Select } from "@kaizen/components/future"'
-/>
+<KAIOInstallation exportNames="Select" isFuture />
 
 ## Playground
 

package/src/__future__/Tag/RemovableTag/_docs/RemovableTag.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as RemovableTagStories from "./RemovableTag.stories"
 
 <Meta of={RemovableTagStories} />
@@ -10,11 +10,7 @@ import * as RemovableTagStories from "./RemovableTag.stories"
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__future__/Tag/RemovableTag.tsx"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement="import { RemovableTag } from `@kaizen/components/future`"
-/>
+<KAIOInstallation exportNames="RemovableTag" />
 
 ## Overview
 
@@ -53,4 +49,3 @@ The string passed here will be read out by screen-readers when the remove button
 A callback that gets invoked when clicking the remove button.
 For example, if the removal of a tag is controlled by a function, that function can
 be passed as a callback via this prop, and executed when clicking the remove button.
-

package/src/__future__/Tag/Tag/_docs/Tag.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as TagStories from "./Tag.stories"
 
 <Meta of={TagStories} />
@@ -12,11 +12,7 @@ import * as TagStories from "./Tag.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement="import { Tag } from `@kaizen/components/future`"
-/>
+<KAIOInstallation exportNames="Tag" isFuture />
 
 ## Overview
 

package/src/__future__/Workflow/_docs/ProgressStepper.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, ResourceLinks, KaioLegacyDocsNotification } from "~storybook/components"
+import { KAIOInstallation, ResourceLinks, KaioLegacyDocsNotification } from "~storybook/components"
 import * as ProgressStepperStories from "./ProgressStepper.stories"
 
 <Meta of={ProgressStepperStories} />
@@ -13,13 +13,9 @@ import * as ProgressStepperStories from "./ProgressStepper.stories"
   className="!mb-8"
 />
 
-
 <KaioLegacyDocsNotification version="1.16.0" />
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement="import { ProgressStepper } from `@kaizen/components/future`"
-/>
+<KAIOInstallation exportNames="ProgressStepper" isFuture />
 
 ## Overview
 

package/src/__future__/Workflow/_docs/Workflow.mdx

@@ -1,5 +1,5 @@
 import { ArgTypes, Canvas, Meta } from "@storybook/blocks"
-import { Installation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
+import { KAIOInstallation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
 import * as Workflow from "./Workflow.stories"
 import * as WorkflowFooter from "./WorkflowFooter.stories"
 import * as WorkflowHeader from "./WorkflowHeader.stories"
@@ -16,10 +16,7 @@ import * as WorkflowHeader from "./WorkflowHeader.stories"
 
 <KaioLegacyDocsNotification version="1.16.0" />
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Workflow } from "@kaizen/components/future"'
-/>
+<KAIOInstallation exportNames="Workflow" isFuture />
 
 ## Overview
 

package/src/__future__/Workflow/_docs/WorkflowFooter.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
+import { KAIOInstallation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
 import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 <Meta of={WorkflowFooterStories} />
@@ -16,10 +16,7 @@ import * as WorkflowFooterStories from "./WorkflowFooter.stories"
 
 <KaioLegacyDocsNotification version="1.16.0" />
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement="import { WorkflowFooter } from `@kaizen/components/future`"
-/>
+<KAIOInstallation exportNames="WorkflowFooter" isFuture />
 
 ## Overview
 

package/src/__future__/Workflow/_docs/WorkflowHeader.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
+import { KAIOInstallation, KaioLegacyDocsNotification, ResourceLinks } from "~storybook/components"
 import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 <Meta of={WorkflowHeaderStories} />
@@ -16,10 +16,7 @@ import * as WorkflowHeaderStories from "./WorkflowHeader.stories"
 
 <KaioLegacyDocsNotification version="1.16.0" />
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement="import { WorkflowHeader } from `@kaizen/components/future`"
-/>
+<KAIOInstallation exportNames="WorkflowHeader" isFuture />
 
 ## Overview