@lumx/react 3.20.1-alpha.4 → 3.20.1-alpha.6

package/package.json

@@ -6,14 +6,17 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.20.1-alpha.4",
-        "@lumx/icons": "^3.20.1-alpha.4",
+        "@lumx/core": "^3.20.1-alpha.6",
+        "@lumx/icons": "^3.20.1-alpha.6",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
         "react-is": ">=16.13.0",
         "react-popper": "^2.2.4"
     },
+    "installConfig": {
+        "hoistingLimits": "workspaces"
+    },
     "devDependencies": {
         "@babel/core": "^7.26.10",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -34,20 +37,18 @@
         "@storybook/addon-a11y": "^9.1.4",
         "@storybook/addon-docs": "^9.1.4",
         "@storybook/react-vite": "^9.1.4",
-        "@testing-library/dom": "^9.3.4",
-        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/dom": "^10.4.1",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^14.4.3",
         "@types/body-scroll-lock": "^2.6.1",
         "@types/classnames": "^2.2.9",
         "@types/dom-view-transitions": "^1.0.5",
-        "@types/jest": "^29.2.1",
         "@types/lodash": "^4.14.149",
         "@types/react": "^17.0.2",
         "@types/react-dom": "^17.0.2",
         "@types/react-is": "^17.0.2",
+        "@vitest/ui": "^1.0.0",
         "autoprefixer": "^9.7.4",
-        "babel-jest": "29.1.2",
         "babel-loader": "^8.0.6",
         "chromatic": "^13.1.4",
         "core-js": "^3.6.4",
@@ -55,8 +56,7 @@
         "glob": "^7.1.6",
         "install-peers-cli": "^2.2.0",
         "is-ci": "^2.0.0",
-        "jest": "29.1.2",
-        "jest-environment-jsdom": "29.1.2",
+        "jsdom": "^27.2.0",
         "node-notifier": "^10.0.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
@@ -71,12 +71,13 @@
         "typescript": "^5.4.3",
         "vite": "^6.3.5",
         "vite-tsconfig-paths": "^5.1.4",
+        "vitest": "^1.0.0",
         "yargs": "^15.4.1"
     },
     "peerDependencies": {
         "lodash": "4.17.21",
-        "react": ">= 17.0.0",
-        "react-dom": ">= 17.0.0"
+        "react": ">= 17.0.2",
+        "react-dom": ">= 17.0.2"
     },
     "description": "The official LumApps Design System (LumX) for React applications",
     "homepage": "https://github.com/lumapps/design-system",
@@ -101,10 +102,10 @@
     "scripts": {
         "build": "rollup -c",
         "prepare": "install-peers || exit 0",
-        "test": "jest --config jest/index.js --coverage --notify --passWithNoTests --detectOpenHandles --runInBand",
+        "test": "vitest run",
         "start:storybook": "storybook dev -p 9000",
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.20.1-alpha.4"
+    "version": "3.20.1-alpha.6"
 }

package/src/components/alert-dialog/AlertDialog.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-import React, { RefObject, useRef } from 'react';
+import { RefObject, useRef } from 'react';
 import { Button, Link, Kind } from '@lumx/react';
 import { DIALOG_TRANSITION_DURATION } from '@lumx/core/js/constants';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';

package/src/components/alert-dialog/AlertDialog.test.tsx

@@ -1,11 +1,10 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';
+import { vi } from 'vitest';
 import { AlertDialog, AlertDialogProps } from './AlertDialog';
 
-jest.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
+vi.mock('@lumx/react/hooks/useId', () => ({ useId: () => ':r1:' }));
 
 const CLASSNAME = AlertDialog.className as string;
 
@@ -17,7 +16,7 @@ const setup = (propsOverride: Partial<AlertDialogProps> = {}) => {
         title: 'Alert',
         isOpen: true,
         description: 'Deserunt et sunt qui consequat sint sit.',
-        confirmProps: { onClick: jest.fn(), label: 'OK' },
+        confirmProps: { onClick: vi.fn(), label: 'OK' },
         ...propsOverride,
     };
     render(<AlertDialog {...props} />);

package/src/components/autocomplete/Autocomplete.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import { Autocomplete, List, ListItem, Size } from '@lumx/react';
 

package/src/components/autocomplete/Autocomplete.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -53,7 +51,7 @@ describe(`<${Autocomplete.displayName}>`, () => {
     describe('Events', () => {
         it('should trigger the onChange callback when there is a change on the Text Field', async () => {
             const name = 'autocomplete-name';
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { inputNative } = setup({
                 name,
                 onChange,
@@ -68,8 +66,8 @@ describe(`<${Autocomplete.displayName}>`, () => {
         });
 
         it('should trigger the onFocus/onBlur callback when the text field is focused and blurred', async () => {
-            const onFocus = jest.fn();
-            const onBlur = jest.fn();
+            const onFocus = vi.fn();
+            const onBlur = vi.fn();
             const { inputNative } = setup({
                 onFocus,
                 onBlur,

package/src/components/autocomplete/Autocomplete.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, SyntheticEvent, useRef } from 'react';
+import { ReactNode, SyntheticEvent, useRef } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/autocomplete/AutocompleteMultiple.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import { AutocompleteMultiple, Chip, ChipGroup, Icon, List, ListItem, Size } from '@lumx/react';
 

package/src/components/autocomplete/AutocompleteMultiple.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Dropdown, List, ListItem, Size, TextField } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/avatar/Avatar.stories.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable react/display-name */
-import React from 'react';
-
 import { mdiDelete, mdiEye, mdiPencil, mdiStar } from '@lumx/icons';
 import { AvatarSize, Badge, ColorPalette, FlexBox, Icon, IconButton, Size } from '@lumx/react';
 import { avatarImageArgType, AVATAR_IMAGES } from '@lumx/react/stories/controls/image';

package/src/components/avatar/Avatar.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import React, { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
+import { KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/badge/Badge.stories.tsx

@@ -1,6 +1,5 @@
 import { mdiHeart } from '@lumx/icons';
 import { AspectRatio, Badge, ColorPalette, Icon, Size, Thumbnail, ThumbnailVariant } from '@lumx/react';
-import React from 'react';
 import { colorArgType } from '@lumx/react/stories/controls/color';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';

package/src/components/badge/Badge.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { ColorPalette } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/badge/Badge.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/badge/BadgeWrapper.stories.tsx

@@ -1,6 +1,5 @@
 import { mdiAccount, mdiBee, mdiHeart } from '@lumx/icons';
 import { Badge, BadgeWrapper, Button, Chip, ColorPalette, FlexBox, Icon, Orientation, Size } from '@lumx/react';
-import React from 'react';
 
 export default {
     title: 'LumX components/badge/BadgeWrapper',

package/src/components/badge/BadgeWrapper.test.tsx

@@ -1,6 +1,4 @@
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
-import React from 'react';
-
 import omit from 'lodash/omit';
 import last from 'lodash/last';
 

package/src/components/badge/BadgeWrapper.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/button/Button.stories.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import omit from 'lodash/omit';
 import pick from 'lodash/pick';
 

package/src/components/button/Button.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { mdiCheck, mdiPlus } from '@lumx/icons';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen, within } from '@testing-library/react';
@@ -68,7 +66,7 @@ describe(`<${Button.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should render disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { button } = setup({ children: 'Label', disabled: true, onClick });
             expect(button).toHaveAttribute('disabled');
             await userEvent.click(button);
@@ -76,17 +74,18 @@ describe(`<${Button.displayName}>`, () => {
         });
 
         it('should render disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { button } = setup({ children: 'Label', disabled: true, href: 'https://example.com', onClick });
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
-            expect(button).toHaveAttribute('disabled');
+            expect(screen.queryByRole('link')).toBeInTheDocument();
+            expect(button).toHaveAttribute('aria-disabled', 'true');
+            // Simulate standard disabled state (not focusable)
+            expect(button).toHaveAttribute('tabindex', '-1');
             await userEvent.click(button);
             expect(onClick).not.toHaveBeenCalled();
         });
 
         it('should render aria-disabled button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { button } = setup({ children: 'Label', 'aria-disabled': true, onClick });
             expect(button).toHaveAttribute('aria-disabled');
             await userEvent.click(button);
@@ -94,7 +93,7 @@ describe(`<${Button.displayName}>`, () => {
         });
 
         it('should render aria-disabled link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { button } = setup({
                 children: 'Label',
                 'aria-disabled': true,
@@ -102,8 +101,7 @@ describe(`<${Button.displayName}>`, () => {
                 onClick,
             });
             expect(button).toHaveAccessibleName('Label');
-            // Disabled link do not exist so we fallback to a button
-            expect(screen.queryByRole('link')).not.toBeInTheDocument();
+            expect(screen.queryByRole('link')).toBeInTheDocument();
             expect(button).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(button);
             expect(onClick).not.toHaveBeenCalled();

package/src/components/button/Button.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';
 

package/src/components/button/ButtonGroup.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Button, ButtonGroup, Emphasis, IconButton, Size } from '@lumx/react';
 import { mdiAbjadArabic, mdiFoodApple, mdiMenuDown } from '@lumx/icons';
 import { withCombinations } from '@lumx/react/stories/decorators/withCombinations';

package/src/components/button/ButtonGroup.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { mdiPlus } from '@lumx/icons';
 import { Button, IconButton } from '@lumx/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

package/src/components/button/ButtonGroup.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/button/ButtonRoot.tsx

@@ -1,6 +1,4 @@
-import React, { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
-
-import isEmpty from 'lodash/isEmpty';
+import { AriaAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefObject } from 'react';
 
 import classNames from 'classnames';
 
@@ -8,10 +6,10 @@ import { ColorPalette, Emphasis, Size, Theme } from '@lumx/react';
 import { CSS_PREFIX } from '@lumx/react/constants';
 import { GenericProps, HasTheme } from '@lumx/react/utils/type';
 import { handleBasicClasses } from '@lumx/core/js/utils/className';
-import { renderLink } from '@lumx/react/utils/react/renderLink';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
-import { useDisableStateProps } from '@lumx/react/utils/disabled/useDisableStateProps';
 import { HasAriaDisabled } from '@lumx/react/utils/type/HasAriaDisabled';
+import { RawClickable } from '@lumx/react/utils/react/RawClickable';
+import { useDisableStateProps } from '@lumx/react/utils/disabled';
 
 type HTMLButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 
@@ -107,18 +105,14 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         color,
         emphasis,
         hasBackground,
-        href,
         isSelected,
         isActive,
         isFocused,
         isHovered,
         linkAs,
-        name,
         size,
-        target,
         theme,
         variant,
-        type = 'button',
         fullWidth,
         ...forwardedProps
     } = otherProps;
@@ -139,7 +133,7 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
             color: adaptedColor,
             emphasis,
             isSelected,
-            isDisabled: isAnyDisabled,
+            isDisabled: props.isDisabled || props['aria-disabled'],
             isActive,
             isFocused,
             isHovered,
@@ -151,42 +145,18 @@ export const ButtonRoot = forwardRef<ButtonRootProps, HTMLButtonElement | HTMLAn
         }),
     );
 
-    /**
-     * If the linkAs prop is used, we use the linkAs component instead of a <button>.
-     * If there is an href attribute, we display an <a> instead of a <button>.
-     *
-     * However, in any case, if the component is disabled, we returned a <button> since disabled is not compatible with <a>.
-     */
-    if ((linkAs || !isEmpty(props.href)) && !isAnyDisabled) {
-        return renderLink(
-            {
-                linkAs,
-                ...forwardedProps,
-                'aria-label': ariaLabel,
-                href,
-                target,
-                className: buttonClassName,
-                ref: ref as RefObject<HTMLAnchorElement>,
-            },
-            children,
-        );
-    }
     return (
-        <button
+        <RawClickable
+            as={linkAs || (forwardedProps.href ? 'a' : 'button')}
             {...forwardedProps}
             {...disabledStateProps}
             aria-disabled={isAnyDisabled}
             aria-label={ariaLabel}
             ref={ref as RefObject<HTMLButtonElement>}
             className={buttonClassName}
-            name={name}
-            type={
-                // eslint-disable-next-line react/button-has-type
-                type
-            }
         >
             {children}
-        </button>
+        </RawClickable>
     );
 });
 ButtonRoot.displayName = COMPONENT_NAME;

package/src/components/button/IconButton.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { Button } from '@lumx/react';
 import { render, screen } from '@testing-library/react';

package/src/components/button/IconButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Emphasis, Icon, Size, Theme, ThemeProvider, Tooltip, TooltipProps } from '@lumx/react';
 import { BaseButtonProps, ButtonRoot } from '@lumx/react/components/button/ButtonRoot';
 import { getRootClassName } from '@lumx/core/js/utils/className';

package/src/components/checkbox/Checkbox.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';
@@ -98,7 +96,7 @@ describe(`<${Checkbox.displayName}>`, () => {
     });
 
     describe('Events', () => {
-        const onChange = jest.fn();
+        const onChange = vi.fn();
 
         it('should trigger `onChange` when checkbox is clicked', async () => {
             const value = 'value';
@@ -114,7 +112,7 @@ describe(`<${Checkbox.displayName}>`, () => {
 
     describe('Disabled state', () => {
         it('should be disabled with isDisabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { checkbox, input } = setup({ isDisabled: true, onChange });
 
             expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');
@@ -126,7 +124,7 @@ describe(`<${Checkbox.displayName}>`, () => {
         });
 
         it('should be disabled with aria-disabled', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             const { checkbox, input } = setup({ 'aria-disabled': true, onChange });
 
             expect(checkbox).toHaveClass('lumx-checkbox--is-disabled');

package/src/components/chip/Chip.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import omit from 'lodash/omit';
 import { mdiClose, mdiViewList } from '@lumx/icons';
 import { Chip, ChipProps, ColorPalette, Icon, Size, Theme } from '@lumx/react';

package/src/components/chip/Chip.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Theme } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { fireEvent, render, screen } from '@testing-library/react';
@@ -42,7 +40,7 @@ describe('<Chip />', () => {
         });
 
         it('should render clickable', () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({ children: 'Chip text', onClick });
             expect(chip).toHaveAttribute('role', 'button');
             expect(chip.className).toMatchInlineSnapshot(
@@ -70,11 +68,13 @@ describe('<Chip />', () => {
     });
 
     describe('Events', () => {
-        const onClick = jest.fn();
-        const onAfterClick = jest.fn();
-        const onBeforeClick = jest.fn();
+        const onClick = vi.fn();
+        const onAfterClick = vi.fn();
+        const onBeforeClick = vi.fn();
 
-        beforeEach(jest.clearAllMocks);
+        beforeEach(() => {
+            vi.clearAllMocks();
+        });
 
         it('should trigger onBeforeClick only when clicking on the "before" element', async () => {
             const { after, before, chip } = setup({
@@ -88,12 +88,12 @@ describe('<Chip />', () => {
             await userEvent.click(chip);
             expect(onBeforeClick).not.toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(after as any);
             expect(onBeforeClick).not.toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(before as any);
             expect(onBeforeClick).toHaveBeenCalled();
@@ -111,12 +111,12 @@ describe('<Chip />', () => {
             await userEvent.click(chip);
             expect(onClick).toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(after as any);
             expect(onClick).not.toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(before as any);
             expect(onClick).not.toHaveBeenCalled();
@@ -134,12 +134,12 @@ describe('<Chip />', () => {
             await userEvent.click(chip);
             expect(onAfterClick).not.toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(after as any);
             expect(onAfterClick).toHaveBeenCalled();
 
-            jest.clearAllMocks();
+            vi.clearAllMocks();
 
             await userEvent.click(before as any);
             expect(onAfterClick).not.toHaveBeenCalled();
@@ -162,7 +162,7 @@ describe('<Chip />', () => {
         });
 
         it('should forward key down event', async () => {
-            const onKeyDown = jest.fn();
+            const onKeyDown = vi.fn();
             const { chip } = setup({ onClick, onKeyDown });
 
             fireEvent.keyDown(chip, { key: 'A', code: 'KeyA' });
@@ -171,7 +171,7 @@ describe('<Chip />', () => {
 
         it('should forward key down event and trigger `onClick` when pressing Enter', async () => {
             const user = userEvent.setup();
-            const onKeyDown = jest.fn();
+            const onKeyDown = vi.fn();
             const { chip } = setup({ onClick, onKeyDown });
 
             await user.tab();
@@ -187,7 +187,7 @@ describe('<Chip />', () => {
 
     describe('Disabled state', () => {
         it('should render disabled chip button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({ children: 'Label', isDisabled: true, onClick });
             expect(chip).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(chip);
@@ -195,7 +195,7 @@ describe('<Chip />', () => {
         });
 
         it('should render disabled chip link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({ children: 'Label', isDisabled: true, href: 'https://example.com', onClick });
             // Disabled link should not have an href.
             expect(chip).not.toHaveAttribute('href');
@@ -205,7 +205,7 @@ describe('<Chip />', () => {
         });
 
         it('should render aria-disabled chip button', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({ children: 'Label', 'aria-disabled': true, onClick });
             expect(chip).toHaveAttribute('aria-disabled', 'true');
             await userEvent.click(chip);
@@ -214,7 +214,7 @@ describe('<Chip />', () => {
         });
 
         it('should render aria-disabled chip link', async () => {
-            const onClick = jest.fn();
+            const onClick = vi.fn();
             const { chip } = setup({
                 children: 'Label',
                 'aria-disabled': true,

package/src/components/chip/Chip.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, ReactNode } from 'react';
+import { MouseEventHandler, ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isFunction from 'lodash/isFunction';

package/src/components/chip/ChipGroup.stories.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { Chip, ChipGroup, Size } from '@lumx/react';
 
 export default {

package/src/components/chip/ChipGroup.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

package/src/components/chip/ChipGroup.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/comment-block/CommentBlock.stories.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-key,react/display-name */
-import React from 'react';
 import { mdiDotsHorizontal, mdiHeart, mdiReply } from '@lumx/icons';
 import { Button, CommentBlock } from '@lumx/react';
 import { IconButton } from '@lumx/react/components/button/IconButton';