@kaizen/components 1.71.0 → 1.73.0

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

@@ -0,0 +1,191 @@
+import React from 'react'
+import { type Meta } from '@storybook/react'
+import { within } from '@storybook/test'
+import { Icon } from '~components/__next__/Icon'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
+import { Link, type LinkProps } from '../Link'
+
+export default {
+  title: 'Components/Link',
+  component: Link,
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const variants = ['primary', 'secondary'] satisfies LinkProps['variant'][]
+const sizes = ['extra-small', 'small', 'body', 'intro-lede'] satisfies LinkProps['size'][]
+const href = 'https://www.google.com' satisfies LinkProps['href']
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: ({ isReversed }) => (
+    <>
+      <StickerSheet
+        title="Link"
+        headers={[
+          'isUnderlined',
+          'isUnderlined + Icon Start',
+          'isUnderlined + Icon End',
+          'Icon start',
+          'Icon end',
+          'isDisabled',
+        ]}
+        isReversed={isReversed}
+      >
+        {variants.map((variant) =>
+          sizes.map((size) => (
+            <StickerSheet.Row key={size + variant} header={`${variant} (${size})`}>
+              <Link
+                variant={isReversed ? 'white' : variant}
+                size={size}
+                href={href}
+                isUnderlined={true}
+                isInline={false}
+              >
+                Link
+              </Link>
+              <Link
+                variant={isReversed ? 'white' : variant}
+                size={size}
+                href={href}
+                isUnderlined={true}
+                isInline={false}
+                icon={<Icon name="add" isPresentational />}
+                iconPosition="start"
+              >
+                Link
+              </Link>
+              <Link
+                variant={isReversed ? 'white' : variant}
+                size={size}
+                href={href}
+                isUnderlined={true}
+                isInline={false}
+                icon={<Icon name="add" isPresentational />}
+                iconPosition="end"
+              >
+                Link
+              </Link>
+              <Link
+                variant={isReversed ? 'white' : variant}
+                size={size}
+                href={href}
+                isUnderlined={false}
+                isInline={false}
+                icon={<Icon name="add" isPresentational />}
+                iconPosition="start"
+              >
+                Link
+              </Link>
+              <Link
+                variant={isReversed ? 'white' : variant}
+                size={size}
+                href={href}
+                isUnderlined={false}
+                isInline={false}
+                icon={<Icon name="add" isPresentational />}
+                iconPosition="end"
+              >
+                Link
+              </Link>
+              <Link
+                variant={isReversed ? 'white' : variant}
+                size={size}
+                href={href}
+                isUnderlined={true}
+                isInline={false}
+                isDisabled={true}
+              >
+                Link
+              </Link>
+            </StickerSheet.Row>
+          )),
+        )}
+      </StickerSheet>
+      <StickerSheet
+        title="Pseudo states"
+        headers={['isHovered', 'isFocusVisible', 'isPressed']}
+        isReversed={isReversed}
+      >
+        {variants.map((variant) => (
+          <StickerSheet.Row key={variant} isReversed={isReversed} header={variant}>
+            <Link
+              variant={isReversed ? 'white' : variant}
+              size="small"
+              href={href}
+              isUnderlined={true}
+              isInline={false}
+              icon={<Icon name="add" isPresentational />}
+              data-testid="testid__link-hover"
+            >
+              Label
+            </Link>
+            <Link
+              variant={isReversed ? 'white' : variant}
+              size="small"
+              href={href}
+              isUnderlined={true}
+              isInline={false}
+              icon={<Icon name="add" isPresentational />}
+              data-testid="testid__link-focus"
+            >
+              Label
+            </Link>
+            <Link
+              variant={isReversed ? 'white' : variant}
+              size="small"
+              href={href}
+              isUnderlined={true}
+              isInline={false}
+              icon={<Icon name="add" isPresentational />}
+              data-testid="testid__link-pressed"
+            >
+              Label
+            </Link>
+          </StickerSheet.Row>
+        ))}
+      </StickerSheet>
+    </>
+  ),
+  play: ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+    const focusLinks = canvas.getAllByTestId('testid__link-focus')
+    const hoverLinks = canvas.getAllByTestId('testid__link-hover')
+    const pressedLinks = canvas.getAllByTestId('testid__link-pressed')
+
+    focusLinks.forEach((Link) => {
+      Link.setAttribute('data-focus-visible', 'true')
+    })
+    hoverLinks.forEach((Link) => {
+      Link.setAttribute('data-hovered', 'true')
+    })
+    pressedLinks.forEach((Link) => {
+      Link.setAttribute('data-pressed', 'true')
+    })
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (Default)',
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (RTL)',
+  parameters: {
+    textDirection: 'rtl',
+  },
+}
+
+export const StickerSheetWhite: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: 'Sticker Sheet (White)',
+  parameters: {
+    reverseColors: true,
+  },
+  args: {
+    isReversed: true,
+  },
+}

package/src/Link/index.ts

@@ -0,0 +1 @@
+export * from './Link'

package/src/Link/subcomponents/LinkContent.tsx

@@ -0,0 +1,31 @@
+import React, { type ReactNode } from 'react'
+import { mergeClassNames } from '~components/utils/mergeClassNames'
+import styles from '../Link.module.css'
+
+export type LinkContentProps = {
+  children: ReactNode
+  icon?: JSX.Element
+  iconPosition?: 'start' | 'end'
+  isUnderlined: boolean
+}
+
+const LinkIcon = ({ icon }: { icon: JSX.Element }): JSX.Element => (
+  <span className={styles.icon}>{icon}</span>
+)
+
+export const LinkContent = ({
+  children,
+  icon,
+  iconPosition,
+  isUnderlined,
+}: LinkContentProps): JSX.Element => {
+  const iconPositionStyling = iconPosition === 'start' ? styles.iconStart : styles.iconEnd
+
+  return (
+    <span className={mergeClassNames(styles.linkContent, isUnderlined && styles.isUnderlined)}>
+      {icon && iconPosition === 'start' && <LinkIcon icon={icon} />}
+      <span className={mergeClassNames(icon && iconPositionStyling)}>{children}</span>
+      {icon && iconPosition === 'end' && <LinkIcon icon={icon} />}
+    </span>
+  )
+}

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} />
 
@@ -163,63 +163,7 @@ For resizing on smaller screens, consider using the `className` prop to leverage
 
 ## Client side routing
 
-To enable client side routing with the `LinkButton`, you will need to wrap your application in a [RouterProvider](https://react-spectrum.adobe.com/react-aria/routing.html#routerprovider) from the `react-aria-components` library. The allows you to set the `navigation` method that performs the client side routing in the `LinkButton` component. Refer to the framework specific guidance below for [Next.js](#nextjs-config-example) or [React Router](#react-router-config-example).
-
-### Next.js config example
-
-The following example demonstrates how you might use the React Aria's `RouterProvider` with `Next.js`'s Pages router. This will allow the `LinkButton` to navigate using the `router.push` method.
-
-```tsx
-// ...imports
-import type { AppProps } from 'next/app'
-import { type NextRouter } from 'next/router'
-import { RouterProvider as RacRouterProvider } from 'react-aria-components'
-
-// This provides the correct types for `routerOptions` based on the routing solution. As the component agnostic to routing technology this must defined here
-declare module 'react-aria-components' {
-  interface RouterConfig {
-    // index 2 is the types for the pages routerOptions
-    routerOptions: NonNullable<Parameters<NextRouter['push']>[2]>
-  }
-}
-
-function App({ Component, pageProps, router }: AppProps) {
-  return (
-    <FrontendServices {...config}>
-      {/* application code */}
-      <RacRouterProvider navigate={(href, opts) => router.push(href, undefined, opts)}>
-        <Component {...pageProps} />
-      </RacRouterProvider>
-      {/* application code */}
-    </FrontendServices>
-  )
-}
-
-export default App
-```
-
-The implementation in your application would then look something like this:
-
-```tsx
-import { useRouter } from 'next/router'
-import { LinkButton } from '@kaizen/components/v3/actions'
-
-const Component = () => {
-  const router = useRouter()
-
-  return (
-    <>
-      <LinkButton href="http://google.com">External link</LinkButton>
-      <LinkButton href={`${router.pathname}/path-1`}>Internal link</LinkButton>
-      <LinkButton href={`${router.pathname}/path-2`} routerOptions={{ scroll: false }}>
-        Link with routerOptions
-      </LinkButton>
-    </>
-  )
-}
-```
-
-Additional config options for Next.js can be found in the React Aria's documentation on the [RouterProvider](https://react-spectrum.adobe.com/react-aria/routing.html#nextjs), including the alternative setup for the [App router](https://react-spectrum.adobe.com/react-aria/routing.html##app-router).
+Please refer to the [client side routing](/docs/guides-client-side-routing--docs) for more information on how to set up client side routing with the `LinkButton`.
 
 ### React Router config example
 

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: (

package/src/Menu/_docs/MenuContentExample.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { MenuHeading } from '../subcomponents/MenuHeading'
 import { MenuItem } from '../subcomponents/MenuItem'
 import { MenuList } from '../subcomponents/MenuList'

package/src/Menu/_docs/examples.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { action } from '@storybook/addon-actions'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { MenuItem, MenuList } from '..'
 
 export const exampleActionButtonPropsButton = {

package/src/Menu/index.ts

@@ -17,8 +17,6 @@ import {
   type StatelessMenuProps as StatelessMenuPropsV1,
 } from './subcomponents/StatelessMenu'
 
-// Note: deprecate all of these once we have Button v3
-
 export const Menu = MenuV1
 export type MenuProps = MenuPropsV1
 

package/src/Modal/ConfirmationModal/ConfirmationModal.tsx

@@ -11,7 +11,7 @@ import {
   ModalFooter,
   ModalHeader,
 } from '~components/Modal/GenericModal'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from './ConfirmationModal.module.scss'
 
 type Mood = 'positive' | 'informative' | 'negative' | 'cautionary' | 'assertive'

package/src/Modal/GenericModal/_docs/GenericModal.spec.stories.tsx

@@ -6,7 +6,7 @@ import { expect, userEvent, waitFor, within } from '@storybook/test'
 import { GenericModal, ModalAccessibleLabel, ModalBody, ModalHeader } from '../index'
 
 const meta: Meta<typeof GenericModal> = {
-  title: 'Components/Modals/GenericModal/Tests',
+  title: 'Components/Modals/GenericModal (primitive)/Tests',
   component: GenericModal,
 }
 

package/src/Modal/GenericModal/_docs/GenericModal.stories.tsx

@@ -3,7 +3,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { GenericModal } from '../index'
 
 const meta = {
-  title: 'Components/Modals/GenericModal',
+  title: 'Components/Modals/GenericModal (primitive)',
   component: GenericModal,
   args: {
     children: 'Example content',

package/src/Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { IconButton } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { ModalBody } from '../ModalBody'
 import styles from './ModalHeader.module.scss'
 

package/src/MultiSelect/subcomponents/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, 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 './Checkbox.module.scss'
 

package/src/MultiSelect/subcomponents/MultiSelectToggle/MultiSelectToggle.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useId, type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { ClearButton } from '~components/ClearButton'
 import { type FieldMessageProps } from '~components/FieldMessage'
-import { Icon, RemovableTag } from '~components/__rc__'
+import { Icon, RemovableTag } from '~components/__next__'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { type MultiSelectOption } from '../../types'
 import styles from './MultiSelectToggle.module.scss'

package/src/Notification/subcomponents/CancelButton/CancelButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from '../GenericNotification/GenericNotification.module.scss'
 
 type CancelButtonProps = {

package/src/Notification/subcomponents/NotificationIcon/NotificationIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { type NotificationType, type NotificationVariant } from '~components/Notification/types'
-import { Icon } from '~components/__rc__'
+import { Icon } from '~components/__next__'
 import styles from './NotificationIcon.module.css'
 
 const NotificationIcon = ({ name }: { name: string }): JSX.Element => (

package/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { GenericButton, type GenericProps } from '~components/Button/GenericButton'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 
 export type DirectionalLinkProps = {
   label: string

package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from './TruncateIndicator.module.css'
 
 export const TruncateIndicator = (): JSX.Element => (

package/src/Popover/Popover.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { usePopper } from 'react-popper'
 import { Heading } 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 { type Placement, type PopoverSize, type PopoverVariant } from './types'
 import {

package/src/Popover/utils/classMappers.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import styles from '../Popover.module.scss'
 import { type PopoverSize, type PopoverVariant } from '../types'
 

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

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

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

@@ -2,7 +2,7 @@ import { type Meta, type StoryObj } from '@storybook/react'
 import { Radio } from '../index'
 
 const meta = {
-  title: 'Components/Radio controls/Radio',
+  title: 'Components/Radios/Radio (Primitive)',
   component: Radio,
   args: {
     id: 'radio',

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

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