reshaped 3.4.1 → 3.4.3

package/dist/utilities/helpers.js

@@ -7,12 +7,14 @@ export const range = (start, end) => {
     return Array.from({ length: end - start + 1 }, (_, i) => start + i);
 };
 // from https://gist.github.com/ca0v/73a31f57b397606c9813472f7493a940
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export const debounce = (cb, wait = 20) => {
     let timer;
     const callable = (...args) => {
         clearTimeout(timer);
         timer = setTimeout(() => cb(...args), wait);
     };
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return callable;
 };
 export function debounceHandler(handler, timeout) {
@@ -23,6 +25,7 @@ export function debounceHandler(handler, timeout) {
         return debounced(event);
     };
 }
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 export const throttle = (cb, wait) => {
     let waiting = false;
     return (...args) => {
@@ -131,7 +134,7 @@ export const resolveViewportValue = (viewport, value) => {
     let result;
     if (!isResponsive(value))
         return value;
-    for (let currentViewport of viewports) {
+    for (const currentViewport of viewports) {
         const viewportValue = value[currentViewport];
         if (viewportValue !== undefined)
             result = viewportValue;

package/dist/utilities/platform.js

@@ -1,6 +1,7 @@
 const testPlatform = (re) => {
     // Using experimentral and deprecated features here since that's the only way to detect platform consistently
     const platform = 
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     window.navigator.userAgentData?.platform || window.navigator.platform;
     return typeof window !== "undefined" ? re.test(platform) : false;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.4.1",
+	"version": "3.4.3",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -95,62 +95,58 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "19.7.1",
-		"@commitlint/config-conventional": "19.7.1",
-		"@commitlint/types": "19.5.0",
-		"@eslint/js": "9.16.0",
+		"@commitlint/cli": "19.8.0",
+		"@commitlint/config-conventional": "19.8.0",
+		"@commitlint/types": "19.8.0",
+		"@eslint/js": "9.23.0",
 		"@size-limit/preset-big-lib": "11.2.0",
-		"@storybook/addon-a11y": "8.6.2",
-		"@storybook/addon-actions": "8.6.2",
-		"@storybook/addon-controls": "8.6.2",
-		"@storybook/addon-docs": "8.6.2",
-		"@storybook/addon-storysource": "8.6.2",
-		"@storybook/experimental-addon-test": "8.6.2",
-		"@storybook/react": "8.6.2",
-		"@storybook/react-vite": "8.6.2",
+		"@storybook/addon-a11y": "8.6.9",
+		"@storybook/addon-actions": "8.6.9",
+		"@storybook/addon-controls": "8.6.9",
+		"@storybook/addon-docs": "8.6.9",
+		"@storybook/addon-storysource": "8.6.9",
+		"@storybook/experimental-addon-test": "8.6.9",
+		"@storybook/react": "8.6.9",
+		"@storybook/react-vite": "8.6.9",
 		"@types/culori": "2.1.1",
 		"@types/events": "3.0.3",
-		"@types/node": "22.13.5",
-		"@types/react": "19.0.10",
+		"@types/node": "22.13.13",
+		"@types/react": "19.0.12",
 		"@types/react-dom": "19.0.4",
-		"@typescript-eslint/eslint-plugin": "7.18.0",
-		"@typescript-eslint/parser": "7.18.0",
 		"@vitejs/plugin-react": "4.3.4",
-		"@vitest/browser": "3.0.7",
-		"@vitest/coverage-istanbul": "3.0.7",
-		"@vitest/coverage-v8": "3.0.7",
-		"chromatic": "11.26.1",
+		"@vitest/browser": "3.0.9",
+		"@vitest/coverage-istanbul": "3.0.9",
+		"@vitest/coverage-v8": "3.0.9",
+		"chromatic": "11.27.0",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "8.57.1",
-		"eslint-config-prettier": "9.1.0",
-		"eslint-plugin-import": "2.31.0",
+		"eslint": "9.23.0",
+		"eslint-config-prettier": "10.1.1",
 		"eslint-plugin-jsx-a11y": "6.10.2",
-		"eslint-plugin-prettier": "5.2.1",
-		"eslint-plugin-react": "7.37.2",
-		"eslint-plugin-react-hooks": "5.0.0",
-		"globals": "15.12.0",
-		"lefthook": "1.11.2",
-		"playwright": "1.50.1",
+		"eslint-plugin-prettier": "5.2.5",
+		"eslint-plugin-react": "7.37.4",
+		"eslint-plugin-react-hooks": "5.2.0",
+		"lefthook": "1.11.5",
+		"playwright": "1.51.1",
 		"postcss": "8.5.3",
-		"postcss-cli": "11.0.0",
+		"postcss-cli": "11.0.1",
 		"postcss-each": "1.1.0",
 		"postcss-nested": "7.0.2",
-		"prettier": "3.5.2",
+		"prettier": "3.5.3",
 		"react": "18",
 		"react-dom": "18",
-		"react-shadow": "20.5.0",
+		"react-shadow": "20.6.0",
 		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.2.0",
-		"storybook": "8.6.2",
-		"stylelint": "16.14.1",
+		"storybook": "8.6.9",
+		"stylelint": "16.16.0",
 		"stylelint-config-prettier": "9.0.5",
 		"stylelint-config-standard": "37.0.0",
 		"ts-node": "10.9.2",
-		"typescript": "5.7.3",
-		"typescript-eslint": "8.16.0",
-		"vite": "6.2.0",
+		"typescript": "5.8.2",
+		"typescript-eslint": "8.28.0",
+		"vite": "6.2.3",
 		"vite-tsconfig-paths": "5.1.4",
-		"vitest": "3.0.7",
+		"vitest": "3.0.9",
 		"vitest-browser-react": "0.1.1"
 	},
 	"peerDependencies": {
@@ -161,7 +157,7 @@
 	"dependencies": {
 		"@csstools/postcss-global-data": "3.0.0",
 		"chalk": "4.1.2",
-		"commander": "12.1.0",
+		"commander": "13.1.0",
 		"cssnano": "7.0.6",
 		"csstype": "3.1.3",
 		"culori": "4.0.1",

package/dist/components/Calendar/tests/Calendar.test.stories.d.ts

@@ -1,26 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    component: (props: import("./..").CalendarProps) => import("react").JSX.Element;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const base: StoryObj;
-export declare const onChange: StoryObj<{
-    handleChange: ReturnType<typeof fn>;
-}>;
-export declare const defaultValue: StoryObj;
-export declare const value: StoryObj;
-export declare const range: StoryObj;
-export declare const minMax: StoryObj;
-export declare const monthSelection: StoryObj;
-export declare const ariaLabels: StoryObj;
-export declare const keyboardNavigation: StoryObj;

package/dist/components/Calendar/tests/Calendar.test.stories.js

@@ -1,161 +0,0 @@
-import { expect, userEvent, fn } from "@storybook/test";
-import Calendar from "../index.js";
-export default {
-    title: "Components/Calendar/tests",
-    component: Calendar,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/calendar",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => <Calendar defaultMonth={new Date(2020, 0, 1)}/>,
-    play: async ({ canvas }) => {
-        const monthTitleEl = canvas.getByText("January 2020");
-        const gridEl = canvas.getByRole("grid");
-        const gridCellEls = canvas.getAllByRole("gridcell");
-        const dateEls = canvas.getAllByRole("checkbox");
-        const buttonEls = canvas.getAllByRole("button");
-        expect(monthTitleEl).toBeInTheDocument();
-        expect(gridEl).toBeInTheDocument();
-        expect(gridCellEls).toHaveLength(31);
-        expect(dateEls).toHaveLength(31);
-        expect(dateEls[0].getAttribute("aria-label")).toBe("Wednesday, January 1");
-        expect(dateEls[0]).toHaveAttribute("tabIndex", "0");
-        expect(dateEls[1]).toHaveAttribute("tabIndex", "-1");
-        // Previous month button
-        expect(buttonEls[0].getAttribute("aria-label")).toBe("Previous month");
-        // Month select button
-        expect(buttonEls[1].innerHTML).toContain("Select a month");
-        // Next month button
-        expect(buttonEls[2].getAttribute("aria-label")).toBe("Next month");
-    },
-};
-export const onChange = {
-    name: "onChange",
-    args: {
-        handleChange: fn(),
-    },
-    render: (args) => <Calendar defaultMonth={new Date(2020, 0)} onChange={args.handleChange}/>,
-    play: async ({ canvas, args }) => {
-        const dateEls = canvas.getAllByRole("checkbox");
-        await userEvent.click(dateEls[1]);
-        expect(args.handleChange).toHaveBeenCalledTimes(1);
-        // TODO: https://github.com/storybookjs/storybook/issues/30503
-        // expect(args.handleChange).toHaveBeenCalledWith({ value: new Date(2020, 0, 2) });
-    },
-};
-export const defaultValue = {
-    name: "defaultValue",
-    render: () => <Calendar defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 5)}/>,
-    play: async ({ canvas }) => {
-        const dateEls = canvas.getAllByRole("checkbox");
-        const selectedDateEl = dateEls[4];
-        expect(selectedDateEl).toBeInTheDocument();
-        expect(selectedDateEl).toHaveAttribute("tabIndex", "0");
-        expect(selectedDateEl).toHaveAttribute("aria-checked", "true");
-        await userEvent.click(dateEls[6], { delay: null });
-        expect(dateEls[6]).toHaveAttribute("aria-checked", "true");
-    },
-};
-export const value = {
-    name: "value",
-    render: () => <Calendar defaultMonth={new Date(2020, 0)} value={new Date(2020, 0, 5)}/>,
-    play: async ({ canvas }) => {
-        const dateEls = canvas.getAllByRole("checkbox");
-        const selectedDateEl = dateEls[4];
-        expect(selectedDateEl).toBeInTheDocument();
-        expect(selectedDateEl).toHaveAttribute("tabIndex", "0");
-        expect(selectedDateEl).toHaveAttribute("aria-checked", "true");
-        await userEvent.click(dateEls[6], { delay: null });
-        expect(dateEls[6]).toHaveAttribute("aria-checked", "false");
-    },
-};
-export const range = {
-    name: "defaultValue, range",
-    render: () => (<Calendar defaultMonth={new Date(2020, 0)} range defaultValue={{ start: new Date(2020, 0, 5), end: new Date(2020, 0, 7) }}/>),
-    play: async ({ canvas }) => {
-        const dateEls = canvas.getAllByRole("checkbox");
-        const startDateEl = dateEls[4];
-        const endDateEl = dateEls[6];
-        expect(startDateEl).toHaveAttribute("tabIndex", "0");
-        expect(startDateEl).toHaveAttribute("aria-checked", "true");
-        expect(endDateEl).toHaveAttribute("tabIndex", "-1");
-        expect(endDateEl).toHaveAttribute("aria-checked", "true");
-        await userEvent.click(dateEls[3], { delay: null });
-        expect(dateEls[3]).toHaveAttribute("aria-checked", "true");
-        expect(dateEls[3]).toHaveAttribute("tabIndex", "0");
-        expect(startDateEl).toHaveAttribute("aria-checked", "false");
-        expect(startDateEl).toHaveAttribute("tabIndex", "-1");
-        expect(endDateEl).toHaveAttribute("aria-checked", "false");
-        expect(endDateEl).toHaveAttribute("tabIndex", "-1");
-        // Click before the start date
-        await userEvent.click(dateEls[2], { delay: null });
-        expect(dateEls[2]).toHaveAttribute("aria-checked", "true");
-        expect(dateEls[2]).toHaveAttribute("tabIndex", "0");
-        expect(dateEls[3]).toHaveAttribute("aria-checked", "false");
-        expect(dateEls[3]).toHaveAttribute("tabIndex", "-1");
-        await userEvent.click(dateEls[4], { delay: null });
-        expect(dateEls[2]).toHaveAttribute("aria-checked", "true");
-        expect(dateEls[2]).toHaveAttribute("tabIndex", "0");
-        expect(dateEls[4]).toHaveAttribute("aria-checked", "true");
-        expect(dateEls[4]).toHaveAttribute("tabIndex", "-1");
-    },
-};
-export const minMax = {
-    name: "min, max",
-    render: () => (<Calendar min={new Date(2020, 0, 5)} max={new Date(2020, 0, 25)} defaultMonth={new Date(2020, 0)}/>),
-    play: async ({ canvas }) => {
-        const dateEls = canvas.getAllByRole("checkbox");
-        expect(dateEls).toHaveLength(21);
-    },
-};
-export const monthSelection = {
-    name: "month selection",
-    render: () => <Calendar defaultMonth={new Date(2020, 0)}/>,
-    play: async ({ canvas }) => {
-        const buttonEls = canvas.getAllByRole("button");
-        await userEvent.click(buttonEls[1], { delay: null });
-        const monthEls = canvas.getAllByRole("button").filter((el) => el.hasAttribute("data-rs-date"));
-        expect(monthEls).toHaveLength(12);
-    },
-};
-export const ariaLabels = {
-    name: "aria labels",
-    render: () => (<Calendar defaultMonth={new Date(2020, 0)} nextYearAriaLabel="Test next year" nextMonthAriaLabel="Test next month" renderDateAriaLabel={() => "Test date"} renderMonthAriaLabel={() => "Test month"} previousYearAriaLabel="Test previous year" previousMonthAriaLabel="Test previous month" monthSelectionAriaLabel="Test month selection"/>),
-    play: async ({ canvas }) => {
-        const buttonEls = canvas.getAllByRole("button");
-        const dateEls = canvas.getAllByRole("checkbox");
-        expect(buttonEls[0]).toHaveAttribute("aria-label", "Test previous month");
-        expect(buttonEls[1]).toHaveTextContent("Test month selection");
-        expect(buttonEls[2]).toHaveAttribute("aria-label", "Test next month");
-        expect(dateEls[0]).toHaveAttribute("aria-label", "Test date");
-        await userEvent.click(buttonEls[1], { delay: null });
-        const yearButtonEls = canvas.getAllByRole("button");
-        expect(yearButtonEls[0]).toHaveAttribute("aria-label", "Test previous year");
-        expect(yearButtonEls[1]).toHaveAttribute("aria-label", "Test next year");
-        expect(yearButtonEls[2]).toHaveAttribute("aria-label", "Test month");
-    },
-};
-export const keyboardNavigation = {
-    name: "keyboard navigation",
-    render: () => <Calendar defaultMonth={new Date(2020, 0)}/>,
-    play: async ({ canvas }) => {
-        const user = userEvent.setup();
-        const dateEls = canvas.getAllByRole("checkbox");
-        dateEls[0].focus();
-        await user.keyboard("{ArrowRight/}");
-        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
-        await user.keyboard("{ArrowLeft/}");
-        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
-        await user.keyboard("{ArrowDown/}");
-        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-08");
-        await user.keyboard("{ArrowUp/}");
-        expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
-        await user.keyboard("{ArrowUp/}");
-        expect(document.activeElement).toHaveAttribute("data-rs-date", "2019-12-25");
-    },
-};

package/dist/hooks/tests/useDrag.test.stories.d.ts

@@ -1,26 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const mouseEvents: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;
-export declare const touchEvents: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;
-export declare const orientationHorizontal: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;
-export declare const orientationVertical: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj<{
-    handleDrag: ReturnType<typeof fn>;
-}>;

package/dist/hooks/tests/useDrag.test.stories.js

@@ -1,120 +0,0 @@
-import { fireEvent, fn, expect } from "@storybook/test";
-import View from "../../components/View/index.js";
-import useDrag from "../useDrag.js";
-export default {
-    title: "Hooks/useDrag/tests",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const Demo = (props) => {
-    const { ref, containerRef } = useDrag((options) => {
-        props.onDrag(options);
-    }, {
-        orientation: props.orientation,
-        disabled: props.disabled,
-    });
-    return (<View backgroundColor="neutral-faded" width="200px" height="200px" attributes={{ ref: containerRef, "data-testid": "test-id" }}>
-			<View height={8} width={8} backgroundColor="primary" attributes={{
-            "data-testid": "test-handle-id",
-            ref,
-        }}/>
-		</View>);
-};
-export const mouseEvents = {
-    name: "onDrag, mouse events",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag}/>;
-    },
-    play: ({ canvas, args }) => {
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.mouseDown(trigger);
-        fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-        expect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));
-        fireEvent.mouseUp(trigger);
-        fireEvent.mouseUp(document.body, { clientX: 50, clientY: 100 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-    },
-};
-export const touchEvents = {
-    name: "onDrag, touch events",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag}/>;
-    },
-    play: ({ canvas, args }) => {
-        const createTouch = (target, x, y) => {
-            return new Touch({
-                identifier: Date.now(),
-                target,
-                clientX: x,
-                clientY: y,
-                screenX: x,
-                screenY: y,
-                pageX: x,
-                pageY: y,
-            });
-        };
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.touchStart(trigger, { changedTouches: [createTouch(trigger, 0, 0)] });
-        fireEvent.touchMove(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-        expect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));
-        fireEvent.touchEnd(trigger);
-        fireEvent.touchEnd(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-    },
-};
-export const orientationHorizontal = {
-    name: "orientation horizontal",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag} orientation="horizontal"/>;
-    },
-    play: ({ canvas, args }) => {
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.mouseDown(trigger);
-        fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-        expect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 0 }));
-    },
-};
-export const orientationVertical = {
-    name: "orientation vertical",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag} orientation="vertical"/>;
-    },
-    play: ({ canvas, args }) => {
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.mouseDown(trigger);
-        fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(1);
-        expect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 0, y: 50 }));
-    },
-};
-export const disabled = {
-    name: "disabled",
-    args: {
-        handleDrag: fn(),
-    },
-    render: (args) => {
-        return <Demo onDrag={args.handleDrag} disabled/>;
-    },
-    play: ({ canvas, args }) => {
-        const trigger = canvas.getByTestId("test-handle-id");
-        fireEvent.mouseDown(trigger);
-        fireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });
-        expect(args.handleDrag).toHaveBeenCalledTimes(0);
-    },
-};

package/dist/hooks/tests/useHotkeys.test.stories.d.ts

@@ -1,39 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const singleKey: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const modKey: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const modKeyHold: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyList: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyCombination: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyCombinationFormat: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyCombinationOrder: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const keyCombinationMoreThanRequired: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-}>;
-export declare const optionModified: StoryObj<{
-    handleHotkey: ReturnType<typeof fn>;
-    handleHotkeyModified: ReturnType<typeof fn>;
-}>;

package/dist/hooks/tests/useHotkeys.test.stories.js

@@ -1,119 +0,0 @@
-import { expect, fn, userEvent } from "@storybook/test";
-import useHotkeys from "../useHotkeys.js";
-export default {
-    title: "Hooks/useHotkeys/tests",
-    parameters: {
-        chromatic: { disableSnapshot: true },
-    },
-};
-const Component = (props) => {
-    const { hotkeys } = props;
-    useHotkeys(hotkeys);
-    return <div />;
-};
-export const singleKey = {
-    name: "single key",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ a: args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("a");
-        await userEvent.keyboard("b");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const modKey = {
-    name: "mod key",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ mod: args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{Meta/}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const modKeyHold = {
-    name: "mod key on hold",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "Meta + b": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{Meta>}bb{/Meta}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(2);
-    },
-};
-export const keyList = {
-    name: "key list",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "a,b": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("a");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-        await userEvent.keyboard("b");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(2);
-    },
-};
-export const keyCombination = {
-    name: "key combination",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "a+b": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{a>}b{/a}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const keyCombinationFormat = {
-    name: "key combination without formatting",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "A  + b": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{a>}b{/a}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const keyCombinationOrder = {
-    name: "key combination without order",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "b+a": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{a>}b{/a}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const keyCombinationMoreThanRequired = {
-    name: "key combination, more keys pressed",
-    args: {
-        handleHotkey: fn(),
-    },
-    render: (args) => <Component hotkeys={{ "z + x": args.handleHotkey }}/>,
-    play: async ({ args }) => {
-        await userEvent.keyboard("{z>}{x>}c{/x}{/z}");
-        // When c is pressed, it doesn't trigger a+b for the second time
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};
-export const optionModified = {
-    name: "modified with alt/option",
-    args: {
-        handleHotkey: fn(),
-        handleHotkeyModified: fn(),
-    },
-    render: (args) => (<Component hotkeys={{ "alt+n": args.handleHotkeyModified, "alt+shift": args.handleHotkey }}/>),
-    play: async ({ args }) => {
-        await userEvent.keyboard("{Alt>}n{/Alt}");
-        expect(args.handleHotkeyModified).toHaveBeenCalledTimes(1);
-        await userEvent.keyboard("{Alt>}{Shift}{/Alt}");
-        expect(args.handleHotkey).toHaveBeenCalledTimes(1);
-    },
-};