@kaizen/components 1.68.13 → 1.69.1

package/src/{__actions__/Menu/v3 → __rc__/Menu}/_docs/Menu.spec.stories.tsx

@@ -1,14 +1,13 @@
 import React, { useState } from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import { expect, userEvent, waitFor, within, fn } from '@storybook/test'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test'
 import isChromatic from 'chromatic'
-import { Popover, Header, Section } from 'react-aria-components'
-import { Button } from '~components/__actions__/v3'
-import { Icon } from '~components/__future__/Icon'
-import { Menu, MenuItem, MenuTrigger } from '../index'
+import { Button } from '~components/__rc__/Button'
+import { Icon } from '~components/__rc__/Icon'
+import { Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuTrigger } from '../index'
 
 const meta = {
-  title: 'Actions/Menu/v3/Tests',
+  title: 'Components/Menu/Menu (v3)/Tests',
   component: MenuTrigger,
   args: {
     defaultOpen: isChromatic(),
@@ -44,10 +43,10 @@ export const KitchenSink: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
-          <Section>
-            <Header>Section One</Header>
+          <MenuSection>
+            <MenuHeader>Section One</MenuHeader>
             <MenuItem
               icon={<Icon name="bookmark" isPresentational />}
               href="https://cultureamp.com"
@@ -55,14 +54,14 @@ export const KitchenSink: Story = {
               Save
             </MenuItem>
             <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>Edit</MenuItem>
-          </Section>
-          <Section>
+          </MenuSection>
+          <MenuSection>
             <MenuItem icon={<Icon name="arrow_upward" isPresentational />}>Move Up</MenuItem>
             <MenuItem icon={<Icon name="arrow_downward" isPresentational />}>
               Menu item with a longer label
             </MenuItem>
-          </Section>
-          <Section>
+          </MenuSection>
+          <MenuSection>
             <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>Delete</MenuItem>
             <MenuItem icon={<Icon name="delete" isPresentational isFilled />} isDisabled>
               Delete but disabled
@@ -70,9 +69,9 @@ export const KitchenSink: Story = {
             <MenuItem>Other action</MenuItem>
             <MenuItem>Other action</MenuItem>
             <MenuItem>Other action</MenuItem>
-          </Section>
+          </MenuSection>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -89,7 +88,7 @@ export const Basic: Story = {
         Additional actions
       </Button>
 
-      <Popover>
+      <MenuPopover>
         <Menu>
           <MenuItem
             icon={<Icon name="warning" isPresentational isFilled />}
@@ -108,7 +107,7 @@ export const Basic: Story = {
           <MenuItem>Item 4</MenuItem>
           <MenuItem>Item 5</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
   play: async ({ canvasElement, step }) => {
@@ -165,7 +164,7 @@ export const DisabledItems: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <MenuItem isDisabled onAction={mockOnClick}>
             Item 1
@@ -175,7 +174,7 @@ export const DisabledItems: Story = {
           <MenuItem>Item 4</MenuItem>
           <MenuItem>Item 5</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
   play: async ({ canvasElement, step }) => {
@@ -210,22 +209,22 @@ export const WithSections: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
-          <Section>
-            <Header>Section One</Header>
+          <MenuSection>
+            <MenuHeader>Section One</MenuHeader>
             <MenuItem>Item 1</MenuItem>
             <MenuItem>Item 2</MenuItem>
-          </Section>
+          </MenuSection>
 
-          <Section>
-            <Header>Section Two</Header>
+          <MenuSection>
+            <MenuHeader>Section Two</MenuHeader>
             <MenuItem>Item 3</MenuItem>
             <MenuItem>Item 4</MenuItem>
             <MenuItem>Item 5</MenuItem>
-          </Section>
+          </MenuSection>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -246,7 +245,7 @@ export const Controlled: Story = {
           >
             Additional actions
           </Button>
-          <Popover>
+          <MenuPopover>
             <Menu>
               <MenuItem>Item 1</MenuItem>
               <MenuItem onAction={() => setOpen(true)}>Item 2</MenuItem>
@@ -254,7 +253,7 @@ export const Controlled: Story = {
               <MenuItem>Item 4</MenuItem>
               <MenuItem>Item 5</MenuItem>
             </Menu>
-          </Popover>
+          </MenuPopover>
         </MenuTrigger>
       </>
     )

package/src/{__actions__/Menu/v3 → __rc__/Menu}/_docs/Menu.stories.tsx

@@ -1,21 +1,23 @@
-import React, { FunctionComponent } from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import React, { type FunctionComponent } from 'react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import isChromatic from 'chromatic'
-import { Popover } from 'react-aria-components'
 import { Text } from '~components/Text'
-import { Button } from '~components/__actions__/v3'
-import { Icon } from '~components/__future__/Icon'
-import { Menu, MenuTrigger, MenuItem } from '../index'
+import { Button } from '~components/__rc__/Button'
+import { Icon } from '~components/__rc__/Icon'
+import { Menu, MenuHeader, MenuItem, MenuPopover, MenuSection, MenuTrigger } from '../index'
 import * as testStories from './Menu.spec.stories'
 
 const meta = {
-  title: 'Actions/Menu/v3',
+  title: 'Components/Menu/Menu (v3)',
   component: MenuTrigger,
   args: {
     defaultOpen: isChromatic(),
     children: <></>,
   },
-  subcomponents: { Menu, MenuItem } as Record<string, FunctionComponent<any>>,
+  subcomponents: { Menu, MenuItem, MenuPopover, MenuSection, MenuHeader } as Record<
+    string,
+    FunctionComponent<any>
+  >,
 } satisfies Meta<typeof MenuTrigger>
 
 export default meta
@@ -33,7 +35,7 @@ export const Playground: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <MenuItem icon={<Icon name="bookmark" isPresentational />}>Save</MenuItem>
           <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>Edit</MenuItem>
@@ -41,7 +43,7 @@ export const Playground: Story = {
           <MenuItem icon={<Icon name="arrow_downward" isPresentational />}>Move down</MenuItem>
           <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>Delete</MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }
@@ -71,7 +73,7 @@ export const RichContent: Story = {
       >
         Additional actions
       </Button>
-      <Popover>
+      <MenuPopover>
         <Menu>
           <MenuItem textValue="Save">
             <div>Save</div>
@@ -92,7 +94,37 @@ export const RichContent: Story = {
             </Text>
           </MenuItem>
         </Menu>
-      </Popover>
+      </MenuPopover>
+    </MenuTrigger>
+  ),
+}
+
+export const Sections: Story = {
+  render: ({ defaultOpen: _, ...args }) => (
+    <MenuTrigger {...args}>
+      <Button
+        size="large"
+        icon={<Icon name="more_horiz" isPresentational />}
+        variant="secondary"
+        hasHiddenLabel
+      >
+        Additional actions
+      </Button>
+      <MenuPopover>
+        <Menu>
+          <MenuSection>
+            <MenuHeader>Adjust</MenuHeader>
+            <MenuItem icon={<Icon name="bookmark" isPresentational />}>Save</MenuItem>
+            <MenuItem icon={<Icon name="edit" isPresentational isFilled />}>Edit</MenuItem>
+          </MenuSection>
+          <MenuSection>
+            <MenuHeader>Order</MenuHeader>
+            <MenuItem icon={<Icon name="arrow_upward" isPresentational />}>Move up</MenuItem>
+            <MenuItem icon={<Icon name="arrow_downward" isPresentational />}>Move down</MenuItem>
+            <MenuItem icon={<Icon name="delete" isPresentational isFilled />}>Delete</MenuItem>
+          </MenuSection>
+        </Menu>
+      </MenuPopover>
     </MenuTrigger>
   ),
 }

package/src/__rc__/Menu/index.ts

@@ -0,0 +1,6 @@
+export * from './Menu'
+export * from './MenuItem'
+export * from './MenuTrigger'
+export * from './MenuPopover'
+export * from './MenuSection'
+export * from './MenuHeader'

package/src/{__future__ → __rc__}/Select/Select.spec.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { render, waitFor, screen, within } from '@testing-library/react'
+import { render, screen, waitFor, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { vi } from 'vitest'
-import { Select, SelectProps } from './Select'
+import { Select, type SelectProps } from './Select'
 import { singleMockItems } from './_docs/mockData'
 const user = userEvent.setup()
 

package/src/{__future__ → __rc__}/Select/Select.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useId, useState } from 'react'
-import { UseFloatingReturn } from '@floating-ui/react-dom'
+import { type UseFloatingReturn } from '@floating-ui/react-dom'
 import { useButton } from '@react-aria/button'
 import { HiddenSelect, useSelect } from '@react-aria/select'
-import { useSelectState, SelectProps as AriaSelectProps } from '@react-stately/select'
-import { Key } from '@react-types/shared'
+import { useSelectState, type SelectProps as AriaSelectProps } from '@react-stately/select'
+import { type Key } from '@react-types/shared'
 import classnames from 'classnames'
 import { FieldMessage } from '~components/FieldMessage'
 import { Popover, useFloating } from '~components/MultiSelect/subcomponents/Popover'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { SelectProvider } from './context'
 import {
   ListBox,
@@ -16,11 +16,11 @@ import {
   Option,
   SectionDivider,
   SelectPopoverContents,
-  SelectPopoverContentsProps,
   SelectToggle,
-  SelectToggleProps,
+  type SelectPopoverContentsProps,
+  type SelectToggleProps,
 } from './subcomponents'
-import { SelectItem, SelectOption } from './types'
+import { type SelectItem, type SelectOption } from './types'
 import { getDisabledKeysFromItems } from './utils/getDisabledKeysFromItems'
 import { transformSelectItemToCollectionElement } from './utils/transformSelectItemToCollectionElement'
 import styles from './Select.module.scss'

package/src/{__future__ → __rc__}/Select/_docs/Select.stickersheet.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Meta } from '@storybook/react'
+import { type Meta } from '@storybook/react'
 import isChromatic from 'chromatic'
-import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Select } from '../index'
 import {
   groupedMockItems,

package/src/{__future__ → __rc__}/Select/_docs/Select.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { ContextModal } from '~components/Modal'
 import { RadioField, RadioGroup } from '~components/Radio'
 import { Select } from '../Select'
-import { SelectOption } from '../types'
+import { type SelectOption } from '../types'
 import { groupedMockItems, mixedMockItemsDisabled, singleMockItems } from './mockData'
 
 const meta = {

package/src/{__future__ → __rc__}/Select/_docs/mockData.ts

@@ -1,4 +1,4 @@
-import { SelectItem } from '../types'
+import { type SelectItem } from '../types'
 
 export const singleMockItems: SelectItem[] = [
   { label: 'Short black', value: 'short-black' },

package/src/{__future__ → __rc__}/Select/context/SelectContext.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
-import { SelectState } from '@react-stately/select'
-import { SelectItem, SelectOption } from '../types'
+import { type SelectState } from '@react-stately/select'
+import { type SelectItem, type SelectOption } from '../types'
 
 // We set the generic default value to `any` as SelectContext
 // is instantiated as a constant which does not accept generics.

package/src/{__future__ → __rc__}/Select/subcomponents/ListBox/ListBox.tsx

@@ -1,11 +1,11 @@
-import React, { HTMLAttributes, Key, useEffect, useRef, ReactNode } from 'react'
-import { AriaListBoxOptions, useListBox } from '@react-aria/listbox'
-import { SelectState } from '@react-stately/select'
+import React, { useEffect, useRef, type HTMLAttributes, type Key, type ReactNode } from 'react'
+import { useListBox, type AriaListBoxOptions } from '@react-aria/listbox'
+import { type SelectState } from '@react-stately/select'
 import classnames from 'classnames'
 import { useIsClientReady } from '~components/__utilities__/useIsClientReady'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useSelectContext } from '../../context'
-import { SelectOption, SelectItem } from '../../types'
+import { type SelectItem, type SelectOption } from '../../types'
 import styles from './ListBox.module.scss'
 
 export type SingleListBoxProps<Option extends SelectOption> = OverrideClassName<

package/src/{__future__ → __rc__}/Select/subcomponents/ListBoxSection/ListBoxSection.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useListBoxSection } from '@react-aria/listbox'
 import { Heading } from '~components/Heading'
-import { SelectOption, SelectOptionGroupNode } from '../../types'
+import { type SelectOption, type SelectOptionGroupNode } from '../../types'
 import { Option } from '../Option/Option'
 import styles from './ListBoxSection.module.scss'
 

package/src/{__future__ → __rc__}/Select/subcomponents/ListItem/ListItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SelectItemNode, SelectOption } from '../../types'
+import { type SelectItemNode, type SelectOption } from '../../types'
 import { ListBoxSection } from '../ListBoxSection'
 import { Option } from '../Option'
 

package/src/{__future__ → __rc__}/Select/subcomponents/ListItems/ListItems.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { SelectOption } from '../../types'
-import { ListItem, ListItemProps } from '../ListItem'
+import { type SelectOption } from '../../types'
+import { ListItem, type ListItemProps } from '../ListItem'
 
 export type ListItemsProps<Option extends SelectOption> = {
   items: ListItemProps<Option>['item'][]

package/src/{__future__ → __rc__}/Select/subcomponents/Option/Option.tsx

@@ -1,11 +1,11 @@
-import React, { HTMLAttributes } from 'react'
-import { FocusableElement } from '@react-types/shared'
+import React, { type HTMLAttributes } from 'react'
+import { type FocusableElement } from '@react-types/shared'
 import classnames from 'classnames'
 import { mergeProps, useFocusRing, useOption } from 'react-aria'
-import { Icon } from '~components/__future__/Icon'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { Icon } from '~components/__rc__/Icon'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useSelectContext } from '../../context'
-import { SelectOption, SelectOptionNode } from '../../types'
+import { type SelectOption, type SelectOptionNode } from '../../types'
 import styles from './Option.module.scss'
 
 export type OptionProps<Option extends SelectOption = SelectOption> = {

package/src/{__future__ → __rc__}/Select/subcomponents/Overlay/Overlay.tsx

@@ -1,9 +1,9 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { FocusScope } from '@react-aria/focus'
-import { useOverlay, DismissButton } from '@react-aria/overlays'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { DismissButton, useOverlay } from '@react-aria/overlays'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { useSelectContext } from '../../context'
-import { SelectOption } from '../../types'
+import { type SelectOption } from '../../types'
 
 export type OverlayProps = OverrideClassName<HTMLAttributes<HTMLDivElement>> & {
   children: React.ReactNode

package/src/{__future__ → __rc__}/Select/subcomponents/SelectPopoverContents/SelectPopoverContents.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { AriaListBoxOptions } from '@react-aria/listbox'
+import { type AriaListBoxOptions } from '@react-aria/listbox'
 import { useSelectContext } from '../../context'
-import { SelectOption, SelectItem, SelectItemNode } from '../../types'
+import { type SelectItem, type SelectItemNode, type SelectOption } from '../../types'
 import { ListBox } from '../ListBox'
 import { ListItems } from '../ListItems'
 import { Overlay } from '../Overlay'

package/src/{__future__ → __rc__}/Select/subcomponents/SelectToggle/SelectToggle.tsx

@@ -1,9 +1,9 @@
-import React, { HTMLAttributes } from 'react'
-import { DOMAttributes, FocusableElement } from '@react-types/shared'
+import React, { type HTMLAttributes } from 'react'
+import { type DOMAttributes, type FocusableElement } from '@react-types/shared'
 import classnames from 'classnames'
 import { Label } from '~components/Label'
-import { Icon } from '~components/__future__/Icon'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { Icon } from '~components/__rc__/Icon'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './SelectToggle.module.scss'
 
 export type SelectToggleProps = {

package/src/{__future__ → __rc__}/Select/types.ts

@@ -1,4 +1,4 @@
-import { Node, Key } from '@react-types/shared'
+import { type Key, type Node } from '@react-types/shared'
 
 export type SelectOption = {
   label: string

package/src/{__future__ → __rc__}/Select/utils/getDisabledKeysFromItems.ts

@@ -1,5 +1,5 @@
-import { Key } from '@react-types/shared'
-import { SelectItem, SelectOption } from '../types'
+import { type Key } from '@react-types/shared'
+import { type SelectItem, type SelectOption } from '../types'
 import { isSelectOptionGroup } from './isSelectOptionGroup'
 
 export const getDisabledKeysFromItems = <Option extends SelectOption = SelectOption>(

package/src/{__future__ → __rc__}/Select/utils/isSelectOptionGroup.ts

@@ -1,4 +1,4 @@
-import { SelectItem, SelectOption, SelectOptionGroup } from '../types'
+import { type SelectItem, type SelectOption, type SelectOptionGroup } from '../types'
 
 export const isSelectOptionGroup = <Option extends SelectOption>(
   item: SelectItem,

package/src/{__future__ → __rc__}/Select/utils/transformSelectItemToCollectionElement.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Item, Section } from '@react-stately/collections'
-import { CollectionElement } from '@react-types/shared'
-import { SelectItem, SelectOption } from '../types'
+import { type CollectionElement } from '@react-types/shared'
+import { type SelectItem, type SelectOption } from '../types'
 import { isSelectOptionGroup } from './isSelectOptionGroup'
 
 export const transformSelectItemToCollectionElement = <Option extends SelectOption>(

package/src/{__future__ → __rc__}/Tabs/Tabs.tsx

@@ -1,5 +1,9 @@
 import React from 'react'
-import { Tabs as RACTabs, TabsProps as RACTabsProps, Key as RACKey } from 'react-aria-components'
+import {
+  Tabs as RACTabs,
+  type Key as RACKey,
+  type TabsProps as RACTabsProps,
+} from 'react-aria-components'
 
 export type TabsProps = Omit<RACTabsProps, 'orientation'>
 export type Key = RACKey

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Meta, StoryObj } from '@storybook/react'
-import { within, userEvent, expect } from '@storybook/test'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, userEvent, within } from '@storybook/test'
 import { Text } from '~components/Text'
 import { Tab, TabList, TabPanel, Tabs } from '../index'
 

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

@@ -1,7 +1,7 @@
 import React from 'react'
-import { Meta } from '@storybook/react'
+import { type Meta } from '@storybook/react'
 import { Text } from '~components/Text'
-import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { Tab, TabList, TabPanel, Tabs } from '../index'
 
 export default {

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

@@ -1,8 +1,8 @@
 import React, { useState } from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { Button } from '~components/Button'
 import { Text } from '~components/Text'
-import { Button } from '~components/__actions__/v2'
-import { Tab, TabList, TabPanel, Tabs, Key } from '../index'
+import { Tab, TabList, TabPanel, Tabs, type Key } from '../index'
 
 const meta = {
   title: 'Components/Tabs/Tabs (Future)',

package/src/{__future__ → __rc__}/Tabs/subcomponents/Tab/Tab.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-import { Tab as RACTab, TabProps as RACTabProps } from 'react-aria-components'
+import { Tab as RACTab, type TabProps as RACTabProps } from 'react-aria-components'
 import { Badge } from '~components/Badge'
 import styles from './Tab.module.css'
 

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

@@ -1,11 +1,11 @@
-import React, { ReactNode, useContext, useEffect, useId, useRef, useState } from 'react'
+import React, { useContext, useEffect, useId, useRef, useState, type ReactNode } from 'react'
 import classnames from 'classnames'
 import {
   TabList as RACTabList,
-  TabListProps as RACTabListProps,
   TabListStateContext,
+  type TabListProps as RACTabListProps,
 } from 'react-aria-components'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import { isRTL as isRTLCheck } from '~components/__utilities__/isRTL'
 import { SCROLL_AMOUNT } from '../../constants'
 import styles from './TabList.module.css'

package/src/{__future__ → __rc__}/Tabs/subcomponents/TabPanel/TabPanel.tsx

@@ -1,5 +1,8 @@
 import React from 'react'
-import { TabPanel as RACTabPanel, TabPanelProps as RACTabPanelProps } from 'react-aria-components'
+import {
+  TabPanel as RACTabPanel,
+  type TabPanelProps as RACTabPanelProps,
+} from 'react-aria-components'
 import styles from './TabPanel.module.css'
 
 export type TabPanelProps = RACTabPanelProps

package/src/__rc__/Tabs/subcomponents/index.ts

@@ -0,0 +1,3 @@
+export * from './Tab'
+export * from './TabList'
+export * from './TabPanel'

package/src/{__future__ → __rc__}/Tag/RemovableTag/RemovableTag.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import classNames from 'classnames'
-import { Tag, TagProps } from '../Tag'
-import { RemoveButton, RemoveButtonBaseProps } from './subcomponents/RemoveButton'
+import { Tag, type TagProps } from '../Tag'
+import { RemoveButton, type RemoveButtonBaseProps } from './subcomponents/RemoveButton'
 import styles from './RemovableTag.module.scss'
 
 export type RemovableTagProps = {

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

@@ -6,7 +6,7 @@ import * as RemovableTagStories from './RemovableTag.stories'
 
 # RemovableTag
 
-<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__future__/Tag/RemovableTag.tsx" />
+<ResourceLinks sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/__rc__/Tag/RemovableTag.tsx" />
 
 <KAIOInstallation exportNames="RemovableTag" />
 

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

@@ -1,6 +1,6 @@
 import React from 'react'
-import { Meta } from '@storybook/react'
-import { StickerSheet, StickerSheetStory } from '~storybook/components/StickerSheet'
+import { type Meta } from '@storybook/react'
+import { StickerSheet, type StickerSheetStory } from '~storybook/components/StickerSheet'
 import { RemovableTag } from '../index'
 
 export default {

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { type Meta, type StoryObj } from '@storybook/react'
 import { RemovableTag } from '../RemovableTag'
 
 const meta = {

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

@@ -1,7 +1,7 @@
-import React, { ButtonHTMLAttributes } from 'react'
+import React, { type ButtonHTMLAttributes } from 'react'
 import classnames from 'classnames'
-import { Icon } from '~components/__future__/Icon'
-import { OverrideClassName } from '~components/types/OverrideClassName'
+import { Icon } from '~components/__rc__/Icon'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
 import styles from './RemoveButton.module.scss'
 
 export type RemoveButtonBaseProps = {

package/src/{__future__ → __rc__}/Tag/Tag/Tag.tsx

@@ -1,7 +1,7 @@
-import React, { ReactNode, HTMLAttributes } from 'react'
+import React, { type HTMLAttributes, type ReactNode } from 'react'
 import classNames from 'classnames'
-import { OverrideClassName } from '~components/types/OverrideClassName'
-import { TagColors } from './types'
+import { type OverrideClassName } from '~components/types/OverrideClassName'
+import { type TagColors } from './types'
 import styles from './Tag.module.scss'
 
 export type TagProps = {