@kaizen/components 1.70.24 → 1.72.0

package/dist/types/Filter/FilterSelect/FilterSelect.d.ts

@@ -1,6 +1,6 @@
 import { type SelectProps as AriaSelectProps } from '@react-stately/select';
 import { type FilterButtonProps } from "../FilterButton";
-import { type SelectPopoverContentsProps } from "../../__rc__/Select/subcomponents";
+import { type SelectPopoverContentsProps } from "../../__next__/Select/subcomponents";
 import { type OverrideClassName } from "../../types/OverrideClassName";
 import { type SelectItem, type SelectOption } from './types';
 type OmittedAriaSelectProps = 'label' | 'children' | 'isOpen' | 'onOpenChange' | 'defaultOpen' | 'items';
@@ -16,7 +16,7 @@ export declare const FilterSelect: {
     <Option extends SelectOption = SelectOption>({ isOpen, setIsOpen, renderTrigger, label, children, items, classNameOverride, selectedKey, ...restProps }: FilterSelectProps<Option>): JSX.Element;
     displayName: string;
     Section: {
-        <Option extends SelectOption = SelectOption>({ section, }: import("../../__rc__/Select/subcomponents").ListBoxSectionProps<Option>): JSX.Element;
+        <Option extends SelectOption = SelectOption>({ section, }: import("../../__next__/Select/subcomponents").ListBoxSectionProps<Option>): JSX.Element;
         displayName: string;
     };
     SectionDivider: {
@@ -24,11 +24,11 @@ export declare const FilterSelect: {
         displayName: string;
     };
     Option: {
-        <Option extends SelectOption = SelectOption>({ item, classNameOverride, ...props }: import("../../__rc__/Select/subcomponents").OptionProps<Option>): JSX.Element;
+        <Option extends SelectOption = SelectOption>({ item, classNameOverride, ...props }: import("../../__next__/Select/subcomponents").OptionProps<Option>): JSX.Element;
         displayName: string;
     };
     ItemDefaultRender: {
-        <Option extends SelectOption = SelectOption>({ item, }: import("../../__rc__/Select/subcomponents").ListItemProps<Option>): JSX.Element;
+        <Option extends SelectOption = SelectOption>({ item, }: import("../../__next__/Select/subcomponents").ListItemProps<Option>): JSX.Element;
         displayName: string;
     };
 };

package/dist/types/Filter/FilterSelect/types.d.ts

@@ -1 +1 @@
-export * from "../../__rc__/Select/types";
+export * from "../../__next__/Select/types";

package/dist/types/LinkButton/LinkButton.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type LinkProps as RACLinkProps } from 'react-aria-components';
-import { type ButtonUIProps } from "../__rc__/Button";
+import { type ButtonUIProps } from "../__next__/Button";
 export type LinkButtonProps = ButtonUIProps & Omit<RACLinkProps, 'children'> & {
     /** Used as the label for the LinkButton. */
     children: RACLinkProps['children'];

package/dist/types/Tooltip/index.d.ts

@@ -1,8 +1 @@
-import { type TooltipProps as TooltipPropsV1 } from './Tooltip';
-/** * @deprecated use v2 or upgrade to v3 for the latest release */
-export declare const Tooltip: {
-    ({ children, text, display, position, classNameOverride, portalSelector, animationDuration, isInitiallyVisible, mood, }: TooltipPropsV1): JSX.Element;
-    displayName: string;
-};
-/** * @deprecated use v2 or upgrade to v3 for the latest release */
-export type TooltipProps = TooltipPropsV1;
+export * from './Tooltip';

package/dist/types/{__rc__ → __next__}/Button/Button.d.ts

@@ -11,7 +11,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';
@@ -19,7 +19,7 @@ export type ButtonUIProps = {
     isFullWidth?: boolean;
     /**
      * Controls the reversed style of Button
-     * @deprecated Use the ReversedColors Provider instead. This is here to support gradual migration to the ReversedColors Provider and will take precedence if a value is provided. {@link https://cultureamp.design/?path=/docs/actions-button-button-v3-api-specification--docs#variants}
+     * @deprecated Use the ReversedColors Provider instead. This is here to support gradual migration to the ReversedColors Provider and will take precedence if a value is provided. {@link https://cultureamp.design/?path=/docs/actions-button-button-next-api-specification--docs#variants}
      */
     isReversed?: boolean;
 };

package/dist/types/{__rc__ → __next__}/Tooltip/index.d.ts

@@ -1,3 +1,2 @@
 export * from './Tooltip';
 export * from './TooltipTrigger';
-export * from './subcomponents/Focusable';

package/dist/types/{__rc__ → __next__}/index.d.ts

@@ -5,3 +5,4 @@ export * from './Select';
 export * from './Tag';
 export * from './Tabs';
 export * from './Tooltip';
+export * from '../Focusable';

package/dist/types/__utilities__/index.d.ts

@@ -0,0 +1 @@
+export * from '../utils/ReversedColors';

package/dist/types/index.d.ts

@@ -21,6 +21,7 @@ export * from './ErrorPage';
 export * from './FieldGroup';
 export * from './FieldMessage';
 export * from './Filter';
+export * from './Focusable';
 export * from './GuidanceBlock';
 export * from './Heading';
 export * from './Icon';

package/dist/types/utils/index.d.ts

@@ -1,2 +1,3 @@
 export * from './useMediaQueries';
 export * from './hostedAssets';
+export * from './ReversedColors';

package/dist/types/v3-actions.d.ts

@@ -1,2 +1,2 @@
-export * from './__rc__/Button';
-export * from './__rc__/Menu';
+export * from './__next__/Button';
+export * from './__next__/Menu';

package/dist/types/v3-overlays.d.ts

@@ -1 +1 @@
-export * from './__rc__/Tooltip';
+export * from './__next__/Tooltip';

package/future/README.md

@@ -1,27 +1,5 @@
 # Entrypoint: future
 
-This directory is here to redirect any imports from `@kaizen/components/future` to the correct distribution of compiled code to allow for treeshaking of future components.
+## Deprecation notice
 
-More details: [https://github.com/theKashey/multiple-entry-points-example](https://github.com/theKashey/multiple-entry-points-example)
-
-## Contribution
-
-All "future" components are to be added to the `src/__rc__` directory.
-
-### What is a "future" component?
-
-These are components which are scheduled to replace an already existing component. **It is not** to house unfinished components.
-
-eg. `Table` has been rebuilt and released as a "future" component for consumers to adopt.
-
-```
-// Current import which will be deprecated:
-import { Table } from "@kaizen/components"
-
-// Consumers adopt future components:
-import { Table } from "@kaizen/components/future"
-```
-
-Eventually, all future components are moved to the root import.
-
-More details [Kaizen AIO strategy: Old & new components side-by-side](https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/2963439636/Kaizen+all-in-one+strategy#Old-%26-new-components-side-by-side)
+This entrypoint will be removed in the 2.0 release of `@kaizen/components`. It is being replaced by the `next` entrypoint.

package/future/package.json

@@ -1,5 +1,5 @@
 {
   "main": "../dist/cjs/future.cjs",
   "module": "../dist/esm/future.mjs",
-  "types": "../dist/types/__rc__/index.d.ts"
+  "types": "../dist/types/__next__/index.d.ts"
 }

package/next/README.md

@@ -0,0 +1,27 @@
+# Entrypoint: next
+
+This directory is here to redirect any imports from `@kaizen/components/next` to the correct distribution of compiled code to allow for treeshaking of next components.
+
+More details: [https://github.com/theKashey/multiple-entry-points-example](https://github.com/theKashey/multiple-entry-points-example)
+
+## Contribution
+
+All "next" components are to be added to the `src/__next__` directory.
+
+### What is a "next" component?
+
+These are components which are scheduled to replace an already existing component. **It is not** to house unfinished components.
+
+eg. `Table` has been rebuilt and released as a "next" component for consumers to adopt.
+
+```
+// Current import which will be deprecated:
+import { Table } from "@kaizen/components"
+
+// Consumers adopt future components:
+import { Table } from "@kaizen/components/next"
+```
+
+Eventually, all next components are moved to the root import.
+
+More details [Kaizen AIO strategy: Old & new components side-by-side](https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/2963439636/Kaizen+all-in-one+strategy#Old-%26-new-components-side-by-side)

package/next/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "../dist/cjs/next.cjs",
+  "module": "../dist/esm/next.mjs",
+  "types": "../dist/types/__next__/index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.24",
+  "version": "1.72.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -16,6 +16,7 @@
     "bin",
     "codemods",
     "future",
+    "next",
     "v1",
     "v2",
     "v3",
@@ -39,7 +40,12 @@
     "./future": {
       "import": "./dist/esm/future.mjs",
       "require": "./dist/cjs/future.cjs",
-      "types": "./dist/types/__rc__/index.d.ts"
+      "types": "./dist/types/__next__/index.d.ts"
+    },
+    "./next": {
+      "import": "./dist/esm/next.mjs",
+      "require": "./dist/cjs/next.cjs",
+      "types": "./dist/types/__next__/index.d.ts"
     },
     "./v1/actions": {
       "import": "./dist/esm/actionsV1.mjs",
@@ -84,7 +90,7 @@
     "./v3/utilities": {
       "import": "./dist/esm/utilitiesV3.mjs",
       "require": "./dist/cjs/utilitiesV3.cjs",
-      "types": "./dist/types/__utilities__/v3.d.ts"
+      "types": "./dist/types/__utilities__/index.d.ts"
     },
     "./dist/styles.css": {
       "import": "./dist/styles.css",
@@ -179,8 +185,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/design-tokens": "10.8.7",
-    "@kaizen/package-bundler": "2.0.4"
+    "@kaizen/package-bundler": "2.0.4",
+    "@kaizen/design-tokens": "10.8.7"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Avatar/Avatar.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState, type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Textfit } from 'react-textfit'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './Avatar.module.css'
 

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

@@ -10,7 +10,7 @@ import { BrandMoment } from '../BrandMoment'
 import { Informative, Success, Warning } from './BrandMoment.stories'
 
 export default {
-  title: 'Components/BrandMoment',
+  title: 'Pages/BrandMoment',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/BrandMoment/_docs/BrandMoment.stories.tsx

@@ -9,7 +9,7 @@ import {
   type AnimatedSceneProps,
 } from '~components/Illustration'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { BrandMoment } from '../index'
 import { FakeNavBar, MinimalBasic, MinimalCustomerFocused } from './ExampleHeaders'
 
@@ -20,7 +20,7 @@ const illustrationProps = (
 ) satisfies AnimatedSceneProps
 
 const meta = {
-  title: 'Components/BrandMoment',
+  title: 'Pages/BrandMoment',
   component: BrandMoment,
   argTypes: {
     mood: { control: false },

package/src/BrandMoment/_docs/ExampleHeaders.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Button } from '~components/Button'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { assetUrl } from '~components/utils/hostedAssets'
 import styles from './ExampleHeaders.module.scss'
 

package/src/Button/Button/_docs/Button.mdx

@@ -1,19 +1,20 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, LinkTo, ReplacementNotice } from '~storybook/components'
 import * as ButtonStories from './Button.stories'
 
 <Meta of={ButtonStories} />
 
-# Button (v1)
+# Button (deprecated)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/Button"
   figma="https://www.figma.com/file/ZRfnoNUXbGZv4eVWLbF4Az/%F0%9F%96%BC%EF%B8%8F-Component-Gallery"
   designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3062890984/Button"
-
 />
 
-<KAIOInstallation exportNames="Button" family="actions" version="1" />
+<ReplacementNotice />
+
+<KAIOInstallation exportNames="Button" />
 
 ## Overview
 

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

@@ -1,11 +1,11 @@
 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 { Button, type ButtonProps } from '../index'
 
 export default {
-  title: 'Components/Button/Button (v1)',
+  title: 'Components/Button/Button (deprecated)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Button/Button/_docs/Button.stories.tsx

@@ -2,11 +2,11 @@ import React, { useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { LoadingInput } from '~components/Loading'
 import { TextField } from '~components/TextField'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { Button } from '../index'
 
 const meta = {
-  title: 'Components/Button/Button (v1)',
+  title: 'Components/Button/Button (deprecated)',
   component: Button,
   args: {
     label: 'Label',

package/src/Button/IconButton/_docs/IconButton.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks'
-import { ResourceLinks, KAIOInstallation, LinkTo } from '~storybook/components'
+import { ResourceLinks, KAIOInstallation, LinkTo, ReplacementNotice } from '~storybook/components'
 import * as IconButtonStories from './IconButton.stories'
 
 <Meta of={IconButtonStories} />
 
-# IconButton (v1)
+# IconButton (deprecated)
 
 <ResourceLinks
   sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/Button/IconButton"
@@ -13,7 +13,9 @@ import * as IconButtonStories from './IconButton.stories'
 
 />
 
-<KAIOInstallation exportNames="IconButton" family="actions" version="1" />
+<ReplacementNotice />
+
+<KAIOInstallation exportNames="IconButton" isNext />
 
 ## Overview
 

package/src/Button/IconButton/_docs/IconButton.stickersheet.stories.tsx

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

package/src/Button/IconButton/_docs/IconButton.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 { IconButton } from '../index'
 
 const meta = {
-  title: 'Components/IconButton/IconButton (v1)',
+  title: 'Components/Button/IconButton (deprecated)',
   component: IconButton,
   argTypes: {
     icon: {

package/src/Calendar/CalendarPopover/CalendarPopover.module.scss

@@ -17,3 +17,11 @@
     padding: $spacing-24;
   }
 }
+
+// Overrides for if the browser supports popovers. The inset unset is to fix a bug with RTL positioning https://github.com/floating-ui/floating-ui/issues/3221
+// Margin 0 because default styling for [popover] is margin: auto to center it.
+.calendarPopover[popover]:popover-open {
+  z-index: unset;
+  margin: 0;
+  inset: unset;
+}

package/src/Calendar/CalendarPopover/CalendarPopover.tsx

@@ -1,4 +1,4 @@
-import React, { useState, type HTMLAttributes } from 'react'
+import React, { useEffect, useState, type HTMLAttributes } from 'react'
 import {
   autoPlacement,
   autoUpdate,
@@ -30,7 +30,7 @@ export const CalendarPopover = ({
 }: CalendarPopoverProps): JSX.Element => {
   const [floatingElement, setFloatingElement] = useState<HTMLDivElement | null>(null)
 
-  const { floatingStyles } = useFloating({
+  const { floatingStyles, update } = useFloating({
     placement: 'bottom-start',
     elements: {
       reference: referenceElement,
@@ -57,6 +57,15 @@ export const CalendarPopover = ({
     ...floatingOptions,
   })
 
+  useEffect(() => {
+    if (floatingElement && referenceElement) {
+      // @ts-expect-error this can be removed when we update to react 19
+      referenceElement.popoverTargetElement = floatingElement
+      floatingElement.showPopover?.()
+      update()
+    }
+  }, [referenceElement, floatingElement, update])
+
   return (
     <div
       ref={setFloatingElement}
@@ -64,6 +73,8 @@ export const CalendarPopover = ({
       className={classnames(styles.calendarPopover, classNameOverride)}
       role="dialog"
       aria-modal="true"
+      // @ts-expect-error this can be removed when we update to react 19
+      popover="manual"
       {...restProps}
     >
       {children}

package/src/Calendar/CalendarPopover/_docs/CalendarPopover.stickersheet.stories.tsx

@@ -1,14 +1,13 @@
 import React from 'react'
 import { autoPlacement, offset, size } from '@floating-ui/react-dom'
 import { type Meta } from '@storybook/react'
-import { Text } from '~components/Text'
 import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { CalendarRange } from '../../CalendarRange'
 import { CalendarSingle } from '../../CalendarSingle'
 import { CalendarPopover, type CalendarPopoverProps } from '../index'
 
 export default {
-  title: 'Components/Date controls/Calendars/CalendarPopover',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarPopover (primitive)',
   parameters: {
     chromatic: {
       disable: false,
@@ -150,56 +149,3 @@ export const StickerSheetRTL: StickerSheetStory = {
     textDirection: 'rtl',
   },
 }
-
-export const StickerSheetResponsive: StickerSheetStory = {
-  name: 'Sticker Sheet (Responsive)',
-  render: () => (
-    <>
-      <Text variant="intro-lede" classNameOverride="mb-12 ">
-        CalendarSingle scaled to availableHeight
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarSingle selected={new Date('2022-02-19')} />
-        </CalendarPopoverExample>
-      </div>
-      <Text variant="intro-lede" classNameOverride="mb-12 ">
-        CalendarRange scaled to availableHeight
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarRange
-            selected={{
-              from: new Date('2022-02-19'),
-              to: new Date('2022-03-04'),
-            }}
-            hasDivider
-          />
-        </CalendarPopoverExample>
-      </div>
-      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
-        CalendarSingle scaled to availableWidth
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarSingle selected={new Date('2022-03-19')} />
-        </CalendarPopoverExample>
-      </div>
-      <Text variant="intro-lede" classNameOverride="mb-12 mt-24">
-        CalendarRanger scaled to availableWidth
-      </Text>
-      <div className="h-[250px] p-12 bg-purple-100 overflow-hidden relative w-[250px]">
-        <CalendarPopoverExample strategy="absolute">
-          <CalendarRange
-            data-testid="sb-final-calendar"
-            selected={{
-              from: new Date('2022-02-19'),
-              to: new Date('2022-03-04'),
-            }}
-            hasDivider
-          />
-        </CalendarPopoverExample>
-      </div>
-    </>
-  ),
-}

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import { enAU } from 'date-fns/locale'
 import { DayPicker, type DayPickerRangeProps } from 'react-day-picker'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
 import { isInvalidDate } from '../utils'

package/src/Calendar/CalendarRange/_docs/CalendarRange.stickersheet.stories.tsx

@@ -5,7 +5,7 @@ import { StickerSheet, type StickerSheetStory } from '~storybook/components/Stic
 import { CalendarRange, type CalendarRangeProps } from '../../index'
 
 export default {
-  title: 'Components/Date controls/Calendars/CalendarRange',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarRange (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Calendar/CalendarRange/_docs/CalendarRange.stories.tsx

@@ -6,7 +6,7 @@ import { type DateRange } from '../../types'
 import { CalendarRange } from '../index'
 
 const meta = {
-  title: 'Components/Date controls/Calendars/CalendarRange',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarRange (primitive)',
   component: CalendarRange,
   argTypes: {
     ...defaultMonthControls,

package/src/Calendar/CalendarSingle/CalendarSingle.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react'
 import { enAU } from 'date-fns/locale'
 import { DayPicker, type DayPickerSingleProps } from 'react-day-picker'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
 import { isInvalidDate, isValidWeekStartsOn } from '../utils'

package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stickersheet.stories.tsx

@@ -6,7 +6,7 @@ import styles from '../../baseCalendarClassNames.module.scss'
 import { CalendarSingle, type CalendarSingleProps } from '../index'
 
 export default {
-  title: 'Components/Date controls/Calendars/CalendarSingle',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarSingle (primitive)',
   parameters: {
     chromatic: { disable: false },
     controls: { disable: true },

package/src/Calendar/CalendarSingle/_docs/CalendarSingle.stories.tsx

@@ -5,7 +5,7 @@ import { weekStartsOnControls } from '../../_docs/controls/weekStartsOnControls'
 import { CalendarSingle } from '../index'
 
 const meta = {
-  title: 'Components/Date controls/Calendars/CalendarSingle',
+  title: 'Components/Datepickers/Calendars (primitives)/CalendarSingle (primitive)',
   component: CalendarSingle,
   argTypes: {
     ...defaultMonthControls,

package/src/Calendar/LegacyCalendarRange/LegacyCalendarRange.tsx

@@ -7,7 +7,7 @@ import {
   type DayPickerRangeProps,
   type Matcher,
 } from 'react-day-picker'
-import { Icon } from '~components/__rc__/Icon'
+import { Icon } from '~components/__next__/Icon'
 import { baseCalendarClassNames } from '../baseCalendarClassNames'
 import { DayOfWeek } from '../enums'
 import { isInvalidDate, isValidWeekStartsOn } from '../utils'

package/src/Checkbox/Checkbox/Checkbox.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 './Checkbox.module.scss'
 

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

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

package/src/Checkbox/Checkbox/_docs/Checkbox.stories.tsx

@@ -4,7 +4,7 @@ import { type CheckboxFieldProps } from '~components/Checkbox'
 import { Checkbox } from '../index'
 
 const meta = {
-  title: 'Components/Checkbox controls/Checkbox',
+  title: 'Components/Checkboxes/Checkbox (primitive)',
   component: Checkbox,
   args: {
     checkedStatus: 'off',

package/src/Checkbox/CheckboxField/_docs/CheckboxField.stickersheet.stories.tsx

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