@kaizen/components 1.71.0 → 1.73.0

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?
 

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

@@ -5,7 +5,7 @@ import { Text } from '~components/Text'
 import { Tab, TabList, TabPanel, Tabs } from '../index'
 
 const meta = {
-  title: 'Components/Tabs/Tabs (Future)/Tests',
+  title: 'Components/Tabs/Tabs (next)/Tabs (next) tests',
   parameters: {
     controls: { disable: true },
   },

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

@@ -5,7 +5,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { Tab, TabList, TabPanel, Tabs } from '../index'
 
 export default {
-  title: 'Components/Tabs/Tabs (Future)',
+  title: 'Components/Tabs/Tabs (next)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

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

@@ -5,7 +5,7 @@ import { Text } from '~components/Text'
 import { Tab, TabList, TabPanel, Tabs, type Key } from '../index'
 
 const meta = {
-  title: 'Components/Tabs/Tabs (Future)',
+  title: 'Components/Tabs/Tabs (next)',
   component: Tabs,
   args: {
     children: (

package/src/{__rc__ → __next__}/Tabs/subcomponents/TabList/TabList.tsx

@@ -5,8 +5,8 @@ import {
   TabListStateContext,
   type TabListProps as RACTabListProps,
 } from 'react-aria-components'
-import { Icon } from '~components/__rc__/Icon'
-import { isRTL as isRTLCheck } from '~components/__utilities__/isRTL'
+import { Icon } from '~components/__next__/Icon'
+import { isRTL as isRTLCheck } from '~components/utils/isRTL'
 import { SCROLL_AMOUNT } from '../../constants'
 import styles from './TabList.module.css'
 

package/src/{__rc__ → __next__}/Tag/RemovableTag/_docs/RemovableTag.mdx

@@ -4,11 +4,11 @@ import * as RemovableTagStories from './RemovableTag.stories'
 
 <Meta of={RemovableTagStories} />
 
-# RemovableTag
+# RemovableTag (next)
 
-<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__rc__/Tag/RemovableTag.tsx" />
+<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__next__/Tag/RemovableTag.tsx" />
 
-<KAIOInstallation exportNames="RemovableTag" />
+<KAIOInstallation exportNames="RemovableTag" isNext />
 
 ## Overview
 

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

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { RemovableTag } from '../index'
 
 export default {
-  title: 'Components/Tag/Future/RemovableTag',
+  title: 'Components/Tag/Tag (next)/RemovableTag',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

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

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { RemovableTag } from '../RemovableTag'
 
 const meta = {
-  title: 'Components/Tag/Future/RemovableTag',
+  title: 'Components/Tag/Tag (next)/RemovableTag',
   component: RemovableTag,
   args: {
     children: 'My tag',

package/src/{__rc__ → __next__}/Tag/RemovableTag/subcomponents/RemoveButton.tsx

@@ -1,6 +1,6 @@
 import React, { type ButtonHTMLAttributes } from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './RemoveButton.module.scss'
 

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

@@ -4,9 +4,9 @@ import * as TagMigrationStories from './Tag-migration-guide.stories'
 
 <Meta of={TagMigrationStories} />
 
-# Future Tag migration guide
+# Tag migration guide
 
-A brief guide on how and why to migrate from Kaizen's current `Tag` to the `future` release.
+A brief guide on how and why to migrate from Kaizen's current `Tag` to the `next` release.
 
 ## Why the change?
 
@@ -14,7 +14,7 @@ Tag was rebuilt to allow for greater composability as the number of cases for a
 
 ## Component and API changes at a glance
 
-There were a number key changes between current and future `Tag` to achieve the flexibility we were aiming to provide, we've listed these below but also go into further detail in the [migration examples](/docs/components-tag-future-migration-guide--migrationguide#migration-examples).
+There were a number key changes between current and next `Tag` to achieve the flexibility we were aiming to provide, we've listed these below but also go into further detail in the [migration examples](/docs/components-tag-next-migration-guide--migrationguide#migration-examples).
 
 - `variant` prop has been removed
   - This has been superseded by a combination of the `color` and `icon` prop
@@ -45,7 +45,7 @@ For the most part these can all be replaced with the use of the `color` prop, wi
 
 <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`.
+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 next `Tag` as `Children`.
 
 <Canvas of={TagMigrationStories.LiveIconComponentStory} sourceState="hidden" />
 
@@ -65,7 +65,7 @@ Note: because the icons convey meaning, they should have an accessible label tha
 
 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.
 
-Any Icons added as a child of future `Tag` will need to set their own colors and ensure the right contrast ratio is achieved.
+Any Icons added as a child of next `Tag` will need to set their own colors and ensure the right contrast ratio is achieved.
 
 ### Sentiment
 
@@ -87,7 +87,7 @@ This is also a good time to stop and check if this change is necessary. If there
 
 ### 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).
+The `dismissible` prop is no longer available in the next `Tag` component. We have split the dismissible functionality into the [RemovableTag](/docs/components-tag-next-removabletag--docs).
 
 This increases the hit box for the dismiss button and makes the `ariaLabel` in the `removeButtonProps` a required prop. This offers a more accessible experience for user and address one of the standing [accessibility issues](https://github.com/cultureamp/kaizen-discourse/issues/101) with the legacy `Tag`.
 
@@ -125,7 +125,7 @@ Following a similar pattern to the above, you can use the `RemovableTag` with an
 
 Originally the `Tag` was built with the assumption that it would always required spacing at the end. This necessitated the need for the `inline` prop to remove the margin from end when it was not required.
 
-In future `Tag` this has been removed so consumers can now control spacing with CSS properties like `gap` or `margin-inline`.
+In next `Tag` this has been removed so consumers can now control spacing with CSS properties like `gap` or `margin-inline`.
 
 #### Before
 
@@ -139,7 +139,7 @@ To simplify this example we have avoided DOM elements such as `ul` and `li`. In
 
 ### 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.
+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 next `Tag` as it presents a risk of violating accessibility standards. While truncation can still be achieved in next `Tag` via Tailwind or DOM manipulation, it is important to call out out this as a accessibility concern.
 
 #### Before
 

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

@@ -3,11 +3,11 @@ 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/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { RemovableTag, Tag } from '../..'
 
 const meta = {
-  title: 'Components/Tag/Future Tag Migration Guide',
+  title: 'Components/Tag/Migration guide',
   component: Tag,
   args: {
     children: 'My tag',