@kaizen/components 1.68.7 → 1.68.9

package/src/Modal/ContextModal/_docs/ContextModal.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as ContextModalStories from "./ContextModal.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as ContextModalStories from './ContextModal.stories'
 
 <Meta of={ContextModalStories} />
 
@@ -28,10 +28,13 @@ May be useful for first time users. Heavily optional. Visual aid is good. Primar
 ### Layout
 
 #### Portrait (Default)
+
 <Canvas of={ContextModalStories.Portrait} />
 
 #### Landscape
+
 <Canvas of={ContextModalStories.Landscape} />
 
 ### Unpadded
+
 <Canvas of={ContextModalStories.Unpadded} />

package/src/Modal/GenericModal/_docs/GenericModal.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 GenericModal from "./GenericModal.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { LinkTo } from '~storybook/components/LinkTo'
+import * as GenericModal from './GenericModal.stories'
 
 <Meta of={GenericModal} />
 
@@ -17,6 +17,7 @@ import * as GenericModal from "./GenericModal.stories"
 ## Overview
 
 Usually part of compositions such as
+
 <LinkTo pageId="components-modals-confirmationmodal">Confirmation Modal</LinkTo>,
 <LinkTo pageId="components-modals-roadblockmodal">Road block Modal</LinkTo>,
 <LinkTo pageId="components-modals-context-modal">Context Modal</LinkTo>

package/src/Modal/InputEditModal/_docs/InputEditModal.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as InputEditModalStories from "./InputEditModal.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as InputEditModalStories from './InputEditModal.stories'
 
 <Meta of={InputEditModalStories} />
 
@@ -36,4 +36,3 @@ There are instances, such as single input modals, where shifting focus may not i
 <Canvas of={InputEditModalStories.OnAfterEnter} sourceState="shown" />
 
 As both the button and input label have clear intent and the focus does not skip past crucial content, this should provide enough context for an end user.
-

package/src/MultiSelect/_docs/MultiSelect.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as MultiSelectStories from "./MultiSelect.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as MultiSelectStories from './MultiSelect.stories'
 
 <Meta of={MultiSelectStories} />
 
@@ -33,7 +33,6 @@ export type MultiSelectOption = {
   // Used for "value" attribute in option - must be unique
   value: string | number
 }
-
 ```
 
 <Canvas of={MultiSelectStories.Items} />

package/src/Notification/GlobalNotification/_docs/GlobalNotification.mdx

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

package/src/Notification/InlineNotification/_docs/InlineNotification.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta, Description} from "@storybook/blocks"
-import { KAIOInstallation, ResourceLinks } from "~storybook/components"
-import * as InlineNotificationExamples from "./InlineNotification.stories"
+import { Canvas, Controls, Meta, Description } from '@storybook/blocks'
+import { KAIOInstallation, ResourceLinks } from '~storybook/components'
+import * as InlineNotificationExamples from './InlineNotification.stories'
 
 <Meta of={InlineNotificationExamples} />
 
@@ -25,7 +25,6 @@ import * as InlineNotificationExamples from "./InlineNotification.stories"
 
 <Controls of={InlineNotificationExamples.Playground} />
 
-
 ### persistent
 
 <Description of={InlineNotificationExamples.Persistent} />

package/src/Notification/ToastNotification/_docs/ToastNotification.mdx

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

package/src/Pagination/_docs/Pagination.mdx

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

package/src/Pagination/subcomponents/DirectionalLink/_docs/DirectionalLink.mdx

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

package/src/Pagination/subcomponents/PaginationLink/_docs/PaginationLink.mdx

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

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