@kaizen/components 1.39.2 → 1.40.0

package/locales/sv.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Din begäran kunde tyvärr inte slutföras. Gå tillbaka och försök igen, eller gå till startsidan."
+    "message" : "Sidan kan inte läsas in just nu. Försök igen eller gå tillbaka till startsidan."
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "Din begäran svävar i rymden"
+    "message" : "Sidan kan inte läsas in"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
@@ -55,7 +55,7 @@
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
-    "message" : "Saknade sidor är ett av livets mysterier"
+    "message" : "Sidan hittades inte"
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
@@ -71,7 +71,7 @@
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
-    "message" : "Förändring är aldrig lätt"
+    "message" : "Ändringen kunde inte utföras"
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",

package/locales/th.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "ขออภัย ไม่สามารถดำเนินการตามคำขอของคุณ กลับไปลองอีกครั้งหรือไปที่หน้าแรก"
+    "message" : "เกิดปัญหาในการโหลดหน้าเว็บในขณะนี้ ลองอีกครั้งหรือไปที่หน้าแรก"
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "คำขอของคุณหลุดเข้าไปในโมฆะ"
+    "message" : "เกิดปัญหาในการโหลดหน้าเว็บ"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
@@ -55,7 +55,7 @@
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
-    "message" : "หน้าหายไปเป็นหนึ่งในความลึกลับของชีวิต"
+    "message" : "ไม่พบหน้าเว็บ"
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
@@ -71,7 +71,7 @@
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
-    "message" : "การเปลี่ยนแปลงไม่ได้เกิดขึ้นง่ายๆ"
+    "message" : "ไม่สามารถทำการเปลี่ยนแปลงได้"
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",

package/locales/tl.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Pasensya na pero hindi nakumpleto ang kahilingan mo.  Bumalik at subukan ulit, o pumunta sa Home"
+    "message" : "Nagkakaproblema sa pag-load ng page sa ngayon. Subukan ulit o bumalik sa home."
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "Nawala ang iyong kahilingan"
+    "message" : "Nagkakaproblema sa pag-load ng page"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
@@ -55,7 +55,7 @@
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
-    "message" : "Isa sa mga misteryo ng buhay ang mga nawawalang page"
+    "message" : "Hindi nahanap ang page"
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
@@ -71,7 +71,7 @@
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
-    "message" : "Hindi talaga madali ang pagbabago"
+    "message" : "Hindi nagawa ang pagbabago"
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",

package/locales/tr.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Üzgünüz, isteğiniz tamamlanamadı. Geri dönün ve yeniden deneyin ya da Ana Sayfa'ya gidin"
+    "message" : "Şu anda sayfa yüklenirken sorun oluştu. Tekrar deneyin veya ana sayfaya gidin."
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "İsteğiniz boşluğa düştü"
+    "message" : "Sayfa yüklenirken sorun oluştu"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
@@ -55,7 +55,7 @@
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
-    "message" : "Kayıp sayfalar hayatın gizemlerinden biridir"
+    "message" : "Sayfa bulunamadı"
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
@@ -71,7 +71,7 @@
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
-    "message" : "Değişim asla kolay değildir"
+    "message" : "Değişiklik gerçekleştirilemedi"
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",

package/locales/uk.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "На жаль, не вдалося виконати ваш запит. Поверніться та повторіть спробу або перейдіть на Головну"
+    "message" : "Не вдалося зараз завантажити сторінку. Спробуйте ще раз або перейдіть на Головну."
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "Ваш запит зник"
+    "message" : "Не вдалося завантажити сторінку"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
@@ -55,7 +55,7 @@
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
-    "message" : "Зниклі сторінки — одна із загадок життя"
+    "message" : "Сторінку не знайдено"
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
@@ -71,7 +71,7 @@
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
-    "message" : "Зміни ніколи не даються легко"
+    "message" : "Не вдалося внести зміни"
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",

package/locales/vi.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "Rất tiếc, không thể hoàn thành yêu cầu của bạn. Hãy quay lại và thử lại hoặc đi tới Trang chủ"
+    "message" : "Sự cố tải trang ngay bây giờ. Hãy thử lại hoặc đi tới trang chủ."
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "Yêu cầu của bạn không còn hiệu lực"
+    "message" : "Sự cố khi tải trang"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
@@ -55,7 +55,7 @@
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
-    "message" : "Những trang bị thiếu là một trong những bí ẩn của cuộc sống"
+    "message" : "Không tìm thấy trang"
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
@@ -71,7 +71,7 @@
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
-    "message" : "Thay đổi không bao giờ dễ dàng"
+    "message" : "Không thể thực hiện thay đổi"
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",

package/locales/zh-TW.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "抱歉，無法完成您的請求。返回重試，或前往首頁"
+    "message" : "現在載入頁面時出現問題。重試或前往首頁。"
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "您的請求無效"
+    "message" : "載入頁面時出現問題"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
@@ -55,7 +55,7 @@
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
-    "message" : "頁面總是無緣無故不知所蹤"
+    "message" : "未找到頁面"
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
@@ -71,7 +71,7 @@
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
-    "message" : "改變從來都不是一件容易的事"
+    "message" : "無法更改"
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",

package/locales/zh.json

@@ -27,11 +27,11 @@
   },
   "kzErrorPage.400.message" : {
     "description" : "Call to action instructions for the user",
-    "message" : "很抱歉，您的请求无法完成。请返回并重试，或前往主页"
+    "message" : "现在加载页面时出现问题。请重试，或前往主页。"
   },
   "kzErrorPage.400.title" : {
     "description" : "Heading for page",
-    "message" : "您的请求已失效"
+    "message" : "加载页面时出现问题"
   },
   "kzErrorPage.401.message" : {
     "description" : "Call to action instructions for the user",
@@ -55,7 +55,7 @@
   },
   "kzErrorPage.404.title" : {
     "description" : "Main title of page",
-    "message" : "页面缺失是人生的谜团之一"
+    "message" : "未找到页面"
   },
   "kzErrorPage.413" : {
     "description" : "Call to action instructions for the user",
@@ -71,7 +71,7 @@
   },
   "kzErrorPage.422.title" : {
     "description" : "Main title of page",
-    "message" : "改变从来都不是一件容易的事"
+    "message" : "无法进行更改"
   },
   "kzErrorPage.500" : {
     "description" : "Call to action instructions for the user",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.39.2",
+  "version": "1.40.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -25,27 +25,10 @@
   "sideEffects": [
     "styles.css"
   ],
-  "scripts": {
-    "prepublishOnly": "yarn build:components && yarn build:styles && yarn postBuild && yarn dist:clean",
-    "build": "yarn clean && yarn prepublishOnly",
-    "test": "FORCE_COLOR=1 jest",
-    "test:ci": "yarn test --ci",
-    "test:treeshake": "agadoo ./dist/esm/index.mjs",
-    "clean": "rimraf dist node_modules",
-    "build:components": "rollup -c",
-    "build:styles": "postcss styles/global.css --output dist/global.css",
-    "compile": "tsc",
-    "dist:clean": "rm ./dist/global.css ./dist/raw-styles.css",
-    "dist:combine-styles": "concat-cli -f ./dist/*.css ./dist/esm/*.css -o ./dist/raw-styles.css",
-    "dist:postcss": "postcss dist/raw-styles.css --output dist/styles.css",
-    "postBuild": "yarn dist:combine-styles && yarn dist:postcss",
-    "update-icons": "./src/Icon/bin/update-icons.sh"
-  },
   "dependencies": {
     "@floating-ui/react-dom": "^2.0.5",
     "@headlessui/react": "<=1.5.0",
     "@internationalized/date": "^3.5.1",
-    "@kaizen/hosted-assets": "^2.0.3",
     "@popperjs/core": "^2.11.8",
     "@reach/tabs": "^0.18.0",
     "@react-aria/button": "^3.9.1",
@@ -89,7 +72,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^2.6.2",
     "use-debounce": "^10.0.0",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "@kaizen/hosted-assets": "2.0.3"
   },
   "dependenciesComments": {
     "react-day-picker": "Version locked until a11y gets fixed (https://github.com/gpbl/react-day-picker/pull/1708)"
@@ -98,8 +82,6 @@
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
     "@cultureamp/frontend-apis": "^9.2.0",
     "@cultureamp/i18n-react-intl": "^2.1.10",
-    "@kaizen/design-tokens": "^10.3.17",
-    "@kaizen/tailwind": "^1.2.3",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
@@ -127,11 +109,29 @@
     "svgo": "^3.2.0",
     "ts-jest": "^29.1.1",
     "ts-patch": "^3.1.2",
-    "typescript-transform-paths": "^3.4.6"
+    "typescript-transform-paths": "^3.4.6",
+    "@kaizen/design-tokens": "10.3.17",
+    "@kaizen/tailwind": "1.2.3"
   },
   "peerDependencies": {
     "@cultureamp/i18n-react-intl": "^2.1.10",
     "react": "^18.2.0",
     "react-intl": "^6.6.0"
+  },
+  "scripts": {
+    "build": "pnpm clean && pnpm prepublishOnly",
+    "test": "FORCE_COLOR=1 jest",
+    "test:ci": "pnpm test -- --ci",
+    "test:treeshake": "agadoo ./dist/esm/index.mjs",
+    "clean": "rimraf dist",
+    "build:components": "rollup -c",
+    "build:styles": "postcss styles/global.css --output dist/global.css",
+    "compile": "tsc",
+    "dist:clean": "rm ./dist/global.css ./dist/raw-styles.css",
+    "dist:combine-styles": "concat-cli -f ./dist/*.css ./dist/esm/*.css -o ./dist/raw-styles.css",
+    "dist:postcss": "postcss dist/raw-styles.css --output dist/styles.css",
+    "postBuild": "pnpm dist:combine-styles && pnpm dist:postcss",
+    "update-icons": "./src/Icon/bin/update-icons.sh",
+    "i18n:extract": "pnpm i18n-extract"
   }
-}
+}

package/src/Avatar/_docs/Avatar.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 AvatarStories from "./Avatar.stories"
 
 <Meta of={AvatarStories} />
@@ -14,10 +14,7 @@ import * as AvatarStories from "./Avatar.stories"
 />
 
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Avatar } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Avatar" />
 
 ## Overview
 

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

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

package/src/Brand/_docs/Brand.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 BrandStories from "./Brand.stories"
 
 <Meta of={BrandStories} />
@@ -14,10 +14,7 @@ import * as BrandStories from "./Brand.stories"
 />
 
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Brand } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Brand" />
 
 ## Overview
 

package/src/BrandMoment/_docs/BrandMoment.mdx

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

package/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -196,7 +196,7 @@ export const Error: Story = {
     illustration: <BrandMomentError {...illustrationProps} />,
     header: <FakeNavBar />,
     text: {
-      title: "Missing pages are one of life's mysteries",
+      title: "Page not found",
     },
     body: (
       <>

package/src/Button/Button/_docs/Button.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 ButtonStories from "./Button.stories"
 
 <Meta of={ButtonStories} />
@@ -14,10 +14,7 @@ import * as ButtonStories from "./Button.stories"
 />
 
 
-<Installation
-  installCommand="yarn add @kaizen/components"
-  importStatement='import { Button } from "@kaizen/components"'
-/>
+<KAIOInstallation exportNames="Button" />
 
 ## Overview
 

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

package/src/ButtonGroup/_docs/ButtonGroup.stories.tsx

@@ -17,7 +17,7 @@ const meta = {
     },
     isInKaio: true,
     installation: [
-      "yarn add @kaizen/components",
+      "pnpm add @kaizen/components",
       "import { ButtonGroup } from `@kaizen/components`",
     ],
     resourceLinks: {

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

package/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { within } from "@storybook/testing-library"
+import { within } from "@storybook/test"
 import {
   StickerSheet,
   StickerSheetStory,

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

package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react"
 import { Meta } from "@storybook/react"
-import { within } from "@storybook/testing-library"
+import { within } from "@storybook/test"
 import {
   StickerSheet,
   StickerSheetStory,

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

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

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