@kaizen/components 1.71.0 → 1.72.0

package/src/DateRangePicker/DateRangePicker.tsx

@@ -15,7 +15,7 @@ import {
 } from '~components/Calendar/LegacyCalendarRange'
 import { Label } from '~components/Label'
 import { VisuallyHidden } from '~components/VisuallyHidden'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from './DateRangePicker.module.scss'
 
 export type DateRangePickerProps = {

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

@@ -10,7 +10,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { DateRangePicker, formatDateRangeValue, type DateRangePickerProps } from '../index'
 
 export default {
-  title: 'Components/Date controls/DateRangePicker',
+  title: 'Components/Datepickers/DateRangePicker',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/DateRangePicker/_docs/DateRangePicker.stories.tsx

@@ -5,7 +5,7 @@ import { type DateRange } from 'react-day-picker'
 import { DateRangePicker, formatDateRangeValue } from '../index'
 
 const meta = {
-  title: 'Components/Date controls/DateRangePicker',
+  title: 'Components/Datepickers/DateRangePicker',
   component: DateRangePicker,
   args: {
     labelText: 'Label',

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

@@ -2,7 +2,7 @@ import React from 'react'
 import { type Meta } from '@storybook/react'
 import isChromatic from 'chromatic'
 import { Button } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { EmptyState, type EmptyStateProps } from '../index'
 

package/src/EmptyState/_docs/EmptyState.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 } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { EmptyState } from '../index'
 
 const meta = {

package/src/ErrorPage/ErrorPage.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import { BrandMoment } from '~components/BrandMoment'
 import { BrandMomentError } from '~components/Illustration'
 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 { useErrorMessages, type ErrorStatuses } from './hooks'
 import styles from './ErrorPage.module.scss'

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

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

package/src/FieldGroup/_docs/FieldGroup.stories.tsx

@@ -4,7 +4,7 @@ import { Label } from '~components/Label'
 import { FieldGroup } from '../index'
 
 const meta = {
-  title: 'Components/FieldGroup',
+  title: 'Components/Form primitives/FieldGroup',
   component: FieldGroup,
   args: {
     children: (

package/src/FieldMessage/FieldMessage.tsx

@@ -1,7 +1,7 @@
 import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 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 './FieldMessage.module.scss'
 

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

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

package/src/FieldMessage/_docs/FieldMessage.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { FieldMessage } from '../index'
 
 const meta = {
-  title: 'Components/FieldMessage',
+  title: 'Components/Form primitives/FieldMessage',
   component: FieldMessage,
   args: {
     message:

package/src/Filter/FilterBar/subcomponents/AddFiltersMenu/AddFiltersMenu.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react'
 import { useIntl } from '@cultureamp/i18n-react-intl'
 import { Button } from '~components/Button'
 import { Menu, MenuItem, MenuList } from '~components/Menu'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { useFilterBarContext } from '../../context/FilterBarContext'
 
 export const AddFiltersMenu = (): JSX.Element => {

package/src/Filter/FilterButton/FilterButton/FilterButton.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { isRefObject } from '~components/utils/isRefObject'
 import { type FilterTriggerRef } from '../../Filter/types'
 import { FilterButtonBase, type FilterButtonBaseProps } from '../subcomponents/FilterButtonBase'

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import { ButtonGroup, type ButtonGroupProps } from '~components/ButtonGroup'
 import { type FilterTriggerRef } from '~components/Filter/Filter'
 import { Tooltip } from '~components/Tooltip'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type DataAttributes } from '~components/types/DataAttributes'
 import { isRefObject } from '~components/utils/isRefObject'
 import { FilterButton, type FilterButtonProps } from '../FilterButton'

package/src/Filter/FilterMultiSelect/subcomponents/MultiSelectOption/MultiSelectOption.tsx

@@ -5,7 +5,7 @@ import { mergeProps } from '@react-aria/utils'
 import classnames from 'classnames'
 import { Badge } from '~components/Badge'
 import { VisuallyHidden } from '~components/VisuallyHidden'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { useSelectionContext } from '../../context'
 import { type MultiSelectItem } from '../../types'
 import styles from './MultiSelectOption.module.scss'

package/src/Filter/FilterSelect/FilterSelect.tsx

@@ -4,7 +4,7 @@ import { HiddenSelect, useSelect } from '@react-aria/select'
 import { useSelectState, type SelectProps as AriaSelectProps } from '@react-stately/select'
 import { Filter, FilterContents } from '~components/Filter/Filter'
 import { type FilterButtonProps } from '~components/Filter/FilterButton'
-import { SelectProvider } from '~components/__rc__/Select/context'
+import { SelectProvider } from '~components/__next__/Select/context'
 import {
   ListBoxSection,
   ListItem,
@@ -12,9 +12,9 @@ import {
   SectionDivider,
   SelectPopoverContents,
   type SelectPopoverContentsProps,
-} from '~components/__rc__/Select/subcomponents'
-import { getDisabledKeysFromItems } from '~components/__rc__/Select/utils/getDisabledKeysFromItems'
-import { transformSelectItemToCollectionElement } from '~components/__rc__/Select/utils/transformSelectItemToCollectionElement'
+} from '~components/__next__/Select/subcomponents'
+import { getDisabledKeysFromItems } from '~components/__next__/Select/utils/getDisabledKeysFromItems'
+import { transformSelectItemToCollectionElement } from '~components/__next__/Select/utils/transformSelectItemToCollectionElement'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { type SelectItem, type SelectOption } from './types'
 import styles from './FilterSelect.module.css'

package/src/Filter/FilterSelect/types.ts

@@ -1,3 +1,3 @@
-// @todo: Remove this and use the types from Select when it is moved out from future.
+// @todo: Remove this and use the types from Select when it is moved out from next.
 // This is currently here to allow consumers access to the types from the entrypoint.
-export * from '~components/__rc__/Select/types'
+export * from '~components/__next__/Select/types'

package/src/{__rc__/Tooltip/subcomponents/Focusable → Focusable}/_docs/ApiSpecification.mdx

@@ -2,24 +2,24 @@ 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" />
+<Meta title="Components/Focusable/API Specification" />
 
-# Focusable API Specification (v3)
+# Focusable API Specification
 
 Updated June 25, 2024
 
 <ResourceLinks
-  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__rc__/Tooltip/subcomponents/Focusable"
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Focusable"
   className="mt-16 !mb-8"
 />
 
-<KAIOInstallation exportNames={['Focusable']} family="overlays" version="3" />
+<KAIOInstallation exportNames={['Focusable']} />
 
 ## 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).
+The main use case is for non semantic components like `Tag` that need a [Tooltip](/docs/overlays-tooltip-next-usage-guidelines--docs).
 
 <Canvas className="mb-24" of={exampleStories.Playground} />
 

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

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

package/src/GuidanceBlock/GuidanceBlock.tsx

@@ -6,7 +6,7 @@ import { Heading, type HeadingProps } from '~components/Heading'
 import { type SceneProps, type SpotProps } from '~components/Illustration'
 import { Text } from '~components/Text'
 import { Tooltip, type TooltipProps } from '~components/Tooltip'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type VariantType } from './types'
 import styles from './GuidanceBlock.module.css'
 

package/src/Icon/_docs/Icon.docs.stories.tsx

@@ -2,12 +2,12 @@ import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import * as ICONS from '~components/Icon'
 import { Text } from '~components/Text'
-import { Tag } from '~components/__rc__/Tag'
+import { Tag } from '~components/__next__/Tag'
 import { AddIcon } from '../index'
 import styles from './icon.module.scss'
 
 const meta = {
-  title: 'Components/Icon',
+  title: 'Components/Icon/Icon components (deprecated)',
   component: AddIcon,
   args: {
     role: 'presentation',

package/src/Icon/_docs/Icon.mdx

@@ -1,13 +1,15 @@
 import { Canvas, Controls, Meta, Story } from '@storybook/blocks'
-import { ResourceLinks } from '~storybook/components'
+import { ResourceLinks, ReplacementNotice } from '~storybook/components'
 import * as IconStories from './Icon.docs.stories'
 
 <Meta of={IconStories} />
 
-# Icon
+# Icon (deprecated)
 
 <ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Icons" />
 
+<ReplacementNotice />
+
 ## Installation
 
 Each icon is imported separately, for example if you'd like the `AddIcon` you will use the following import.

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

@@ -4,7 +4,7 @@ import * as ICONS from '~components/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 
 export default {
-  title: 'Components/Icon',
+  title: 'Components/Icon/Icon components (deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Illustration/utils/usePausePlay.tsx

@@ -1,5 +1,5 @@
 import React, { useState, type RefObject } from 'react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 
 export type usePausePlayHook = {
   toggle: () => void

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

@@ -1,12 +1,12 @@
 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 { Input, type InputProps } from '../index'
 import { InputStatus, InputTypes } from '../types'
 
 export default {
-  title: 'Components/Inputs/Input',
+  title: 'Components/TextField/Input (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Input/Input/_docs/Input.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 { Input } from '../index'
 
 const meta = {
-  title: 'Components/Inputs/Input',
+  title: 'Components/TextField/Input (primitive)',
   component: Input,
   parameters: {
     a11y: {

package/src/Input/InputRange/_docs/InputRange.stickersheet.stories.tsx

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

package/src/Input/InputRange/_docs/InputRange.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { InputRange } from '../index'
 
 const meta = {
-  title: 'Components/Inputs/InputRange',
+  title: 'Components/Slider/InputRange (primitive)',
   component: InputRange,
   args: {
     id: 'inputRange',

package/src/Input/InputSearch/InputSearch.tsx

@@ -3,7 +3,7 @@ import { useIntl } from '@cultureamp/i18n-react-intl'
 import classnames from 'classnames'
 import { ClearButton } from '~components/ClearButton'
 import { LoadingSpinner } from '~components/Loading'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './InputSearch.module.scss'
 

package/src/Input/InputSearch/_docs/InputSearch.stickersheet.stories.tsx

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

package/src/Input/InputSearch/_docs/InputSearch.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { InputSearch } from '../index'
 
 const meta = {
-  title: 'Components/Inputs/InputSearch',
+  title: 'Components/SearchField/InputSearch (primitive)',
   component: InputSearch,
   args: {
     id: 'search',

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

@@ -5,7 +5,7 @@ import { Label, type LabelProps } from '../index'
 import { BlockLabelTypes, InlineLabelTypes } from '../types'
 
 export default {
-  title: 'Components/Label',
+  title: 'Components/Form primitives/Label',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Label/_docs/Label.stories.tsx

@@ -4,7 +4,7 @@ import { Label } from '../index'
 import { LabelTypes } from '../types'
 
 const meta = {
-  title: 'Components/Label',
+  title: 'Components/Form primitives/Label',
   component: Label,
   args: {
     children: 'I am Label',

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

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

package/src/LabelledMessage/_docs/LabelledMessage.stories.tsx

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { LabelledMessage } from '../LabelledMessage'
 
 const meta = {
-  title: 'Components/LabelledMessage',
+  title: 'Components/Form primitives/LabelledMessage',
   component: LabelledMessage,
   args: {
     label: 'Label',

package/src/LikertScaleLegacy/LikertScaleLegacy.tsx

@@ -2,7 +2,7 @@ import React, { createRef, useState } from 'react'
 import classnames from 'classnames'
 import { FieldMessage } from '~components/FieldMessage'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type ColorSchema, type Scale, type ScaleItem, type ScaleValue } from './types'
 import determineSelectionFromKeyPress from './utils/determineSelectionFromKeyPress'
 import styles from './LikertScaleLegacy.module.scss'

package/src/LinkButton/LinkButton.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react'
 import { Link as RACLink, type LinkProps as RACLinkProps } from 'react-aria-components'
-import { type ButtonUIProps } from '~components/__rc__/Button'
-import { ButtonContent } from '~components/__rc__/Button/subcomponents'
-import { useReversedColors } from '~components/__utilities__/v3'
+import { type ButtonUIProps } from '~components/__next__/Button'
+import { ButtonContent } from '~components/__next__/Button/subcomponents'
+import { useReversedColors } from '~components/utils'
 import { mergeClassNames } from '~components/utils/mergeClassNames'
-import buttonStyles from '../__rc__/Button/Button.module.css'
+import buttonStyles from '../__next__/Button/Button.module.css'
 import styles from './LinkButton.module.css'
 
 export type LinkButtonProps = ButtonUIProps &

package/src/LinkButton/_docs/LinkButton--api-specification.mdx

@@ -11,14 +11,14 @@ Updated Dec 18, 2024
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__actions__/LinkButton/v3"
   figma="https://www.figma.com/design/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-Heart-UI-Kit?node-id=1929-17364"
-  designGuidelines="/?path=/docs/actions-linkbutton-linkbutton-v3-usage-guidelines--docs"
+  designGuidelines="/?path=/docs/components-linkbutton-usage-guidelines--docs"
 />
 
 <KAIOInstallation exportNames={'LinkButton'} />
 
 ## Overview
 
-`LinkButton` allows users to navigate to another page or resource. It shares the same visual styles and interaction states as the <LinkTo pageId="actions-button-button-v3-usage-guidelines--docs">Button</LinkTo> component, but is intended for navigational purposes and downloading documents.
+`LinkButton` allows users to navigate to another page or resource. It shares the same visual styles and interaction states as the <LinkTo pageId="components-button-button-next-usage-guidelines--docs">Button</LinkTo> component, but is intended for navigational purposes and downloading documents.
 
 The following example and table showcases the essential props that enable the core functionality of `LinkButton`. For the remaining suite of API options refer to [this section](#additional-api-options).
 
@@ -81,8 +81,8 @@ To enable the reversed theme, you will need to wrap the component or application
 
 ```tsx
 import { RouterProvider } from 'react-aria-components'
-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 (
@@ -100,7 +100,7 @@ LinkButton supports the following sizes: `small`, `medium` and `large`. If the `
 
 ### `onPress`
 
-As with <LinkTo pageId="actions-button-button-v3-usage-guidelines--docs">Button</LinkTo>, `LinkButton`'s API uses React Aria's `onPress` instead of `onClick`. Functionally this does not change the way we pass click events to a `LinkButton`. Consumers can safely replace `onClick` with `onPress` without any additional changes, ie:
+As with <LinkTo pageId="components-button-button-next-usage-guidelines--docs">Button</LinkTo>, `LinkButton`'s API uses React Aria's `onPress` instead of `onClick`. Functionally this does not change the way we pass click events to a `LinkButton`. Consumers can safely replace `onClick` with `onPress` without any additional changes, ie:
 
 ```tsx
 <Button
@@ -137,11 +137,11 @@ While in most cases, `children` will be a `ReactNode`, `LinkButton` also accepts
 
 ### Icons and positioning
 
-The `icon` property abstracts the need to handle positioning and sizing logic for icons within the `LinkButton`. When paired with the [Icon component](/docs/illustrations-icon-icon-future-api-specification--docs), this will scale the icon to the `LinkButton`'s `size` prop.
+The `icon` property abstracts the need to handle positioning and sizing logic for icons within the `LinkButton`. When paired with the [Icon component](/docs/illustrations-icon-icon-next-api-specification--docs), this will scale the icon to the `LinkButton`'s `size` prop.
 
 <Canvas of={exampleStories.LinkButtonWithIconStart} />
 
-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.LinkButtonWithIconEnd} />
 
@@ -202,7 +202,7 @@ The implementation in your application would then look something like this:
 
 ```tsx
 import { useRouter } from 'next/router'
-import { LinkButton } from '@kaizen/components/v3/actions'
+import { LinkButton } from '@kaizen/components'
 
 const Component = () => {
   const router = useRouter()

package/src/LinkButton/_docs/LinkButton--usage-guidelines.mdx

@@ -18,7 +18,7 @@ Updated Dec 18, 2024
 
 ## Overview
 
-`LinkButton` allows users to navigate to another page or resource. It shares the same visual styles and interaction states as the <LinkTo pageId="actions-button-button-v3-usage-guidelines--docs">Button</LinkTo> component, but is intended for navigational purposes and downloading documents.
+`LinkButton` allows users to navigate to another page or resource. It shares the same visual styles and interaction states as the <LinkTo pageId="components-button-button-next-usage-guidelines--docs">Button</LinkTo> component, but is intended for navigational purposes and downloading documents.
 
 <Canvas of={LinkButton.Playground} />
 

package/src/LinkButton/_docs/LinkButton.doc.stories.tsx

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

package/src/LinkButton/_docs/LinkButton.spec.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { VisuallyHidden } from '~components/VisuallyHidden'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { LinkButton } from '../index'
 
 const meta = {

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

@@ -1,7 +1,7 @@
 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 { LinkButton, type LinkButtonProps } from '../index'
 

package/src/Loading/LoadingGraphic/_docs/LoadingGraphic.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Avatar } from '~components/Avatar'
 import { BrandMomentPositiveOutro, Informative } from '~components/Illustration'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { StickerSheet } from '~storybook/components/StickerSheet'
 import { LoadingGraphic } from '../index'
 

package/src/Menu/_docs/Menu.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, Installation } from '~storybook/components'
+import { ResourceLinks, Installation, ReplacementNotice } from '~storybook/components'
 import * as MenuStories from './Menu.stories'
 
 <Meta of={MenuStories} />
 
-# Menu (v1)
+# Menu (deprecated)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Menu"
@@ -13,13 +13,13 @@ import * as MenuStories from './Menu.stories'
   className="!mb-8"
 />
 
+<ReplacementNotice />
+
 <Installation
   installCommand="pnpm add @kaizen/components"
-  importStatement='import { Menu, MenuDropdown, MenuList, MenuItem } from "@kaizen/components/v1/actions"'
+  importStatement='import { Menu, MenuDropdown, MenuList, MenuItem } from "@kaizen/components"'
 />
 
-It is recommended that you import from the `v2` entry point.
-
 ## Overview
 
 A menu contains links to places or button actions. It does NOT show a selected item at all and the menu button text never changes.

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

@@ -1,13 +1,13 @@
 import React from 'react'
 import { type Meta } from '@storybook/react'
 import { Button } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Menu } from '../index'
 import { MenuContentExample } from './MenuContentExample'
 
 export default {
-  title: 'Components/Menu/Menu (v1)',
+  title: 'Components/Menu/Menu (deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Menu/_docs/Menu.stories.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { Button } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { Menu } from '../index'
 import { MenuHeading } from '../subcomponents/MenuHeading'
 import { MenuItem } from '../subcomponents/MenuItem'
 import { MenuList } from '../subcomponents/MenuList'
 
 const meta = {
-  title: 'Components/Menu/Menu (v1)',
+  title: 'Components/Menu/Menu (deprecated)',
   component: Menu,
   args: {
     button: (