reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,325 +1,319 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testTheme = exports.testScroll = exports.className = exports.activeFalse = exports.active = exports.defaultActive = exports.submenu = exports.size = exports.sections = exports.position = void 0;
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const DropdownMenu_1 = __importDefault(require("../../../components/DropdownMenu"));
-const Theme_1 = __importDefault(require("../../../components/Theme"));
-const useTheme_1 = require("../../../components/Theme/useTheme");
-const View_1 = __importDefault(require("../../../components/View"));
-const helpers_1 = require("../../../utilities/helpers");
-const storybook_1 = require("../../../utilities/storybook");
-const Checkmark_1 = __importDefault(require("../../../icons/Checkmark"));
-exports.default = {
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import DropdownMenu from "../../../components/DropdownMenu/index.js";
+import Theme from "../../../components/Theme/index.js";
+import { useTheme } from "../../../components/Theme/useTheme.js";
+import View from "../../../components/View/index.js";
+import { sleep } from "../../../utilities/helpers.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconCheckmark from "../../../icons/Checkmark.js";
+export default {
     title: "Components/DropdownMenu",
-    component: DropdownMenu_1.default,
+    component: DropdownMenu,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/dropdown-menu",
         },
     },
 };
-exports.position = {
+export const position = {
     name: "position",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="position: default">
-				<DropdownMenu_1.default>
-					<DropdownMenu_1.default.Trigger>
-						{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-					</DropdownMenu_1.default.Trigger>
-					<DropdownMenu_1.default.Content>
-						<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Item 1</DropdownMenu_1.default.Item>
-						<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Item 2</DropdownMenu_1.default.Item>
-					</DropdownMenu_1.default.Content>
-				</DropdownMenu_1.default>
-			</storybook_1.Example.Item>
+    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>
 
-			<storybook_1.Example.Item title="position: end">
-				<DropdownMenu_1.default position="end">
-					<DropdownMenu_1.default.Trigger>
-						{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-					</DropdownMenu_1.default.Trigger>
-					<DropdownMenu_1.default.Content>
-						<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Item 1</DropdownMenu_1.default.Item>
-						<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Item 2</DropdownMenu_1.default.Item>
-					</DropdownMenu_1.default.Content>
-				</DropdownMenu_1.default>
-			</storybook_1.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>
 
-			<storybook_1.Example.Item title={["position: top-start", "should change to top-start to fit viewport"]}>
-				<DropdownMenu_1.default position="top-end">
-					<DropdownMenu_1.default.Trigger>
-						{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-					</DropdownMenu_1.default.Trigger>
-					<DropdownMenu_1.default.Content>
-						<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Item 1</DropdownMenu_1.default.Item>
-						<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Item 2</DropdownMenu_1.default.Item>
-					</DropdownMenu_1.default.Content>
-				</DropdownMenu_1.default>
-			</storybook_1.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 }}/>
-		</storybook_1.Example>),
+		</Example>),
 };
-exports.sections = {
+export const sections = {
     name: "sections",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="2 sections">
-				<DropdownMenu_1.default>
-					<DropdownMenu_1.default.Trigger>
-						{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-					</DropdownMenu_1.default.Trigger>
-					<DropdownMenu_1.default.Content>
-						<DropdownMenu_1.default.Section>
-							<DropdownMenu_1.default.Item>Item 1</DropdownMenu_1.default.Item>
-							<DropdownMenu_1.default.Item>Item 2</DropdownMenu_1.default.Item>
-						</DropdownMenu_1.default.Section>
+    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_1.default.Section>
-							<DropdownMenu_1.default.Item>Item 3</DropdownMenu_1.default.Item>
-							<DropdownMenu_1.default.Item>Item 4</DropdownMenu_1.default.Item>
-						</DropdownMenu_1.default.Section>
-					</DropdownMenu_1.default.Content>
-				</DropdownMenu_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						<DropdownMenu.Section>
+							<DropdownMenu.Item>Item 3</DropdownMenu.Item>
+							<DropdownMenu.Item>Item 4</DropdownMenu.Item>
+						</DropdownMenu.Section>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small, inherited by the items and the submenu">
-				<DropdownMenu_1.default size="small">
-					<DropdownMenu_1.default.Trigger>
-						{(attributes) => <Button_1.default attributes={attributes}>Open small</Button_1.default>}
-					</DropdownMenu_1.default.Trigger>
-					<DropdownMenu_1.default.Content>
-						<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Small item</DropdownMenu_1.default.Item>
-						<DropdownMenu_1.default.SubMenu>
-							<DropdownMenu_1.default.SubTrigger>Small submenu</DropdownMenu_1.default.SubTrigger>
-							<DropdownMenu_1.default.Content>
-								<DropdownMenu_1.default.Item>Small subitem</DropdownMenu_1.default.Item>
-							</DropdownMenu_1.default.Content>
-						</DropdownMenu_1.default.SubMenu>
-					</DropdownMenu_1.default.Content>
-				</DropdownMenu_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="size: small, inherited by the items and the submenu">
+				<DropdownMenu size="small">
+					<DropdownMenu.Trigger>
+						{(attributes) => <Button attributes={attributes}>Open small</Button>}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Item icon={IconCheckmark}>Small item</DropdownMenu.Item>
+						<DropdownMenu.SubMenu>
+							<DropdownMenu.SubTrigger>Small submenu</DropdownMenu.SubTrigger>
+							<DropdownMenu.Content>
+								<DropdownMenu.Item>Small subitem</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.SubMenu>
+					</DropdownMenu.Content>
+				</DropdownMenu>
+			</Example.Item>
+		</Example>),
 };
-exports.submenu = {
+export const submenu = {
     name: "submenu",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="submenu">
-				<DropdownMenu_1.default>
-					<DropdownMenu_1.default.Trigger>
-						{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-					</DropdownMenu_1.default.Trigger>
-					<DropdownMenu_1.default.Content>
-						<DropdownMenu_1.default.Item onClick={() => { }}>Item 1</DropdownMenu_1.default.Item>
-						<DropdownMenu_1.default.SubMenu>
-							<DropdownMenu_1.default.SubTrigger>Item 2</DropdownMenu_1.default.SubTrigger>
-							<DropdownMenu_1.default.Content>
-								<DropdownMenu_1.default.Item onClick={() => { }}>SubItem 1</DropdownMenu_1.default.Item>
-								<DropdownMenu_1.default.Item onClick={() => { }}>SubItem 2</DropdownMenu_1.default.Item>
-							</DropdownMenu_1.default.Content>
-						</DropdownMenu_1.default.SubMenu>
-						<DropdownMenu_1.default.SubMenu>
-							<DropdownMenu_1.default.SubTrigger>Item 3</DropdownMenu_1.default.SubTrigger>
-							<DropdownMenu_1.default.Content>
-								<DropdownMenu_1.default.Item onClick={() => { }}>SubItem 2-1</DropdownMenu_1.default.Item>
-								<DropdownMenu_1.default.Item onClick={() => { }}>SubItem 2-2</DropdownMenu_1.default.Item>
-								<DropdownMenu_1.default.SubMenu>
-									<DropdownMenu_1.default.SubTrigger>SubItem 2-1</DropdownMenu_1.default.SubTrigger>
-									<DropdownMenu_1.default.Content>
-										<DropdownMenu_1.default.Item onClick={() => { }}>SubItem 2-1-1</DropdownMenu_1.default.Item>
-										<DropdownMenu_1.default.Item onClick={() => { }}>SubItem 2-1-2</DropdownMenu_1.default.Item>
-									</DropdownMenu_1.default.Content>
-								</DropdownMenu_1.default.SubMenu>
-							</DropdownMenu_1.default.Content>
-						</DropdownMenu_1.default.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.SubMenu>
+									<DropdownMenu.SubTrigger>SubItem 2-1</DropdownMenu.SubTrigger>
+									<DropdownMenu.Content>
+										<DropdownMenu.Item onClick={() => { }}>SubItem 2-1-1</DropdownMenu.Item>
+										<DropdownMenu.Item onClick={() => { }}>SubItem 2-1-2</DropdownMenu.Item>
+									</DropdownMenu.Content>
+								</DropdownMenu.SubMenu>
+							</DropdownMenu.Content>
+						</DropdownMenu.SubMenu>
 
-						<DropdownMenu_1.default.SubMenu>
-							<DropdownMenu_1.default.SubTrigger disabled>Item 4, disabled</DropdownMenu_1.default.SubTrigger>
-							<DropdownMenu_1.default.Content>
-								<DropdownMenu_1.default.Item onClick={() => { }}>SubItem 3-1</DropdownMenu_1.default.Item>
-								<DropdownMenu_1.default.Item onClick={() => { }}>SubItem 3-2</DropdownMenu_1.default.Item>
-							</DropdownMenu_1.default.Content>
-						</DropdownMenu_1.default.SubMenu>
-					</DropdownMenu_1.default.Content>
-				</DropdownMenu_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						<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>),
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getByRole("button", { name: "Open" });
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
         const rootItem = await canvas.findByText("Item 1");
-        await test_1.userEvent.hover(canvas.getByText("Item 2"));
+        await userEvent.hover(canvas.getByText("Item 2"));
         const nestedItem = await canvas.findByText("SubItem 1");
-        await test_1.userEvent.click(nestedItem);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(rootItem).not.toBeInTheDocument();
-            (0, test_1.expect)(nestedItem).not.toBeInTheDocument();
+        await userEvent.click(nestedItem);
+        await waitFor(() => {
+            expect(rootItem).not.toBeInTheDocument();
+            expect(nestedItem).not.toBeInTheDocument();
         });
     },
 };
-exports.defaultActive = {
+export const defaultActive = {
     name: "defaultActive, uncontrolled",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
+        handleOpen: fn(),
+        handleClose: fn(),
     },
-    render: (args) => (<DropdownMenu_1.default onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
-			<DropdownMenu_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-			</DropdownMenu_1.default.Trigger>
-			<DropdownMenu_1.default.Content>
-				<DropdownMenu_1.default.Item>Item</DropdownMenu_1.default.Item>
-			</DropdownMenu_1.default.Content>
-		</DropdownMenu_1.default>),
+    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 = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getAllByRole("button")[0];
         let item = canvas.getByText("Item");
-        await (0, helpers_1.sleep)(500);
-        await test_1.userEvent.click(document.body);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-            (0, test_1.expect)(item).not.toBeInTheDocument();
+        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 test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
         item = canvas.getByText("Item");
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledWith();
-            (0, test_1.expect)(item).toBeInTheDocument();
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
+            expect(item).toBeInTheDocument();
         });
     },
 };
-exports.active = {
+export const active = {
     name: "active, controlled",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
+        handleOpen: fn(),
+        handleClose: fn(),
     },
-    render: (args) => (<DropdownMenu_1.default onOpen={args.handleOpen} onClose={args.handleClose} active>
-			<DropdownMenu_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-			</DropdownMenu_1.default.Trigger>
-			<DropdownMenu_1.default.Content>
-				<DropdownMenu_1.default.Item>Item</DropdownMenu_1.default.Item>
-			</DropdownMenu_1.default.Content>
-		</DropdownMenu_1.default>),
+    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 = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const item = canvas.getByText("Item");
-        await test_1.userEvent.click(document.body);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
         });
-        (0, test_1.expect)(item).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
     },
 };
-exports.activeFalse = {
+export const activeFalse = {
     name: "active false, controlled",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
+        handleOpen: fn(),
+        handleClose: fn(),
     },
-    render: (args) => (<DropdownMenu_1.default onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
-			<DropdownMenu_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-			</DropdownMenu_1.default.Trigger>
-			<DropdownMenu_1.default.Content>
-				<DropdownMenu_1.default.Item>Item</DropdownMenu_1.default.Item>
-			</DropdownMenu_1.default.Content>
-		</DropdownMenu_1.default>),
+    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 = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledWith();
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
         });
         const item = canvas.queryByText("Item");
-        (0, test_1.expect)(item).not.toBeInTheDocument();
+        expect(item).not.toBeInTheDocument();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<DropdownMenu_1.default active>
-				<DropdownMenu_1.default.Trigger>
-					{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-				</DropdownMenu_1.default.Trigger>
-				<DropdownMenu_1.default.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
-					<DropdownMenu_1.default.Item>Item</DropdownMenu_1.default.Item>
-				</DropdownMenu_1.default.Content>
-			</DropdownMenu_1.default>
+			<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 = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const menu = await canvas.findByTestId("test-id");
-        (0, test_1.expect)(menu).toHaveClass("test-classname");
+        expect(menu).toHaveClass("test-classname");
     },
 };
-exports.testScroll = {
+export const testScroll = {
     name: "test: scroll",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="Scrolls on page mount to the dropdown">
+    render: () => (<Example>
+			<Example.Item title="Scrolls on page mount to the dropdown">
 				<div style={{ height: 1000 }}/>
-				<DropdownMenu_1.default position="end" key="scroll" defaultActive>
-					<DropdownMenu_1.default.Trigger>
-						{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-					</DropdownMenu_1.default.Trigger>
-					<DropdownMenu_1.default.Content>
-						<DropdownMenu_1.default.Item>Item 1</DropdownMenu_1.default.Item>
-						<DropdownMenu_1.default.Item>Item 2</DropdownMenu_1.default.Item>
-					</DropdownMenu_1.default.Content>
-				</DropdownMenu_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				<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 } = (0, useTheme_1.useTheme)();
-    return (<View_1.default gap={3} direction="row">
-			<DropdownMenu_1.default>
-				<DropdownMenu_1.default.Trigger>
-					{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-				</DropdownMenu_1.default.Trigger>
-				<DropdownMenu_1.default.Content>
-					<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Item 1</DropdownMenu_1.default.Item>
-					<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Item 2</DropdownMenu_1.default.Item>
-				</DropdownMenu_1.default.Content>
-			</DropdownMenu_1.default>
-			<Button_1.default onClick={() => invertColorMode()}>Switch color mode</Button_1.default>
-		</View_1.default>);
+    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_1.default name={["reshaped", "figma"]}>
-			<DropdownMenu_1.default>
-				<DropdownMenu_1.default.Trigger>
-					{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-				</DropdownMenu_1.default.Trigger>
-				<DropdownMenu_1.default.Content>
-					<DropdownMenu_1.default.Item>Item 1</DropdownMenu_1.default.Item>
-					<DropdownMenu_1.default.Item>Item 2</DropdownMenu_1.default.Item>
-				</DropdownMenu_1.default.Content>
-			</DropdownMenu_1.default>
-		</Theme_1.default>);
+    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>);
 };
-exports.testTheme = {
+export const testTheme = {
     name: "test: theme",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="switch color mode while dropdown is active and check that it still works">
+    render: () => (<Example>
+			<Example.Item title="switch color mode while dropdown is active and check that it still works">
 				<ThemeSwitching />
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="dropdown inherits multiple themes">
+			</Example.Item>
+			<Example.Item title="dropdown inherits multiple themes">
 				<ThemeMultiple />
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };

package/dist/components/Expandable/Expandable.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Expandable.types";
+import type * as T from "./Expandable.types.js";
 declare const Expandable: React.FC<T.Props>;
 export default Expandable;

package/dist/components/Expandable/Expandable.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import useHandlerRef from "../../hooks/useHandlerRef";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import { onNextFrame, checkTransitions } from "../../utilities/animation";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import { onNextFrame, checkTransitions } from "../../utilities/animation.js";
 import s from "./Expandable.module.css";
 const Expandable = (props) => {
     const { children, active, orientation = "vertical", onAfterClose, className, attributes } = props;

package/dist/components/Expandable/Expandable.module.css

@@ -1 +1 @@
-.root{overflow:hidden;position:relative;opacity:0}.root.--orientation-vertical{height:0}.root.--orientation-horizontal{width:0;min-width:0}.--orientation-horizontal>.content{width:max-content}.root.--visible{opacity:1}.root.--animated{transition:opacity var(--rs-duration-medium) var(--rs-easing-standard)}.root.--animated.--orientation-vertical{transition:height var(--rs-duration-medium) var(--rs-easing-standard),opacity var(--rs-duration-medium) var(--rs-easing-standard)}.root.--animated.--orientation-horizontal{transition:width var(--rs-duration-medium) var(--rs-easing-standard),opacity var(--rs-duration-medium) var(--rs-easing-standard)}
+.root{overflow:hidden;position:relative;opacity:0}.root.--orientation-vertical{height:0}.root.--orientation-horizontal{width:0;min-width:0}.--orientation-horizontal>.content{width:max-content}.root.--visible{opacity:1}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:opacity}.root.--animated.--orientation-vertical{transition-property:height,opacity}.root.--animated.--orientation-horizontal{transition-property:width,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-standard)}

package/dist/components/Expandable/Expandable.types.d.ts

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../types/global";
+import type { Attributes } from "../../types/global.js";
 export type Orientation = "vertical" | "horizontal";
 export type Props = {
     /** Node for inserting the content */

package/dist/components/Expandable/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./Expandable";
-export type { Props as ExpandableProps } from "./Expandable.types";
+export { default } from "./Expandable.js";
+export type { Props as ExpandableProps } from "./Expandable.types.js";

package/dist/components/Expandable/index.js

@@ -1 +1 @@
-export { default } from "./Expandable";
+export { default } from "./Expandable.js";