@kaizen/components 1.39.1 → 1.40.0

package/src/Notification/InlineNotification/_docs/InlineNotification.mdx

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

package/src/Notification/ToastNotification/_docs/ToastNotification.mdx

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

package/src/Pagination/_docs/Pagination.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 PaginationStories from "./Pagination.stories"
 
 <Meta of={PaginationStories} />
@@ -13,11 +13,7 @@ import * as PaginationStories from "./Pagination.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Pagination } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Pagination" />
 
 ## Overview
 

package/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.mdx

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

package/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, LinkTo } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
 import * as PaginationLinkStories from "./PaginationLink.stories"
 
 <Meta of={PaginationLinkStories} />
@@ -13,11 +13,7 @@ import * as PaginationLinkStories from "./PaginationLink.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { PaginationLink } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="PaginationLink" />
 
 ## Overview
 
@@ -25,4 +21,3 @@ A link that represents pages. Usually part of <LinkTo pageId="components-paginat
 
 <Canvas of={PaginationLinkStories.Playground} />
 <Controls of={PaginationLinkStories.Playground} />
-

package/src/Popover/_docs/Popover.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 PopoverStories from "./Popover.stories"
 
 <Meta of={PopoverStories} />
@@ -13,11 +13,7 @@ import * as PopoverStories from "./Popover.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Popover } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Popover" />
 
 ## Overview
 

package/src/ProgressBar/_docs/ProgressBar.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 ProgressBarStickersheetStories from "./ProgressBar.stickersheet.stories"
 import * as ProgressBarStories from "./ProgressBar.stories"
 
@@ -14,11 +14,7 @@ import * as ProgressBarStories from "./ProgressBar.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { ProgressBar } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="ProgressBar" />
 
 ## Overview
 

package/src/Radio/Radio/_docs/Radio.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 RadioStories from "./Radio.stories"
 
@@ -12,11 +12,7 @@ import * as RadioStories from "./Radio.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Radio } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Radio" />
 
 ## Overview
 

package/src/Radio/RadioField/_docs/RadioField.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 RadioFieldStories from "./RadioField.stories"
 
 <Meta of={RadioFieldStories} />
@@ -13,11 +13,7 @@ import * as RadioFieldStories from "./RadioField.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { RadioField } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="RadioField" />
 
 ## Overview
 

package/src/Radio/RadioGroup/_docs/RadioGroup.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 RadioGroupStories from "./RadioGroup.stories"
 
 <Meta of={RadioGroupStories} />
@@ -13,11 +13,7 @@ import * as RadioGroupStories from "./RadioGroup.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { RadioGroup } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="RadioGroup" />
 
 ## Overview
 

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.mdx

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

package/src/RichTextEditor/RichTextContent/_docs/RichTextContent.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 RichTextContentStories from "./RichTextContent.stories"
 
 <Meta of={RichTextContentStories} />
@@ -11,11 +11,7 @@ import * as RichTextContentStories from "./RichTextContent.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { RichTextContent } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="RichTextContent" />
 
 ## Overview
 

package/src/RichTextEditor/RichTextEditor/RichTextEditor.spec.stories.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react"
-import { expect } from "@storybook/jest"
 import { StoryObj } from "@storybook/react"
-import { userEvent, within } from "@storybook/testing-library"
+import { expect, userEvent, within } from "@storybook/test"
 import { EditorContentArray } from "../types"
 import { RichTextEditor, RichTextEditorProps } from "./RichTextEditor"
 

package/src/RichTextEditor/RichTextEditor/_docs/RichTextEditor.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 RichTextEditorStories from "./RichTextEditor.stories"
 
 <Meta of={RichTextEditorStories} />
@@ -13,11 +13,7 @@ import * as RichTextEditorStories from "./RichTextEditor.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { RichTextEditor } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="RichTextEditor" />
 
 ## Overview
 
@@ -46,5 +42,3 @@ If your default value does not conform correctly, the RTE will throw an error.
 <DocsStory of={RichTextEditorStories.Description} />
 
 <DocsStory of={RichTextEditorStories.Validation} />
-
-

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.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 ToggleIconButtonStories from "./ToggleIconButton.stories"
 
 <Meta of={ToggleIconButtonStories} />
@@ -11,11 +11,7 @@ import * as ToggleIconButtonStories from "./ToggleIconButton.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { ToggleIconButton } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="ToggleIconButton" />
 
 ## Overview
 

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.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 ToolbarStories from "./Toolbar.stories"
 
 <Meta of={ToolbarStories} />
@@ -11,11 +11,7 @@ import * as ToolbarStories from "./Toolbar.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Toolbar } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Toolbar" />
 
 ## Overview
 

package/src/SearchField/_docs/SearchField.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 SearchFieldStories from "./SearchField.stories"
 
 <Meta of={SearchFieldStories} />
@@ -13,11 +13,7 @@ import * as SearchFieldStories from "./SearchField.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { SearchField } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="SearchField" />
 
 ## Overview
 

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