@kaizen/components 1.68.7 → 1.68.9

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

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

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TagStories from "./Tag.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TagStories from './Tag.stories'
 
 <Meta of={TagStories} />
 
@@ -21,7 +21,6 @@ Note: Tag does not yet have feature parity with the legacy Tag component. The go
 component was to have a more flexible version of legacy Tag, and we will slowly add more functionality
 to this component until we reach feature parity.
 
-
 ## API
 
 <Canvas of={TagStories.Playground} />

package/src/__overlays__/Focusable/v3/_docs/ApiSpecification.mdx

@@ -1,13 +1,14 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { KAIOInstallation, ResourceLinks,  SbContent } from "~storybook/components"
-import * as exampleStories from "./Focusable.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { KAIOInstallation, ResourceLinks, SbContent } from '~storybook/components'
+import * as exampleStories from './Focusable.stories'
 
-<Meta title="Overlays/Focusable/v3/API Specification"/>
+<Meta title="Overlays/Focusable/v3/API Specification" />
 
 <SbContent>
   # Focusable API Specification (v3)
 
-  Updated June 25, 2024
+Updated June 25, 2024
+
 </SbContent>
 
 <ResourceLinks
@@ -18,21 +19,21 @@ import * as exampleStories from "./Focusable.stories"
 <SbContent className="mb-24">
   <KAIOInstallation exportNames={["Focusable"]} family="overlays" version="3" />
 
-  ## Overview
+## Overview
+
+Focusable is a utility wrapper to allow users to add focus to a non-focusable element.
 
-  Focusable is a utility wrapper to allow users to add focus to a non-focusable element.
+The main use case is for non semantic components like `Tag` that need a [Tooltip](/docs/overlays-tooltip-v3-usage-guidelines--docs).
 
-  The main use case is for non semantic components like `Tag` that need a [Tooltip](/docs/overlays-tooltip-v3-usage-guidelines--docs).
 </SbContent>
 
 <Canvas className="mb-24" of={exampleStories.Playground} />
 
 <SbContent className="mb-64">
-  Be aware that this does not negate the need to meet A11Y standards and best practices. Use this utility wrapper with caution.
+  Be aware that this does not negate the need to meet A11Y standards and best practices. Use this
+  utility wrapper with caution.
 </SbContent>
 
-<SbContent className="mb-12">
-  ## API
-</SbContent>
+<SbContent className="mb-12">## API</SbContent>
 
-<Controls of={exampleStories.Playground}  />
+<Controls of={exampleStories.Playground} />

package/src/__overlays__/Tooltip/v1/_docs/Tooltip.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, Installation } from "~storybook/components"
-import * as TooltipStories from "./Tooltip.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, Installation } from '~storybook/components'
+import * as TooltipStories from './Tooltip.stories'
 
 <Meta of={TooltipStories} />
 
@@ -20,7 +20,6 @@ import * as TooltipStories from "./Tooltip.stories"
 
 It is recommended that you import from the `v2` entry point.
 
-
 ## Overview
 
 Adds a popover that will show on hover or focus of the child element, with simple text content.
@@ -33,6 +32,7 @@ Adds a popover that will show on hover or focus of the child element, with simpl
 This component wasn't built with accessibility in mind, as a result it's quite easy to implement a tooltip in a non-accessible way. A rethink and rewrite is likely for the future.
 
 There's two major accessibility concerns here:
+
 - Keyboard only users
 - Screen reader (or similar assistive tech) users
 
@@ -68,7 +68,6 @@ Again, try to keep the contents of your children as simple as possible, ideally
 When your direct child is not semantic, you will get a console warning like this:
 `<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info.`
 
-
 ### Tooltips, Kaizen components and avoiding common pitfalls
 
 While technically any Kaizen component can be wrapped by a `Tooltip`, as called out previously, only those with [accessible roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) like `button`, `link` or `heading`, will be readable to assistive technologies.
@@ -117,7 +116,7 @@ Without either of these, the `Tooltip` content will not be readable to keyboard
 
 Seen in the example below simple `Tag`s with plain text as `children` will not accessible to keyboard users or assistive technologies as it's direct descendant is a `div` with no semantic `role`.
 
-<Canvas of={TooltipStories.TagWithHoverOnlyTooltip}  />
+<Canvas of={TooltipStories.TagWithHoverOnlyTooltip} />
 
 While `Tooltip` should be avoided if there are no interactive states within the `Tag`, internal elements like buttons or links can be wrapped in a `Tooltip` component to add necessary context.
 
@@ -136,4 +135,3 @@ In the example above, the `Tooltip` content `"Select all users"` is accessible t
 <Canvas of={TooltipStories.CheckboxFieldWithDescriptionTooltip} />
 
 In these instances, `aria-describedby` can be leveraged to provide a description to the input.
-

package/src/__overlays__/Tooltip/v2/_docs/Tooltip.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { ResourceLinks, KAIOInstallation } from "~storybook/components"
-import * as TooltipStories from "./Tooltip.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import * as TooltipStories from './Tooltip.stories'
 
 <Meta of={TooltipStories} />
 
@@ -25,6 +25,7 @@ Adds a popover that will show on hover or focus of the child element, with simpl
 This component wasn't built with accessibility in mind, as a result it's quite easy to implement a tooltip in a non-accessible way. A rethink and rewrite is likely for the future.
 
 There's two major accessibility concerns here:
+
 - Keyboard only users
 - Screen reader (or similar assistive tech) users
 
@@ -60,7 +61,6 @@ Again, try to keep the contents of your children as simple as possible, ideally
 When your direct child is not semantic, you will get a console warning like this:
 `<Tooltip /> is not directly wrapping a semantic element, screen reader users will not be able to access the tooltip info.`
 
-
 ### Tooltips, Kaizen components and avoiding common pitfalls
 
 While technically any Kaizen component can be wrapped by a `Tooltip`, as called out previously, only those with [accessible roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) like `button`, `link` or `heading`, will be readable to assistive technologies.
@@ -109,7 +109,7 @@ Without either of these, the `Tooltip` content will not be readable to keyboard
 
 Seen in the example below simple `Tag`s with plain text as `children` will not accessible to keyboard users or assistive technologies as it's direct descendant is a `div` with no semantic `role`.
 
-<Canvas of={TooltipStories.TagWithHoverOnlyTooltip}  />
+<Canvas of={TooltipStories.TagWithHoverOnlyTooltip} />
 
 While `Tooltip` should be avoided if there are no interactive states within the `Tag`, internal elements like buttons or links can be wrapped in a `Tooltip` component to add necessary context.
 
@@ -128,4 +128,3 @@ In the example above, the `Tooltip` content `"Select all users"` is accessible t
 <Canvas of={TooltipStories.CheckboxFieldWithDescriptionTooltip} />
 
 In these instances, `aria-describedby` can be leveraged to provide a description to the input.
-

package/src/__overlays__/Tooltip/v3/Tooltip.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useContext, useLayoutEffect, useState } from 'react'
 import {
   Tooltip as RACTooltip,
   TooltipContext,
-  TooltipProps as RACTooltipProps,
+  type TooltipProps as RACTooltipProps,
   TooltipTriggerStateContext,
   useContextProps,
 } from 'react-aria-components'
@@ -74,7 +74,8 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
         {shouldInlineHiddenContent ? (
           <VisuallyHidden>
             {typeof children === 'function'
-              ? children({
+              ? contextState &&
+                children({
                   placement: 'center',
                   isEntering: false,
                   isExiting: false,

package/src/__overlays__/Tooltip/v3/_docs/ApiSpecification.mdx

@@ -1,14 +1,15 @@
-import { Canvas, Controls, Meta } from "@storybook/blocks"
-import { KAIOInstallation, ResourceLinks,  SbContent } from "~storybook/components"
-import * as docsStories from "./Tooltip.docs.stories"
-import * as exampleStories from "./Tooltip.stories"
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { KAIOInstallation, ResourceLinks, SbContent } from '~storybook/components'
+import * as docsStories from './Tooltip.docs.stories'
+import * as exampleStories from './Tooltip.stories'
 
-<Meta title="Overlays/Tooltip/v3/API Specification"/>
+<Meta title="Overlays/Tooltip/v3/API Specification" />
 
 <SbContent>
   # Tooltip API Specification (v3)
 
-  Updated June 25, 2024
+Updated June 25, 2024
+
 </SbContent>
 
 <ResourceLinks
@@ -20,70 +21,80 @@ import * as exampleStories from "./Tooltip.stories"
 
 <SbContent className="mb-24">
 
-  <KAIOInstallation exportNames={["Tooltip", "TooltipTrigger" ]} family="overlays" version="3" />
+{' '}
+
+<KAIOInstallation exportNames={['Tooltip', 'TooltipTrigger']} family="overlays" version="3" />
+
+## Overview
 
-  ## Overview
+Tooltips are brief floating labels used to add additional contextual information when users hover, click or focus on an interactive element.
 
-  Tooltips are brief floating labels used to add additional contextual information when users hover, click or focus on an interactive element.
 </SbContent>
 
 <Canvas
   className="mb-64"
   of={exampleStories.OnButton}
-  source={{code: `
+  source={{
+    code: `
 <TooltipTrigger>
   <Button label="Button" />
   <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>
-  `}}
+  `,
+  }}
 />
 
 <SbContent className="mb-64">
   ### React Aria
 
-  This component is built using the `react-aria-components` library and extends the [Tooltip component](https://react-spectrum.adobe.com/react-aria/Tooltip.html).
+This component is built using the `react-aria-components` library and extends the [Tooltip component](https://react-spectrum.adobe.com/react-aria/Tooltip.html).
 
-  As this shares the same core [anatomy](https://react-spectrum.adobe.com/react-aria/Tooltip.html#anatomy), [props types](https://react-spectrum.adobe.com/react-aria/Tooltip.html#tooltip-1) and [functionality](https://react-spectrum.adobe.com/react-aria/Tooltip.html#features), the guidance below is tailored to our implementation and should cover known use cases of the Tooltip.
+As this shares the same core [anatomy](https://react-spectrum.adobe.com/react-aria/Tooltip.html#anatomy), [props types](https://react-spectrum.adobe.com/react-aria/Tooltip.html#tooltip-1) and [functionality](https://react-spectrum.adobe.com/react-aria/Tooltip.html#features), the guidance below is tailored to our implementation and should cover known use cases of the Tooltip.
 
-  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/Tooltip.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/Tooltip.html) if not present below.
 
-<SbContent className="mb-12">
-  ## API
 </SbContent>
 
-<Controls of={exampleStories.OnButton}  />
+<SbContent className="mb-12">## API</SbContent>
+
+<Controls of={exampleStories.OnButton} />
 
 <SbContent className=" mt-64">
   ### Placement
 
-  Placement controls where the `Tooltip` will float, relative to its reference element defined by the `triggerRef`. By default, this will float to the `bottom`.
+Placement controls where the `Tooltip` will float, relative to its reference element defined by the `triggerRef`. By default, this will float to the `bottom`.
+
 </SbContent>
 
-<Canvas className="mb-24" of={exampleStories.Placement}  />
+<Canvas className="mb-24" of={exampleStories.Placement} />
 
 <SbContent>
-  The option, `shouldFlip`, will control whether the `Tooltip` inverts its orientation when insufficient room is available in the viewport. You can see the below example with a constrained [viewport here](?path=/story/overlays-tooltip-v3--should-flip&globals=viewport:small).
+  The option, `shouldFlip`, will control whether the `Tooltip` inverts its orientation when
+  insufficient room is available in the viewport. You can see the below example with a constrained
+  [viewport here](?path=/story/overlays-tooltip-v3--should-flip&globals=viewport:small).
 </SbContent>
 
-<Canvas className="mb-64" of={docsStories.ShouldFlip}  />
+<Canvas className="mb-64" of={docsStories.ShouldFlip} />
 
 <SbContent>
   ### Controlled state
 
-  By default, the `Tooltip` state is controlled, so all interactive states do not need to be defined. There may be instances where a users may want want to toggle a `Tooltip` on or off. In this case we have exposed the `isOpen` prop.
+By default, the `Tooltip` state is controlled, so all interactive states do not need to be defined. There may be instances where a users may want want to toggle a `Tooltip` on or off. In this case we have exposed the `isOpen` prop.
+
 </SbContent>
 
-<Canvas className="mb-24" of={docsStories.UncontrolledState}  />
+<Canvas className="mb-24" of={docsStories.UncontrolledState} />
 
 <SbContent className="mb-64">
-  `isOpen` prop will negate the default state and relinquish control of `Tooltip` open and close to the user.
+  `isOpen` prop will negate the default state and relinquish control of `Tooltip` open and close to
+  the user.
 </SbContent>
 
 <SbContent>
   ### TooltipTrigger
 
-  The `TooltipTrigger` wraps both the `Tooltip` and its trigger element, controlling the open and close interactions.
+The `TooltipTrigger` wraps both the `Tooltip` and its trigger element, controlling the open and close interactions.
+
 </SbContent>
 
 ```JSX
@@ -105,13 +116,15 @@ import * as exampleStories from "./Tooltip.stories"
 <SbContent>
   ### Reversed
 
-  The `Tooltip` uses the `useReversedColors` hook and `ReversedColors` provider to control the dark and light theme.
+The `Tooltip` uses the `useReversedColors` hook and `ReversedColors` provider to control the dark and light theme.
+
 </SbContent>
 
 <Canvas className="bg-purple-600 mb-24" of={exampleStories.OnReversed} />
 
 <SbContent>
-  To enable the reversed theme, you will need to the component or application in the `ReversedColors` provider.
+  To enable the reversed theme, you will need to the component or application in the
+  `ReversedColors` provider.
 </SbContent>
 
 ```JSX
@@ -121,42 +134,33 @@ import * as exampleStories from "./Tooltip.stories"
 ```
 
 <SbContent className="mb-64">
-  These utilities can be imported from `@kaizen/components/v3/utilities`. This is an emerging pattern so more documentation will come.
+  These utilities can be imported from `@kaizen/components/v3/utilities`. This is an emerging
+  pattern so more documentation will come.
 </SbContent>
 
 <SbContent className="mb-32">
   ## Examples
 
-  Here are examples of how to use the `Tooltip` with compatible Kaizen components.
-</SbContent>
+Here are examples of how to use the `Tooltip` with compatible Kaizen components.
 
-<SbContent>
-  ### On Button
 </SbContent>
 
+<SbContent>### On Button</SbContent>
+
 <Canvas of={exampleStories.OnButton} />
 
-<SbContent>
-  ### On Link
-</SbContent>
+<SbContent>### On Link</SbContent>
 
 <Canvas of={exampleStories.OnLink} />
 
-<SbContent>
-  ### On IconButton
-</SbContent>
+<SbContent>### On IconButton</SbContent>
 
 <Canvas of={exampleStories.OnIconButton} />
 
-<SbContent>
-  ### On Tabs
-</SbContent>
+<SbContent>### On Tabs</SbContent>
 
 <Canvas of={exampleStories.OnTabs} />
 
-<SbContent>
-  ### On Tag
-</SbContent>
+<SbContent>### On Tag</SbContent>
 
 <Canvas of={exampleStories.OnCustomFocusableElement} />
-