@kaizen/components 1.39.2 → 1.40.0

package/src/Checkbox/CheckboxGroup/_docs/CheckboxGroup.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 CheckboxGroupStories from "./CheckboxGroup.stories"
 
 <Meta of={CheckboxGroupStories} />
 
 # CheckboxGroup
 
-{/*
-  * @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/CheckboxGroup"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%EF%B8%8F%F0%9F%96%BC%EF%B8%8F-Component-Gallery?node-id=6%3A4586&t=P1w10jr2cpPuaayw-1"
@@ -18,11 +13,7 @@ import * as CheckboxGroupStories from "./CheckboxGroup.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { CheckboxGroup } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="CheckboxGroup" />
 
 ## Overview
 

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

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

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

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

package/src/Content/_docs/Content.mdx

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

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

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

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

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

package/src/ErrorPage/hooks/useErrorMessages.ts

@@ -24,13 +24,13 @@ export const useErrorMessages = (
     400: {
       title: formatMessage({
         id: "kzErrorPage.400.title",
-        defaultMessage: "Your request has slipped into the void",
+        defaultMessage: "Problem loading page",
         description: "Heading for page",
       }),
       message: formatMessage({
         id: "kzErrorPage.400.message",
         defaultMessage:
-          "Sorry but your request couldn’t be completed. Go back and try again, or head to Home",
+          "Problem loading page right now. Try again or head home.",
         description: "Call to action instructions for the user",
       }),
     },
@@ -63,7 +63,7 @@ export const useErrorMessages = (
     404: {
       title: formatMessage({
         id: "kzErrorPage.404.title",
-        defaultMessage: "Missing pages are one of life's mysteries",
+        defaultMessage: "Page not found",
         description: "Main title of page",
       }),
       message: formatMessage({
@@ -89,7 +89,7 @@ export const useErrorMessages = (
     422: {
       title: formatMessage({
         id: "kzErrorPage.422.title",
-        defaultMessage: "Change never comes easy",
+        defaultMessage: "Change couldn't be made",
         description: "Main title of page",
       }),
       message: formatMessage({

package/src/FieldGroup/_docs/FieldGroup.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 FieldGroupStories from "./FieldGroup.stories"
 
@@ -12,11 +12,7 @@ import * as FieldGroupStories from "./FieldGroup.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FieldGroup } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="FieldGroup" />
 
 ## Overview
 
@@ -36,5 +32,3 @@ Changes the FieldGroup to an inline element with no bottom margin. This can be s
 #### Default (block)
 
 <Canvas of={FieldGroupStories.Default} />
-
-

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

package/src/Filter/Filter/_docs/Filter.mdx

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

package/src/Filter/FilterBar/_docs/FilterBar.mdx

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

package/src/Filter/FilterButton/_docs/filter-buttons.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { Installation, ResourceLinks } from "~storybook/components"
+import { KAIOInstallation, ResourceLinks } from "~storybook/components"
 import * as FilterButtonExamples from "./FilterButton.stories"
 import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories"
 
@@ -12,13 +12,9 @@ import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories"
   className="!mb-8"
 />
 
-
 Trigger buttons for use by components using the `<Filter>` abstraction.
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FilterButton, FilterButtonRemovable } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames={["FilterButton", "FilterButtonRemovable"]} />
 
 ## Filter Button
 

package/src/Filter/FilterDatePicker/FilterDatePicker.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 {
   FilterButton,
   FilterButtonProps,

package/src/Filter/FilterDatePicker/_docs/FilterDatePicker.mdx

@@ -1,5 +1,5 @@
 import { Controls, Description, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, NoClipCanvas } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
 import * as FilterDPStories from "./FilterDatePicker.stories"
 
 <Meta of={FilterDPStories} />
@@ -13,13 +13,9 @@ import * as FilterDPStories from "./FilterDatePicker.stories"
   className="!mb-8"
 />
 
-
 Date Picker to use for Filtering by a single date.
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FilterDatePicker } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="FilterDatePicker" />
 
 ## Playground
 <NoClipCanvas of={FilterDPStories.Playground} />

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.mdx

@@ -1,5 +1,5 @@
 import { Controls, Description, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation, NoClipCanvas } from "~storybook/components"
+import { ResourceLinks, KAIOInstallation, NoClipCanvas } from "~storybook/components"
 import * as FilterDRPStories from "./FilterDateRangePicker.stories"
 
 <Meta of={FilterDRPStories} />
@@ -13,13 +13,9 @@ import * as FilterDRPStories from "./FilterDateRangePicker.stories"
   className="!mb-8"
 />
 
-
 Date Range Picker to use for Filtering.
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { FilterDateRangePicker } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="FilterDateRangePicker" />
 
 ## Playground
 <NoClipCanvas of={FilterDRPStories.Playground} />

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stickersheet.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from "react"
 import { StaticIntlProvider } from "@cultureamp/i18n-react-intl"
 import { action } from "@storybook/addon-actions"
 import { Meta } from "@storybook/react"
-import { within, userEvent } from "@storybook/testing-library"
+import { within, userEvent } from "@storybook/test"
 import isChromatic from "chromatic"
 import { DateRange } from "~components/Calendar"
 import {

package/src/Filter/FilterSelect/_docs/FilterSelect.mdx

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

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

package/src/Heading/_docs/Heading.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 HeadingStories from "./Heading.stories"
 
 <Meta of={HeadingStories} />
@@ -12,11 +12,7 @@ import * as HeadingStories from "./Heading.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Heading } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Heading" />
 
 ## Overview
 Renders a heading element `h1-h6` and applies styling for headings.
@@ -34,4 +30,3 @@ People using a screen reader rely on heading elements to get an understanding of
 In most cases, you will need to use the `tag` prop to adjust the heading level to suit your page.
 
 There will the odd case where you want heading styling, but the text isn't actually acting as a heading. In those cases, use `tag="div"` or `tag="span"`.
-

package/src/Icon/bin/update-icons.sh

@@ -1,7 +1,7 @@
 #!/bin/bash
 
-yarn svgo -f ./assets/svgs/icons -o ./src/Icon/bin/built-svgs/
+pnpm svgo -f ./assets/svgs/icons -o ./src/Icon/bin/built-svgs/
 
 ts-node ./src/Icon/bin/wrapSVGs.ts --source-dir ./src/Icon/bin/built-svgs --output-dir ./src/Icon --delete-source-dir
 
-yarn prettier -w ./src/Icon
+pnpm prettier -w ./src/Icon

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

package/src/Illustration/Scene/_docs/Scene.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 Stickersheets from "./Scene.stickersheet.stories"
 import * as SceneStories from "./Scene.stories"
 
@@ -13,8 +13,7 @@ import * as SceneStories from "./Scene.stories"
 />
 
 
-<Installation
-  installCommand="yarn add @kaizen/components"
+<KAIOInstallation
 />
 
 ## Overview

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

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

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

package/src/Input/InputSearch/_docs/InputSearch.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 InputSearchStories from "./InputSearch.stories"
 
 <Meta of={InputSearchStories} />
@@ -11,11 +11,7 @@ import * as InputSearchStories from "./InputSearch.stories"
   className="!mb-8"
 />
 
-
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { InputSearch } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="InputSearch" />
 
 ## Overview
 
@@ -46,4 +42,3 @@ Adding text will automatically show the clear button.
 ## Reversed
 
 <Canvas of={InputSearchStories.Reversed} />
-