@kaizen/components 1.39.1 → 1.40.0

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.spec.tsx

@@ -1,5 +1,5 @@
 import React, { useState, FocusEvent } from "react"
-import { render, screen, waitFor } from "@testing-library/react"
+import { render, screen, waitFor, within } from "@testing-library/react"
 import userEvent from "@testing-library/user-event"
 import { DateRange } from "~components/Calendar"
 import { FilterDateRangePickerField, FilterDateRangePickerFieldProps } from "."
@@ -92,10 +92,11 @@ describe("<FilterDateRangePickerField />", () => {
         expect(inputStartDate).toHaveValue("2 May 2022")
         expect(inputEndDate).toHaveValue("22 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "1st May (Sunday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "1",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputStartDate)
         await user.clear(inputStartDate)
@@ -108,7 +109,7 @@ describe("<FilterDateRangePickerField />", () => {
           expect(startDateOnBlur).toHaveBeenCalled()
           expect(inputEndDate).toHaveValue("22 May 2022")
           expect(endDateOnBlur).not.toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
 
@@ -132,10 +133,11 @@ describe("<FilterDateRangePickerField />", () => {
         expect(inputStartDate).toHaveValue("1 May 2022")
         expect(inputEndDate).toHaveValue("22 May 2022")
 
-        const targetDay = screen.getByRole("button", {
-          name: "31st May (Tuesday)",
+        const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+        const targetDay = within(targetMonth).getByRole("gridcell", {
+          name: "31",
         })
-        expect(targetDay).not.toHaveAttribute("aria-pressed")
+        expect(targetDay).not.toHaveAttribute("aria-selected")
 
         await user.click(inputEndDate)
         await user.clear(inputEndDate)
@@ -148,7 +150,7 @@ describe("<FilterDateRangePickerField />", () => {
           expect(startDateOnBlur).not.toHaveBeenCalled()
           expect(inputEndDate).toHaveValue("31 May 2022")
           expect(endDateOnBlur).toHaveBeenCalled()
-          expect(targetDay).toHaveAttribute("aria-pressed", "true")
+          expect(targetDay).toHaveAttribute("aria-selected", "true")
         })
       })
     })
@@ -236,14 +238,15 @@ describe("<FilterDateRangePickerField />", () => {
       const inputStartDate = screen.getByLabelText("Date from")
       expect(inputStartDate).toHaveValue("15 May 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputStartDate).toHaveValue("12 May 2022")
       })
     })
@@ -261,14 +264,15 @@ describe("<FilterDateRangePickerField />", () => {
       const inputEndDate = screen.getByLabelText("Date to")
       expect(inputEndDate).toHaveValue("15 Jun 2022")
 
-      const targetDay = screen.getByRole("button", {
-        name: "23rd June (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "June 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "23",
       })
-      expect(targetDay).not.toHaveAttribute("aria-pressed")
+      expect(targetDay).not.toHaveAttribute("aria-selected")
       await user.click(targetDay)
 
       await waitFor(() => {
-        expect(targetDay).toHaveAttribute("aria-pressed", "true")
+        expect(targetDay).toHaveAttribute("aria-selected", "true")
         expect(inputEndDate).toHaveValue("23 Jun 2022")
       })
     })
@@ -288,8 +292,9 @@ describe("<FilterDateRangePickerField />", () => {
       expect(inputStartDate).toHaveValue("15 May 2022")
       expect(inputEndDate).toHaveValue("22 May 2022")
 
-      const firstSelectedDay = screen.getByRole("button", {
-        name: "15th May (Sunday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const firstSelectedDay = within(targetMonth).getByRole("gridcell", {
+        name: "15",
       })
       await user.click(firstSelectedDay)
 
@@ -455,7 +460,7 @@ describe("<FilterDateRangePickerField />", () => {
             )
             // End date in Calendar is deselected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(1)
           })
 
@@ -470,7 +475,7 @@ describe("<FilterDateRangePickerField />", () => {
             expect(dateEndErrorContainer).not.toBeInTheDocument()
             // End date in Calendar is re-selected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(3)
           })
         })
@@ -499,7 +504,7 @@ describe("<FilterDateRangePickerField />", () => {
             )
             // End date in Calendar is deselected
             expect(
-              screen.getAllByRole("button", { pressed: true }).length
+              screen.getAllByRole("gridcell", { selected: true }).length
             ).toEqual(1)
           })
         })
@@ -636,8 +641,9 @@ describe("<FilterDateRangePickerField />", () => {
         )
       })
 
-      const targetDay = screen.getByRole("button", {
-        name: "12th May (Thursday)",
+      const targetMonth = screen.getByRole("grid", { name: "May 2022" })
+      const targetDay = within(targetMonth).getByRole("gridcell", {
+        name: "12",
       })
       await user.click(targetDay)
 

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} />
-

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