@kaizen/components 1.39.2 → 1.40.0

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

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

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

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

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

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

package/src/Loading/LoadingSpinner/_docs/LoadingSpinner.mdx

@@ -1,16 +1,11 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation } from "~storybook/components"
 import * as LoadingSpinnerStories from "./LoadingSpinner.stories"
 
 <Meta of={LoadingSpinnerStories} />
 
 # LoadingSpinner
 
-{/*
-  * @todo:
-  * - Adjust Github link (if needed)
-  * - Add Figma and Design Guidelines (Confluence) link
-  */}
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/LoadingSpinner"
   figma=""
@@ -18,11 +13,7 @@ import * as LoadingSpinnerStories from "./LoadingSpinner.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { LoadingSpinner } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="LoadingSpinner" />
 
 ## Overview
 

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

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

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

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

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

package/src/MultiSelect/_docs/MultiSelect.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, SbReleaseNotification} from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, SbReleaseNotification} from "~storybook/components"
 import * as MultiSelectStories from "./MultiSelect.stories"
 
 <Meta of={MultiSelectStories} />
@@ -14,10 +14,7 @@ import * as MultiSelectStories from "./MultiSelect.stories"
 
 <SbReleaseNotification />
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { MultiSelect } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="MultiSelect" />
 
 ## Overview
 

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

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