@simplybusiness/mobius 8.0.1 → 9.0.0

package/dist/types/src/hooks/index.d.ts

@@ -1,14 +1,7 @@
-export * from "./useBodyScrollLock";
 export * from "./useBreakpoint";
 export * from "./useButton";
-export * from "./useDebouncedValue";
 export * from "./useDialog";
 export * from "./useDialogPolyfill";
 export * from "./useLabel";
-export * from "./useOnClickOutside";
-export * from "./useOnUnmount";
-export * from "./usePrefersReducedMotion";
-export * from "./useRenderCount";
 export * from "./useTextField";
 export * from "./useValidationClasses";
-export * from "./useWindowEvent";

package/dist/types/src/utils/htmlDialogPolyfill.d.ts

@@ -0,0 +1 @@
+export declare const htmlDialogPolyfill: () => void;

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

@@ -3,7 +3,6 @@ export * from "./delay";
 export * from "./excludeControls";
 export * from "./filterUndefinedProps";
 export * from "./getSpacingValue";
-export * from "./jestHTMLDialogPolyfill";
 export * from "./mergeRefs";
 export * from "./polyfill-tests";
 export * from "./sizeClasses";

package/dist/types/src/utils/mockMatchMedia.d.ts

@@ -0,0 +1 @@
+export declare const mockMatchMedia: (matches: boolean) => void;

package/dist/types/vitest.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "8.0.1",
+  "version": "9.0.0",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -10,8 +10,7 @@
   "simplyBusiness": {
     "publishToPublicNpm": true
   },
-  "type": "module",
-  "main": "dist/esm/index.js",
+  "main": "dist/cjs/index.js",
   "types": "./dist/types/index.d.ts",
   "files": [
     "src",
@@ -20,18 +19,20 @@
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
+      "require": "./dist/cjs/index.js",
       "import": "./dist/esm/index.js",
       "default": "./dist/esm/index.js"
     },
     "./src/*.css": "./src/*.css"
   },
   "publishConfig": {
-    "main": "dist/esm/index.js",
+    "main": "dist/cjs/index.js",
     "module": "dist/esm/index.js",
     "types": "./dist/types/index.d.ts",
     "exports": {
       ".": {
         "types": "./dist/types/index.d.ts",
+        "require": "./dist/cjs/index.js",
         "import": "./dist/esm/index.js",
         "default": "./dist/esm/index.js"
       },
@@ -41,13 +42,14 @@
   "scripts": {
     "clean": "rm -rf dist",
     "build": "yarn run -T turbo run turbo:build",
-    "turbo:build": "yarn build:esm && yarn build:types",
+    "turbo:build": "yarn build:esm && yarn build:cjs && yarn build:types",
     "build:esm": "build-package esm",
+    "build:cjs": "build-package cjs",
     "build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
     "lint": "eslint . --cache",
     "lint:fix": "eslint . --fix",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "test:coverage": "NODE_OPTIONS=--experimental-vm-modules jest --collect-coverage",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
     "check-types": "tsc --noEmit --pretty",
     "size": "turbo run turbo:size --",
     "turbo:size": "yarn workspace @simplybusiness/bundle-checker start",
@@ -63,32 +65,26 @@
     "@simplybusiness/build-scripts": "^2.0.1",
     "@simplybusiness/eslint-config": "^2.0.1",
     "@simplybusiness/eslint-plugin": "^1.2.1",
-    "@swc/core": "^1.12.5",
-    "@swc/jest": "^0.2.39",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@total-typescript/shoehorn": "^0.1.2",
-    "@types/jest": "^30.0.0",
-    "@types/lodash.debounce": "^4.0.9",
     "@types/node": "^25.2.0",
     "@types/react": "^19.2.11",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.54.0",
     "@typescript-eslint/parser": "^8.54.0",
+    "@vitest/coverage-v8": "^4.0.18",
     "csstype": "^3.2.3",
     "eslint": "^9.39.2",
     "eslint-plugin-ssr-friendly": "^1.3.0",
-    "identity-obj-proxy": "^3.0.0",
-    "jest": "^30.2.0",
-    "jest-config": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.18"
   },
   "peerDependencies": {
     "react": "^19.2.0",
@@ -96,10 +92,10 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.17",
-    "@simplybusiness/icons": "^5.0.1",
+    "@simplybusiness/icons": "^5.0.2",
+    "@simplybusiness/mobius-hooks": "^0.1.0",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
-    "lodash.debounce": "^4.0.8",
     "react-accessible-dropdown-menu-hook": "^4.0.1",
     "react-imask": "^7.6.1",
     "sonner": "^2.0.7"

package/src/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { AccordionProps } from "..";
 import { Accordion, Button, Segment, SegmentGroup } from "..";
 import { excludeControls } from "../../utils";

package/src/components/Accordion/Accordion.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import type { AccordionLinkElementType } from "./AccordionLink";
 import { Accordion } from ".";
-import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
+import { mockMatchMedia } from "../../utils/mockMatchMedia";
 
 const CONTAINER_CLASS_NAME = "mobius-accordion";
 const CONTENT_CONTAINER_CLASS_NAME = "mobius-accordion__content-container";
@@ -14,7 +14,7 @@ const CLOSE_TEXT = "See less";
 
 describe("Accordion", () => {
   beforeEach(() => {
-    jestMockMatchMedia(true);
+    mockMatchMedia(true);
   });
 
   it("should render without errors", () => {
@@ -165,7 +165,7 @@ describe("Accordion", () => {
 
   describe("events", () => {
     it("calls onChange when accordion is toggled", () => {
-      const onChange = jest.fn();
+      const onChange = vi.fn();
 
       render(<Accordion onChange={onChange}>Sample Text</Accordion>);
 
@@ -181,8 +181,8 @@ describe("Accordion", () => {
     });
 
     it("calls onOpen when accordion is opened", () => {
-      const onOpen = jest.fn();
-      const onClose = jest.fn();
+      const onOpen = vi.fn();
+      const onClose = vi.fn();
 
       render(
         <Accordion onOpen={onOpen} onClose={onClose}>
@@ -199,8 +199,8 @@ describe("Accordion", () => {
     });
 
     it("calls onClose when accordion is closed", () => {
-      const onOpen = jest.fn();
-      const onClose = jest.fn();
+      const onOpen = vi.fn();
+      const onClose = vi.fn();
 
       render(
         <Accordion startOpen onOpen={onOpen} onClose={onClose}>
@@ -227,7 +227,7 @@ describe("Accordion", () => {
 
   describe("keyboard navigation", () => {
     it("should open on Enter key", async () => {
-      const toggle = jest.fn();
+      const toggle = vi.fn();
       render(<Accordion onChange={toggle}>Sample text</Accordion>);
 
       await userEvent.tab();
@@ -237,7 +237,7 @@ describe("Accordion", () => {
     });
 
     it("should open on Space key", async () => {
-      const toggle = jest.fn();
+      const toggle = vi.fn();
       render(<Accordion onChange={toggle}>Sample text</Accordion>);
 
       await userEvent.tab();
@@ -247,7 +247,7 @@ describe("Accordion", () => {
     });
 
     it("should not open on Tab key", async () => {
-      const toggle = jest.fn();
+      const toggle = vi.fn();
       render(<Accordion onChange={toggle}>Sample text</Accordion>);
 
       await userEvent.tab();
@@ -259,7 +259,7 @@ describe("Accordion", () => {
 
   describe("semantic heading", () => {
     it("uses span by default", () => {
-      const toggle = jest.fn();
+      const toggle = vi.fn();
       const { container } = render(
         <Accordion onChange={toggle}>Sample text</Accordion>,
       );
@@ -273,7 +273,7 @@ describe("Accordion", () => {
     it.each(["h1", "h2", "h3", "h4", "h5", "h6"])(
       "uses heading type %s",
       headingType => {
-        const toggle = jest.fn();
+        const toggle = vi.fn();
         const { container } = render(
           <Accordion
             onChange={toggle}

package/src/components/Accordion/Accordion.tsx

@@ -3,7 +3,7 @@
 import classNames from "classnames/dedupe";
 import type { ReactNode, RefAttributes } from "react";
 import { useEffect, useState, useId } from "react";
-import { usePrefersReducedMotion } from "../../hooks";
+import { usePrefersReducedMotion } from "@simplybusiness/mobius-hooks";
 import type { DOMProps } from "../../types";
 
 import type {

package/src/components/Accordion/AccordionList.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { AccordionListProps } from "./AccordionList";
 import { AccordionList } from "./AccordionList";
 

package/src/components/Accordion/AccordionList.test.tsx

@@ -1,12 +1,12 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { AccordionList } from "./AccordionList";
-import { jestMockMatchMedia } from "../../utils/jestMockMatchMedia";
+import { mockMatchMedia } from "../../utils/mockMatchMedia";
 
 const ACCORDION_LIST_CLASS_NAME = "mobius-accordion-list";
 
 describe("AccordionList", () => {
   beforeEach(() => {
-    jestMockMatchMedia(true);
+    mockMatchMedia(true);
   });
 
   const mockContent = [
@@ -73,7 +73,7 @@ describe("AccordionList", () => {
   });
 
   it("should call onOpen callback with correct id", () => {
-    const onOpen = jest.fn();
+    const onOpen = vi.fn();
     render(<AccordionList content={mockContent} onOpen={onOpen} />);
 
     const section2Toggle = screen.getByText("Section 2");
@@ -83,7 +83,7 @@ describe("AccordionList", () => {
   });
 
   it("should call onClose callback with correct id", () => {
-    const onClose = jest.fn();
+    const onClose = vi.fn();
     render(<AccordionList content={mockContent} onClose={onClose} />);
 
     const section1Toggle = screen.getByText("Section 1");
@@ -187,8 +187,8 @@ describe("AccordionList", () => {
     });
 
     it("should call onOpen and onClose callbacks correctly when allowMultiple is true", () => {
-      const onOpen = jest.fn();
-      const onClose = jest.fn();
+      const onOpen = vi.fn();
+      const onClose = vi.fn();
       render(
         <AccordionList
           content={mockContent}

package/src/components/AddressLookup/AddressLookup.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { AddressLookup, type AddressLookupProps } from ".";
 import { excludeControls } from "../../utils";

package/src/components/AddressLookup/AddressLookup.test.tsx

@@ -3,8 +3,8 @@ import userEvent from "@testing-library/user-event";
 import { AddressLookup } from "./AddressLookup";
 import { LoqateAddressLookupService } from "./LoqateAddressLookupService";
 
-// Ensure Jest uses the mock from the __mocks__ directory
-jest.mock("./__mocks__/LoqateAddressLookupService");
+// Ensure Vitest uses the mock from the __mocks__ directory
+vi.mock("./__mocks__/LoqateAddressLookupService");
 
 describe("AddressLookup", () => {
   let addressLookupService: LoqateAddressLookupService;
@@ -17,7 +17,7 @@ describe("AddressLookup", () => {
   });
 
   afterEach(() => {
-    jest.clearAllMocks();
+    vi.clearAllMocks();
   });
 
   it("renders without errors", () => {
@@ -41,7 +41,7 @@ describe("AddressLookup", () => {
   });
 
   it("calls address lookup service after typing 3 or more characters", async () => {
-    const findSpy = jest.spyOn(addressLookupService, "search");
+    const findSpy = vi.spyOn(addressLookupService, "search");
     render(
       <AddressLookup
         addressLookupService={addressLookupService}
@@ -61,9 +61,9 @@ describe("AddressLookup", () => {
   });
 
   it("should display an error message when the address lookup service fails", async () => {
-    jest
-      .spyOn(addressLookupService, "search")
-      .mockRejectedValueOnce(new Error("Test error"));
+    vi.spyOn(addressLookupService, "search").mockRejectedValueOnce(
+      new Error("Test error"),
+    );
     render(
       <AddressLookup
         addressLookupService={addressLookupService}
@@ -79,7 +79,7 @@ describe("AddressLookup", () => {
   });
 
   it("should show an error message when the address retrieval fails", async () => {
-    jest.spyOn(addressLookupService, "search").mockResolvedValueOnce({
+    vi.spyOn(addressLookupService, "search").mockResolvedValueOnce({
       Items: [
         {
           Id: "123",
@@ -90,9 +90,9 @@ describe("AddressLookup", () => {
         },
       ],
     });
-    jest
-      .spyOn(addressLookupService, "get")
-      .mockRejectedValueOnce(new Error("Test error"));
+    vi.spyOn(addressLookupService, "get").mockRejectedValueOnce(
+      new Error("Test error"),
+    );
     render(
       <AddressLookup
         addressLookupService={addressLookupService}
@@ -111,8 +111,7 @@ describe("AddressLookup", () => {
   });
 
   it("should clear the error message when a valid address is selected", async () => {
-    jest
-      .spyOn(addressLookupService, "search")
+    vi.spyOn(addressLookupService, "search")
       .mockRejectedValueOnce(new Error("Test error"))
       .mockResolvedValueOnce({
         Items: [
@@ -155,9 +154,9 @@ describe("AddressLookup", () => {
   });
 
   it("should set an accessibile description when an error occurs", async () => {
-    jest
-      .spyOn(addressLookupService, "search")
-      .mockRejectedValueOnce(new Error("Test error"));
+    vi.spyOn(addressLookupService, "search").mockRejectedValueOnce(
+      new Error("Test error"),
+    );
     render(
       <AddressLookup
         addressLookupService={addressLookupService}
@@ -176,8 +175,8 @@ describe("AddressLookup", () => {
 
   it("should call onError callback when an error occurs", async () => {
     const error = new Error("Test error");
-    const onError = jest.fn();
-    jest.spyOn(addressLookupService, "search").mockRejectedValueOnce(error);
+    const onError = vi.fn();
+    vi.spyOn(addressLookupService, "search").mockRejectedValueOnce(error);
 
     render(
       <AddressLookup
@@ -195,7 +194,7 @@ describe("AddressLookup", () => {
   });
 
   it("should call onOptionsDisplayed when valid results are displayed", async () => {
-    jest.spyOn(addressLookupService, "search").mockResolvedValueOnce({
+    vi.spyOn(addressLookupService, "search").mockResolvedValueOnce({
       Items: [
         {
           Id: "123",
@@ -206,7 +205,7 @@ describe("AddressLookup", () => {
         },
       ],
     });
-    const mockOnOptionsDisplayed = jest.fn();
+    const mockOnOptionsDisplayed = vi.fn();
     render(
       <AddressLookup
         addressLookupService={addressLookupService}

package/src/components/AddressLookup/LoqateAddressLookupService.test.tsx

@@ -1,3 +1,4 @@
+import type { Mock } from "vitest";
 import { LoqateAddressLookupService } from "./LoqateAddressLookupService";
 
 describe("LoqateAddressLookupService", () => {
@@ -48,13 +49,13 @@ describe("LoqateAddressLookupService", () => {
 
   // Helper function for mocking fetch responses
   const mockFetchResponse = (response: unknown) => {
-    (global.fetch as jest.Mock).mockResolvedValueOnce({
+    (global.fetch as Mock).mockResolvedValueOnce({
       json: () => Promise.resolve(response),
     });
   };
 
   beforeEach(() => {
-    global.fetch = jest.fn();
+    global.fetch = vi.fn();
     service = new LoqateAddressLookupService({
       baseUrl: mockBaseUrl,
       apiKey: mockApiKey,
@@ -63,7 +64,7 @@ describe("LoqateAddressLookupService", () => {
   });
 
   afterEach(() => {
-    jest.resetAllMocks();
+    vi.resetAllMocks();
   });
 
   it("uses default base URL and countries when none is provided", async () => {
@@ -188,7 +189,7 @@ describe("LoqateAddressLookupService", () => {
 
       await serviceWithFilters.search("987 Park Avenue");
 
-      const calledUrl = (global.fetch as jest.Mock).mock.calls[0][0];
+      const calledUrl = (global.fetch as Mock).mock.calls[0][0];
       expect(calledUrl).toContain("AdministrativeArea:NY");
       expect(calledUrl).not.toContain("AdministrativeArea%3ANY");
     });
@@ -235,7 +236,7 @@ describe("LoqateAddressLookupService", () => {
         `${mockBaseUrl}/Retrieve/v1.2/json3.ws?Key=${mockApiKey}&Id=address123`,
       );
 
-      const calledUrl = (global.fetch as jest.Mock).mock.calls[0][0];
+      const calledUrl = (global.fetch as Mock).mock.calls[0][0];
       expect(calledUrl).not.toContain("Filters");
     });
   });
@@ -250,7 +251,7 @@ describe("LoqateAddressLookupService", () => {
 
     it("propagates rejected promises", async () => {
       const networkError = new Error("Network error");
-      (global.fetch as jest.Mock).mockRejectedValueOnce(networkError);
+      (global.fetch as Mock).mockRejectedValueOnce(networkError);
 
       await expect(service.search("test")).rejects.toThrow(networkError);
     });

package/src/components/Alert/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { AlertProps } from "./Alert";
 import { Alert } from "./Alert";
 

package/src/components/Box/Box.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Box } from "./Box";
 import { excludeControls, sizeOptions } from "../../utils";
 import type { BoxProps } from "./types";

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { BreadcrumbsProps } from "./Breadcrumbs";
 import { Breadcrumbs } from "./Breadcrumbs";
 import { BreadcrumbItem } from "./BreadcrumbItem";

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

@@ -1,10 +1,12 @@
 import { useState } from "react";
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { leftArrow, menu } from "@simplybusiness/icons";
 import type { ButtonProps } from "./Button";
 import { Button } from "./Button";
 import { Icon } from "../Icon";
 import { excludeControls } from "../../utils";
+// eslint-disable-next-line no-restricted-imports -- story-only styles
+import "./Button.story.styles.css";
 
 type StoryType = StoryObj<typeof Button>;
 
@@ -188,7 +190,6 @@ export const Disabled: StoryType = {
 
 export const WithIconOnTheLeft: StoryType = {
   render: (args: ButtonProps) => {
-    require("./Button.story.styles.css");
     return <Button {...args} />;
   },
   args: {
@@ -210,7 +211,6 @@ export const WithIconOnTheLeft: StoryType = {
 
 export const WithIconOnTheRight: StoryType = {
   render: (args: ButtonProps) => {
-    require("./Button.story.styles.css");
     return <Button {...args} />;
   },
   args: {
@@ -231,7 +231,6 @@ export const WithIconOnTheRight: StoryType = {
 
 export const Themed: StoryType = {
   render: (args: ButtonProps) => {
-    require("./Button.story.styles.css");
     return <Button {...args} />;
   },
   args: {

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

@@ -8,21 +8,21 @@ const CLASS_NAME = "mobius-button";
 
 describe("Button", () => {
   it("should render without errors", () => {
-    const error = jest.spyOn(global.console, "error");
-    const onPress = jest.fn();
+    const error = vi.spyOn(global.console, "error");
+    const onPress = vi.fn();
     render(<Button onPress={onPress}>Sample text</Button>);
     expect(error).not.toHaveBeenCalled();
   });
 
   it("should call the onPress", async () => {
-    const onPress = jest.fn();
+    const onPress = vi.fn();
     const { getByText } = render(<Button onPress={onPress}>Press</Button>);
     await userEvent.click(getByText("Press"));
     expect(onPress).toHaveBeenCalled();
   });
 
   it("should call the onClick", async () => {
-    const onClick = jest.fn();
+    const onClick = vi.fn();
     const { getByText } = render(<Button onClick={onClick}>Click</Button>);
     await userEvent.click(getByText("Click"));
     expect(onClick).toHaveBeenCalled();

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { CheckboxProps } from ".";
 import { Checkbox } from ".";
 import { excludeControls } from "../../utils";

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

@@ -27,7 +27,7 @@ describe("Checkbox", () => {
   });
 
   it("should call onChange when clicked", async () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
     const optionText = "Agree";
 
     const { getByLabelText } = render(
@@ -43,7 +43,7 @@ describe("Checkbox", () => {
   });
 
   it("should be selectable via keyboard", async () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
     const optionText = "Agree";
 
     const { getByLabelText } = render(

package/src/components/Checkbox/CheckboxGroup.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import type { CheckboxGroupProps } from ".";
 import { Checkbox, CheckboxGroup } from ".";
 import { excludeControls } from "../../utils";

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

@@ -50,7 +50,7 @@ describe("CheckboxGroup", () => {
   });
 
   it("does not call onChange on initial render", () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
 
     render(
       <CheckboxGroup onChange={callback}>
@@ -82,7 +82,7 @@ describe("CheckboxGroup", () => {
   describe("onChange", () => {
     describe("given an item is toggled", () => {
       it("should call onChange with a list of toggled items", async () => {
-        const callback = jest.fn();
+        const callback = vi.fn();
         const option1Text = "Checkbox 1";
         const option2Text = "Checkbox 2";
         const option3Text = "Checkbox 3";
@@ -119,7 +119,7 @@ describe("CheckboxGroup", () => {
 
     describe("given an item is untoggled", () => {
       it("should call onChange with a list of toggled items", async () => {
-        const callback = jest.fn();
+        const callback = vi.fn();
         const option1Text = "Checkbox 1";
         const option2Text = "Checkbox 2";
         const option3Text = "Checkbox 3";
@@ -163,7 +163,7 @@ describe("CheckboxGroup", () => {
   });
 
   it("should be selectable via keyboard", async () => {
-    const callback = jest.fn();
+    const callback = vi.fn();
     const optionText = "Agree";
 
     const { getByLabelText } = render(
@@ -572,7 +572,7 @@ describe("CheckboxGroup", () => {
     });
 
     it("should overwrite group value when last item is selected", async () => {
-      const callback = jest.fn();
+      const callback = vi.fn();
 
       const option1Text = "Checkbox 1";
       const option2Text = "Checkbox 2";

package/src/components/Combobox/Combobox.stories.tsx

@@ -1,5 +1,5 @@
 import { search } from "@simplybusiness/icons";
-import type { Meta } from "@storybook/react-webpack5";
+import type { Meta } from "@storybook/react";
 import type { ComboboxRef } from ".";
 import { Combobox, type ComboboxProps } from ".";
 import { delay, excludeControls } from "../../utils";