@kaizen/components 1.71.0 → 1.72.0

package/src/Tooltip/_docs/Tooltip.mdx

@@ -1,25 +1,24 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, Installation } from '~storybook/components'
+import { ResourceLinks, Installation, ReplacementNotice } from '~storybook/components'
 import * as TooltipStories from './Tooltip.stories'
 
 <Meta of={TooltipStories} />
 
-# Tooltip (v1)
+# Tooltip (deprecated)
 
 <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"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3075604978/Tooltip"
-
 />
 
+<ReplacementNotice />
+
 <Installation
   installCommand="pnpm add @kaizen/components"
-  importStatement='import { Tooltip } from "@kaizen/components/v1/overlays"'
+  importStatement='import { Tooltip } from "@kaizen/components"'
 />
 
-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.
@@ -122,8 +121,6 @@ While `Tooltip` should be avoided if there are no interactive states within the
 
 <Canvas of={TooltipStories.TagWithTooltip} />
 
-The [future Tag](?path=/docs/components-tag-future--docs#overview) offers a composable solution for those needing to add more context to an interactive `Tag`.
-
 #### Form components and tooltips
 
 While a `Tooltip` can seem like a natural pairing when space is a commodity, form elements still require a concise label that is _ideally_ visible (See MDN's guide on [Tooltip best practices](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role#best_practices)).

package/src/Tooltip/_docs/Tooltip.stickersheet.stories.tsx

@@ -2,14 +2,14 @@ import React from 'react'
 import { type Meta } from '@storybook/react'
 import isChromatic from 'chromatic/isChromatic'
 import { IconButton } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Tooltip } from '../index'
 
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: 'Components/Tooltip/Tooltip (v1)',
+  title: 'Components/Tooltip/Tooltip (deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Tooltip/_docs/Tooltip.stories.tsx

@@ -6,12 +6,12 @@ import { CheckboxField } from '~components/Checkbox'
 import { FilterButtonBase } from '~components/Filter/FilterButton/subcomponents/FilterButtonBase'
 import { TableContainer, TableHeader, TableHeaderRowCell, TableRow } from '~components/Table'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__'
-import { Tag } from '~components/__rc__/Tag'
+import { Icon } from '~components/__next__'
+import { Tag } from '~components/__next__/Tag'
 import { Tooltip } from '../index'
 
 const meta = {
-  title: 'Components/Tooltip/Tooltip (v1)',
+  title: 'Components/Tooltip/Tooltip (deprecated)',
   component: Tooltip,
   args: {
     text: 'Example tooltip text.',

package/src/Tooltip/index.ts

@@ -1,7 +1 @@
-// Since we can't add a deprecation flag on a * export
-import { Tooltip as TooltipV1, type TooltipProps as TooltipPropsV1 } from './Tooltip'
-
-/** * @deprecated use v2 or upgrade to v3 for the latest release */
-export const Tooltip = TooltipV1
-/** * @deprecated use v2 or upgrade to v3 for the latest release */
-export type TooltipProps = TooltipPropsV1
+export * from './Tooltip'

package/src/Tooltip/utils/isSemanticElement.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { vi } from 'vitest'
 import { Button, IconButton } from '~components/Button'
-import { Icon } from '~components/__rc__'
+import { Icon } from '~components/__next__'
 import { isSemanticElement } from './isSemanticElement'
 
 describe('isSemanticElement', () => {

package/src/Workflow/_docs/Workflow.stories.tsx

@@ -4,7 +4,7 @@ import { Button } from '~components/Button'
 import { Heading } from '~components/Heading'
 import { Text } from '~components/Text'
 import { TextField } from '~components/TextField'
-import { Icon, Tag } from '~components/__rc__'
+import { Icon, Tag } from '~components/__next__'
 import { Workflow } from '../'
 import { WorkflowControls } from './controls'
 

package/src/Workflow/_docs/WorkflowHeader.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Button } from '~components/Button'
-import { Icon, Tag } from '~components/__rc__'
+import { Icon, Tag } from '~components/__next__'
 import { Workflow } from '../'
 import { WorkflowControls } from './controls'
 

package/src/Workflow/_docs/controls/controls.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { type ArgTypes } from '@storybook/react'
 import { Button } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 
 export const WorkflowControls: Partial<ArgTypes> = {
   headerActions: {

package/src/Workflow/subcomponents/Footer/components/ProgressStepper/ProgressStepper.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { VisuallyHidden } from '~components/VisuallyHidden'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from './ProgressStepper.module.css'
 
 export type Step = {

package/src/{__rc__ → __next__}/Button/Button.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import { Button as RACButton, type ButtonProps as RACButtonProps } from 'react-aria-components'
-import { useReversedColors } from '~components/__utilities__/v3'
+import { useReversedColors } from '~components/utils'
 import { mergeClassNames } from '~components/utils/mergeClassNames'
 import { ButtonContent, PendingContent } from './subcomponents'
 import { type ButtonSizes, type ButtonVariants, type PendingButtonProps } from './types'
@@ -16,7 +16,7 @@ export type ButtonUIProps = {
   /** The visual size of the button. `medium` was formerly `regular`
    *  @default "medium" */
   size?: ButtonSizes
-  /** Renders an icon at the `iconPosition` provided. To the size scales with the button, we recommend using the `Icon` component from `"@kaizen/components/future"` */
+  /** Renders an icon at the `iconPosition` provided. To the size scales with the button, we recommend using the `Icon` component from `"@kaizen/components/next"` */
   icon?: JSX.Element
   /** Controls the position of the Icon passed in as props. @default "start" */
   iconPosition?: 'start' | 'end'
@@ -24,7 +24,7 @@ export type ButtonUIProps = {
   isFullWidth?: boolean
   /**
    * Controls the reversed style of Button
-   * @deprecated Use the ReversedColors Provider instead. This is here to support gradual migration to the ReversedColors Provider and will take precedence if a value is provided. {@link https://cultureamp.design/?path=/docs/actions-button-button-v3-api-specification--docs#variants}
+   * @deprecated Use the ReversedColors Provider instead. This is here to support gradual migration to the ReversedColors Provider and will take precedence if a value is provided. {@link https://cultureamp.design/?path=/docs/actions-button-button-next-api-specification--docs#variants}
    */
   isReversed?: boolean
 }

package/src/{__rc__ → __next__}/Button/_docs/Button--api-specification.mdx

@@ -3,19 +3,19 @@ import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
 import * as exampleStories from './Button.docs.stories'
 import * as specStories from './Button.spec.stories'
 
-<Meta title="Components/Button/Button (v3)/API Specification" />
+<Meta title="Components/Button/Button (next)/API Specification" />
 
-# Button API Specification (v3)
+# Button API Specification (next)
 
 Updated Nov 19, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__rc__/Button"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Button"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/branch/sPhYSlgPScLOAOYfAbkaI5/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-17364&node-type=canvas&m=dev"
-  designGuidelines="/?path=/docs/actions-button-button-v3-usage-guidelines--docs"
+  designGuidelines="/?path=/docs/components-button-button-next-usage-guidelines--docs"
 />
 
-<KAIOInstallation exportNames={'Button'} family="actions" version="3" />
+<KAIOInstallation exportNames={'Button'} isNext />
 
 ## Overview
 
@@ -69,8 +69,8 @@ Reversed variants are handled via the `ReversedColors` Provider.
 To enable the reversed theme, you will need to wrap the component or application in the `ReversedColors` provider, ie:
 
 ```tsx
-import { Button } from '@kaizen/components/v3/actions'
-import { ReversedColors } from '@kaizen/components/v3/utilities'
+import { Button } from '@kaizen/components/next'
+import { ReversedColors } from '@kaizen/components'
 // application code
 
 return (
@@ -116,11 +116,11 @@ While in most cases, `children` will be a `ReactNode`, `Button` also accepts a r
 
 ### Icons and positioning
 
-The `icon` property abstracts the need to handle positioning and sizing logic for icons within the `Button`. When paired with the [Icon component](/docs/illustrations-icon-icon-future-api-specification--docs), this will scale the icon to the `Button`'s `size` prop.
+The `icon` property abstracts the need to handle positioning and sizing logic for icons within the `Button`. When paired with the [Icon component](/docs/illustrations-icon-icon-next-api-specification--docs), this will scale the icon to the `Button`'s `size` prop.
 
 <Canvas of={exampleStories.ButtonWithIconStart} />
 
-Set the position of the icon using the `iconPosition` prop. This will ensure content is flipped in `RTL` layouts. Note that icons will need the [shouldMirrorInRTL](/docs/illustrations-icon-icon-future-api-specification--docs#mirror-in-rtl) prop set to `true` when mirroring is required.
+Set the position of the icon using the `iconPosition` prop. This will ensure content is flipped in `RTL` layouts. Note that icons will need the [shouldMirrorInRTL](/docs/illustrations-icon-icon-next-api-specification--docs#mirror-in-rtl) prop set to `true` when mirroring is required.
 
 <Canvas of={exampleStories.ButtonWithIconEnd} />
 

package/src/{__rc__ → __next__}/Button/_docs/Button--usage-guidelines.mdx

@@ -6,19 +6,19 @@ import ButtonIconSpec from './assets/button_icon_spec.png'
 import ButtonSpec from './assets/button_spec.png'
 import ButtonAnatomy from './assets/button_anatomy.png'
 
-<Meta title="Components/Button/Button (v3)/Usage Guidelines" />
+<Meta title="Components/Button/Button (next)/Usage Guidelines" />
 
-# Button (v3)
+# Button (next)
 
 Updated July 12, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__rc__/Button"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Button"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/branch/sPhYSlgPScLOAOYfAbkaI5/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-17364&node-type=canvas&m=dev"
-  apiSpecification="/?path=/docs/actions-button-button-v3-api-specification--docs"
+  apiSpecification="/?path=/docs/actions-button-button-next-api-specification--docs"
 />
 
-<KAIOInstallation exportNames={['Button']} family="actions" version="3" />
+<KAIOInstallation exportNames={['Button']} isNext />
 
 ## Overview
 

package/src/{__rc__ → __next__}/Button/_docs/Button.docs.stories.tsx

@@ -12,12 +12,12 @@ import {
   Select,
   Tooltip,
   TooltipTrigger,
-} from '~components/__rc__'
-import { ReversedColors } from '~components/__utilities__/v3'
+} from '~components/__next__'
+import { ReversedColors } from '~components/utils'
 import { Button } from '../index'
 
 const meta = {
-  title: 'Components/Button/Button (v3)',
+  title: 'Components/Button/Button (next)',
   component: Button,
   args: {
     children: 'Label',

package/src/{__rc__ → __next__}/Button/_docs/Button.spec.stories.tsx

@@ -2,13 +2,13 @@ import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test'
 import { VisuallyHidden } from '~components/VisuallyHidden'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { Button } from '../index'
 
 const onPressEvent = fn()
 
 const meta = {
-  title: 'Components/Button/Button (v3)/Button (v3) tests',
+  title: 'Components/Button/Button (next)/Button (next) tests',
   component: Button,
   args: {
     children: 'Label',

package/src/{__rc__ → __next__}/Button/_docs/Button.stickersheet.stories.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
 import { within } from '@storybook/test'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Button, type ButtonSizes, type ButtonVariants } from '../index'
 
 export default {
-  title: 'Components/Button/Button (v3)',
+  title: 'Components/Button/Button (next)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/{__rc__ → __next__}/Icon/_docs/Icon--api-specification.mdx

@@ -2,9 +2,9 @@ import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
 import { ResourceLinks, KAIOInstallation } from '~storybook/components'
 import * as IconStories from './Icon.docs.stories'
 
-<Meta title="Components/Icon/Icon (Future)/API Specification" />
+<Meta title="Components/Icon/Icon (next)/API Specification" />
 
-# Icon API Specification (Future)
+# Icon API Specification (next)
 
 Updated September 4, 2024
 
@@ -13,7 +13,7 @@ Updated September 4, 2024
   designGuidelines="/?path=/docs/illustrations-icon-v2-usage-guidelines--docs"
 />
 
-<KAIOInstallation exportNames="Icon" isFuture />
+<KAIOInstallation exportNames="Icon" isNext />
 
 ### Set up
 

package/src/{__rc__ → __next__}/Icon/_docs/Icon--migration-guide.mdx

@@ -2,9 +2,9 @@ import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
 import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
 import * as IconStories from './Icon.docs.stories'
 
-<Meta title="Components/Icon/Icon (Future)/Migration Guide" />
+<Meta title="Components/Icon/Migration guide" />
 
-# Icon Migration Guide
+# Icon migration guide
 
 This is a short guide to assist in migration from the old to new Icon component.
 
@@ -12,7 +12,7 @@ This is a short guide to assist in migration from the old to new Icon component.
 
 To assist in migration we have created the `upgradeiconv1` codemod. This will loop through the given directory and update all instances of Icon to the latest implementation. You can refer to this [README](https://github.com/cultureamp/kaizen-design-system/blob/main/packages/components/codemods/README.md#upgradeiconv1) on how to run this within your repository.
 
-For more information on the changes to the API, we recommend referring the <LinkTo pageId="components-icon-icon-future-api-specification--docs">API Specification</LinkTo>.
+For more information on the changes to the API, we recommend referring the <LinkTo pageId="components-icon-icon-next-api-specification--docs">API Specification</LinkTo>.
 
 ## Changes to Icon exportNames
 

package/src/{__rc__ → __next__}/Icon/_docs/Icon--usage-guidelines.mdx

@@ -2,19 +2,19 @@ import { Canvas, Meta, Controls, Story } from '@storybook/blocks'
 import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybook/components'
 import * as IconStories from './Icon.docs.stories'
 
-<Meta title="Components/Icon/Icon (Future)/Usage Guidelines" />
+<Meta title="Components/Icon/Icon (next)/Usage Guidelines" />
 
-# Icon (Future)
+# Icon (next)
 
 Updated September 13, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__illustrations__/Icon/v3"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__illustrations__/Icon/next"
   apiSpecification="/?path=/docs/illustrations-icon-v3-api-specification--docs"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-3974"
 />
 
-<KAIOInstallation exportNames="Icon" isFuture />
+<KAIOInstallation exportNames="Icon" isNext />
 
 ## Overview
 

package/src/{__rc__ → __next__}/Icon/_docs/Icon.docs.stories.tsx

@@ -12,8 +12,8 @@ import {
 } from '~components/Table'
 import { Text } from '~components/Text'
 import { ToggleSwitchField } from '~components/ToggleSwitch'
-import { Button } from '~components/__rc__/Button'
-import { Tag } from '~components/__rc__/Tag'
+import { Button } from '~components/__next__/Button'
+import { Tag } from '~components/__next__/Tag'
 import { StickerSheet } from '~storybook/components/StickerSheet'
 import { iconMap } from '../../../../codemods/upgradeIconV1/getNewIconPropsFromOldIconName'
 import { iconDefaultSet } from '../constants'
@@ -23,7 +23,7 @@ import imgTooltipDont from './assets/tooltip-dont.png'
 import styles from './Icon.docs.module.css'
 
 const meta = {
-  title: 'Components/Icon/Icon (Future)',
+  title: 'Components/Icon/Icon (next)',
   component: Icon,
   args: {
     name: 'star',

package/src/{__rc__ → __next__}/Icon/_docs/Icon.stickersheet.stories.tsx

@@ -4,13 +4,13 @@ import { Button } from '~components/Button'
 import { CheckboxField } from '~components/Checkbox'
 import { Label } from '~components/Label'
 import { Text } from '~components/Text'
-import { Button as ButtonRC } from '~components/__rc__/Button'
+import { Button as ButtonRC } from '~components/__next__/Button'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { handledRtlIcons, iconDefaultSet } from '../constants'
 import { Icon, type IconProps } from '../index'
 
 export default {
-  title: 'Components/Icon/Icon (Future)',
+  title: 'Components/Icon/Icon (next)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },
@@ -89,7 +89,7 @@ const StickerSheetTemplate: StickerSheetStory = {
           <StickerSheet.Row header="Button (v2)">
             <Button label="Button label" icon={<Icon {...defaultProps} />} />
           </StickerSheet.Row>
-          <StickerSheet.Row header="Button (v3)">
+          <StickerSheet.Row header="Button (next)">
             <ButtonRC>
               <Icon {...defaultProps} /> Button label
             </ButtonRC>

package/src/{__rc__ → __next__}/Menu/_docs/Menu--api-specification.mdx

@@ -3,28 +3,27 @@ import { KAIOInstallation, ResourceLinks } from '~storybook/components'
 import * as docsStories from './Menu.docs.stories'
 import * as exampleStories from './Menu.stories'
 
-<Meta title="Components/Menu/Menu (v3)/API Specification" />
+<Meta title="Components/Menu/Menu (next)/API Specification" />
 
-# Menu API Specification (v3)
+# Menu API Specification (next)
 
 Updated December 16, 2024
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/Menu"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?m=auto&node-id=6262-0&t=I4H23jCrCJz4O2nf-1"
-  designGuidelines="/?path=/docs/actions-menu-v3-usage-guidelines--docs"
+  designGuidelines="/?path=/docs/components-menu-menu-next-usage-guidelines--docs"
   ariaComponentPage="https://react-spectrum.adobe.com/react-aria/Menu.html"
 />
 
 <KAIOInstallation
   exportNames={['Menu', 'MenuTrigger', 'MenuItem', 'MenuPopover', 'MenuSection', 'MenuHeader']}
-  family="actions"
-  version="3"
+  isNext
 />
 
 ## Compatibility
 
-The `Menu` `v3` component is not backwards compatible with Kaizen `Button` `v1` and `v2`. This will only work when used with the `Button` `v3` component.
+The `next/Menu` component is not backwards compatible with the current `Button` component (or a native `<button>` element). This will only work when used with the `next/Button` component.
 
 ## Overview
 

package/src/{__rc__ → __next__}/Menu/_docs/Menu--usage-guidelines.mdx

@@ -3,9 +3,9 @@ import { ResourceLinks, KAIOInstallation, DosAndDonts, DoOrDont } from '~storybo
 import * as MenuDocsStories from './Menu.docs.stories'
 import * as MenuStories from './Menu.stories'
 
-<Meta title="Components/Menu/Menu (v3)/Usage Guidelines" />
+<Meta title="Components/Menu/Menu (next)/Usage Guidelines" />
 
-# Menu (v3)
+# Menu (next)
 
 Updated July 6, 2024
 
@@ -18,8 +18,7 @@ Updated July 6, 2024
 
 <KAIOInstallation
   exportNames={['Menu', 'MenuTrigger', 'MenuItem', 'MenuPopover', 'MenuSection', 'MenuHeader']}
-  family="actions"
-  version="3"
+  isNext
 />
 
 ## Overview

package/src/{__rc__ → __next__}/Menu/_docs/Menu.docs.stories.tsx

@@ -1,12 +1,12 @@
 import React, { type FunctionComponent, type ReactNode } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
-import { Button } from '~components/__rc__/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Button } from '~components/__next__/Button'
+import { Icon } from '~components/__next__/Icon'
 import { Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuTrigger } from '../index'
 
 const meta = {
-  title: 'Components/Menu/Menu (v3)/Docs Assets',
+  title: 'Components/Menu/Menu (next)/Docs Assets',
   component: MenuTrigger,
   args: {
     defaultOpen: isChromatic(),

package/src/{__rc__ → __next__}/Menu/_docs/Menu.spec.stories.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, fn, userEvent, waitFor, within } from '@storybook/test'
 import isChromatic from 'chromatic'
-import { Button } from '~components/__rc__/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Button } from '~components/__next__/Button'
+import { Icon } from '~components/__next__/Icon'
 import { Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuTrigger } from '../index'
 
 const meta = {
-  title: 'Components/Menu/Menu (v3)/Tests',
+  title: 'Components/Menu/Menu (next)/Menu (next) tests',
   component: MenuTrigger,
   args: {
     defaultOpen: isChromatic(),

package/src/{__rc__ → __next__}/Menu/_docs/Menu.stories.tsx

@@ -2,13 +2,13 @@ import React, { type FunctionComponent } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
 import { Text } from '~components/Text'
-import { Button } from '~components/__rc__/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Button } from '~components/__next__/Button'
+import { Icon } from '~components/__next__/Icon'
 import { Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuTrigger } from '../index'
 import * as testStories from './Menu.spec.stories'
 
 const meta = {
-  title: 'Components/Menu/Menu (v3)',
+  title: 'Components/Menu/Menu (next)',
   component: MenuTrigger,
   args: {
     defaultOpen: isChromatic(),

package/src/{__rc__ → __next__}/Select/_docs/Select.mdx

@@ -4,7 +4,7 @@ import * as SelectStories from './Select.stories'
 
 <Meta of={SelectStories} />
 
-# Select
+# Select (future)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Select"
@@ -13,7 +13,7 @@ import * as SelectStories from './Select.stories'
 
 />
 
-<KAIOInstallation exportNames="Select" isFuture />
+<KAIOInstallation exportNames="Select" isNext />
 
 ## Playground
 

package/src/{__rc__ → __next__}/Select/_docs/Select.stickersheet.stories.tsx

@@ -14,7 +14,7 @@ import {
 const IS_CHROMATIC = isChromatic()
 
 export default {
-  title: 'Components/Select/Future',
+  title: 'Components/Select/Select (future)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/{__rc__ → __next__}/Select/_docs/Select.stories.tsx

@@ -7,7 +7,7 @@ import { type SelectOption } from '../types'
 import { groupedMockItems, mixedMockItemsDisabled, singleMockItems } from './mockData'
 
 const meta = {
-  title: 'Components/Select/Future',
+  title: 'Components/Select/Select (future)',
   component: Select,
   argTypes: {
     items: {

package/src/{__rc__ → __next__}/Select/subcomponents/ListBox/ListBox.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useRef, type HTMLAttributes, type Key, type ReactNode
 import { useListBox, type AriaListBoxOptions } from '@react-aria/listbox'
 import { type SelectState } from '@react-stately/select'
 import classnames from 'classnames'
-import { useIsClientReady } from '~components/__utilities__/useIsClientReady'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
+import { useIsClientReady } from '~components/utils/useIsClientReady'
 import { useSelectContext } from '../../context'
 import { type SelectItem, type SelectOption } from '../../types'
 import styles from './ListBox.module.scss'

package/src/{__rc__ → __next__}/Select/subcomponents/Option/Option.tsx

@@ -2,7 +2,7 @@ import React, { type HTMLAttributes } from 'react'
 import { type FocusableElement } from '@react-types/shared'
 import classnames from 'classnames'
 import { mergeProps, useFocusRing, useOption } from 'react-aria'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useSelectContext } from '../../context'
 import { type SelectOption, type SelectOptionNode } from '../../types'

package/src/{__rc__ → __next__}/Select/subcomponents/SelectToggle/SelectToggle.tsx

@@ -2,7 +2,7 @@ import React, { type HTMLAttributes } from 'react'
 import { type DOMAttributes, type FocusableElement } from '@react-types/shared'
 import classnames from 'classnames'
 import { Label } from '~components/Label'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './SelectToggle.module.scss'
 

package/src/{__rc__ → __next__}/Tabs/_docs/Tabs--api-specification.mdx

@@ -2,9 +2,9 @@ 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" />
+<Meta title="Components/Tabs/Tabs (next)/API Specification" />
 
-# Tabs
+# Tabs (next)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tabs"
@@ -13,7 +13,7 @@ import * as TabsStories from './Tabs.stories'
 
 />
 
-<KAIOInstallation exportNames={['Tabs', 'TabList', 'Tab', 'TabPanel']} isFuture />
+<KAIOInstallation exportNames={['Tabs', 'TabList', 'Tab', 'TabPanel']} isNext />
 
 ## Overview
 

package/src/{__rc__ → __next__}/Tabs/_docs/Tabs--migration-guide.mdx

@@ -1,10 +1,10 @@
 import { Meta } from '@storybook/blocks'
 
-<Meta title="Components/Tabs/Tabs (Future)/Migration Guide" />
+<Meta title="Components/Tabs/Migration guide" />
 
-# Future Tabs migration guide
+# Next Tabs migration guide
 
-A brief guide on how and why to migrate from Kaizen's current `Tabs` to the `future` release.
+A brief guide on how and why to migrate from Kaizen's current `Tabs` to the `next` release.
 
 ## Why the change?