@nulogy/components 15.2.0 → 15.2.2

package/dist/src/Tooltip/Tooltip.story.d.ts

@@ -1,6 +1,8 @@
-import React from "react";
+import type { StoryObj } from "@storybook/react";
+import { Tooltip } from "../index";
 declare const _default: {
     title: string;
+    component: typeof Tooltip;
     parameters: {
         chromatic: {
             disable: boolean;
@@ -8,54 +10,15 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const _Tooltip: () => React.JSX.Element;
-export declare const WithWrappedText: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomMaxWidth: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithPlacement: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithLinkPassedIn: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithButtonPassedIn: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomShowDelay: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithOtherFocusableElements: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const OpenByDefault: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
-export declare const WithCustomComponent: () => React.JSX.Element;
-export declare const WithCustomTooltip: () => React.JSX.Element;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Default: Story;
+export declare const WithWrappedText: Story;
+export declare const WithCustomMaxWidth: Story;
+export declare const WithPlacement: Story;
+export declare const WithLinkPassedIn: Story;
+export declare const WithButtonPassedIn: Story;
+export declare const WithCustomShowDelay: Story;
+export declare const WithOtherFocusableElements: Story;
+export declare const OpenByDefault: Story;
+export declare const WithCustomComponent: Story;
+export declare const WithCustomTooltip: Story;

package/dist/src/Tooltip/Tooltip.story.js

@@ -2,93 +2,98 @@ import React from "react";
 import { Box, Button, DescriptionDetails, DescriptionList, DescriptionTerm, Divider, Flex, Icon, Link, StatusIndicator, Text, Tooltip, } from "../index";
 export default {
     title: "Components/Tooltip",
+    component: Tooltip,
     parameters: {
         chromatic: { disable: true },
     },
 };
-export const _Tooltip = () => (React.createElement(Flex, { p: "x8" },
-    React.createElement(Tooltip, { tooltip: "I am a Tooltip!" },
-        React.createElement(Button, null, " Button "))));
-export const WithWrappedText = () => (React.createElement(Flex, { p: "x8" },
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, and my default max-width is 24em (based on 14px font-size), which is equal to 336px, or approximately 45 characters.", defaultOpen: true },
-        React.createElement(Button, null, " Button "))));
-WithWrappedText.story = {
+export const Default = {
+    render: () => (React.createElement(Flex, { p: "x8" },
+        React.createElement(Tooltip, { tooltip: "I am a Tooltip!" },
+            React.createElement(Button, { "data-testid": "tooltip-trigger" }, "Button")))),
+};
+export const WithWrappedText = {
+    render: () => (React.createElement(Flex, { p: "x8" },
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, and my default max-width is 24em (based on 14px font-size), which is equal to 336px, or approximately 45 characters.", defaultOpen: true },
+            React.createElement(Button, null, " Button ")))),
     name: "with wrapped text",
 };
-export const WithCustomMaxWidth = () => (React.createElement(Flex, { p: "x8" },
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, but I have a smaller maxWidth prop that causes me to wrap frequently.", maxWidth: "128px", defaultOpen: true },
-        React.createElement(Button, null, " Button "))));
-WithCustomMaxWidth.story = {
+export const WithCustomMaxWidth = {
+    render: (args) => (React.createElement(Flex, { p: "x8" },
+        React.createElement(Tooltip, Object.assign({}, args, { placement: "bottom", tooltip: "I am a Tooltip! I have very long text, but I have a smaller maxWidth prop that causes me to wrap frequently.", maxWidth: "128px", defaultOpen: true }),
+            React.createElement(Button, null, " Button ")))),
     name: "with custom maxWidth",
 };
-export const WithPlacement = () => (React.createElement(React.Fragment, null,
-    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-        React.createElement(Tooltip, { placement: "top-start", tooltip: "top-start", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "top", tooltip: "top", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "top-end", tooltip: "top-end", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger"))),
-    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-        React.createElement(Tooltip, { placement: "left-start", tooltip: "left-start", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "left", tooltip: "left", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "left-end", tooltip: "left-end", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger"))),
-    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-        React.createElement(Tooltip, { placement: "right-start", tooltip: "right-start", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "right", tooltip: "right", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "right-end", tooltip: "right-end", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger"))),
-    React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
-        React.createElement(Tooltip, { placement: "bottom-start", tooltip: "bottom-start", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "bottom", tooltip: "bottom", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")),
-        React.createElement(Tooltip, { placement: "bottom-end", tooltip: "bottom-end", defaultOpen: true },
-            React.createElement(Button, null, "Tooltip trigger")))));
-WithPlacement.story = {
+export const WithPlacement = {
+    render: () => (React.createElement(React.Fragment, null,
+        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+            React.createElement(Tooltip, { placement: "top-start", tooltip: "top-start", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "top", tooltip: "top", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "top-end", tooltip: "top-end", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger"))),
+        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+            React.createElement(Tooltip, { placement: "left-start", tooltip: "left-start", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "left", tooltip: "left", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "left-end", tooltip: "left-end", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger"))),
+        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+            React.createElement(Tooltip, { placement: "right-start", tooltip: "right-start", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "right", tooltip: "right", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "right-end", tooltip: "right-end", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger"))),
+        React.createElement(Flex, { my: "x6", mx: "x8", justifyContent: "space-around" },
+            React.createElement(Tooltip, { placement: "bottom-start", tooltip: "bottom-start", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "bottom", tooltip: "bottom", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger")),
+            React.createElement(Tooltip, { placement: "bottom-end", tooltip: "bottom-end", defaultOpen: true },
+                React.createElement(Button, null, "Tooltip trigger"))))),
     name: "with placement",
 };
-export const WithLinkPassedIn = () => (React.createElement(Tooltip, { placement: "bottom", tooltip: React.createElement(Link, { href: "/" }, " Link "), defaultOpen: true },
-    React.createElement(Button, null, " Button ")));
-WithLinkPassedIn.story = {
+export const WithLinkPassedIn = {
+    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { placement: "bottom", tooltip: React.createElement(Link, { href: "/" }, " Link "), defaultOpen: true }),
+        React.createElement(Button, null, " Button "))),
     name: "with Link passed in",
 };
-export const WithButtonPassedIn = () => (React.createElement(Tooltip, { placement: "bottom", tooltip: React.createElement(Button, { href: "/" }, " Button "), defaultOpen: true },
-    React.createElement(Button, null, " Button ")));
-WithButtonPassedIn.story = {
+export const WithButtonPassedIn = {
+    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { placement: "bottom", tooltip: React.createElement(Button, { href: "/" }, " Button "), defaultOpen: true }),
+        React.createElement(Button, null, " Button "))),
     name: "with Button passed in",
 };
-export const WithCustomShowDelay = () => (React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip", showDelay: "1000" },
-    React.createElement(Button, null, " Button ")));
-WithCustomShowDelay.story = {
+export const WithCustomShowDelay = {
+    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { placement: "bottom", tooltip: "Tooltip", showDelay: "1000" }),
+        React.createElement(Button, null, " Button "))),
     name: "with custom showDelay",
 };
-export const WithOtherFocusableElements = () => (React.createElement(React.Fragment, null,
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Button, null, " Button ")),
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Link, { href: "/" }, " Link ")),
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Text, { mr: "x2", inline: true, bg: "blue" }, "Inline Text")),
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Box, { width: "200px", bg: "blue" }, "Box width 200px")),
-    React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
-        React.createElement(Box, { bg: "blue" }, "Box"))));
-WithOtherFocusableElements.story = {
+export const WithOtherFocusableElements = {
+    render: () => (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Button, null, " Button ")),
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Link, { href: "/" }, " Link ")),
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Text, { mr: "x2", inline: true, bg: "blue" }, "Inline Text")),
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Box, { width: "200px", bg: "blue" }, "Box width 200px")),
+        React.createElement(Tooltip, { placement: "bottom", tooltip: "Tooltip" },
+            React.createElement(Box, { bg: "blue" }, "Box")))),
     name: "with other focusable elements",
 };
-export const OpenByDefault = () => (React.createElement(Tooltip, { tooltip: "I am an open Tooltip!", defaultOpen: true },
-    React.createElement(Button, null, "Hover me")));
-OpenByDefault.story = {
+export const OpenByDefault = {
+    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { tooltip: "I am an open Tooltip!", defaultOpen: true }),
+        React.createElement(Button, null, "Hover me"))),
     name: "open by default",
 };
-export const WithCustomComponent = () => (React.createElement(Tooltip, { tooltip: "See me on hover!", defaultOpen: true },
-    React.createElement(CustomComponent, null)));
+export const WithCustomComponent = {
+    render: (args) => (React.createElement(Tooltip, Object.assign({}, args, { tooltip: "See me on hover!", defaultOpen: true }),
+        React.createElement(CustomComponent, null))),
+};
 const CustomComponent = React.forwardRef((props, forwardedRef) => (React.createElement("span", Object.assign({ ref: forwardedRef }, props),
     React.createElement(Text, { inline: true }, "This component uses the forwardedRef from the Tooltip wrapping it"))));
 const CustomTooltip = () => (React.createElement(Flex, { flexDirection: "column", width: "320px", p: "x1_5" },
@@ -115,7 +120,10 @@ const CustomTooltip = () => (React.createElement(Flex, { flexDirection: "column"
                 "US $202.12 ",
                 React.createElement(Icon, { icon: "arrowForward", color: "midGrey" }),
                 " CA $287.43")))));
-export const WithCustomTooltip = () => (React.createElement(Flex, { alignItems: "center", gap: "half" },
-    React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "You can embed custom components in the tooltip"),
-    React.createElement(Tooltip, { maxWidth: "340px", tooltip: React.createElement(CustomTooltip, null), defaultOpen: true },
-        React.createElement(Icon, { icon: "info", size: "x3", color: "darkGrey" }))));
+export const WithCustomTooltip = {
+    render: () => (React.createElement(Flex, { alignItems: "center", gap: "half" },
+        React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "You can embed custom components in the tooltip"),
+        React.createElement(Tooltip, { maxWidth: "340px", tooltip: React.createElement(CustomTooltip, null), defaultOpen: true },
+            React.createElement(Icon, { icon: "info", size: "x3", color: "darkGrey" })))),
+    name: "with custom tooltip",
+};

package/dist/src/testing/matchers/toHaveStyle.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Helper function to check if an element has a specific computed style.
+ * @param element - The DOM element to check
+ * @param styleString - CSS style string in the format "property: value" (e.g., "opacity: 0", "z-index: 1001")
+ * @returns true if the computed style matches, false otherwise
+ */
+export declare function hasComputedStyle(element: HTMLElement | null, styleString: string): boolean;
+declare module "vitest" {
+    interface Assertion {
+        toHaveComputedStyle(styleString: string): void;
+    }
+    interface AsymmetricMatchersContaining {
+        toHaveComputedStyle(styleString: string): void;
+    }
+}

package/dist/src/testing/matchers/toHaveStyle.js

@@ -0,0 +1,50 @@
+import { expect } from "vitest";
+/**
+ * Helper function to check if an element has a specific computed style.
+ * @param element - The DOM element to check
+ * @param styleString - CSS style string in the format "property: value" (e.g., "opacity: 0", "z-index: 1001")
+ * @returns true if the computed style matches, false otherwise
+ */
+export function hasComputedStyle(element, styleString) {
+    if (!element) {
+        return false;
+    }
+    const [property, value] = styleString.split(":").map((s) => s.trim());
+    const computedStyle = window.getComputedStyle(element);
+    const actualValue = computedStyle.getPropertyValue(property);
+    // Normalize values for comparison
+    // Handle numeric values (e.g., "0" vs "0px" for opacity, "1001" vs "1001px" for z-index)
+    const normalizedExpected = value.trim();
+    const normalizedActual = actualValue.trim();
+    // For numeric values, compare as numbers
+    const expectedNum = parseFloat(normalizedExpected);
+    const actualNum = parseFloat(normalizedActual);
+    if (!isNaN(expectedNum) && !isNaN(actualNum)) {
+        return expectedNum === actualNum;
+    }
+    // For non-numeric values, do exact string comparison
+    return normalizedExpected === normalizedActual;
+}
+/**
+ * Custom Vitest matcher to check computed styles.
+ * Usage: expect(element).toHaveComputedStyle("opacity: 0")
+ */
+expect.extend({
+    toHaveComputedStyle(received, styleString) {
+        const pass = hasComputedStyle(received, styleString);
+        const [property, value] = styleString.split(":").map((s) => s.trim());
+        if (pass) {
+            return {
+                message: () => `expected element not to have computed style ${property}: ${value}`,
+                pass: true,
+            };
+        }
+        else {
+            const actualValue = received ? window.getComputedStyle(received).getPropertyValue(property) : "element is null";
+            return {
+                message: () => `expected element to have computed style ${property}: ${value}, but got ${actualValue}`,
+                pass: false,
+            };
+        }
+    },
+});

package/dist/src/testing/matchers/toMatchDate.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/testing/matchers/toMatchDate.js

@@ -1,4 +1,4 @@
-"use strict";
+import { expect } from "vitest";
 expect.extend({
     toMatchDate(received, date) {
         const pass = date.getMonth() === received.getMonth() &&

package/dist/src/utils/DetectOutsideClick.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated use `useClickOutside` instead
+ */
 export default class DetectOutsideClick extends React.Component<any, any, any> {
     constructor(props: any);
     handleOutsideClick(e: any): void;

package/dist/src/utils/DetectOutsideClick.js

@@ -1,4 +1,7 @@
 import React from "react";
+/**
+ * @deprecated use `useClickOutside` instead
+ */
 export default class DetectOutsideClick extends React.Component {
     constructor(props) {
         super(props);

package/dist/src/utils/ScrollIndicators.js

@@ -1,7 +1,7 @@
 import React from "react";
-import { Icon } from "../Icon";
 import styled from "styled-components";
 import { position } from "styled-system";
+import { Icon } from "../Icon";
 const ScrollIndicatorWrapper = styled.div(({ theme }) => ({
     position: "absolute",
     left: `calc(50% - ${theme.space.x3})`,

package/dist/src/utils/generateId.d.ts

@@ -1,2 +1,7 @@
 export default generateId;
+/**
+ * Generates a unique ID for an element.
+ * @returns {string} A unique ID.
+ * @deprecated use `useId` instead
+ */
 declare function generateId(): string;

package/dist/src/utils/generateId.js

@@ -1,5 +1,10 @@
 const prefix = "random-id-";
 let randomId = 0;
+/**
+ * Generates a unique ID for an element.
+ * @returns {string} A unique ID.
+ * @deprecated use `useId` instead
+ */
 const generateId = () => {
     randomId += 1;
     return prefix + randomId;

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

@@ -2,7 +2,6 @@ export { default as ClickInputLabel } from "./ClickInputLabel";
 export { default as omit } from "./omit";
 export { default as subPx } from "./subPx";
 export { default as generateId } from "./generateId";
-export { default as withWindowDimensions } from "./withWindowDimensions";
 export { default as DetectOutsideClick } from "./DetectOutsideClick";
 export { default as PopperArrow } from "./PopperArrow";
 export { default as ScrollIndicators } from "./ScrollIndicators";

package/dist/src/utils/index.js

@@ -2,7 +2,6 @@ export { default as ClickInputLabel } from "./ClickInputLabel";
 export { default as omit } from "./omit";
 export { default as subPx } from "./subPx";
 export { default as generateId } from "./generateId";
-export { default as withWindowDimensions } from "./withWindowDimensions";
 export { default as DetectOutsideClick } from "./DetectOutsideClick";
 export { default as PopperArrow } from "./PopperArrow";
 export { default as ScrollIndicators } from "./ScrollIndicators";

package/dist/src/utils/numberFromDimension/numberFromDimension.spec.js

@@ -1,3 +1,4 @@
+import { describe, it, expect } from "vitest";
 import numberFromDimension from ".";
 describe("numberFromDimension", () => {
     it("returns the numerical value from a css dimension", () => {

package/dist/vitest.config.d.ts

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

package/dist/vitest.config.js

@@ -0,0 +1,11 @@
+import { resolve } from "path";
+import { defineConfig } from "vitest/config";
+export default defineConfig({
+    test: {
+        environment: "jsdom",
+        globals: false,
+        include: ["**/*.spec.tsx", "**/*.spec.ts"],
+        exclude: ["**/node_modules/**", "**/cypress/**", "**/dist/**"],
+        setupFiles: [resolve(__dirname, "spec/support/vitestAutoCleanup.ts")],
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "15.2.0",
+  "version": "15.2.2",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {
@@ -12,11 +12,11 @@
     "start-server": "yarn build:storybook && yarn http-server -p 9999 ./storybook-static",
     "start": "concurrently \"yarn build:watch\" \"yarn start:storybook\"",
     "start:cypress": "start-server-and-test start 9999 'cypress open'",
-    "start:storybook": "start-storybook -p 9999",
+    "start:storybook": "storybook dev -p 9999",
     "clean:storybook": "rm -rf node_modules/.cache/storybook && rm -rf ./storybook-static",
     "build": "rollup -c",
     "build:watch": "rollup -c --watch",
-    "build:storybook": "build-storybook",
+    "build:storybook": "storybook build",
     "warn:prepush": "echo \"Make sure you also run all the other CI steps before pushing by running 'yarn ci'\"",
     "check": "yarn warn:prepush && yarn check:types && yarn check:lint && yarn check:format",
     "check:types": "tsc && cd cypress && tsc --noEmit",
@@ -26,7 +26,8 @@
     "fix:lint": "yarn check:lint --fix",
     "fix:format": "prettier -w .",
     "test": "yarn test:components && yarn run test:cypress",
-    "test:components": "jest",
+    "test:components": "vitest run",
+    "test:components:watch": "vitest",
     "test:cypress": "start-server-and-test start-server 9999 'cypress run'",
     "test:visual": "npx chromatic --project-token $CHROMATIC_TOKEN --exit-zero-on-changes",
     "prepare": "husky"
@@ -64,13 +65,11 @@
   },
   "devDependencies": {
     "@apollo/client": "^3.11.8",
-    "@babel/core": "^7.0.0-0",
-    "@babel/plugin-proposal-private-methods": "^7.10.4",
-    "@babel/plugin-proposal-private-property-in-object": "^7.10.4",
-    "@babel/plugin-syntax-class-properties": "^7.10.4",
-    "@babel/plugin-transform-runtime": "^7.9.6",
-    "@babel/preset-env": "7.3.1",
-    "@babel/preset-typescript": "^7.10.4",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
     "@nulogy/eslint-config-nulogy": "^1.0.0",
     "@nulogy/icons": "^4.37.2",
     "@rollup/plugin-babel": "^5.0.0",
@@ -81,53 +80,45 @@
     "@semantic-release/github": "^8.0.7",
     "@semantic-release/npm": "^9.0.0",
     "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-a11y": "^6.1.9",
-    "@storybook/addon-actions": "^6.1.9",
-    "@storybook/addon-docs": "6.1.9",
-    "@storybook/addon-knobs": "^6.1.9",
-    "@storybook/addon-storysource": "^6.1.9",
-    "@storybook/addon-toolbars": "^6.1.9",
-    "@storybook/addon-viewport": "^8.1.11",
-    "@storybook/codemod": "^6.1.9",
-    "@storybook/react": "6.3.12",
-    "@storybook/theming": "^6.1.9",
-    "@testing-library/jest-dom": "5.11.5",
+    "@storybook/addon-a11y": "7.6.20",
+    "@storybook/addon-actions": "7.6.20",
+    "@storybook/addon-docs": "7.6.20",
+    "@storybook/addon-storysource": "7.6.20",
+    "@storybook/addon-toolbars": "7.6.20",
+    "@storybook/addon-viewport": "7.6.20",
+    "@storybook/codemod": "7.6.20",
+    "@storybook/react": "7.6.20",
+    "@storybook/react-webpack5": "7.6.20",
+    "@storybook/theming": "7.6.20",
     "@testing-library/react": "^12.1.5",
     "@types/css-mediaquery": "^0.1.4",
     "@types/deep-equal": "^1.0.4",
-    "@types/jest": "^29.5.1",
     "@types/node": "^14.0.14",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.20",
     "@types/react-router-dom": "5.3.0",
     "@typescript-eslint/eslint-plugin": "^4.0.0",
     "@typescript-eslint/parser": "^5.30.5",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "29.5.0",
     "babel-loader": "8.0.6",
     "babel-plugin-inline-json-import": "^0.3.2",
     "babel-plugin-require-context-hook": "1.0.0",
     "babel-plugin-styled-components": "2.1.3",
     "babel-preset-react": "6.24.1",
-    "chromatic": "^6.0.6",
+    "chromatic": "^13.3.3",
     "concurrently": "^9.2.0",
     "css-mediaquery": "^0.1.2",
     "cypress": "^13.2.0",
     "cypress-enter-plugin": "^1.0.1",
     "cypress-plugin-tab": "^1.0.1",
     "cypress-real-events": "^1.14.0",
-    "enzyme": "3.11.0",
-    "enzyme-to-json": "3.4.4",
     "eslint": "6.8.0",
     "eslint-plugin-prettier": "^3.1.4",
     "graphql": "15.8.0",
     "http-server": "^14.0.0",
     "husky": "^9.1.7",
-    "jest": "29.7.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "jest-styled-components": "7",
+    "jsdom": "^24.0.0",
     "mockdate": "^3.0.2",
     "plop": "^2.4.0",
     "prettier": "^3.4.2",
@@ -145,11 +136,11 @@
     "semantic-release": "^24.2.5",
     "source-map-loader": "^1.0.1",
     "start-server-and-test": "^2.0.12",
-    "storybook-addon-performance": "^0.17.1",
+    "storybook": "7.6.20",
     "styled-components": "^6.0.0",
     "svg-sprite-loader": "^6.0.11",
-    "ts-jest": "^26.1.1",
     "typescript": "4.9.5",
+    "vitest": "^2.0.0",
     "typescript-eslint": "^0.0.1-alpha.0"
   },
   "dependencies": {
@@ -183,33 +174,5 @@
     "smoothscroll-polyfill": "^0.4.4",
     "styled-system": "^5.1.4",
     "stylis": "^4.0.0"
-  },
-  "jest": {
-    "testEnvironment": "jsdom",
-    "transform": {
-      "^.+\\.jsx?$": "babel-jest",
-      "^.+\\.js?$": "babel-jest",
-      "^.+\\.ts?$": "babel-jest",
-      "^.+\\.tsx?$": "babel-jest"
-    },
-    "transformIgnorePatterns": [
-      "node_modules/(?!(@nulogy|storybook-addon-performance))"
-    ],
-    "testPathIgnorePatterns": [
-      "<rootDir>/cypress"
-    ],
-    "testMatch": [
-      "**/*.spec.tsx",
-      "**/*.spec.ts"
-    ],
-    "setupFiles": [
-      "<rootDir>/spec/support/registerContext.js"
-    ],
-    "setupFilesAfterEnv": [
-      "<rootDir>/spec/support/specHelper.js"
-    ],
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
   }
 }

package/dist/src/NDSProvider/mountWithNDSProvider.spec-utils.d.ts

@@ -1 +0,0 @@
-export declare const mountWithNDSProvider: (component: any, locale?: string) => any;

package/dist/src/NDSProvider/mountWithNDSProvider.spec-utils.js

@@ -1,4 +0,0 @@
-import React from "react";
-import { mount } from "enzyme";
-import NDSProvider from "./NDSProvider";
-export const mountWithNDSProvider = (component, locale = "en_US") => mount(React.createElement(NDSProvider, { locale: locale }, component));

package/dist/src/utils/withWindowDimensions.d.ts

@@ -1,3 +0,0 @@
-export default withWindowDimensions;
-declare function withWindowDimensions(Component: any): (props: any) => React.JSX.Element;
-import React from "react";