@homefile/components-v2 2.62.0 → 2.63.1

package/dist/stories/onboarding/pages/TwoFactor.stories.js

@@ -1,6 +1,17 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
+import { expect, fn, within } from '@storybook/test';
 import { TwoFactor } from '../../../components';
+import { PHONE, expectCardAtTop, expectCardFullWidth, expectSides, getCard, } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: TwoFactor,
@@ -12,10 +23,114 @@ export default {
         onReset: (code) => alert(`Code submitted: ${code}`),
         onResend: () => alert('Resend code clicked'),
     },
-    decorators: [
-        (Story) => (_jsx(Box, { p: "base", children: _jsx(Story, {}) })),
-    ],
 };
 export const TwoFactorPage = (args) => {
     return _jsx(TwoFactor, Object.assign({}, args));
 };
+// The default page keeps its framed look; the connect stories render full-screen.
+const framed = (Story) => (_jsx(Box, { p: "base", children: _jsx(Story, {}) }));
+TwoFactorPage.decorators = [framed];
+TwoFactorPage.play = (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+    const canvas = within(canvasElement);
+    // The default page is unchanged: its own title, subtitle and button.
+    yield expect(canvas.getByText('Please validate your identity to log in.')).toBeVisible();
+    yield expect(canvas.getByText('We’ve sent a 6-digit security code to your phone. Please enter that code below.')).toBeVisible();
+    yield expect(canvas.getByRole('button', { name: 'Submit' })).toBeVisible();
+});
+const CONNECT_HEADING = 'Check your email';
+const CONNECT_LINE = 'We sent a 6-digit code to j•••••@example.com. Enter it to connect (512) 555-0147. Keep this page open while you get your code.';
+// Matt, 2026-10-08: one calm line in normal type, in place of the bold warning.
+const CONNECT_NOTE = 'Only enter the code if (512) 555-0147 is your phone.';
+const WRONG_CODE = 'That code didn’t work. Check the email and try again.';
+// Matt, 2026-10-08T03:00:39Z: a press of "Resend new code" past the two resends
+// a link allows shows this line under the button; the button stays.
+const RESEND_LIMIT = "You've asked for 2 new codes. Text Homi for a new link if this one doesn't arrive.";
+// On a phone: full screen, no bar on top, 13px sides.
+const expectPhoneLayout = (canvasElement) => __awaiter(void 0, void 0, void 0, function* () {
+    const canvas = within(canvasElement);
+    const card = getCard(canvasElement);
+    yield expectCardAtTop(card);
+    yield expectCardFullWidth(card);
+    yield expectSides(card, {
+        'code field': canvas.getByPlaceholderText('Enter your code here'),
+        'Connect phone button': canvas.getByRole('button', { name: 'Connect phone' }),
+    });
+});
+// The calm line is on every state of the screen: in normal type, above the code
+// field, and on the screen without scrolling on a phone (Ken, v4.10 (d)).
+const expectCalmNote = (canvasElement) => __awaiter(void 0, void 0, void 0, function* () {
+    const canvas = within(canvasElement);
+    const note = canvas.getByText(CONNECT_NOTE);
+    yield expect(note).toBeVisible();
+    yield expect(Number(getComputedStyle(note).fontWeight), 'note weight').toBe(400);
+    const noteBottom = note.getBoundingClientRect().bottom;
+    const codeField = canvas.getByPlaceholderText('Enter your code here');
+    yield expect(noteBottom, 'note above the code field').toBeLessThanOrEqual(codeField.getBoundingClientRect().top);
+    yield expect(noteBottom, 'note on screen').toBeLessThanOrEqual(window.innerHeight);
+});
+const connectArgs = {
+    twoFactorMethod: 'email',
+    heading: CONNECT_HEADING,
+    description: CONNECT_LINE,
+    note: CONNECT_NOTE,
+    submitLabel: 'Connect phone',
+    onReset: fn(),
+    onResend: fn(),
+};
+// The code step of the page a texter reaches from Homi's link.
+export const TwoFactorConnect = {
+    parameters: PHONE,
+    args: connectArgs,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        yield expect(canvas.getByText(CONNECT_HEADING)).toBeVisible();
+        yield expect(canvas.getByText(CONNECT_LINE)).toBeVisible();
+        yield expectCalmNote(canvasElement);
+        yield expect(canvas.getByRole('button', { name: 'Connect phone' })).toBeVisible();
+        yield expect(canvas.getByRole('button', { name: 'Resend new code' })).toBeVisible();
+        yield expect(canvas.queryByText('Please validate your identity to log in.')).toBeNull();
+        yield expect(canvas.queryByRole('button', { name: 'Submit' })).toBeNull();
+        // No line under "Resend new code" unless the page passes one.
+        yield expect(canvas.queryByText(RESEND_LIMIT)).toBeNull();
+        yield expectPhoneLayout(canvasElement);
+    }),
+};
+// After a wrong code: the error sits above the code field, and the calm line stays.
+export const TwoFactorConnectWrongCode = {
+    parameters: PHONE,
+    args: Object.assign(Object.assign({}, connectArgs), { errorMessage: WRONG_CODE }),
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const error = canvas.getByText(WRONG_CODE);
+        yield expect(error).toBeVisible();
+        yield expectCalmNote(canvasElement);
+        const codeField = canvas.getByPlaceholderText('Enter your code here');
+        yield expect(error.getBoundingClientRect().bottom).toBeLessThanOrEqual(codeField.getBoundingClientRect().top);
+        yield expect(canvas.queryByText(RESEND_LIMIT)).toBeNull();
+        yield expectPhoneLayout(canvasElement);
+    }),
+};
+// A press past the resend limit: a calm line under "Resend new code", in normal
+// type and without error styling; the button and the calm note stay.
+const resendLimitArgs = Object.assign(Object.assign({}, connectArgs), { resendNote: RESEND_LIMIT });
+export const TwoFactorConnectResendLimit = {
+    parameters: PHONE,
+    args: resendLimitArgs,
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const line = canvas.getByText(RESEND_LIMIT);
+        yield expect(line).toBeVisible();
+        const resend = canvas.getByRole('button', { name: 'Resend new code' });
+        yield expect(resend).toBeVisible();
+        yield expect(line.getBoundingClientRect().top, 'line under the resend button').toBeGreaterThanOrEqual(resend.getBoundingClientRect().bottom);
+        yield expect(line.getBoundingClientRect().bottom, 'line on screen').toBeLessThanOrEqual(window.innerHeight);
+        const style = getComputedStyle(line);
+        const note = getComputedStyle(canvas.getByText(CONNECT_NOTE));
+        yield expect(Number(style.fontWeight), 'line weight').toBe(400);
+        yield expect(style.color, 'line colour (no error styling)').toBe(note.color);
+        yield expect(line.closest('[role="alert"], .chakra-form__error-message')).toBeNull();
+        yield expect(line.children).toHaveLength(0);
+        yield expectCalmNote(canvasElement);
+        yield expectPhoneLayout(canvasElement);
+    }),
+};

package/dist/stories/onboarding/pages/Welcome.stories.d.ts

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { WelcomePageI } from '../../../interfaces';
 declare const _default: Meta<WelcomePageI>;
 export default _default;
@@ -9,3 +9,4 @@ export declare const WelcomePage: {
         videoUrl: string;
     };
 };
+export declare const WelcomePhone: StoryObj<WelcomePageI>;

package/dist/stories/onboarding/pages/Welcome.stories.js

@@ -1,6 +1,17 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
+import { fn, within } from '@storybook/test';
 import { Welcome } from '../../../components';
+import { PHONE, expectCardFullWidth, expectSides, getCard } from '../phoneLayout';
 export default {
     title: 'Pages/Onboarding',
     component: Welcome,
@@ -12,3 +23,21 @@ WelcomePage.args = {
     name: 'Sam',
     videoUrl: 'https://www.youtube.com/embed/rkt_YtZYRDI',
 };
+// The welcome page on a phone: the card spans the screen, and its text keeps
+// 13px from the sides.
+export const WelcomePhone = {
+    parameters: PHONE,
+    args: {
+        name: 'Jordan',
+        handleClick: fn(),
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const card = getCard(canvasElement);
+        yield expectCardFullWidth(card);
+        yield expectSides(card, {
+            message: canvas.getByText('We hope you enjoy your time with Homefile.'),
+            signature: canvas.getByText('Your Homefile Crew'),
+        });
+    }),
+};

package/dist/stories/onboarding/phoneLayout.d.ts

@@ -0,0 +1,20 @@
+export declare const PHONE: {
+    layout: string;
+    viewport: {
+        defaultViewport: string;
+    };
+};
+export declare const SMALL_TABLET: {
+    layout: string;
+    viewport: {
+        defaultViewport: string;
+    };
+};
+export declare const getCard: (canvasElement: HTMLElement) => HTMLElement;
+export declare const expectCardFullWidth: (card: HTMLElement) => Promise<void>;
+export declare const expectCardAtTop: (card: HTMLElement) => Promise<void>;
+export declare const expectCardBelowTopGap: (card: HTMLElement) => Promise<void>;
+export declare const expectNoCardShadow: (card: HTMLElement) => Promise<void>;
+export declare const expectPageFillsScreen: (card: HTMLElement) => Promise<void>;
+export declare const expectSides: (card: HTMLElement, elements: Record<string, Element | [Element, Element]>) => Promise<void>;
+export declare const expectContentSides: (card: HTMLElement, elements: Record<string, HTMLElement>) => Promise<void>;

package/dist/stories/onboarding/phoneLayout.js

@@ -0,0 +1,89 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { expect } from '@storybook/test';
+// Onboarding pages on a phone (Matt, 2026-10-07): the card fills the screen
+// from side to side, and its fields and buttons keep 13px from each side.
+// The full-screen pages also start at the very top, with no bar above the card.
+export const PHONE = {
+    layout: 'fullscreen',
+    viewport: { defaultViewport: 'iphone12' }, // 390x844
+};
+// A small tablet, between the 480px and 768px breakpoints (iPad mini, 744x1133).
+export const SMALL_TABLET = {
+    layout: 'fullscreen',
+    viewport: { defaultViewport: 'ipadmini' },
+};
+const SIDE = 13;
+// The onboarding top gap ('onboarding.top', 3.125rem).
+const TOP_GAP = 50;
+// The page's card: the first Chakra Container in the story.
+export const getCard = (canvasElement) => canvasElement.querySelector('.chakra-container');
+// The card spans the screen from side to side.
+export const expectCardFullWidth = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    const box = card.getBoundingClientRect();
+    yield expect(Math.round(box.left), 'card left').toBe(0);
+    yield expect(Math.round(box.right), 'card right').toBe(document.documentElement.clientWidth);
+});
+// The card starts at the very top of the screen: no bar above it.
+export const expectCardAtTop = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    yield expect(Math.round(card.getBoundingClientRect().top), 'card top').toBe(0);
+});
+// The card sits below the onboarding top gap, and is still a card: it has a
+// shadow and is narrower than the screen (tablets and desktops).
+export const expectCardBelowTopGap = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    yield expect(Math.round(card.getBoundingClientRect().top), 'card top').toBe(TOP_GAP);
+    yield expect(getComputedStyle(card).boxShadow, 'card shadow').not.toBe('none');
+    yield expect(Math.round(card.getBoundingClientRect().width), 'card width').toBeLessThan(document.documentElement.clientWidth);
+});
+// The card has no shadow: on a phone it is the page, not a card on it.
+export const expectNoCardShadow = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    yield expect(getComputedStyle(card).boxShadow, 'card shadow').toBe('none');
+});
+// The page ends at the bottom of the screen, as sign in does on a phone: the
+// card grows down to the copyright, and the copyright sits at the bottom of the
+// screen. A page without the copyright: the card reaches the bottom.
+export const expectPageFillsScreen = (card) => __awaiter(void 0, void 0, void 0, function* () {
+    const cardBottom = card.getBoundingClientRect().bottom;
+    const footer = card.nextElementSibling;
+    if (!footer) {
+        yield expect(Math.round(cardBottom), 'card bottom').toBe(window.innerHeight);
+        return;
+    }
+    const box = footer.getBoundingClientRect();
+    const style = getComputedStyle(footer);
+    yield expect(Math.round(box.bottom + parseFloat(style.marginBottom)), 'page bottom').toBe(window.innerHeight);
+    yield expect(Math.round(cardBottom + parseFloat(style.marginTop)), 'card bottom').toBe(Math.round(box.top));
+});
+// Each element sits 13px in from both sides of the card. A row given as
+// [first, last] is measured from its first element's left side to its last
+// element's right side.
+export const expectSides = (card, elements) => __awaiter(void 0, void 0, void 0, function* () {
+    const box = card.getBoundingClientRect();
+    for (const [name, element] of Object.entries(elements)) {
+        const [first, last] = Array.isArray(element) ? element : [element, element];
+        const left = first.getBoundingClientRect().left;
+        const right = last.getBoundingClientRect().right;
+        yield expect(Math.round(left - box.left), `${name} left`).toBe(SIDE);
+        yield expect(Math.round(box.right - right), `${name} right`).toBe(SIDE);
+    }
+});
+// For a full-width block that sets the margin with its own padding (a centred
+// title): its content starts 13px in from both sides of the card.
+export const expectContentSides = (card, elements) => __awaiter(void 0, void 0, void 0, function* () {
+    const box = card.getBoundingClientRect();
+    for (const [name, element] of Object.entries(elements)) {
+        const rect = element.getBoundingClientRect();
+        const style = getComputedStyle(element);
+        const left = rect.left + parseFloat(style.borderLeftWidth) + parseFloat(style.paddingLeft);
+        const right = rect.right - parseFloat(style.borderRightWidth) - parseFloat(style.paddingRight);
+        yield expect(Math.round(left - box.left), `${name} left`).toBe(SIDE);
+        yield expect(Math.round(box.right - right), `${name} right`).toBe(SIDE);
+    }
+});

package/dist/stories/partner/adminTiles/InboxCard.stories.d.ts

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react';
 import { InboxCardI } from '../../../interfaces';
-declare const _default: Meta;
+declare const _default: Meta<InboxCardI>;
 export default _default;
 export declare const InboxCardComponent: (args: InboxCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/partner/adminTiles/InboxCard.stories.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@chakra-ui/react';
+import { fn } from '@storybook/test';
 import { InboxCard } from '../../../components';
 import { Document } from '../../../assets/images';
 export default {
     title: 'Components/Partner/Admin Tiles/Inbox',
     component: InboxCard,
     args: {
-        image: Document,
-        name: 'Inbox',
-        newMessages: 10,
-        showBorder: true,
-        totalMessages: 32,
+        box: {
+            image: Document,
+            name: 'Inbox',
+            newMessages: 10,
+            totalMessages: 32,
+        },
+        onClick: fn(),
     },
 };
 export const InboxCardComponent = (args) => {

package/dist/stories/typography/NoWidow.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+interface NoWidowArgs {
+    width: number;
+}
+declare const _default: Meta<NoWidowArgs>;
+export default _default;
+export declare const TitleAndBody: StoryObj<NoWidowArgs>;
+export declare const NeverWrappingTextStaysOnOneLine: StoryObj<NoWidowArgs>;

package/dist/stories/typography/NoWidow.stories.js

@@ -0,0 +1,61 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Stack, Text } from '@chakra-ui/react';
+import { expect, within } from '@storybook/test';
+export default {
+    title: 'Components/Typography/No Widow',
+    // A 390px phone screen: without the fix, both the title and the body end on one word.
+    args: { width: 390 },
+};
+const TITLE = 'Connect this phone to your Homefile account';
+const BODY = 'We sent a 6-digit code to the email on your account. Enter it here to finish connecting this phone.';
+// How many words sit on the last rendered line of an element's text.
+const wordsOnLastLine = (element) => {
+    var _a, _b, _c, _d, _e;
+    const rows = new Map();
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        const text = (_a = node.textContent) !== null && _a !== void 0 ? _a : '';
+        for (const match of text.matchAll(/\S+/g)) {
+            const range = document.createRange();
+            range.setStart(node, (_b = match.index) !== null && _b !== void 0 ? _b : 0);
+            range.setEnd(node, ((_c = match.index) !== null && _c !== void 0 ? _c : 0) + match[0].length);
+            const top = Math.round(range.getBoundingClientRect().top);
+            rows.set(top, ((_d = rows.get(top)) !== null && _d !== void 0 ? _d : 0) + 1);
+        }
+    }
+    return (_e = rows.get(Math.max(...rows.keys()))) !== null && _e !== void 0 ? _e : 0;
+};
+export const TitleAndBody = {
+    render: ({ width }) => (_jsx(Box, { w: `${width}px`, p: "base", bg: "neutral.white", children: _jsxs(Stack, { spacing: "base", children: [_jsx(Text, { variant: "title", children: TITLE }), _jsx(Text, { children: BODY })] }) })),
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const title = canvas.getByText(TITLE);
+        const body = canvas.getByText(BODY);
+        yield expect(getComputedStyle(title).getPropertyValue('text-wrap-style')).toBe('balance');
+        yield expect(getComputedStyle(body).getPropertyValue('text-wrap-style')).toBe('pretty');
+        // Neither block ends on a single word.
+        yield expect(wordsOnLastLine(title)).toBeGreaterThanOrEqual(2);
+        yield expect(wordsOnLastLine(body)).toBeGreaterThanOrEqual(2);
+    }),
+};
+const BUTTON_LABEL = 'Set Up Homi on this phone';
+// The no-widow rule only changes HOW text breaks: text that never wraps (inside a
+// button, a badge) must still stay on one line.
+export const NeverWrappingTextStaysOnOneLine = {
+    render: () => (_jsx(Box, { w: "120px", p: "base", bg: "neutral.white", children: _jsx(Button, { w: "full", children: _jsx(Text, { children: BUTTON_LABEL }) }) })),
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const label = within(canvasElement).getByText(BUTTON_LABEL);
+        yield expect(getComputedStyle(label).getPropertyValue('text-wrap-mode')).toBe('nowrap');
+        const lineHeight = parseFloat(getComputedStyle(label).lineHeight);
+        yield expect(label.getBoundingClientRect().height).toBeLessThan(lineHeight * 1.5);
+    }),
+};

package/dist/theme/components/TextStyles.d.ts

@@ -2,24 +2,29 @@ export declare const Text: {
     baseStyle: {
         fontWeight: string;
         lineHeight: string;
+        textWrapStyle: string;
     };
     variants: {
         heading: {
+            textWrapStyle: string;
             fontSize: string;
             color: string;
             lineHeight: string;
         };
         heading6: {
+            textWrapStyle: string;
             fontSize: string;
             color: string;
             lineHeight: string;
         };
         title: {
+            textWrapStyle: string;
             fontSize: string;
             color: string;
             lineHeight: string;
         };
         titleBolder: {
+            textWrapStyle: string;
             fontSize: string;
             color: string;
             fontWeight: string;

package/dist/theme/components/TextStyles.js

@@ -2,24 +2,32 @@ export const Text = {
     baseStyle: {
         fontWeight: 'regular',
         lineHeight: '20px',
+        // No widows: running text never ends on a single word. The longhand only
+        // changes HOW lines break; the text-wrap shorthand would also undo the
+        // nowrap a Text inherits inside a Button or Badge.
+        textWrapStyle: 'pretty',
     },
     variants: {
         heading: {
+            textWrapStyle: 'balance',
             fontSize: '3xl',
             color: 'gray.3',
             lineHeight: '30px',
         },
         heading6: {
+            textWrapStyle: 'balance',
             fontSize: '2xl',
             color: 'gray.3',
             lineHeight: '30px',
         },
         title: {
+            textWrapStyle: 'balance',
             fontSize: 'lg',
             color: 'gray.3',
             lineHeight: '22px',
         },
         titleBolder: {
+            textWrapStyle: 'balance',
             fontSize: 'lg',
             color: 'gray.3',
             fontWeight: 'semibold',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.62.0",
+  "version": "2.63.1",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",
@@ -71,6 +71,7 @@
     "@storybook/react": "^8.5.2",
     "@storybook/react-vite": "^8.5.2",
     "@storybook/test": "^8.5.2",
+    "@storybook/test-runner": "0.21.3",
     "@types/node": "^22.10.7",
     "@types/react": "^19.0.7",
     "@types/react-datepicker": "^7.0.0",
@@ -120,5 +121,9 @@
     "tsc-alias": "^1.8.16",
     "valtio": "^2.1.3",
     "yup": "^1.6.1"
+  },
+  "resolutions": {
+    "playwright": "1.58.2",
+    "playwright-core": "1.58.2"
   }
 }