@kaizen/components 1.68.7 → 1.68.8

package/src/Popover/_docs/Popover.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as PopoverStories from "./Popover.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as PopoverStories from './Popover.stories'
 
 <Meta of={PopoverStories} />
 
@@ -30,12 +30,14 @@ User can interact with popover content, including selecting text or clicking lin
 ```jsx
 const [referenceElementRef, Popover] = usePopover()
 
-return (<>
-  <button type="button" ref={referenceElementRef}>
-    Hello world
-  </button>
-  <Popover>Hello world</Popover>
-</>)
+return (
+  <>
+    <button type="button" ref={referenceElementRef}>
+      Hello world
+    </button>
+    <Popover>Hello world</Popover>
+  </>
+)
 ```
 
 The purpose of this hook is to abstract away some of the awkwardness with the
@@ -43,4 +45,4 @@ requirement of passing in refs with popper. We need to use `useState` instead
 of `useRef`, which may not be immediately intuitive.
 
 The popper documentation to help provide more context:
-  https://popper.js.org/react-popper/v2/hook/
+https://popper.js.org/react-popper/v2/hook/

package/src/ProgressBar/_docs/ProgressBar.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as ProgressBarStories from "./ProgressBar.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as ProgressBarStories from './ProgressBar.stories'
 
 <Meta of={ProgressBarStories} />
 
@@ -46,5 +46,4 @@ While `value` and `max` can be used to represent progress as either a percentage
 
 Due to the optional `label` prop, the progress bar does not have an accessible name. You can provide context for assistive technologies with aria attributes such as `aria-label` or `aria-labelledby`.
 
-
 <Canvas of={ProgressBarStories.AccessibleName} />

package/src/Radio/Radio/_docs/Radio.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import { LinkTo } from "~storybook/components/LinkTo"
-import * as RadioStories from "./Radio.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as RadioStories from './Radio.stories'
 
 <Meta of={RadioStories} />
 

package/src/Radio/RadioField/_docs/RadioField.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as RadioFieldStories from "./RadioField.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as RadioFieldStories from './RadioField.stories'
 
 <Meta of={RadioFieldStories} />
 

package/src/Radio/RadioGroup/_docs/RadioGroup.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as RadioGroupStories from "./RadioGroup.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as RadioGroupStories from './RadioGroup.stories'
 
 <Meta of={RadioGroupStories} />
 

package/src/RichTextEditor/EditableRichTextContent/_docs/EditableRichTextContent.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as EditableRichTextContentStories from "./EditableRichTextContent.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as EditableRichTextContentStories from './EditableRichTextContent.stories'
 
 <Meta of={EditableRichTextContentStories} />
 
@@ -26,12 +26,11 @@ The `EditableRichTextContent` indicates interactivity similar to a `text` or `te
 
 This differs from the [RichTextContent](/docs/components-richtexteditor-richtextcontent--docs) component, which is used to render `RichTextEditor` content as read-only text.
 
-
 ```tsx
-const [editMode, setEditMode] = useState<boolean>(false);
-const [rteData, setRTEData] = useState<EditorContentArray>([]);
+const [editMode, setEditMode] = useState<boolean>(false)
+const [rteData, setRTEData] = useState<EditorContentArray>([])
 
-const handleOnChange: RichTextEditorProps["onChange"] = editorState =>
+const handleOnChange: RichTextEditorProps['onChange'] = (editorState) =>
   setRTEData(editorState.toJSON().doc.content)
 
 if (editMode) {
@@ -43,9 +42,7 @@ if (editMode) {
   )
 }
 
-return (
-  <EditableRichTextContent content={rteData} onClick={() => setEditMode(true)} />
-)
+return <EditableRichTextContent content={rteData} onClick={() => setEditMode(true)} />
 ```
 
 <Canvas of={EditableRichTextContentStories.UsageExample} />

package/src/RichTextEditor/RichTextContent/_docs/RichTextContent.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as RichTextContentStories from "./RichTextContent.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as RichTextContentStories from './RichTextContent.stories'
 
 <Meta of={RichTextContentStories} />
 
@@ -20,7 +20,6 @@ To render rich content as it appears in the [RichTextEditor](/docs/components-ri
 <Canvas of={RichTextContentStories.Playground} />
 <Controls of={RichTextContentStories.Playground} />
 
-
 ## Usage
 
 A common use case of `RichTextContent` is to display user generated output as read-only text.
@@ -28,4 +27,3 @@ A common use case of `RichTextContent` is to display user generated output as re
 <Canvas of={RichTextContentStories.ReadOnly} />
 
 This should not be used out of the box to toggle between active and inactive states of the `RichTextEditor`. Instead we recommend using the [EditableRichTextContent](/docs/components-richtexteditor-editablerichtextcontent--docs#usage) pattern, which indicates interactivity to the user and ensures compliance with WCAG guidelines.
-

package/src/RichTextEditor/RichTextEditor/_docs/RichTextEditor.mdx

@@ -1,8 +1,8 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as EditableRichTextContentStories from "../../EditableRichTextContent/_docs/EditableRichTextContent.stories"
-import * as RichTextContentStories from "../../RichTextContent/_docs/RichTextContent.stories"
-import * as RichTextEditorStories from "./RichTextEditor.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as EditableRichTextContentStories from '../../EditableRichTextContent/_docs/EditableRichTextContent.stories'
+import * as RichTextContentStories from '../../RichTextContent/_docs/RichTextContent.stories'
+import * as RichTextEditorStories from './RichTextEditor.stories'
 
 <Meta of={RichTextEditorStories} />
 
@@ -40,7 +40,6 @@ With all controls, the Kaizen `RichTextEditor` can create and render formatted t
 
 <Canvas of={RichTextEditorStories.AllAvailableContent} />
 
-
 ### The EditorContentArray and defaultValue
 
 The `defaultValue` is the initial content of the `RichTextEditor`. It accepts an array of objects in the [ProseMirror's rich text format](https://cultureamp.atlassian.net/wiki/spaces/TV/pages/3380543671/ProseMirror+rich+formatted+text+data+format).
@@ -64,13 +63,14 @@ For example: if your `defaultValue` contains bolded text, you must pass bold int
 ```
 
 ### Data errors and onDataError
+
 When content is passed to the `defaultValue` that does not match to the `RichTextEditor`'s [schema](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/src/RichTextEditor/RichTextEditor/schema.ts), the component will throw and render a generic error.
 
 <Canvas of={RichTextEditorStories.MalformedContent} />
 
 This will also throw if you have passed in an `EditorContentArray` that contains data that cannot map to the `controls` provided to the component.
 
-<Canvas of={RichTextEditorStories.IncorrectDataForControls}/>
+<Canvas of={RichTextEditorStories.IncorrectDataForControls} />
 
 The `dataError` React Node and `onDataError` callback also allows you to handle these edge cases without breaking the page.
 
@@ -84,7 +84,6 @@ Sets the minimum height for the editable area of the RichTextEditor.
 
 <DocsStory of={RichTextEditorStories.Validation} />
 
-
 ### Inactive states and read-only text
 
 In addition to the `RichTextEditor`, there are two additional Kaizen components that support rendering data in the RTE format.
@@ -100,4 +99,3 @@ For rendering editable content that can toggle between an active and inactive st
 For rendering content as read-only text we recommend using the [RichTextContent](/docs/components-richtexteditor-richtextcontent--docs).
 
 <Canvas of={RichTextContentStories.Playground} />
-

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as ToggleIconButtonStories from "./ToggleIconButton.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as ToggleIconButtonStories from './ToggleIconButton.stories'
 
 <Meta of={ToggleIconButtonStories} />
 

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as ToolbarStories from "./Toolbar.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as ToolbarStories from './Toolbar.stories'
 
 <Meta of={ToolbarStories} />
 

package/src/SearchField/_docs/SearchField.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as SearchFieldStories from "./SearchField.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as SearchFieldStories from './SearchField.stories'
 
 <Meta of={SearchFieldStories} />
 

package/src/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} />
 
@@ -27,15 +27,19 @@ A select lets you choose options from an option menu. A single-select lets you c
 ## API
 
 ### Multi Select
+
 <Canvas of={SelectStories.MultiSelect} />
 
 ### Grouped options
+
 <Canvas of={SelectStories.Grouped} />
 
 ### Disabling options
+
 Adding the `isDisabled: true` key to your option object will disabled the item and prevent it from being selected.
 
 <Canvas of={SelectStories.Disabled} />
 
 ### Async
+
 <Canvas of={SelectStories.Async} />

package/src/Skirt/_docs/Skirt.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as SkirtStories from "./Skirt.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as SkirtStories from './Skirt.stories'
 
 <Meta of={SkirtStories} />
 
@@ -13,7 +13,7 @@ import * as SkirtStories from "./Skirt.stories"
 
 />
 
-<KAIOInstallation exportNames={["Skirt", "SkirtCard"]} />
+<KAIOInstallation exportNames={['Skirt', 'SkirtCard']} />
 
 ## Overview
 

package/src/Slider/_docs/Slider.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as SliderStories from "./Slider.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as SliderStories from './Slider.stories'
 
 <Meta of={SliderStories} />
 

package/src/SplitButton/_docs/SplitButton.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation, LinkTo } from "~storybook/components"
-import * as SplitButtonStories from "./SplitButton.stories"
+import { Canvas, Controls, DocsStory, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import * as SplitButtonStories from './SplitButton.stories'
 
 <Meta of={SplitButtonStories} />
 
@@ -35,6 +35,7 @@ Disable both buttons with `disabled`.
 #### Disabled MenuItem
 
 If you only want to disable an option within the dropdown, add `disabled` to the
+
 <LinkTo pageId="components-menu">MenuItem</LinkTo> instead of SplitButton.
 
 <Canvas of={SplitButtonStories.DisabledMenuItem} />

package/src/Table/_docs/Table.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TableStories from "./Table.stories"
+import { Canvas, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TableStories from './Table.stories'
 
 <Meta of={TableStories} />
 
@@ -14,7 +14,15 @@ import * as TableStories from "./Table.stories"
 />
 
 <KAIOInstallation
-  exportNames={["TableCard", "TableContainer", "TableHeader", "TableHeaderRow", "TableHeaderRowCell", "TableRow", "TableRowCell"]}
+  exportNames={[
+    'TableCard',
+    'TableContainer',
+    'TableHeader',
+    'TableHeaderRow',
+    'TableHeaderRowCell',
+    'TableRow',
+    'TableRowCell',
+  ]}
 />
 
 ## Overview
@@ -30,17 +38,21 @@ A table displays rows of data, including all data in a set, making it efficient
 Controls the spacing in each cell within the table. Options available are `compact`, `default` and `data`.
 
 #### Compact
+
 <Canvas of={TableStories.Data} />
 
 #### Default
+
 <Canvas of={TableStories.Default} />
 
 #### Data
+
 <Canvas of={TableStories.Data} />
 
 ## TableHeaderRowCell API
 
 ### Sorting
+
 <Canvas of={TableStories.Sorting} />
 
 ### Checkbox
@@ -56,6 +68,7 @@ When using providing `icon` to `TableHeaderRowCell` the `labelText` will be pass
 <Canvas of={TableStories.IconVariant} />
 
 ### Align and wrapping
+
 <Canvas of={TableStories.HeaderAlignmentAndWrapping} />
 
 ### Tooltips
@@ -67,11 +80,13 @@ While Tooltip content can be passed to any table header via the `tooltipInfo` pr
 You can read more about the Tooltip component and accessibility limitation [here](https://cultureamp.design/?path=/docs/components-tooltip--docs#screen-reader-accessibility).
 
 ### Reversed
+
 <Canvas of={TableStories.Reversed} />
 
 ## TableCard API
 
 ### Link
+
 <Canvas of={TableStories.LinkVariant} />
 
 ### Expandable
@@ -79,5 +94,3 @@ You can read more about the Tooltip component and accessibility limitation [here
 The `expandable` prop introduces known accessibility issues with nesting interactive elements as children of a `button` or `anchor` tag. We recommend avoiding this pattern if possible, or creating a tier 3 component that adheres to correct WCAG hierarchy.
 
 <Canvas of={TableStories.Expandable} />
-
-

package/src/Tabs/_docs/Tabs.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 of={TabsStories} />
 
@@ -13,13 +13,10 @@ import * as TabsStories from "./Tabs.stories"
 
 />
 
-<KAIOInstallation
-  exportNames={["Tabs", "TabList", "Tab", "TabPanels", "TabPanel"]}
-/>
+<KAIOInstallation exportNames={['Tabs', 'TabList', 'Tab', 'TabPanels', 'TabPanel']} />
 
 ## Overview
 
-
 <Canvas of={TabsStories.Playground} />
 <Controls of={TabsStories.Playground} />
 

package/src/Tag/_docs/Tag.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls , Meta, Unstyled } from "@storybook/blocks"
-import { InlineNotification } from "~components/Notification"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TagStories from "./Tag.stories"
+import { Canvas, Controls, Meta, Unstyled } from '@storybook/blocks'
+import { InlineNotification } from '~components/Notification'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TagStories from './Tag.stories'
 
 <Meta of={TagStories} />
 
@@ -17,7 +17,7 @@ import * as TagStories from "./Tag.stories"
 <Unstyled>
   <InlineNotification type="cautionary" persistent>
     {`This version of the Tag will soon be deprecated and will be removed in the next major release.
-    Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder` }
+    Import Tag from "@kaizen/components/future" for the latest version and veiw our migration guide in the Future folder`}
   </InlineNotification>
 </Unstyled>
 
@@ -33,48 +33,59 @@ Tags help users quickly recognize important information about items that organiz
 ## API
 
 ### Variants
+
 We have 3 different sets of combinations for various uses.
 
 #### Status
+
 Use status tags to show the status of surveys, reports, action plans, and performance feedback.
 
 <Canvas of={TagStories.Status} />
 
 #### Validation
+
 Use validation tags for indicating the validation state such as the Cautionary style for cautioning users that the item has a validation warning that could be addressed.
 
 <Canvas of={TagStories.Validation} />
 
 #### Sentiments
+
 Use sentiment tags only for sentiment or other employee feedback data.
 
 <Canvas of={TagStories.Sentiments} />
 
 ### Sizes
+
 **Note:** Icons and Avatars are not supported in `small` sizes.
 
 <Canvas of={TagStories.Sizes} />
 
 ### Avatar
+
 An Avatar can be added in two ways, either by importing the `<Avatar />` component and passing it in, or you can use the Avatar's props.
 
 **Note:** Avatar are not supported in `small` sizes.
 
 #### Import Avatar
+
 <Canvas of={TagStories.ProfileWithAvatarImport} />
 
 #### Avatar props
+
 <Canvas of={TagStories.ProfileWithAvatarProps} />
 
 ### Dismissable
+
 <Canvas of={TagStories.Dismissible} />
 
 ### TruncateWidth
+
 A pixel width which sets a limit for when the text starts to truncate.
 
 <Canvas of={TagStories.Truncate} />
 
 ### Inline
+
 Removes the default right-hand margin.
 
 <Canvas of={TagStories.Inline} />

package/src/Text/_docs/Text.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TextStories from "./Text.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TextStories from './Text.stories'
 
 <Meta of={TextStories} />
 

package/src/TextArea/_docs/TextArea.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import { LinkTo } from "~storybook/components/LinkTo"
-import * as TextAreaStories from "./TextArea.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as TextAreaStories from './TextArea.stories'
 
 <Meta of={TextAreaStories} />
 
@@ -37,6 +37,7 @@ You can use our <LinkTo pageId="components-label">Label</LinkTo> component
 ```
 
 ### Connecting a custom element
+
 For linking text that isn't in a `Label` you can use `aria-labelledBy`
 
 ```

package/src/TextAreaField/_docs/TextAreaField.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TextAreaFieldStories from "./TextAreaField.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TextAreaFieldStories from './TextAreaField.stories'
 
 <Meta of={TextAreaFieldStories} />
 
@@ -25,18 +25,23 @@ A text area includes a label and a longer area you can type multiple lines of te
 ## API
 
 ### Variant
+
 <Canvas of={TextAreaFieldStories.Variant} />
 
 ### Autogrow
-Autogrow expands the textarea as the user's typing exceeds the minimum height of  the text area.
+
+Autogrow expands the textarea as the user's typing exceeds the minimum height of the text area.
 
 <Canvas of={TextAreaFieldStories.Autogrow} />
 
 ### Description
+
 <Canvas of={TextAreaFieldStories.Description} />
 
 ### Validation
+
 <Canvas of={TextAreaFieldStories.Validation} />
 
 ### Reversed
+
 <Canvas of={TextAreaFieldStories.Reversed} />

package/src/TextField/_docs/TextField.mdx

@@ -1,7 +1,7 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import { LinkTo } from "~storybook/components/LinkTo"
-import * as TextFieldStories from "./TextField.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as TextFieldStories from './TextField.stories'
 
 <Meta of={TextFieldStories} />
 
@@ -28,16 +28,21 @@ Composed of <LinkTo pageId="components-label">Label</LinkTo>, <LinkTo pageId="co
 ## API
 
 ### Types
+
 <Canvas of={TextFieldStories.Types} />
 
 ### Description
+
 <Canvas of={TextFieldStories.Description} />
 
 ### Icon
+
 <Canvas of={TextFieldStories.IconStory} />
 
 ### Validation
+
 <Canvas of={TextFieldStories.Validation} />
 
 ### Reversed
+
 <Canvas of={TextFieldStories.Reversed} />

package/src/Tile/InformationTile/_docs/InformationTile.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as InformationTileStories from "./InformationTile.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as InformationTileStories from './InformationTile.stories'
 
 <Meta of={InformationTileStories} />
 
@@ -29,8 +29,9 @@ A visually interesting item in a list consisting of a card, visual, title, metad
 <Canvas of={InformationTileStories.Variants} />
 
 ### Information
-<Canvas of={InformationTileStories.Information} />
 
+<Canvas of={InformationTileStories.Information} />
 
 ### Information Button Label
+
 <Canvas of={InformationTileStories.TileWithCustomInfoLabel} />

package/src/Tile/MultiActionTile/_docs/MultiActionTile.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as MultiActionTileStories from "./MultiActionTile.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as MultiActionTileStories from './MultiActionTile.stories'
 
 <Meta of={MultiActionTileStories} />
 
@@ -29,7 +29,9 @@ A visually interesting item in a list consisting of a card, visual, title, metad
 <Canvas of={MultiActionTileStories.Variants} />
 
 ### Secondary Action
+
 <Canvas of={MultiActionTileStories.SecondaryAction} />
 
 ### Information
+
 <Canvas of={MultiActionTileStories.Information} />