@kaizen/components 1.71.0 → 1.73.0

package/src/Radio/RadioField/_docs/RadioField.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { RadioField } from '../index'
 
 const meta = {
-  title: 'Components/Radio controls/RadioField',
+  title: 'Components/Radios/RadioField',
   component: RadioField,
   args: {
     labelText: 'Radio label',

package/src/Radio/RadioGroup/_docs/RadioGroup.stickersheet.stories.tsx

@@ -6,7 +6,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { RadioGroup } from '../index'
 
 export default {
-  title: 'Components/Radio controls/RadioGroup',
+  title: 'Components/Radios/RadioGroup',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Radio/RadioGroup/_docs/RadioGroup.stories.tsx

@@ -4,7 +4,7 @@ import { RadioField } from '~components/Radio/RadioField'
 import { RadioGroup } from '../index'
 
 const meta = {
-  title: 'Components/Radio controls/RadioGroup',
+  title: 'Components/Radios/RadioGroup',
   component: RadioGroup,
   args: {
     labelText: 'Radio group',

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stickersheet.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { ToggleIconButton, type ToggleIconButtonProps } from '../index'
 import { moodsList } from '../types'

package/src/RichTextEditor/RichTextEditor/subcomponents/ToggleIconButton/_docs/ToggleIconButton.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { ToggleIconButton } from '../ToggleIconButton'
 
 const meta = {

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/Toolbar.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { ToggleIconButton } from '../ToggleIconButton'
 import { ToolbarSection } from '../ToolbarSection'
 import { Toolbar } from '.'

package/src/RichTextEditor/RichTextEditor/subcomponents/Toolbar/_docs/Toolbar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { ToggleIconButton } from '../../ToggleIconButton'
 import { ToolbarSection } from '../../ToolbarSection'
 import { Toolbar } from '../index'

package/src/RichTextEditor/RichTextEditor/utils/controlmap.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type ToolbarControlTypes, type ToolbarItems } from '../../types'
 import { listIsActive, markIsActive } from '../../utils/commands'
 import {

package/src/RichTextEditor/utils/plugins/LinkManager/components/LinkPopover/LinkPopover.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { usePopover } from '~components/Popover'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type SelectionPosition } from '../../types'
 import { Positioner } from './Positioner'
 import styles from './LinkPopover.module.scss'

package/src/Select/Select.tsx

@@ -9,7 +9,7 @@ import Async, { type AsyncProps as ReactAsyncSelectProps } from 'react-select/as
 import { FieldMessage } from '~components/FieldMessage'
 import { Label } from '~components/Label'
 import { Tag } from '~components/Tag'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from './Select.module.scss'
 
 export type SelectProps = {

package/src/Select/_docs/Select.mdx

@@ -19,7 +19,7 @@ import * as SelectStories from './Select.stories'
 
 A select lets you choose options from an option menu. A single-select lets you choose one option while a multi-select lets you choose multiple options.
 
-**Note:** Select has a future version which partially replaces the functionality in this component. Please use the future component where possible for accessibility improvements.
+**Note:** Select has a next version which partially replaces the functionality in this component. Please use the next component where possible for accessibility improvements.
 
 <Canvas of={SelectStories.Playground} />
 <Controls of={SelectStories.Playground} />

package/src/SplitButton/subcomponents/DropdownButton/DropdownButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { BaseButton, type BaseButtonProps } from '../BaseButton'
 import styles from './DropdownButton.module.scss'
 

package/src/Table/Table.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { Checkbox, type CheckedStatus } from '~components/Checkbox'
 import { Heading } from '~components/Heading'
 import { Tooltip } from '~components/Tooltip'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Table.module.scss'
 

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { action } from '@storybook/addon-actions'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type StickerSheetStory } from '~storybook/components/StickerSheet'
 import {
   TableCard,

package/src/Table/_docs/Table.stories.tsx

@@ -4,7 +4,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { Checkbox } from '~components/Checkbox'
 import { Divider } from '~components/Divider'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import {
   TableCard,
   TableContainer,

package/src/Tabs/_docs/Tabs.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, ReplacementNotice } from '~storybook/components'
 import * as TabsStories from './Tabs.stories'
 
 <Meta of={TabsStories} />
 
-# Tabs
+# Tabs (deprecated)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tabs"
@@ -13,6 +13,8 @@ import * as TabsStories from './Tabs.stories'
 
 />
 
+<ReplacementNotice />
+
 <KAIOInstallation exportNames={['Tabs', 'TabList', 'Tab', 'TabPanels', 'TabPanel']} />
 
 ## Overview

package/src/Tabs/_docs/Tabs.stories.tsx

@@ -6,7 +6,7 @@ import { Text } from '~components/Text'
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from '../index'
 
 const meta = {
-  title: 'Components/Tabs',
+  title: 'Components/Tabs/Tabs (deprecated)',
   component: Tabs,
   args: {
     children: (

package/src/Tag/Tag.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Avatar, type AvatarProps } from '~components/Avatar'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { LiveIcon } from './subcomponents/LiveIcon/LiveIcon'
 import { type TagVariants } from './types'
 import styles from './Tag.module.scss'

package/src/Tag/_docs/Tag.mdx

@@ -1,11 +1,11 @@
 import { Canvas, Controls, Meta, Unstyled } from '@storybook/blocks'
 import { InlineNotification } from '~components/Notification'
-import { ResourceLinks, KAIOInstallation } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, ReplacementNotice } from '~storybook/components'
 import * as TagStories from './Tag.stories'
 
 <Meta of={TagStories} />
 
-# Tag
+# Tag (deprecated)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Tag"
@@ -14,12 +14,7 @@ import * as TagStories from './Tag.stories'
 
 />
 
-<Unstyled>
-  <InlineNotification type="cautionary" persistent>
-    {`This version of the Tag will soon be deprecated and will be removed in the next major release.
-    Import Tag from "@kaizen/components/future" for the latest version and view our migration guide in the Future folder`}
-  </InlineNotification>
-</Unstyled>
+<ReplacementNotice />
 
 <KAIOInstallation exportNames="Tag" />
 

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

@@ -6,7 +6,7 @@ import { Tag } from '../index'
 import { TagVariants } from '../types'
 
 export default {
-  title: 'Components/Tag',
+  title: 'Components/Tag/Tag (deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Tag/_docs/Tag.stories.tsx

@@ -5,7 +5,7 @@ import { Tag } from '../index'
 import { SentimentTagVariants, StatusTagVariants, ValidationTagVariants } from '../types'
 
 const meta = {
-  title: 'Components/Tag',
+  title: 'Components/Tag/Tag (deprecated)',
   component: Tag,
   args: {
     variant: 'default',

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

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { TextArea } from '../index'
 
 export default {
-  title: 'Components/Text Input controls/TextArea',
+  title: 'Components/TextAreaField/TextArea (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/TextArea/_docs/TextArea.stories.tsx

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { TextArea } from '../index'
 
 const meta = {
-  title: 'Components/Text Input controls/TextArea',
+  title: 'Components/TextAreaField/TextArea (primitive)',
   component: TextArea,
   parameters: {
     a11y: {

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

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { TextAreaField, type TextAreaFieldProps } from '../index'
 
 export default {
-  title: 'Components/Text Input controls/TextAreaField',
+  title: 'Components/TextAreaField',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/TextAreaField/_docs/TextAreaField.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { TextAreaField } from '../index'
 
 const meta = {
-  title: 'Components/Text Input controls/TextAreaField',
+  title: 'Components/TextAreaField',
   component: TextAreaField,
   args: {
     labelText: 'Label',

package/src/TextField/TextField.tsx

@@ -4,7 +4,7 @@ import { FieldGroup } from '~components/FieldGroup'
 import { FieldMessage } from '~components/FieldMessage'
 import { Input, type InputProps } from '~components/Input'
 import { Label } from '~components/Label'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from './TextField.module.scss'
 
 type OmittedInputProps = 'startIconAdornment' | 'endIconAdornment' | 'ariaDescribedBy' | 'ariaLabel'

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

@@ -5,7 +5,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { TextField, type TextFieldProps } from '../index'
 
 export default {
-  title: 'Components/Text Input controls/TextField',
+  title: 'Components/TextField',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/TextField/_docs/TextField.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { TextField } from '../index'
 
 const meta = {
-  title: 'Components/Text Input controls/TextField',
+  title: 'Components/TextField',
   component: TextField,
   args: {
     labelText: 'Label',

package/src/Tile/subcomponents/GenericTile/GenericTile.spec.stories.tsx

@@ -4,7 +4,7 @@ import { expect, waitFor, within } from '@storybook/test'
 import { GenericTile } from './GenericTile'
 
 const meta: Meta<typeof GenericTile> = {
-  title: 'Components/Tiles/GenericTile/Tests',
+  title: 'Components/Tiles/GenericTile (primitive)/Tests',
   component: GenericTile,
   args: {
     title: 'Title',

package/src/Tile/subcomponents/GenericTile/GenericTile.tsx

@@ -5,7 +5,7 @@ import { Button, IconButton } from '~components/Button'
 import type { GenericButtonProps } from '~components/Button/GenericButton'
 import { Heading, type AllowedHeadingTags } from '~components/Heading'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './GenericTile.module.scss'
 

package/src/Tile/subcomponents/GenericTile/_docs/GenericTile.stickersheet.stories.tsx

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

package/src/TitleBlockZen/TitleBlockZen.tsx

@@ -5,7 +5,7 @@ import { IconButton } from '~components/Button'
 import { Heading } from '~components/Heading'
 import { Select } from '~components/Select'
 import { Tag } from '~components/Tag'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { MainActions } from './subcomponents/MainActions'
 import { MobileActions } from './subcomponents/MobileActions'

package/src/TitleBlockZen/_docs/TitleBlockZen.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { StickerSheet } from '~storybook/components/StickerSheet'
 import { NavigationTab, TitleBlockZen } from '../index'

package/src/TitleBlockZen/subcomponents/MainActions.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, IconButton } from '~components/Button'
 import { Menu, MenuList } from '~components/Menu'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants'
 import {
   type DefaultActionProps,

package/src/TitleBlockZen/subcomponents/MobileActions.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { FocusOn } from 'react-focus-on'
 import type { ButtonProps } from '~components/Button'
 import { MenuHeading, MenuItem, MenuList } from '~components/Menu'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { TITLE_BLOCK_ZEN_OTHER_ACTIONS_HTML_ID } from '../constants'
 import {
   type DefaultActionProps,

package/src/TitleBlockZen/subcomponents/SecondaryActions.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button, IconButton } from '~components/Button'
 import { Menu, MenuList } from '~components/Menu'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from '../TitleBlockZen.module.scss'
 import { TITLE_BLOCK_ZEN_SECONDARY_MENU_HTML_ID } from '../constants'
 import { type SecondaryActionsProps, type TitleBlockMenuItemProps } from '../types'

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.tsx

@@ -1,6 +1,6 @@
 import React, { type InputHTMLAttributes } 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 './ToggleSwitch.module.scss'
 

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

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { ToggleSwitch } from '../index'
 
 export default {
-  title: 'Components/Toggle Switch controls/ToggleSwitch',
+  title: 'Components/ToggleSwitchField/ToggleSwitch (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/ToggleSwitch/ToggleSwitch/_docs/ToggleSwitch.stories.tsx

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { ToggleSwitch } from '../index'
 
 const meta = {
-  title: 'Components/Toggle Switch controls/ToggleSwitch',
+  title: 'Components/ToggleSwitchField/ToggleSwitch (primitive)',
   component: ToggleSwitch,
   parameters: {
     a11y: {

package/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.stickersheet.stories.tsx

@@ -4,7 +4,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { ToggleSwitchField } from '../ToggleSwitchField'
 
 export default {
-  title: 'Components/Toggle Switch controls/ToggleSwitchField',
+  title: 'Components/ToggleSwitchField',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/ToggleSwitch/ToggleSwitchField/_docs/ToggleSwitchField.stories.tsx

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { ToggleSwitchField } from '../ToggleSwitchField'
 
 const meta = {
-  title: 'Components/Toggle Switch controls/ToggleSwitchField',
+  title: 'Components/ToggleSwitchField',
   component: ToggleSwitchField,
   args: {
     labelText: 'Toggle me',

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
 }