@kaizen/components 1.68.7 → 1.68.9

package/src/__actions__/Button/v3/_docs/Button--api-specification.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Meta, Controls, ArgTypes, DocsStory } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as exampleStories from "./Button.docs.stories"
-import * as specStories from "./Button.spec.stories"
+import { Canvas, Meta, Controls, ArgTypes, DocsStory } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as exampleStories from './Button.docs.stories'
+import * as specStories from './Button.spec.stories'
 
 <Meta title="Actions/Button/Button (v3)/API Specification" />
 
@@ -15,7 +15,7 @@ Updated Nov 19, 2024
   designGuidelines="/?path=/docs/actions-button-button-v3-usage-guidelines--docs"
 />
 
-<KAIOInstallation exportNames={["Button" ]} family="actions" version="3" />
+<KAIOInstallation exportNames={['Button']} family="actions" version="3" />
 
 ## Overview
 
@@ -25,7 +25,26 @@ The following example and table showcases the essential props that enable the co
 
 <Canvas of={exampleStories.Playground} />
 
-<Controls of={exampleStories.Playground} className="mb-64" include={["children", "hasHiddenLabel", "className",  "size", "variant", "isReversed", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending","pendingLabel", "hasHiddenPendingLabel" ]} />
+<Controls
+  of={exampleStories.Playground}
+  className="mb-64"
+  include={[
+    'children',
+    'hasHiddenLabel',
+    'className',
+    'size',
+    'variant',
+    'isReversed',
+    'onPress',
+    'icon',
+    'iconPosition',
+    'isFullWidth',
+    'isDisabled',
+    'isPending',
+    'pendingLabel',
+    'hasHiddenPendingLabel',
+  ]}
+/>
 
 ## Buttons and links
 
@@ -50,8 +69,8 @@ Reversed variants are handled via the `ReversedColors` Provider.
 To enable the reversed theme, you will need to wrap the component or application in the `ReversedColors` provider, ie:
 
 ```tsx
-import { Button } from "@kaizen/components/v3/actions"
-import { ReversedColors } from "@kaizen/components/v3/utilities"
+import { Button } from '@kaizen/components/v3/actions'
+import { ReversedColors } from '@kaizen/components/v3/utilities'
 // application code
 
 return (
@@ -74,15 +93,13 @@ One key change to the `Button`&apos;s API is the shift from `onClick` to React A
 Functionally this does not change the way we pass actions into `Button`. Consumers can safely replace `onClick` with `onPress` without any additional changes, ie:
 
 ```tsx
-<Button label="Submit" onClick={e => sumbit(e)}/>
+<Button label="Submit" onClick={(e) => sumbit(e)} />
 ```
 
 Can safely be replaced with the following:
 
 ```tsx
-<Button onPress={e => submit(e)}>
-  Submit
-</Button>
+<Button onPress={(e) => submit(e)}>Submit</Button>
 ```
 
 ### Button content and children
@@ -90,7 +107,7 @@ Can safely be replaced with the following:
 Labels and any button content can be passed into the `Button` as `children`. Content wrapped by the `Button` will be spaced evenly relative to the `size` prop.
 
 ```tsx
-<Button variant="secondary" onPress={e => submit(e)}>
+<Button variant="secondary" onPress={(e) => submit(e)}>
   Label
 </Button>
 ```
@@ -107,12 +124,11 @@ Set the position of the icon using the `iconPosition` prop. This will ensure con
 
 <Canvas of={exampleStories.ButtonWithIconEnd} />
 
-
 ### Icon-only `Button` and `hasHiddenLabel`
 
 To achieve an icon-only `Button` (previously: `IconButton`) use the `icon` prop and set `hasHiddenLabel` to `true`. This will visually hide the button's `children` and `pendingLabel`, while still announcing the content to screen readers.
 
-<Canvas of={exampleStories.IconButton} className="mb-32"  />
+<Canvas of={exampleStories.IconButton} className="mb-32" />
 
 This pattern ensures that the `Button`'s accessible name is determined by its children, which helps to announce relevant content to the screen readers, as with the [pending state](#pending-state). You can learn more about this [accessible pattern here](https://cultureamp.atlassian.net/wiki/spaces/PA/pages/3833331831/Accessible+button+and+link+labels).
 
@@ -132,7 +148,6 @@ As mentioned in the [previous section](#icon-only-button-and-hashiddenlabel), an
 
 <Canvas of={specStories.PendingIconButton} />
 
-
 ### Full width Buttons
 
 If a button is statically the full width of a container you can use the `isFullWidth` property.
@@ -147,4 +162,21 @@ The following table is a collection of additional React Aria and native HTML pro
 
 You can learn more about React Aria's Button API and advance configuration options [here](https://react-spectrum.adobe.com/react-aria/Button.html#props).
 
-<ArgTypes of={exampleStories.Playground} exclude={["children", "hasHiddenLabel", "className",  "size", "variant", "onPress", "icon", "iconPosition", "isFullWidth", "isDisabled", "isPending", "pendingLabel", "hasHiddenPendingLabel" ]} />
+<ArgTypes
+  of={exampleStories.Playground}
+  exclude={[
+    'children',
+    'hasHiddenLabel',
+    'className',
+    'size',
+    'variant',
+    'onPress',
+    'icon',
+    'iconPosition',
+    'isFullWidth',
+    'isDisabled',
+    'isPending',
+    'pendingLabel',
+    'hasHiddenPendingLabel',
+  ]}
+/>

package/src/__actions__/Button/v3/_docs/Button--usage-guidelines.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
-import * as Button from "./Button.docs.stories"
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import { ResourceLinks, Installation } from '~storybook/components'
+import * as Button from './Button.docs.stories'
 
 <Meta title="Actions/Button/Button (v3)/Usage Guidelines" />
 
@@ -25,6 +25,8 @@ Buttons allow users to perform an action. They have multiple styles for various
 
 <Canvas of={Button.Playground} />
 
-<Controls of={Button.Playground} include={["children", "variant", "size", "isDisabled", "icon", "iconPosition"]} className="mb-64" />
-
-
+<Controls
+  of={Button.Playground}
+  include={['children', 'variant', 'size', 'isDisabled', 'icon', 'iconPosition']}
+  className="mb-64"
+/>

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

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
-import * as MenuStories from "./Menu.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, Installation } from '~storybook/components'
+import * as MenuStories from './Menu.stories'
 
 <Meta of={MenuStories} />
 
@@ -26,4 +26,3 @@ A menu contains links to places or button actions. It does NOT show a selected i
 
 <Canvas of={MenuStories.Playground} />
 <Controls of={MenuStories.Playground} />
-

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

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as MenuStories from "./Menu.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as MenuStories from './Menu.stories'
 
 <Meta of={MenuStories} />
 
@@ -13,7 +13,11 @@ import * as MenuStories from "./Menu.stories"
 
 />
 
-<KAIOInstallation exportNames={["Menu", "MenuDropdown", "MenuList", "MenuItem"]} family="actions" version="2" />
+<KAIOInstallation
+  exportNames={['Menu', 'MenuDropdown', 'MenuList', 'MenuItem']}
+  family="actions"
+  version="2"
+/>
 
 ## Overview
 

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