@kaizen/components 1.68.7 → 1.68.8

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

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

@@ -1,19 +1,25 @@
-import { Canvas, Meta, Controls } from "@storybook/blocks"
-import { ResourceLinks, SbContent, Installation, DosAndDonts, DoOrDont } from "~storybook/components"
-import * as TooltipStories from "./Tooltip.docs.stories"
-import AnatomyPng from "./assets/tooltip_anatomy.png"
-import PlacementPng from "./assets/tooltip_placement.png"
-import DesignSpecPng from "./assets/tooltip_spec.png"
-import WhenToUsePng from "./assets/tooltip_variant.png"
+import { Canvas, Meta, Controls } from '@storybook/blocks'
+import {
+  ResourceLinks,
+  SbContent,
+  Installation,
+  DosAndDonts,
+  DoOrDont,
+} from '~storybook/components'
+import * as TooltipStories from './Tooltip.docs.stories'
+import AnatomyPng from './assets/tooltip_anatomy.png'
+import PlacementPng from './assets/tooltip_placement.png'
+import DesignSpecPng from './assets/tooltip_spec.png'
+import WhenToUsePng from './assets/tooltip_variant.png'
 
 <Meta title="Overlays/Tooltip/v3/Usage Guidelines" />
 
 <SbContent>
   # Tooltip (v3)
 
-  Updated June 25, 2024
-</SbContent>
+Updated June 25, 2024
 
+</SbContent>
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
@@ -29,50 +35,57 @@ import WhenToUsePng from "./assets/tooltip_variant.png"
     importStatement='import { Tooltip, TooltipTrigger } from "@kaizen/components/v3/overlays"'
   />
 
-  ## Overview
+## Overview
 
-  Tooltips are brief floating labels used to add additional contextual information when users hover, click or focus on an interactive element. These should offer concise explanations,  elaborating on the element they are associated with.
-</SbContent>
+Tooltips are brief floating labels used to add additional contextual information when users hover, click or focus on an interactive element. These should offer concise explanations, elaborating on the element they are associated with.
 
+</SbContent>
 
 <Canvas
   of={TooltipStories.Playground}
-  source={{code: `
+  source={{
+    code: `
 <TooltipTrigger>
   <Button label="Button" />
   <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>
-  `}}
- />
-<Controls of={TooltipStories.Playground} include={["placement", "isOpen"]} className="mb-64" />
-
+  `,
+  }}
+/>
+<Controls of={TooltipStories.Playground} include={['placement', 'isOpen']} className="mb-64" />
 
 <SbContent className="mb-64">
   ### Anatomy
 
-  - The anatomy of a tooltip is made up of a container, description and arrow.
-    - **They do not include a title or heading**. If you need to include a title, use a Popover
-  - A tooltip is connected to a trigger element, such as a button or icon, that shows the tooltip when the interactive trigger element is hovered or focused. (More details below.)
+- The anatomy of a tooltip is made up of a container, description and arrow.
+  - **They do not include a title or heading**. If you need to include a title, use a Popover
+- A tooltip is connected to a trigger element, such as a button or icon, that shows the tooltip when the interactive trigger element is hovered or focused. (More details below.)
+
+<img
+  src={AnatomyPng}
+  alt="Indicates the anatomy of the Tooltip component, the Container, Label, Arrow and Trigger"
+  className="mt-24"
+/>
 
-  <img src={AnatomyPng} alt="Indicates the anatomy of the Tooltip component, the Container, Label, Arrow and Trigger" className="mt-24" />
 </ SbContent>
 
 <SbContent className="mb-64">
   ### When to use
 
-  - Tooltips are used to provide additional information when space is tight.
-  - Tooltips must be concise with one or more lines of text.
-  - Tooltips must be accessible via hover and focus only.
-  - Trigger tooltips from Interactive elements (Buttons, Links, Icon buttons) or Non-interactive elements (Icons, Abbreviations Truncated text)—be mindful of keyboard accessibility
-  - **Never include any kind of error messages** in a tooltip
+- Tooltips are used to provide additional information when space is tight.
+- Tooltips must be concise with one or more lines of text.
+- Tooltips must be accessible via hover and focus only.
+- Trigger tooltips from Interactive elements (Buttons, Links, Icon buttons) or Non-interactive elements (Icons, Abbreviations Truncated text)—be mindful of keyboard accessibility
+- **Never include any kind of error messages** in a tooltip
+
+<img src={WhenToUsePng} className="mt-32" alt="Illustration of when to use the Tooltip component" />
 
-  <img src={WhenToUsePng} className="mt-32" alt="Illustration of when to use the Tooltip component" />
 </ SbContent>
 
 <SbContent className="mb-64">
   ### Specs
   <img src={DesignSpecPng} alt="" />
-</ SbContent>
+</SbContent>
 
 <div className="flex flex-col mt-16 gap-40 mb-64">
   <div className="flex flex-col m-0 gap-16">
@@ -95,6 +108,7 @@ import WhenToUsePng from "./assets/tooltip_variant.png"
       <DoOrDont story={TooltipStories.DoFieldTooltip} />
       <DoOrDont story={TooltipStories.DontFieldTooltip} isDont />
     </DosAndDonts>
+
   </div>
 
   <div className="flex flex-col m-0 gap-16">
@@ -107,42 +121,44 @@ import WhenToUsePng from "./assets/tooltip_variant.png"
       <DoOrDont story={TooltipStories.DoConcise}/>
       <DoOrDont story={TooltipStories.DontConcise}  isDont />
     </DosAndDonts>
+
   </div>
 </div>
 
 <SbContent className="mb-64">
   ### Placements
 
-  <img src={PlacementPng} alt="" className="mb-24" />
+{' '}
+
+<img src={PlacementPng} alt="" className="mb-24" />
+
+- Type: Dropdown to choose from Default (dark tooltip) and Reverse (light tooltip)
+- Direction: Dropdown to choose where the arrow points
+- Tooltip label: Input field allows you to type in the label from the properties panel
+- Use strong signifiers for trigger elements to ensure the tooltip is discoverable.
+- The proximity of tooltips is always paired to the element with which they are associated.
 
-  - Type: Dropdown to choose from Default (dark tooltip) and Reverse (light tooltip)
-  - Direction: Dropdown to choose where the arrow points
-  - Tooltip label: Input field allows you to type in the label from the properties panel
-  - Use strong signifiers for trigger elements to ensure the tooltip is discoverable.
-  - The proximity of tooltips is always paired to the element with which they are associated.
 </SbContent>
 
 <SbContent className="mb-24">
   ### Trigger
 
-  - A tooltip trigger needs to be discoverable:
-    - E.g. something like an icon to suggest there’s a tooltip.
-    - Avoid triggering tooltips from text that excludes a visual indicator (e.g. underline)
-  - A tooltip should be shown and accessible on hover, click or on focus events.
+- A tooltip trigger needs to be discoverable:
+  - E.g. something like an icon to suggest there’s a tooltip.
+  - Avoid triggering tooltips from text that excludes a visual indicator (e.g. underline)
+- A tooltip should be shown and accessible on hover, click or on focus events.
+
 </SbContent>
 
 <div className="mb-32">
   <DosAndDonts>
     <DoOrDont story={TooltipStories.TriggerDo} />
-    <DoOrDont story={TooltipStories.TriggerDont} isDont/>
+    <DoOrDont story={TooltipStories.TriggerDont} isDont />
   </DosAndDonts>
 </div>
 
 <SbContent className="mb-24">
-  - Only trigger tooltips from interactive elements, such as:
-    - Buttons
-    - Links
-    - Icon buttons
+  - Only trigger tooltips from interactive elements, such as: - Buttons - Links - Icon buttons
 </SbContent>
 
 <div className="mb-32">
@@ -153,9 +169,8 @@ import WhenToUsePng from "./assets/tooltip_variant.png"
 </div>
 
 <SbContent>
-  - Non-interactive elements (be mindful of keyboard accessibility):
-    - Icons
-    - Abbreviations (e.g. dashed underlined text for HRIS that shows a tooltip that says Human Resource Information System)
-    - Truncated text
-  - For interactive elements that trigger tooltips, only have optional information in the tooltip because it could be missed when the user clicks
+  - Non-interactive elements (be mindful of keyboard accessibility): - Icons - Abbreviations (e.g.
+  dashed underlined text for HRIS that shows a tooltip that says Human Resource Information System)
+  - Truncated text - For interactive elements that trigger tooltips, only have optional information
+  in the tooltip because it could be missed when the user clicks
 </SbContent>