@kaizen/components 1.68.13 → 1.69.1

package/src/{__future__ → __rc__}/Tag/Tag/_docs/Tag-migration-guide.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { fn } from '@storybook/test'
 import { Avatar } from '~components/Avatar'
 import { LiveIcon } from '~components/Tag/subcomponents'
-import { Icon } from '~components/__future__/Icon'
-import { Tag, RemovableTag } from '../..'
+import { Icon } from '~components/__rc__/Icon'
+import { RemovableTag, Tag } from '../..'
 
 const meta = {
   title: 'Components/Tag/Future Tag Migration Guide',

package/src/{__future__ → __rc__}/Tag/Tag/_docs/Tag.mdx

@@ -7,7 +7,7 @@ import * as TagStories from './Tag.stories'
 # Tag
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__future__/Tag"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__rc__/Tag"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3293283155/Tag"
 />
 

package/src/{__future__ → __rc__}/Tag/Tag/_docs/Tag.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Meta } from '@storybook/react'
-import { Icon } from '~components/__future__/Icon'
-import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { type Meta } from '@storybook/react'
+import { Icon } from '~components/__rc__/Icon'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Tag } from '../Tag'
 import { TagColorKeys } from '../types'
 

package/src/{__future__ → __rc__}/Tag/Tag/_docs/Tag.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import { Icon } from '~components/__future__/Icon'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Icon } from '~components/__rc__/Icon'
 import { TagColorKeys } from '../types'
 import { Tag } from '..'
 

package/src/{__overlays__/Tooltip/v3 → __rc__/Tooltip}/TooltipTrigger.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {
   TooltipTrigger as RACTooltipTrigger,
-  TooltipTriggerComponentProps,
+  type TooltipTriggerComponentProps,
 } from 'react-aria-components'
 
 export type TooltipTriggerProps = Omit<TooltipTriggerComponentProps, 'delay' | 'closeDelay'> & {

package/src/{__overlays__/Tooltip/v3 → __rc__/Tooltip}/_docs/ApiSpecification.mdx

@@ -1,17 +1,14 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { KAIOInstallation, ResourceLinks, SbContent } from '~storybook/components'
+import { KAIOInstallation, ResourceLinks } 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="Components/Tooltip/Tooltip (v3)/API Specification" />
 
-<SbContent>
-  # Tooltip API Specification (v3)
+# Tooltip API Specification (v3)
 
 Updated June 25, 2024
 
-</SbContent>
-
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
@@ -19,18 +16,12 @@ Updated June 25, 2024
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Tooltip.html"
 />
 
-<SbContent className="mb-24">
-
-{' '}
-
 <KAIOInstallation exportNames={['Tooltip', 'TooltipTrigger']} family="overlays" version="3" />
 
 ## Overview
 
 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}
@@ -44,8 +35,7 @@ Tooltips are brief floating labels used to add additional contextual information
   }}
 />
 
-<SbContent className="mb-64">
-  ### React Aria
+### 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).
 
@@ -53,114 +43,84 @@ As this shares the same core [anatomy](https://react-spectrum.adobe.com/react-ar
 
 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>
-
-<SbContent className="mb-12">## API</SbContent>
+## API
 
 <Controls of={exampleStories.OnButton} />
 
-<SbContent className=" mt-64">
-  ### Placement
+### 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`.
 
-</SbContent>
-
 <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).
-</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).
 
 <Canvas className="mb-64" of={docsStories.ShouldFlip} />
 
-<SbContent>
-  ### Controlled state
+### 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.
 
-</SbContent>
-
 <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.
-</SbContent>
+`isOpen` prop will negate the default state and relinquish control of `Tooltip` open and close to
+the user.
 
-<SbContent>
-  ### TooltipTrigger
+### TooltipTrigger
 
 The `TooltipTrigger` wraps both the `Tooltip` and its trigger element, controlling the open and close interactions.
 
-</SbContent>
-
-```JSX
-
+```jsx
 <TooltipTrigger>
- */ In this case the trigger element is the Button /*
+  /* In this case the trigger element is the Button */
   <Button label="Button" />
-   */ The Tooltip and its content is a child of the trigger /*
-  <Tooltip>
-    Tooltip content
-  </Tooltip>
+  /* The Tooltip and its content is a child of the trigger */
+  <Tooltip>Tooltip content</Tooltip>
 </TooltipTrigger>
 ```
 
-<SbContent className="mb-64">
-  Any compatible interactive element within the `TooltipTrigger` will enable the interaction state.
-</SbContent>
+Any compatible interactive element within the `TooltipTrigger` will enable the interaction state.
 
-<SbContent>
-  ### Reversed
+### Reversed
 
 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.
-</SbContent>
+To enable the reversed theme, you will need to the component or application in the
+`ReversedColors` provider.
 
-```JSX
+```jsx
 <ReversedColors isReversed={true}>
   <Component />
 </ReversedColors>
 ```
 
-<SbContent className="mb-64">
-  These utilities can be imported from `@kaizen/components/v3/utilities`. This is an emerging
-  pattern so more documentation will come.
-</SbContent>
+These utilities can be imported from `@kaizen/components/v3/utilities`. This is an emerging
+pattern so more documentation will come.
 
-<SbContent className="mb-32">
-  ## Examples
+## Examples
 
 Here are examples of how to use the `Tooltip` with compatible Kaizen components.
 
-</SbContent>
-
-<SbContent>### On Button</SbContent>
+### On Button
 
 <Canvas of={exampleStories.OnButton} />
 
-<SbContent>### On Link</SbContent>
+### On Link
 
 <Canvas of={exampleStories.OnLink} />
 
-<SbContent>### On IconButton</SbContent>
+### On IconButton
 
 <Canvas of={exampleStories.OnIconButton} />
 
-<SbContent>### On Tabs</SbContent>
+### On Tabs
 
 <Canvas of={exampleStories.OnTabs} />
 
-<SbContent>### On Tag</SbContent>
+### On Tag
 
 <Canvas of={exampleStories.OnCustomFocusableElement} />

package/src/{__overlays__/Tooltip/v3 → __rc__/Tooltip}/_docs/Tooltip.docs.stories.tsx

@@ -1,18 +1,17 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
+import { Button, IconButton } from '~components/Button'
 import { FieldMessage } from '~components/FieldMessage'
 import { Input } from '~components/Input'
 import { Label } from '~components/Label'
 import { Text } from '~components/Text'
-import { Button, IconButton } from '~components/__actions__/v2'
-import { Icon } from '~components/__future__/Icon'
-import { Focusable } from '~components/__overlays__/v3'
-import { Tooltip, TooltipTrigger } from '../index'
+import { Icon } from '~components/__rc__/Icon'
+import { Focusable, Tooltip, TooltipTrigger } from '../index'
 import * as TestStories from './Tooltip.spec.stories'
 
 const meta = {
-  title: 'Overlays/Tooltip/v3/Docs Assets',
+  title: 'Components/Tooltip/Tooltip (v3)/Docs Assets',
   component: Tooltip,
   parameters: {
     layout: 'centered',

package/src/{__overlays__/Tooltip/v3 → __rc__/Tooltip}/_docs/Tooltip.mdx

@@ -1,26 +1,17 @@
 import { Canvas, Meta, Controls } from '@storybook/blocks'
-import {
-  ResourceLinks,
-  SbContent,
-  Installation,
-  DosAndDonts,
-  DoOrDont,
-} from '~storybook/components'
+import { ResourceLinks, 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" />
+<Meta title="Components/Tooltip/Tooltip (v3)/Usage Guidelines" />
 
-<SbContent>
-  # Tooltip (v3)
+# Tooltip (v3)
 
 Updated June 25, 2024
 
-</SbContent>
-
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tooltip"
   figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=1929%3A32006&mode=design&t=LwTCBZ5E1uRvOA1l-1"
@@ -29,18 +20,15 @@ Updated June 25, 2024
   apiSpecification="/?path=/docs/overlays-tooltip-v3-api-specifications--docs"
 />
 
-<SbContent>
-  <Installation
-    installCommand="pnpm add @kaizen/components"
-    importStatement='import { Tooltip, TooltipTrigger } from "@kaizen/components/v3/overlays"'
-  />
+<Installation
+  installCommand="pnpm add @kaizen/components"
+  importStatement='import { Tooltip, TooltipTrigger } from "@kaizen/components/v3/overlays"'
+/>
 
 ## 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>
-
 <Canvas
   of={TooltipStories.Playground}
   source={{
@@ -52,10 +40,9 @@ Tooltips are brief floating labels used to add additional contextual information
   `,
   }}
 />
-<Controls of={TooltipStories.Playground} include={['placement', 'isOpen']} className="mb-64" />
+<Controls of={TooltipStories.Playground} include={['placement', 'isOpen']} />
 
-<SbContent className="mb-64">
-  ### Anatomy
+### 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
@@ -67,10 +54,7 @@ Tooltips are brief floating labels used to add additional contextual information
   className="mt-24"
 />
 
-</ SbContent>
-
-<SbContent className="mb-64">
-  ### When to use
+### 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.
@@ -80,55 +64,37 @@ Tooltips are brief floating labels used to add additional contextual information
 
 <img src={WhenToUsePng} className="mt-32" alt="Illustration of when to use the Tooltip component" />
 
-</ SbContent>
+### Specs
 
-<SbContent className="mb-64">
-  ### Specs
-  <img src={DesignSpecPng} alt="" />
-</SbContent>
+<img src={DesignSpecPng} alt="" />
 
-<div className="flex flex-col mt-16 gap-40 mb-64">
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Do use tooltips to describe icons
-      Icons are not always easy to identify on their own. When you use components that don&apos;t have labels — for example, icon-only action buttons and tabs — make sure to use tooltips to provide context for the icons.
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={TooltipStories.Primary} />
-    </DosAndDonts>
-  </div>
+#### Do use tooltips to describe icons
 
-  <div className="flex flex-col gap-16">
-    <SbContent>
-      #### Don&apos;t use tooltips to communicate crucial information
+Icons are not always easy to identify on their own. When you use components that don&apos;t have labels — for example, icon-only action buttons and tabs — make sure to use tooltips to provide context for the icons.
 
-      Tooltips should never stop a user (or be a gate) from completing a task or performing an action. They disappear so they should never contain critical information that a user would absolutely need to proceed, or information without which a user may cause errors. If the information is crucial for a user to proceed, consider using a modal or inline notification instead.
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={TooltipStories.DoFieldTooltip} />
-      <DoOrDont story={TooltipStories.DontFieldTooltip} isDont />
-    </DosAndDonts>
+<DosAndDonts>
+  <DoOrDont story={TooltipStories.Primary} />
+</DosAndDonts>
 
-  </div>
+#### Don&apos;t use tooltips to communicate crucial information
 
-  <div className="flex flex-col m-0 gap-16">
-    <SbContent>
-      #### Do be concise
+Tooltips should never stop a user (or be a gate) from completing a task or performing an action. They disappear so they should never contain critical information that a user would absolutely need to proceed, or information without which a user may cause errors. If the information is crucial for a user to proceed, consider using a modal or inline notification instead.
 
-      Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don’t use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
-    </SbContent>
-    <DosAndDonts>
-      <DoOrDont story={TooltipStories.DoConcise}/>
-      <DoOrDont story={TooltipStories.DontConcise}  isDont />
-    </DosAndDonts>
+<DosAndDonts>
+  <DoOrDont story={TooltipStories.DoFieldTooltip} />
+  <DoOrDont story={TooltipStories.DontFieldTooltip} isDont />
+</DosAndDonts>
 
-  </div>
-</div>
+#### Do be concise
 
-<SbContent className="mb-64">
-  ### Placements
+Good tooltips contain concise and helpful information, keep it short. If you need more space, consider using a Popover. Don’t use it to duplicate information that already exists on the page. Instead, closely consider its placement and whether the disclosed copy will inform the action the user is about to perform.
 
-{' '}
+<DosAndDonts>
+  <DoOrDont story={TooltipStories.DoConcise} />
+  <DoOrDont story={TooltipStories.DontConcise} isDont />
+</DosAndDonts>
+
+### Placements
 
 <img src={PlacementPng} alt="" className="mb-24" />
 
@@ -138,39 +104,26 @@ Tooltips are brief floating labels used to add additional contextual information
 - 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
+### 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.
 
-</SbContent>
-
-<div className="mb-32">
-  <DosAndDonts>
-    <DoOrDont story={TooltipStories.TriggerDo} />
-    <DoOrDont story={TooltipStories.TriggerDont} isDont />
-  </DosAndDonts>
-</div>
+<DosAndDonts>
+  <DoOrDont story={TooltipStories.TriggerDo} />
+  <DoOrDont story={TooltipStories.TriggerDont} isDont />
+</DosAndDonts>
 
-<SbContent className="mb-24">
-  - Only trigger tooltips from interactive elements, such as: - Buttons - Links - Icon buttons
-</SbContent>
+- Only trigger tooltips from interactive elements, such as: - Buttons - Links - Icon buttons
 
-<div className="mb-32">
-  <DosAndDonts>
-    <DoOrDont story={TooltipStories.Primary} />
-    <DoOrDont story={TooltipStories.TriggerLinkDescription} />
-  </DosAndDonts>
-</div>
+<DosAndDonts>
+  <DoOrDont story={TooltipStories.Primary} />
+  <DoOrDont story={TooltipStories.TriggerLinkDescription} />
+</DosAndDonts>
 
-<SbContent>
-  - Non-interactive elements (be mindful of keyboard accessibility): - Icons - Abbreviations (e.g.
+- 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
+- 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>

package/src/{__overlays__/Tooltip/v3 → __rc__/Tooltip}/_docs/Tooltip.spec.stories.tsx

@@ -1,17 +1,16 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, userEvent, waitFor, within } from '@storybook/test'
 import isChromatic from 'chromatic'
+import { Button, IconButton } from '~components/Button'
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '~components/Tabs'
 import { Text } from '~components/Text'
-import { Button, IconButton } from '~components/__actions__/v2'
-import { Icon } from '~components/__future__/Icon'
-import { Tag } from '~components/__future__/Tag'
-import { Focusable } from '~components/__overlays__/v3'
-import { Tooltip, TooltipTrigger } from '../index'
+import { Icon } from '~components/__rc__/Icon'
+import { Tag } from '~components/__rc__/Tag'
+import { Focusable, Tooltip, TooltipTrigger } from '../index'
 
 const meta = {
-  title: 'Overlays/Tooltip/v3/Tests',
+  title: 'Components/Tooltip/Tooltip (v3)/Tests',
   component: Tooltip,
   parameters: {
     layout: 'centered',

package/src/{__overlays__/Tooltip/v3 → __rc__/Tooltip}/_docs/Tooltip.stickersheet.stories.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { type Meta, type StoryObj, composeStories } from '@storybook/react'
+import { composeStories, type Meta, type StoryObj } from '@storybook/react'
 import { ReversedColors } from '~components/__utilities__/v3'
 import { mergeClassNames } from '~components/utils/mergeClassNames'
 import * as testStories from './Tooltip.spec.stories'
 
 export default {
-  title: 'Overlays/Tooltip/v3/Tests',
+  title: 'Components/Tooltip/Tooltip (v3)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/{__overlays__/Tooltip/v3 → __rc__/Tooltip}/_docs/Tooltip.stories.tsx

@@ -1,14 +1,13 @@
-import React, { FunctionComponent } from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import React, { type FunctionComponent } from 'react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
-import { Button } from '~components/__actions__/v2'
-import { Tag } from '~components/__future__'
-import { Focusable } from '~components/__overlays__/v3'
-import { Tooltip, TooltipTrigger } from '../index'
+import { Button } from '~components/Button'
+import { Tag } from '~components/__rc__'
+import { Focusable, Tooltip, TooltipTrigger } from '../index'
 import * as testStories from './Tooltip.spec.stories'
 
 const meta = {
-  title: 'Overlays/Tooltip/v3',
+  title: 'Components/Tooltip/Tooltip (v3)',
   component: Tooltip,
   parameters: {
     layout: 'centered',

package/src/{__overlays__/Tooltip/v3 → __rc__/Tooltip}/index.ts

@@ -1,2 +1,3 @@
 export * from './Tooltip'
 export * from './TooltipTrigger'
+export * from './subcomponents/Focusable'

package/src/{__overlays__/Focusable/v3 → __rc__/Tooltip/subcomponents/Focusable}/Focusable.tsx

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes, ReactNode, useRef } from 'react'
+import React, { useRef, type HTMLAttributes, type ReactNode } from 'react'
 import classnames from 'classnames'
-import { FocusableOptions, useFocusable } from 'react-aria'
+import { useFocusable, type FocusableOptions } from 'react-aria'
 import styles from './Focusable.module.scss'
 
 export type FocusableProps = {

package/src/__rc__/Tooltip/subcomponents/Focusable/_docs/ApiSpecification.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+import { KAIOInstallation, ResourceLinks } from '~storybook/components'
+import * as exampleStories from './Focusable.stories'
+
+<Meta title="Components/Tooltip/Tooltip (v3)/Focusable/API Specification" />
+
+# Focusable API Specification (v3)
+
+Updated June 25, 2024
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__rc__/Tooltip/subcomponents/Focusable"
+  className="mt-16 !mb-8"
+/>
+
+<KAIOInstallation exportNames={['Focusable']} family="overlays" version="3" />
+
+## Overview
+
+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).
+
+<Canvas className="mb-24" of={exampleStories.Playground} />
+
+Be aware that this does not negate the need to meet A11Y standards and best practices. Use this
+utility wrapper with caution.
+
+## API
+
+<Controls of={exampleStories.Playground} />

package/src/{__overlays__/Focusable/v3 → __rc__/Tooltip/subcomponents/Focusable}/_docs/Focusable.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import { Tag } from '~components/__future__/Tag'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Tag } from '~components/__rc__/Tag'
 import { Focusable } from '../index'
 
 const meta = {
-  title: 'Overlays/Focusable/v3',
+  title: 'Components/Tooltip/Tooltip (v3)/Focusable',
   component: Focusable,
   parameters: {
     layout: 'centered',

package/src/{__future__ → __rc__}/index.ts

@@ -1,4 +1,7 @@
+export * from './Button'
 export * from './Icon'
+export * from './Menu'
 export * from './Select'
 export * from './Tag'
 export * from './Tabs'
+export * from './Tooltip'

package/src/__utilities__/ReversedColors/v3/ReversedColors.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { type ReactNode } from 'react'
 
 export type ReversedColorsProps = {
   children: ReactNode

package/src/__utilities__/useIsClientReady/useIsClientReady.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 /**
  * A hook that returns a truthy value indicating if the code can be run on client side.