@kaizen/components 1.68.7 → 1.68.8

package/src/__actions__/Menu/v3/_docs/ApiSpecification.mdx

@@ -1,14 +1,15 @@
-import { Canvas, Controls, Meta, Source } from "@storybook/blocks"
-import { KAIOInstallation, ResourceLinks,  SbContent } from "~storybook/components"
-import * as docsStories from "./Menu.docs.stories"
-import * as exampleStories from "./Menu.stories"
+import { Canvas, Controls, Meta, Source } from '@storybook/blocks'
+import { KAIOInstallation, ResourceLinks, SbContent } from '~storybook/components'
+import * as docsStories from './Menu.docs.stories'
+import * as exampleStories from './Menu.stories'
 
-<Meta title="Actions/Menu/v3/API Specification"/>
+<Meta title="Actions/Menu/v3/API Specification" />
 
 <SbContent>
   # Menu API Specification (v3)
 
-  Updated July 4, 2024
+Updated July 4, 2024
+
 </SbContent>
 
 <ResourceLinks
@@ -23,24 +24,34 @@ import * as exampleStories from "./Menu.stories"
     ### Disclaimer
 
     The `Menu` `v3` component is not backwards compatible with Kaizen `Button` `v1` and `v2`. For this reason, usage of this component is not recommended until a `Button` `v3` is released.
+
   </div>
 </SbContent>
 
 <SbContent className="mb-24">
 
-  <KAIOInstallation exportNames={["Menu", "MenuTrigger", "MenuItem"]} family="actions" version="3" />
+{' '}
+
+<KAIOInstallation exportNames={['Menu', 'MenuTrigger', 'MenuItem']} family="actions" version="3" />
+
+{' '}
 
-  <Source code={"import { Popover, Section, Header } from \"@kaizen/components/v3/react-aria-components\""} language="tsx" />
+<Source
+  code={'import { Popover, Section, Header } from "@kaizen/components/v3/react-aria-components"'}
+  language="tsx"
+/>
+
+## Overview
 
-  ## Overview
+A menu displays a list of actions in a popover, toggled opened with a button.
 
-  A menu displays a list of actions in a popover, toggled opened with a button.
 </SbContent>
 
 <Canvas
   className="mb-64"
   of={exampleStories.Basic}
-  source={{code: `
+  source={{
+    code: `
 <MenuTrigger>
   <Button><Icon name="more_horiz" alt="Actions" /></Button>
   <Popover>
@@ -50,24 +61,24 @@ import * as exampleStories from "./Menu.stories"
     </Menu>
   </Popover>
 </MenuTrigger>
-  `}}
+  `,
+  }}
 />
 
 <SbContent className="mb-64">
   ### React Aria
 
-  This component is built using the `react-aria-components` library and extends the [Menu component](https://react-spectrum.adobe.com/react-aria/Menu.html).
+This component is built using the `react-aria-components` library and extends the [Menu component](https://react-spectrum.adobe.com/react-aria/Menu.html).
 
-  As this shares the same core [anatomy](https://react-spectrum.adobe.com/react-aria/Menu.html#anatomy), [props types](https://react-spectrum.adobe.com/react-aria/Menu.html#menu-1) and [functionality](https://react-spectrum.adobe.com/react-aria/Menu.html#features), the guidance below is tailored to our implementation and should cover known use cases of the Menu.
+As this shares the same core [anatomy](https://react-spectrum.adobe.com/react-aria/Menu.html#anatomy), [props types](https://react-spectrum.adobe.com/react-aria/Menu.html#menu-1) and [functionality](https://react-spectrum.adobe.com/react-aria/Menu.html#features), the guidance below is tailored to our implementation and should cover known use cases of the Menu.
 
-  More on the React Aria API and a deep dive into other examples can be found via the [React Aria docs page](https://react-spectrum.adobe.com/react-aria/Menu.html) if not present below.
-</SbContent>
+More on the React Aria API and a deep dive into other examples can be found via the [React Aria docs page](https://react-spectrum.adobe.com/react-aria/Menu.html) if not present below.
 
-<SbContent className="mb-12">
-  ## API
 </SbContent>
 
-<Controls of={exampleStories.Basic}  />
+<SbContent className="mb-12">## API</SbContent>
+
+<Controls of={exampleStories.Basic} />
 
 ## Actions and Next.js routing
 
@@ -76,7 +87,7 @@ Use the `href` prop when an action navigates to a new page.
 
 Otherwise, use the `onAction` prop to trigger an action within the page.
 
-<Canvas className="mb-24" of={docsStories.Actions}  />
+<Canvas className="mb-24" of={docsStories.Actions} />
 
 ## Typeahead
 
@@ -84,22 +95,22 @@ Typeahead (the ability to quickly skip to an item by typing a few characters aft
 
 If you're passing `ReactNode` into `MenuItem` `children`, you'll need to specify the `textValue` prop manually on `MenuItem` in order for typeahead to work.
 
-<Canvas className="mb-24" of={exampleStories.RichContent}  />
+<Canvas className="mb-24" of={exampleStories.RichContent} />
 
 ## Sections
 
 Sections can be added with the `Section` and `Header` component from `react-aria-components`.
 
-<Canvas className="mb-24" of={exampleStories.WithSections}  />
+<Canvas className="mb-24" of={exampleStories.WithSections} />
 
 ## Disabling items
 
 Menu items can be disabled with the `isDisabled` prop.
 
-<Canvas className="mb-24" of={exampleStories.DisabledItems}  />
+<Canvas className="mb-24" of={exampleStories.DisabledItems} />
 
 ## Controlled
 
 By default, the open/closed state of the menu is handled under the hood. In cases where you need control over the open state, use the `isOpen` and `onOpenChange` props on the `MenuTrigger` component (both props must be used for this to work).
 
-<Canvas className="mb-24" of={exampleStories.Controlled}  />
+<Canvas className="mb-24" of={exampleStories.Controlled} />

package/src/__actions__/Menu/v3/_docs/Menu.mdx

@@ -1,14 +1,21 @@
-import { Canvas, Meta, Controls } from "@storybook/blocks"
-import { ResourceLinks, SbContent, Installation, DosAndDonts, DoOrDont } from "~storybook/components"
-import * as MenuDocsStories from "./Menu.docs.stories"
-import * as MenuStories from "./Menu.stories"
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import {
+  ResourceLinks,
+  SbContent,
+  Installation,
+  DosAndDonts,
+  DoOrDont,
+} from '~storybook/components'
+import * as MenuDocsStories from './Menu.docs.stories'
+import * as MenuStories from './Menu.stories'
 
 <Meta title="Actions/Menu/v3/Usage Guidelines" />
 
 <SbContent>
   # Menu (v3)
 
-  Updated July 6, 2024
+Updated July 6, 2024
+
 </SbContent>
 
 <ResourceLinks
@@ -24,14 +31,16 @@ import * as MenuStories from "./Menu.stories"
     importStatement='import { MenuTrigger, Menu, MenuItem } from "@kaizen/components/v3/actions"'
   />
 
-  ## Overview
+## Overview
+
+A menu displays a list of actions in a popover, toggled opened with a button.
 
-  A menu displays a list of actions in a popover, toggled opened with a button.
 </SbContent>
 
 <Canvas
   of={MenuStories.Playground}
-  source={{code: `
+  source={{
+    code: `
 <TooltipTrigger>
   <Button>
     <Icon name="more_horiz" alt="Additional actions" />
@@ -44,42 +53,41 @@ import * as MenuStories from "./Menu.stories"
     </Menu>
   </Popover>
 </TooltipTrigger>
-  `}}
- />
-<Controls of={MenuStories.Playground} include={["placement", "isOpen"]} className="mb-64" />
-
+  `,
+  }}
+/>
+<Controls of={MenuStories.Playground} include={['placement', 'isOpen']} className="mb-64" />
 
 <SbContent className="mb-64">
   ### Anatomy
 
-  - A Menu is made up of:
-    - A trigger button
-    - A popover
-    - A list of menu items
-  - Menu items may be organised into sections, with a heading for each section.
-  - The menu trigger button, which may be any variation of a button.
-</SbContent>
+- A Menu is made up of:
+  - A trigger button
+  - A popover
+  - A list of menu items
+- Menu items may be organised into sections, with a heading for each section.
+- The menu trigger button, which may be any variation of a button.
 
+</SbContent>
 
 <SbContent className="mb-64">
   ### When to use
 
-  - When you have a group of related actions for a page or item on the page.
-  - The actions either:
-    - Cause an action on the page (e.g. delete), or
-    - Navigate somewhere
+- When you have a group of related actions for a page or item on the page.
+- The actions either: - Cause an action on the page (e.g. delete), or - Navigate somewhere
+
 </SbContent>
 
 <SbContent className="mb-64">
   ### When not to use
 
-  - When you want to persist a user selection.
-    - Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
-  - When you want additional elements beyond a list of menu items (e.g. a search input)
-    - Use a Modal, or construct your own pattern with a Popover.
-    - It's recommended that you avoid this because of the complexity it adds for accessibility.
-  - Inside a navigation bar
-    - Different DOM elements and behaviour is required for a dropdown menu in a navigation bar.
+- When you want to persist a user selection.
+  - Use a Select/Multi-Select or Combobox/Multi-Combobox component instead.
+- When you want additional elements beyond a list of menu items (e.g. a search input)
+  - Use a Modal, or construct your own pattern with a Popover.
+  - It's recommended that you avoid this because of the complexity it adds for accessibility.
+- Inside a navigation bar - Different DOM elements and behaviour is required for a dropdown menu in a navigation bar.
+
 </SbContent>
 
 <div className="flex flex-col mt-16 gap-40 mb-64">
@@ -93,6 +101,7 @@ import * as MenuStories from "./Menu.stories"
       <DoOrDont story={MenuDocsStories.ItemsDo} />
       <DoOrDont story={MenuDocsStories.ItemsDont} isDont />
     </DosAndDonts>
+
   </div>
 </div>
 
@@ -107,10 +116,10 @@ import * as MenuStories from "./Menu.stories"
     <DosAndDonts>
       <DoOrDont story={MenuDocsStories.SelectionDont} isDont />
     </DosAndDonts>
+
   </div>
 </div>
 
-
 <div className="flex flex-col mt-16 gap-40 mb-64">
   <div className="flex flex-col m-0 gap-16">
     <SbContent>
@@ -122,6 +131,7 @@ import * as MenuStories from "./Menu.stories"
       <DoOrDont story={MenuDocsStories.LabelChevronDo} />
       <DoOrDont story={MenuDocsStories.LabelChevronDont} isDont />
     </DosAndDonts>
+
   </div>
 </div>
 
@@ -141,6 +151,7 @@ import * as MenuStories from "./Menu.stories"
       <DoOrDont story={MenuDocsStories.LabelDo} />
       <DoOrDont story={MenuDocsStories.LabelDont} isDont />
     </DosAndDonts>
+
   </div>
 </div>
 
@@ -160,14 +171,15 @@ import * as MenuStories from "./Menu.stories"
       <DoOrDont story={MenuDocsStories.ItemsDo} />
       <DoOrDont story={MenuDocsStories.IconsDont} isDont />
     </DosAndDonts>
+
   </div>
 </div>
 
 <div className="flex flex-col mt-16 gap-40 mb-64">
   <div className="flex flex-col m-0 gap-16">
     <SbContent>
-      #### Don't repeat the same word in the menu item labels
-      Context may be useful in some cases, but avoid adding context if it will be repeated in every menu item label.
+      #### Don't repeat the same word in the menu item labels Context may be useful in some cases,
+      but avoid adding context if it will be repeated in every menu item label.
     </SbContent>
     <DosAndDonts>
       <DoOrDont story={MenuDocsStories.MenuItemLabelsDont} isDont />
@@ -178,11 +190,11 @@ import * as MenuStories from "./Menu.stories"
 <div className="flex flex-col mt-16 gap-40 mb-64">
   <div className="flex flex-col m-0 gap-16">
     <SbContent>
-      #### Do use sentence case for menu items
-      Write menu items in sentence case unless they contain words that are branded terms.
+      #### Do use sentence case for menu items Write menu items in sentence case unless they contain
+      words that are branded terms.
     </SbContent>
     <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.SentenceCaseDo}/>
+      <DoOrDont story={MenuDocsStories.SentenceCaseDo} />
       <DoOrDont story={MenuDocsStories.SentenceCaseDont} isDont />
     </DosAndDonts>
   </div>
@@ -191,11 +203,12 @@ import * as MenuStories from "./Menu.stories"
 <div className="flex flex-col mt-16 gap-40 mb-64">
   <div className="flex flex-col m-0 gap-16">
     <SbContent>
-      #### Don't use elipses in menu items
-      Avoid using ellipses (…) in menu item names within products whenever possible. An ellipsis often implies that the action for a menu item will open in a new view, or that a user will be taken elsewhere.
+      #### Don't use elipses in menu items Avoid using ellipses (…) in menu item names within
+      products whenever possible. An ellipsis often implies that the action for a menu item will
+      open in a new view, or that a user will be taken elsewhere.
     </SbContent>
     <DosAndDonts>
-      <DoOrDont story={MenuDocsStories.ElipsesDo}/>
+      <DoOrDont story={MenuDocsStories.ElipsesDo} />
       <DoOrDont story={MenuDocsStories.ElipsesDont} isDont />
     </DosAndDonts>
   </div>

package/src/__future__/Icon/_docs/Icon--api-specification.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls, Story } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as IconStories from "./Icon.docs.stories"
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as IconStories from './Icon.docs.stories'
 
 <Meta title="Illustrations/Icon/Icon (Future)/API Specification" />
 
@@ -20,9 +20,16 @@ Updated September 4, 2024
 Add the following (CDN for the variable icon font) to your Storybook `preview-head.html` and to the `<head>` of your apps.
 
 ```html
-<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
-<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=block" />
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=block" />
+<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
+<link
+  rel="preload"
+  as="style"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=block"
+/>
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0&display=block"
+/>
 ```
 
 ## Overview
@@ -80,12 +87,12 @@ The Icon component inherits the color from its parent by default. You may also c
 There are two ways to change the size of the icon:
 
 1. (Recommended) Change the value of the `--icon-size` CSS variable (eg. in Tailwind - `[--icon-size:48]`).
-This option will also scale the [optical size](https://m3.material.io/styles/icons/applying-icons#b41cbc01-9b49-4a44-a525-d153d1ea1425) of the icon.
-Note that the value must be a whole number value without units.
+   This option will also scale the [optical size](https://m3.material.io/styles/icons/applying-icons#b41cbc01-9b49-4a44-a525-d153d1ea1425) of the icon.
+   Note that the value must be a whole number value without units.
 
 2. Override the `font-size` CSS attribute (eg. in Tailwind - `text-[1em]`).
-This option will not scale the optical size of the icon for you, so you will need to combine it with also
-overriding the `--icon-optical-size` CSS variable (eg. in Tailwind - `[--icon-optical-size:48]`).
+   This option will not scale the optical size of the icon for you, so you will need to combine it with also
+   overriding the `--icon-optical-size` CSS variable (eg. in Tailwind - `[--icon-optical-size:48]`).
 
 <Canvas of={IconStories.Size} />
 

package/src/__future__/Icon/_docs/Icon--usage-guidelines.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls, Story } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from "~storybook/components"
-import * as IconStories from "./Icon.docs.stories"
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
+import * as IconStories from './Icon.docs.stories'
 
 <Meta title="Illustrations/Icon/Icon (Future)/Usage Guidelines" />
 
@@ -21,7 +21,7 @@ Updated September 13, 2024
 Icons are simplified visual symbols that represent ideas, objects, or actions. They improve comprehension, guide interactivity, and draw attention to important information.
 
 <Canvas of={IconStories.Playground} />
-<Controls of={IconStories.Playground} include={["name", "isFilled"]} />
+<Controls of={IconStories.Playground} include={['name', 'isFilled']} />
 
 ### When to use
 
@@ -39,6 +39,7 @@ Icons are simplified visual symbols that represent ideas, objects, or actions. T
 ### Specs
 
 When you need a new icon, use [Google's Material Symbols set](https://fonts.google.com/icons) via the [Figma plugin](https://www.figma.com/community/plugin/1088610476491668236/material-symbols) to add the relevant icons in:
+
 - **Outlined**
 - **Weight**: 400
 - **Grade**: Normal (0)

package/src/__future__/Select/_docs/Select.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as SelectStories from "./Select.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as SelectStories from './Select.stories'
 
 <Meta of={SelectStories} />
 
@@ -25,6 +25,7 @@ import * as SelectStories from "./Select.stories"
 ### Options
 
 Provide options in `items` in the `SelectOption` format to populate the options.
+
 ```ts
 export type SelectOption = {
   label: string
@@ -32,20 +33,21 @@ export type SelectOption = {
   disabled?: boolean
   options?: never
 }
-
 ```
+
 <Canvas of={SelectStories.SingleItems} />
 
 ### Grouped options
 
 Group options by providing your `items` in the `SelectOptionGroup` format.
+
 ```ts
 export type SelectOptionGroup<Option extends SelectOption> = {
   label: string
   options: Iterable<Option>
 }
-
 ```
+
 <Canvas of={SelectStories.GroupedItems} />
 
 ### Disabled options
@@ -87,11 +89,13 @@ Note that the `ref` exists as part of these spread props (there is a second arg
 ### Validation
 
 Add validation messages using `status` and `validationMessage`.
+
 <Canvas of={SelectStories.Validation} />
 
 ### Full width
 
 Set `isFullWidth` to `true` to have the Select span the full width of its container.
+
 <Canvas of={SelectStories.FullWidth} />
 
 ### Portals

package/src/__future__/Tabs/_docs/Tabs--api-specification.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TabsStories from "./Tabs.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TabsStories from './Tabs.stories'
 
 <Meta title="Components/Tabs/Tabs (Future)/API Specification" />
 
@@ -13,10 +13,7 @@ import * as TabsStories from "./Tabs.stories"
 
 />
 
-<KAIOInstallation
-  exportNames={["Tabs", "TabList", "Tab", "TabPanel"]}
-  isFuture
-/>
+<KAIOInstallation exportNames={['Tabs', 'TabList', 'Tab', 'TabPanel']} isFuture />
 
 ## Overview
 
@@ -31,7 +28,6 @@ If you need to control the state of the active tabs on the consuming side, use t
 
 <Canvas of={TabsStories.Controlled} />
 
-
 ## `tablist|tab` role vs `nav|link`
 
 This component implements the `tablist` role and WAI ARIA guidelines for tabs:

package/src/__future__/Tabs/_docs/Tabs--migration-guide.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks"
+import { Meta } from '@storybook/blocks'
 
 <Meta title="Components/Tabs/Tabs (Future)/Migration Guide" />
 
@@ -17,6 +17,7 @@ The Reach UI and React Aria APIs are fairly similar so there's not too much to a
 The biggest adjustment is that you now need to provide an `id` for each `<Tab>` and match it with the one on `<TabPanel>`
 
 Additionally:
+
 - `<TabPanel>`s no longer needs to be wrapped in a `<TabPanels>` component
 - `classNameOverride` changes to `className`
 - `<Tabs defaultIndex={}>` changes to `<Tabs defaultSelectedKey={}>`
@@ -52,9 +53,13 @@ Additionally:
   <TabList>
     <Tab id="one">Tab 1</Tab>
     <Tab id="two">Tab 2</Tab>
-    <Tab id="three" isDisabled>Disabled tab</Tab>
+    <Tab id="three" isDisabled>
+      Disabled tab
+    </Tab>
   </TabList>
-  <TabPanel id="one" className="p-4">Content 1</TabPanel>
+  <TabPanel id="one" className="p-4">
+    Content 1
+  </TabPanel>
   <TabPanel id="two">Content 2</TabPanel>
 </Tabs>
 ```
@@ -85,7 +90,9 @@ Additionally:
   <TabList>
     <Tab id="one">Tab 1</Tab>
     <Tab id="two">Tab 2</Tab>
-    <Tab id="three" isDisabled>Disabled tab</Tab>
+    <Tab id="three" isDisabled>
+      Disabled tab
+    </Tab>
   </TabList>
   <TabPanel id="one">Content 1</TabPanel>
   <TabPanel id="two">Content 2</TabPanel>

package/src/__future__/Tag/RemovableTag/_docs/RemovableTag.mdx

@@ -1,14 +1,12 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as RemovableTagStories from "./RemovableTag.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as RemovableTagStories from './RemovableTag.stories'
 
 <Meta of={RemovableTagStories} />
 
 # RemovableTag
 
-<ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__future__/Tag/RemovableTag.tsx"
-/>
+<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__future__/Tag/RemovableTag.tsx" />
 
 <KAIOInstallation exportNames="RemovableTag" />
 

package/src/__future__/Tag/Tag/_docs/Tag-migration-guide.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta } from "@storybook/blocks"
-import * as LegacyTagStories from "../../../../Tag/_docs/Tag.stories"
-import * as TagMigrationStories from "./Tag-migration-guide.stories"
+import { Canvas, Meta } from '@storybook/blocks'
+import * as LegacyTagStories from '../../../../Tag/_docs/Tag.stories'
+import * as TagMigrationStories from './Tag-migration-guide.stories'
 
 <Meta of={TagMigrationStories} />
 
@@ -27,14 +27,13 @@ There were a number key changes between current and future `Tag` to achieve the
 - `Avatar` and all child content must now be composed by the consumer.
   - This offers a greater degree of flexibility to ensure that the right accessible context can be provided to the end user.
 
-
 ## Migration examples
 
 The following are example of migrating from previously available props to the composable solution.
 
 ### Status
 
-With the `variant` prop there are four values associated with statuses:  `statusLive`, `statusDraft`, `statusClosed`, `statusAction`.
+With the `variant` prop there are four values associated with statuses: `statusLive`, `statusDraft`, `statusClosed`, `statusAction`.
 
 For the most part these can all be replaced with the use of the `color` prop, with exception to the `live` status.
 
@@ -42,14 +41,13 @@ For the most part these can all be replaced with the use of the `color` prop, wi
 
 <Canvas of={LegacyTagStories.Status} />
 
-
 #### After
 
-<Canvas of={TagMigrationStories.StatusMigration} sourceState="shown"/>
+<Canvas of={TagMigrationStories.StatusMigration} sourceState="shown" />
 
 While the `LiveIcon` is exported from `@kaizen/components` the current `Tag` uses an animated implementation, which is not exported directly from Kaizen. As an interim solution, you can use the following Story's code snippet to create a `LiveIconComponent`. This can then be passed into the future `Tag` as `Children`.
 
-<Canvas of={TagMigrationStories.LiveIconComponentStory} sourceState="hidden"/>
+<Canvas of={TagMigrationStories.LiveIconComponentStory} sourceState="hidden" />
 
 ### Validation
 
@@ -63,8 +61,7 @@ Note: because the icons convey meaning, they should have an accessible label tha
 
 #### After
 
-<Canvas of={TagMigrationStories.ValidationMigration} sourceState="shown"/>
-
+<Canvas of={TagMigrationStories.ValidationMigration} sourceState="shown" />
 
 Note: When using the `icon` prop, the icon's color will be determined by the `color` value that has been set. This is to ensure that an accessible contrast ratio is achieved.
 
@@ -80,7 +77,7 @@ While migration of any `Tag` using, `sentimentPositive`, `sentimentNeutral` or `
 
 #### After
 
-<Canvas of={TagMigrationStories.SentimentsMigration} sourceState="shown"/>
+<Canvas of={TagMigrationStories.SentimentsMigration} sourceState="shown" />
 
 If required, you could use `classNameOverride` to implement the same UI. It is important that any override of the default styles still meets minimum contrast ratios to ensure the component is accessible.
 
@@ -88,7 +85,6 @@ If required, you could use `classNameOverride` to implement the same UI. It is i
 
 This is also a good time to stop and check if this change is necessary. If there is an opportunity remove older styles that are no longer available, this can help to reduce inconsistencies across the platform. As always, check in with your designer to see if any new option can be used in its place.
 
-
 ### Dismissible
 
 The `dismissible` prop is no longer available in the future `Tag` component. We have split the dismissible functionality into the [RemovableTag](/docs/components-tag-future-removabletag--docs).
@@ -101,11 +97,10 @@ This increases the hit box for the dismiss button and makes the `ariaLabel` in t
 
 #### After
 
-<Canvas of={TagMigrationStories.DismissibleMigration} sourceState="shown"/>
+<Canvas of={TagMigrationStories.DismissibleMigration} sourceState="shown" />
 
 Remember that when handling dismiss (or any destructive action), a user's focus should not be lost on the page.
 
-
 ### Avatars
 
 Avatars are no longer provided directly to the `Tag` as a prop. Instead they will be passed in as children.
@@ -116,8 +111,7 @@ Avatars are no longer provided directly to the `Tag` as a prop. Instead they wil
 
 #### After
 
-<Canvas of={TagMigrationStories.AvatarMigration} sourceState="shown"/>
-
+<Canvas of={TagMigrationStories.AvatarMigration} sourceState="shown" />
 
 Note: The use of `ps-4` (or `padding-inline-start`) in the `classNameOverride` is to override the default spacing at start of the `Tag`. This will ensure the Avatar can contour the border radius of the `Tag`.
 
@@ -139,11 +133,10 @@ In future `Tag` this has been removed so consumers can now control spacing with
 
 #### After
 
-<Canvas of={TagMigrationStories.InlineMigration} sourceState="shown"/>
+<Canvas of={TagMigrationStories.InlineMigration} sourceState="shown" />
 
 To simplify this example we have avoided DOM elements such as `ul` and `li`. In production, lists should be used if you are rendering a group of `Tag`s.
 
-
 ### truncationWidth
 
 While the current Tag controls truncation via the `truncationWidth` prop, which set a `max-width` of inner text via inline styles, we have chosen not to adopt this in the future `Tag` as it presents a risk of violating accessibility standards. While truncation can still be achieved in future `Tag` via Tailwind or DOM manipulation, it is important to call out out this as a accessibility concern.
@@ -162,11 +155,10 @@ The two sizes for tag have been remove in favour of a default size in between `m
 
 `classNameOverride` can be leveraged to add padding and modify properties but should be done with caution to reduce inconsistencies in the platform and reduce the risk of accessibility violations.
 
-
 #### Before
 
 <Canvas of={LegacyTagStories.Sizes} />
 
 #### After
 
-<Canvas of={TagMigrationStories.SizesMigration} sourceState="shown"/>
+<Canvas of={TagMigrationStories.SizesMigration} sourceState="shown" />