reshaped 3.9.0-canary.0 → 3.9.0-canary.10

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

@@ -1,70 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import ContextMenu from "../index.js";
-import View from "../../View/index.js";
-import { expect, fn, userEvent, waitFor, within } from "storybook/test";
-import { sleep } from "../../../utilities/helpers.js";
-export default {
-    title: "Components/ContextMenu",
-    component: ContextMenu,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/context-menu",
-        },
-    },
-};
-export const base = {
-    name: "base",
-    render: () => (<Example>
-			<Example.Item title="base">
-				<div style={{ height: 200, overflow: "auto" }}>
-					<ContextMenu>
-						<View height="400px" backgroundColor="neutral-faded" borderRadius="medium"/>
-
-						<ContextMenu.Content>
-							<ContextMenu.Item>Item 1</ContextMenu.Item>
-							<ContextMenu.Item>Item 2</ContextMenu.Item>
-						</ContextMenu.Content>
-					</ContextMenu>
-				</div>
-			</Example.Item>
-		</Example>),
-};
-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({ reason: "outside-click" });
-        await waitFor(() => {
-            expect(item).not.toBeInTheDocument();
-            expect(scroll).not.toHaveStyle("overflow: hidden");
-        }, {
-            timeout: 1000,
-        });
-    },
-};

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

@@ -1,25 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    components: import("react").FC<import("./..").DismissibleProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-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;
-export declare const closeAriaLabel: StoryObj<{
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;

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

@@ -1,97 +0,0 @@
-import { within, expect, userEvent, fn } from "storybook/test";
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import Dismissible from "../index.js";
-import Image from "../../Image/index.js";
-import View from "../../View/index.js";
-export default {
-    title: "Utility components/Dismissible",
-    components: Dismissible,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/utilities/dismissible",
-        },
-    },
-};
-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>
-			</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();
-    },
-};
-export const closeAriaLabel = {
-    args: {
-        handleClose: fn(),
-    },
-    name: "onClose, closeAriaLabel",
-    render: (args) => (<Dismissible closeAriaLabel="Close" onClose={args.handleClose}>
-			<Placeholder />
-		</Dismissible>),
-    play: async ({ canvas, args }) => {
-        const button = canvas.getAllByRole("button")[0];
-        await userEvent.click(button);
-        expect(button).toHaveAttribute("aria-label", "Close");
-        expect(args.handleClose).toHaveBeenCalledTimes(1);
-        expect(args.handleClose).toHaveBeenCalledWith();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Dismissible closeAriaLabel="Close" onClose={() => { }} className="test-classname" attributes={{ id: "test-id" }}>
-				<Placeholder />
-			</Dismissible>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,20 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").DividerProps>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const rendering: StoryObj;
-export declare const color: StoryObj;
-export declare const vertical: StoryObj;
-export declare const offset: StoryObj;
-export declare const label: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const className: StoryObj;

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

@@ -1,120 +0,0 @@
-import { Example, Placeholder } from "../../../utilities/storybook/index.js";
-import View from "../../View/index.js";
-import Divider from "../index.js";
-import { expect } from "storybook/test";
-export default {
-    title: "Components/Divider",
-    component: Divider,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/divider",
-        },
-    },
-};
-export const rendering = {
-    name: "base",
-    render: () => (<Example>
-			<Example.Item title="default rendering">
-				<Divider />
-			</Example.Item>
-
-			<Example.Item title={["blank rendering", "box should overlap with divider"]}>
-				<View width="40px" height="10px" backgroundColor="primary"/>
-				<Divider blank/>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas }) => {
-        const [el] = canvas.getAllByRole("separator");
-        expect(el).toHaveAttribute("aria-orientation", "horizontal");
-    },
-};
-export const color = {
-    name: "color",
-    render: () => (<Example>
-			<Example.Item title="neutral-faded">
-				<Divider color="neutral-faded"/>
-			</Example.Item>
-			<Example.Item title="neutral">
-				<Divider color="neutral"/>
-			</Example.Item>
-		</Example>),
-};
-export const vertical = {
-    name: "vertical",
-    render: () => (<Example>
-			<Example.Item title="vertical">
-				<View gap={3} direction="row" align="stretch">
-					<Placeholder />
-					<View.Item>
-						<Divider vertical/>
-					</View.Item>
-					<Placeholder />
-				</View>
-			</Example.Item>
-
-			<Example.Item title={["responsive vertical", "[s] true", "[m+]: false"]}>
-				<View gap={3} direction={{ s: "row", m: "column" }} align="stretch">
-					<Placeholder />
-					<View.Item>
-						<Divider vertical={{ s: true, m: false }}/>
-					</View.Item>
-					<Placeholder />
-				</View>
-			</Example.Item>
-		</Example>),
-    play: async ({ canvas }) => {
-        const [el, elResponsive] = canvas.getAllByRole("separator");
-        expect(el).toHaveAttribute("aria-orientation", "vertical");
-        expect(elResponsive).not.toHaveAttribute("aria-orientation");
-    },
-};
-export const offset = {
-    name: "offset",
-    render: () => (<Example>
-			<Example.Item title="offset: 10px">
-				<View width="100px" backgroundColor="neutral" paddingBlock={4}>
-					<Divider offset="40px"/>
-				</View>
-			</Example.Item>
-			<Example.Item title="offset: 10px, vertical">
-				<View height="100px" backgroundColor="neutral" paddingInline={4} width="33px">
-					<Divider vertical offset="40px"/>
-				</View>
-			</Example.Item>
-		</Example>),
-};
-export const label = {
-    name: "children, contentPosition",
-    render: () => {
-        return (<Example>
-				<Example.Item title="alignment">
-					<View gap={4}>
-						<Divider>Centered label</Divider>
-						<Divider contentPosition="start">Start label</Divider>
-						<Divider contentPosition="end">End label</Divider>
-					</View>
-				</Example.Item>
-
-				<Example.Item title="responsive">
-					<View gap={3} direction={{ s: "column", m: "row" }} align="stretch">
-						<Placeholder />
-						<View.Item>
-							<Divider vertical={{ s: false, m: true }}>or pick second option</Divider>
-						</View.Item>
-						<Placeholder />
-					</View>
-				</Example.Item>
-			</Example>);
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Divider className="test-classname" attributes={{ id: "test-id" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,53 +0,0 @@
-import { fn } from "storybook/test";
-import { StoryObj } from "@storybook/react-vite";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").DropdownMenuProps> & {
-        Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
-        Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
-        Content: typeof import("../DropdownMenu").DropdownMenuContent;
-        Section: typeof import("../DropdownMenu").DropdownMenuSection;
-        Item: typeof import("../DropdownMenu").DropdownMenuItem;
-        SubMenu: typeof import("../DropdownMenu").DropdownMenuSubMenu;
-        SubTrigger: typeof import("../DropdownMenu").DropdownMenuSubTrigger;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-    };
-};
-export default _default;
-export declare const position: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const sections: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const submenu: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const defaultActive: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const active: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const activeFalse: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;
-export declare const testScroll: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};
-export declare const testTheme: {
-    name: string;
-    render: () => import("react").JSX.Element;
-};

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

@@ -1,278 +0,0 @@
-import { Example } from "../../../utilities/storybook/index.js";
-import Button from "../../Button/index.js";
-import DropdownMenu from "../index.js";
-import View from "../../View/index.js";
-import { useTheme } from "../../Theme/useTheme.js";
-import IconCheckmark from "../../../icons/Checkmark.js";
-import { expect, fn, userEvent, waitFor, within } from "storybook/test";
-import { sleep } from "../../../utilities/helpers.js";
-import Theme from "../../Theme/index.js";
-export default {
-    title: "Components/DropdownMenu",
-    component: DropdownMenu,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/dropdown-menu",
-        },
-    },
-};
-export const position = {
-    name: "position",
-    render: () => (<Example>
-			<Example.Item title="position: default">
-				<DropdownMenu>
-					<DropdownMenu.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</DropdownMenu.Trigger>
-					<DropdownMenu.Content>
-						<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
-						<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
-					</DropdownMenu.Content>
-				</DropdownMenu>
-			</Example.Item>
-
-			<Example.Item title="position: end">
-				<DropdownMenu position="end">
-					<DropdownMenu.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</DropdownMenu.Trigger>
-					<DropdownMenu.Content>
-						<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
-						<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
-					</DropdownMenu.Content>
-				</DropdownMenu>
-			</Example.Item>
-
-			<Example.Item title={["position: top-start", "should change to top-start to fit viewport"]}>
-				<DropdownMenu position="top-end">
-					<DropdownMenu.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</DropdownMenu.Trigger>
-					<DropdownMenu.Content>
-						<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
-						<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
-					</DropdownMenu.Content>
-				</DropdownMenu>
-			</Example.Item>
-			<div style={{ height: 2000 }}/>
-		</Example>),
-};
-export const sections = {
-    name: "sections",
-    render: () => (<Example>
-			<Example.Item title="2 sections">
-				<DropdownMenu>
-					<DropdownMenu.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</DropdownMenu.Trigger>
-					<DropdownMenu.Content>
-						<DropdownMenu.Section>
-							<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-							<DropdownMenu.Item>Item 2</DropdownMenu.Item>
-						</DropdownMenu.Section>
-
-						<DropdownMenu.Section>
-							<DropdownMenu.Item>Item 3</DropdownMenu.Item>
-							<DropdownMenu.Item>Item 4</DropdownMenu.Item>
-						</DropdownMenu.Section>
-					</DropdownMenu.Content>
-				</DropdownMenu>
-			</Example.Item>
-		</Example>),
-};
-export const submenu = {
-    name: "submenu",
-    render: () => (<Example>
-			<Example.Item title="submenu">
-				<DropdownMenu>
-					<DropdownMenu.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</DropdownMenu.Trigger>
-					<DropdownMenu.Content>
-						<DropdownMenu.Item onClick={() => { }}>Item 1</DropdownMenu.Item>
-						<DropdownMenu.SubMenu>
-							<DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>
-							<DropdownMenu.Content>
-								<DropdownMenu.Item onClick={() => { }}>SubItem 1</DropdownMenu.Item>
-								<DropdownMenu.Item onClick={() => { }}>SubItem 2</DropdownMenu.Item>
-							</DropdownMenu.Content>
-						</DropdownMenu.SubMenu>
-						<DropdownMenu.SubMenu>
-							<DropdownMenu.SubTrigger>Item 3</DropdownMenu.SubTrigger>
-							<DropdownMenu.Content>
-								<DropdownMenu.Item onClick={() => { }}>SubItem 2-1</DropdownMenu.Item>
-								<DropdownMenu.Item onClick={() => { }}>SubItem 2-2</DropdownMenu.Item>
-							</DropdownMenu.Content>
-						</DropdownMenu.SubMenu>
-
-						<DropdownMenu.SubMenu>
-							<DropdownMenu.SubTrigger disabled>Item 4, disabled</DropdownMenu.SubTrigger>
-							<DropdownMenu.Content>
-								<DropdownMenu.Item onClick={() => { }}>SubItem 3-1</DropdownMenu.Item>
-								<DropdownMenu.Item onClick={() => { }}>SubItem 3-2</DropdownMenu.Item>
-							</DropdownMenu.Content>
-						</DropdownMenu.SubMenu>
-					</DropdownMenu.Content>
-				</DropdownMenu>
-			</Example.Item>
-		</Example>),
-};
-export const defaultActive = {
-    name: "defaultActive, uncontrolled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
-			<DropdownMenu.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Item>Item</DropdownMenu.Item>
-			</DropdownMenu.Content>
-		</DropdownMenu>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        let item = canvas.getByText("Item");
-        await sleep(500);
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-            expect(item).not.toBeInTheDocument();
-        });
-        await userEvent.click(trigger);
-        item = canvas.getByText("Item");
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-            expect(item).toBeInTheDocument();
-        });
-    },
-};
-export const active = {
-    name: "active, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active>
-			<DropdownMenu.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Item>Item</DropdownMenu.Item>
-			</DropdownMenu.Content>
-		</DropdownMenu>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const item = canvas.getByText("Item");
-        await userEvent.click(document.body);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-        });
-        expect(item).toBeInTheDocument();
-    },
-};
-export const activeFalse = {
-    name: "active false, controlled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<DropdownMenu onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
-			<DropdownMenu.Trigger>
-				{(attributes) => <Button attributes={attributes}>Open</Button>}
-			</DropdownMenu.Trigger>
-			<DropdownMenu.Content>
-				<DropdownMenu.Item>Item</DropdownMenu.Item>
-			</DropdownMenu.Content>
-		</DropdownMenu>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.click(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        const item = canvas.queryByText("Item");
-        expect(item).not.toBeInTheDocument();
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<DropdownMenu active>
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
-					<DropdownMenu.Item>Item</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</div>),
-    play: async ({ canvasElement }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const menu = await canvas.findByTestId("test-id");
-        expect(menu).toHaveClass("test-classname");
-    },
-};
-export const testScroll = {
-    name: "test: scroll",
-    render: () => (<Example>
-			<Example.Item title="Scrolls on page mount to the dropdown">
-				<div style={{ height: 1000 }}/>
-				<DropdownMenu position="end" key="scroll" defaultActive>
-					<DropdownMenu.Trigger>
-						{(attributes) => <Button attributes={attributes}>Open</Button>}
-					</DropdownMenu.Trigger>
-					<DropdownMenu.Content>
-						<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-						<DropdownMenu.Item>Item 2</DropdownMenu.Item>
-					</DropdownMenu.Content>
-				</DropdownMenu>
-			</Example.Item>
-		</Example>),
-};
-const ThemeSwitching = () => {
-    const { invertColorMode } = useTheme();
-    return (<View gap={3} direction="row">
-			<DropdownMenu>
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>
-					<DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-			<Button onClick={() => invertColorMode()}>Switch color mode</Button>
-		</View>);
-};
-const ThemeMultiple = () => {
-    return (<Theme name={["reshaped", "figma"]}>
-			<DropdownMenu>
-				<DropdownMenu.Trigger>
-					{(attributes) => <Button attributes={attributes}>Open</Button>}
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Item>Item 1</DropdownMenu.Item>
-					<DropdownMenu.Item>Item 2</DropdownMenu.Item>
-				</DropdownMenu.Content>
-			</DropdownMenu>
-		</Theme>);
-};
-export const testTheme = {
-    name: "test: theme",
-    render: () => (<Example>
-			<Example.Item title="switch color mode while dropdown is active and check that it still works">
-				<ThemeSwitching />
-			</Example.Item>
-			<Example.Item title="dropdown inherits multiple themes">
-				<ThemeMultiple />
-			</Example.Item>
-		</Example>),
-};