reshaped 3.3.11 → 3.3.13

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

@@ -0,0 +1,104 @@
+import { expect, userEvent, fn } from "@storybook/test";
+import Checkbox from "../index.js";
+export default {
+    title: "Components/Checkbox/tests",
+    component: Checkbox,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/checkbox",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "name, value",
+    render: () => (<Checkbox name="test-name" value="test-value">
+			Content
+		</Checkbox>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toHaveAttribute("value", "test-value");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).not.toBeChecked();
+    },
+};
+export const checked = {
+    name: "checked, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Checkbox name="test-name" value="test-value" checked onChange={args.handleChange}>
+			Content
+		</Checkbox>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: false,
+            event: expect.objectContaining({ target: input }),
+        });
+        // Still checked because it's controlled
+        expect(input).toBeChecked();
+    },
+};
+export const defaultChecked = {
+    name: "defaultChecked, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Checkbox name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
+			Content
+		</Checkbox>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "test-value",
+            checked: false,
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).not.toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Checkbox name="test-name" value="test-value" disabled>
+			Content
+		</Checkbox>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const indeterminate = {
+    name: "indeterminate",
+    render: () => (<Checkbox name="test-name" value="test-value" indeterminate>
+			Content
+		</Checkbox>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input.indeterminate).toBeTruthy();
+        await userEvent.click(input);
+        expect(input.indeterminate).toBeFalsy();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Checkbox className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</Checkbox>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

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

@@ -0,0 +1,22 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").CheckboxGroupProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;

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

@@ -0,0 +1,78 @@
+import { fn, userEvent, expect } from "@storybook/test";
+import CheckboxGroup from "../index.js";
+import Checkbox from "../../Checkbox/index.js";
+export default {
+    title: "Components/CheckboxGroup/tests",
+    component: CheckboxGroup,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/checkbox",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<CheckboxGroup name="test-name" value={["1"]} onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Checkbox value="1" checked={false}>
+				Content
+			</Checkbox>
+
+			<Checkbox value="2">Content 2</Checkbox>
+		</CheckboxGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("checkbox");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: ["1", "2"],
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        // Still checked because it's controlled
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).not.toBeChecked();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<CheckboxGroup name="test-name" defaultValue={["1"]} onChange={args.handleChange}>
+			{/* checked should be ignored */}
+			<Checkbox value="1" checked={false}>
+				Content
+			</Checkbox>
+
+			<Checkbox value="2">Content 2</Checkbox>
+		</CheckboxGroup>),
+    play: async ({ canvas, args }) => {
+        const inputs = canvas.getAllByRole("checkbox");
+        expect(inputs[0]).toBeChecked();
+        await userEvent.click(inputs[1]);
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: ["1", "2"],
+            event: expect.objectContaining({ target: inputs[1] }),
+        });
+        expect(inputs[0]).toBeChecked();
+        expect(inputs[1]).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<CheckboxGroup name="test-name" disabled>
+			<Checkbox value="test-value">Content</Checkbox>
+		</CheckboxGroup>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toBeDisabled();
+    },
+};

package/dist/components/Container/tests/Container.stories.d.ts

@@ -8,6 +8,15 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const padding: () => import("react").JSX.Element;
-export declare const width: () => import("react").JSX.Element;
-export declare const layout: () => import("react").JSX.Element;
+export declare const padding: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const flex: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

package/dist/components/Container/tests/Container.stories.js

@@ -9,34 +9,53 @@ export default {
         },
     },
 };
-export const padding = () => (<Example>
-		<Example.Item title="padding: default">
-			<Container>
-				<Placeholder />
-			</Container>
-		</Example.Item>
-		<Example.Item title="padding: 0">
-			<Container padding={0}>
-				<Placeholder />
-			</Container>
-		</Example.Item>
-	</Example>);
-export const width = () => (<Example>
-		<Example.Item title="width: 1024px">
-			<Container width="1024px">
-				<Placeholder />
-			</Container>
-		</Example.Item>
-		<Example.Item title={["responsive width", "[s]: 400px", "[m+]: 600px"]}>
-			<Container width={{ s: "400px", m: "600px" }}>
-				<Placeholder />
-			</Container>
-		</Example.Item>
-	</Example>);
-export const layout = () => (<Example>
-		<Example.Item title="center">
-			<Container align="center" justify="center" height="500px">
-				<Placeholder />
-			</Container>
-		</Example.Item>
-	</Example>);
+export const padding = {
+    name: "padding",
+    render: () => (<Example>
+			<Example.Item title="padding: default">
+				<Container>
+					<Placeholder />
+				</Container>
+			</Example.Item>
+			<Example.Item title="padding: 0">
+				<Container padding={0}>
+					<Placeholder />
+				</Container>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "width, height, maxHeight",
+    render: () => (<Example>
+			<Example.Item title="width: 200px, height: 200px">
+				<Container width="200px" height="200px">
+					<Placeholder h="100%"/>
+				</Container>
+			</Example.Item>
+			<Example.Item title="width: 200px, height: 200px, maxHeight: 100px">
+				<Container width="200px" height="200px" maxHeight="100px">
+					<Placeholder h="100%"/>
+				</Container>
+			</Example.Item>
+			<Example.Item title="width, height: [s] 100px, [m+] 200px">
+				<Container width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }}>
+					<Placeholder h="100%"/>
+				</Container>
+			</Example.Item>
+			<Example.Item title="width, height: [s] 100px, [m+] 200px, maxHeight: [s] 50px, [m+]: 100px">
+				<Container width={{ s: "100px", m: "200px" }} height={{ s: "100px", m: "200px" }} maxHeight={{ s: "50px", m: "100px" }}>
+					<Placeholder h="100%"/>
+				</Container>
+			</Example.Item>
+		</Example>),
+};
+export const flex = {
+    name: "align, justify",
+    render: () => (<Example>
+			<Example.Item title="align: center, justify: center">
+				<Container align="center" justify="center" height="200px">
+					<Placeholder />
+				</Container>
+			</Example.Item>
+		</Example>),
+};

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

@@ -0,0 +1,15 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ContainerProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const className: StoryObj;

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

@@ -0,0 +1,26 @@
+import { expect } from "@storybook/test";
+import Container from "../index.js";
+import { Placeholder } from "../../../utilities/storybook/index.js";
+export default {
+    title: "Utilities/Container/tests",
+    component: Container,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/action-bar",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Container className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder />
+			</Container>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/ContextMenu/ContextMenu.js

@@ -4,29 +4,33 @@ import React from "react";
 import DropdownMenu from "../DropdownMenu/index.js";
 import useScrollLock from "../../hooks/useScrollLock.js";
 import s from "./ContextMenu.module.css";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ContextMenu = (props) => {
-    const { position = "end-top", ...dropdownMenuProps } = props;
+    const { position = "end-top", onOpen, onClose, ...dropdownMenuProps } = props;
     const [coordinates, setCoordinates] = React.useState();
-    const containerRef = React.useRef(null);
-    const { lockScroll, unlockScroll } = useScrollLock({ containerRef });
+    const originRef = React.useRef(null);
+    const { lockScroll, unlockScroll } = useScrollLock({ originRef });
+    const onOpenRef = useHandlerRef(onOpen);
     React.useEffect(() => {
-        const containerEl = containerRef.current;
-        if (!containerEl)
+        const originEl = originRef.current;
+        if (!originEl)
             return;
         const handleContextMenu = (e) => {
             e.preventDefault();
             setCoordinates({ x: e.clientX, y: e.clientY });
             lockScroll();
+            onOpenRef.current?.();
         };
-        containerEl.addEventListener("contextmenu", handleContextMenu);
-        return () => containerEl.removeEventListener("contextmenu", handleContextMenu);
-    }, [lockScroll]);
+        originEl.addEventListener("contextmenu", handleContextMenu);
+        return () => originEl.removeEventListener("contextmenu", handleContextMenu);
+    }, [lockScroll, onOpenRef]);
     React.useEffect(() => {
         return () => unlockScroll();
     }, [unlockScroll]);
-    return (_jsx("div", { className: s.root, ref: containerRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, originCoordinates: coordinates, active: !!coordinates, onClose: () => {
+    return (_jsx("div", { className: s.root, ref: originRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, originCoordinates: coordinates, active: !!coordinates, onClose: () => {
                 setCoordinates(undefined);
                 unlockScroll();
+                onClose?.();
             } }) }));
 };
 ContextMenu.Content = DropdownMenu.Content;

package/dist/components/ContextMenu/tests/ContextMenu.stories.js

@@ -1,7 +1,6 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import ContextMenu from "../index.js";
 import View from "../../View/index.js";
-import ScrollArea from "../../ScrollArea/index.js";
 export default {
     title: "Components/ContextMenu",
     component: ContextMenu,
@@ -13,7 +12,7 @@ export default {
 };
 export const base = () => (<Example>
 		<Example.Item title="base">
-			<ScrollArea height="200px">
+			<div style={{ height: 200, overflow: "auto" }}>
 				<ContextMenu>
 					<View height="400px" backgroundColor="neutral-faded" borderRadius="medium"/>
 
@@ -22,6 +21,6 @@ export const base = () => (<Example>
 						<ContextMenu.Item>Item 2</ContextMenu.Item>
 					</ContextMenu.Content>
 				</ContextMenu>
-			</ScrollArea>
+			</div>
 		</Example.Item>
 	</Example>);

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

@@ -0,0 +1,26 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").ContextMenuProps): import("react").JSX.Element;
+        Content: (props: import("../../DropdownMenu/DropdownMenu.types").ContentProps) => import("react").JSX.Element;
+        Item: (props: import("../../DropdownMenu/DropdownMenu.types").ItemProps) => import("react").JSX.Element;
+        Section: (props: import("../../DropdownMenu/DropdownMenu.types").SectionProps) => import("react").JSX.Element;
+        SubMenu: (props: import("../../DropdownMenu/DropdownMenu.types").SubMenuProps) => import("react").JSX.Element;
+        SubTrigger: (props: import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const handlers: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+    handleClose: ReturnType<typeof fn>;
+}>;

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

@@ -0,0 +1,53 @@
+import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import ContextMenu from "../index.js";
+import View from "../../View/index.js";
+import { sleep } from "../../../utilities/helpers.js";
+export default {
+    title: "Components/ContextMenu/tests",
+    component: ContextMenu,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/context-menu",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const handlers = {
+    name: "handleOpen, handleClose",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<div style={{ height: 200, overflow: "auto" }} data-testid="scroll">
+			<ContextMenu onOpen={args.handleOpen} onClose={args.handleClose}>
+				<View height="400px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "root" }}/>
+
+				<ContextMenu.Content>
+					<ContextMenu.Item>Item</ContextMenu.Item>
+				</ContextMenu.Content>
+			</ContextMenu>
+		</div>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const root = canvas.getByTestId("root");
+        const scroll = canvas.getByTestId("scroll");
+        await userEvent.pointer({ keys: "[MouseRight>]", target: root });
+        expect(args.handleOpen).toHaveBeenCalledTimes(1);
+        expect(args.handleOpen).toHaveBeenCalledWith();
+        const item = canvas.getByText("Item");
+        expect(item).toBeInTheDocument();
+        // Context menu locks the scroll of the closest scrollable parent
+        expect(scroll).toHaveStyle("overflow: hidden");
+        // Wait for the open animation to finish
+        await sleep(500);
+        await userEvent.click(root);
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith();
+        await waitFor(() => {
+            expect(item).not.toBeInTheDocument();
+            expect(scroll).not.toHaveStyle("overflow: hidden");
+        }, {
+            timeout: 1000,
+        });
+    },
+};

package/dist/components/Dismissible/Dismissible.js

@@ -7,6 +7,6 @@ const Dismissible = (props) => {
     const { children, align, onClose, hideCloseButton, variant, closeAriaLabel, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, variant && s[`--variant-${variant}`], align && s[`--align-${align}`], hideCloseButton && s["--hide-close"]);
     const WrapperTag = variant === "media" ? "div" : Button.Aligner;
-    return (_jsxs("div", { ...attributes, className: rootClassNames, children: [children, !hideCloseButton && (_jsx(WrapperTag, { className: s.close, children: _jsx(Button, { size: "small", ...(variant === "media" ? { color: "media", variant: "faded" } : { variant: "ghost" }), onClick: onClose, attributes: { "aria-label": onClose ? closeAriaLabel : undefined }, icon: IconClose }) }))] }));
+    return (_jsxs("div", { ...attributes, className: rootClassNames, children: [children, !hideCloseButton && (_jsx(WrapperTag, { className: s.close, children: _jsx(Button, { size: "small", ...(variant === "media" ? { color: "media", variant: "faded" } : { variant: "ghost" }), onClick: () => onClose?.(), attributes: { "aria-label": onClose ? closeAriaLabel : undefined }, icon: IconClose }) }))] }));
 };
 export default Dismissible;

package/dist/components/Dismissible/tests/Dismissible.stories.d.ts

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     components: (props: import("./..").DismissibleProps) => import("react").JSX.Element;
@@ -8,6 +9,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const variant: () => import("react").JSX.Element;
-export declare const align: () => import("react").JSX.Element;
-export declare const closeButton: () => import("react").JSX.Element;
+export declare const variant: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const align: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const hideCloseButton: StoryObj;

package/dist/components/Dismissible/tests/Dismissible.stories.js

@@ -1,3 +1,4 @@
+import { within, expect } from "@storybook/test";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Dismissible from "../index.js";
 import Image from "../../Image/index.js";
@@ -11,41 +12,57 @@ export default {
         },
     },
 };
-export const variant = () => (<Example>
-		<Example.Item title="variant: default">
-			<Dismissible closeAriaLabel="Close banner">
-				<Placeholder />
-			</Dismissible>
-		</Example.Item>
-		<Example.Item title="variant: media">
-			<View width="300px">
-				<Dismissible variant="media" closeAriaLabel="Close banner">
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: default">
+				<Dismissible closeAriaLabel="Close banner" onClose={() => { }}>
+					<Placeholder />
+				</Dismissible>
+			</Example.Item>
+			<Example.Item title="variant: media">
+				<View width="300px">
+					<Dismissible variant="media" closeAriaLabel="Close banner" onClose={() => { }}>
+						<View aspectRatio={16 / 9}>
+							<Image height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
+						</View>
+					</Dismissible>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const align = {
+    name: "align",
+    render: () => (<Example>
+			<Example.Item title="align: center">
+				<Dismissible align="center" closeAriaLabel="Close" onClose={() => { }}>
+					<Placeholder />
+				</Dismissible>
+			</Example.Item>
+
+			<Example.Item title="align: center, variant: media">
+				<Dismissible align="center" closeAriaLabel="Close" variant="media" onClose={() => { }}>
 					<View aspectRatio={16 / 9}>
 						<Image height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
 					</View>
 				</Dismissible>
-			</View>
-		</Example.Item>
-	</Example>);
-export const align = () => (<Example>
-		<Example.Item title="align: center">
-			<Dismissible align="center" closeAriaLabel="Close">
-				<Placeholder />
-			</Dismissible>
-		</Example.Item>
-
-		<Example.Item title="align: center, variant: media">
-			<Dismissible align="center" closeAriaLabel="Close" variant="media">
-				<View aspectRatio={16 / 9}>
-					<Image height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
-				</View>
-			</Dismissible>
-		</Example.Item>
-	</Example>);
-export const closeButton = () => (<Example>
-		<Example.Item title="hide close button">
-			<Dismissible hideCloseButton>
-				<Placeholder />
-			</Dismissible>
-		</Example.Item>
-	</Example>);
+			</Example.Item>
+		</Example>),
+};
+export const hideCloseButton = {
+    name: "hideCloseButton",
+    render: () => (<Example>
+			<Example.Item title="hide close button">
+				<div id="root">
+					<Dismissible hideCloseButton>
+						<Placeholder />
+					</Dismissible>
+				</div>
+			</Example.Item>
+		</Example>),
+    play: ({ canvasElement }) => {
+        const root = within(canvasElement.querySelector("#root"));
+        const button = root.queryByRole("button");
+        expect(button).not.toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,19 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").DismissibleProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const closeAriaLabel: StoryObj<{
+    handleClose: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;