reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testChangeSize = exports.testWithoutFocusable = exports.testScopedTheming = exports.testDynamicBounds = exports.testInsideModal = exports.testInsideScrollable = exports.testInsideSticky = exports.testInsideFixed = exports.contentAttributes = exports.instanceRef = exports.initialFocusRef = exports.positionRef = exports.containerRef = exports.disabled = exports.disableHideAnimation = exports.disableCloseOnOutsideClick = exports.disableContentHover = exports.contentMaxHeight = exports.contentZIndex = exports.contentShift = exports.contentGap = exports.width = exports.originCoordinates = exports.fallbackAdjustLayoutSize = exports.fallbackAdjustLayoutShift = exports.fallbackMinHeight = exports.fallbackAdjustLayout = exports.positionFallbacks = exports.modes = exports.activeFalse = exports.active = exports.defaultActive = exports.position = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Flyout_1 = __importDefault(require("../../../components/Flyout"));
-const Modal_1 = __importDefault(require("../../../components/Modal"));
-const Select_1 = __importDefault(require("../../../components/Select"));
-const Switch_1 = __importDefault(require("../../../components/Switch"));
-const TextField_1 = __importDefault(require("../../../components/TextField"));
-const Theme_1 = __importDefault(require("../../../components/Theme"));
-const View_1 = __importDefault(require("../../../components/View"));
-const helpers_1 = require("../../../utilities/helpers");
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = { title: "Utility components/Flyout" };
+import React from "react";
+import { userEvent, waitFor, within, expect, fn } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Flyout from "../../../components/Flyout/index.js";
+import Modal from "../../../components/Modal/index.js";
+import Select from "../../../components/Select/index.js";
+import Switch from "../../../components/Switch/index.js";
+import TextField from "../../../components/TextField/index.js";
+import Theme from "../../../components/Theme/index.js";
+import View from "../../../components/View/index.js";
+import { sleep } from "../../../utilities/helpers.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default { title: "Utility components/Flyout" };
 const Content = (props) => (<div style={{
         background: "var(--rs-color-background-elevation-overlay)",
         padding: "var(--rs-unit-x4)",
@@ -30,7 +24,7 @@ const Content = (props) => (<div style={{
 	</div>);
 const Demo = (props) => {
     const { position = "bottom-start", children, text, contentHeight, contentWidth, ...rest } = props;
-    return (<Flyout_1.default position={position} {...rest} scrollableAttributes={{
+    return (<Flyout position={position} {...rest} scrollableAttributes={{
             style: {
                 padding: "var(--rs-unit-x4)",
             },
@@ -44,138 +38,138 @@ const Demo = (props) => {
                 boxSizing: "border-box",
             },
         }}>
-			<Flyout_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>{text || position}</Button_1.default>}
-			</Flyout_1.default.Trigger>
-			<Flyout_1.default.Content>{children || "Content"}</Flyout_1.default.Content>
-		</Flyout_1.default>);
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>{text || position}</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>{children || "Content"}</Flyout.Content>
+		</Flyout>);
 };
-exports.position = {
+export const position = {
     name: "position",
     render: () => {
-        return (<View_1.default gap={4} padding={50} align="center" justify="center" height="100vh" width="120%">
-				<View_1.default gap={4} direction="row">
+        return (<View gap={4} padding={50} align="center" justify="center" height="100vh" width="120%">
+				<View gap={4} direction="row">
 					<Demo position="top-start" defaultActive/>
 					<Demo position="top"/>
 					<Demo position="top-end"/>
-				</View_1.default>
+				</View>
 
-				<View_1.default gap={4} direction="row">
+				<View gap={4} direction="row">
 					<Demo position="end-top"/>
 					<Demo position="end"/>
 					<Demo position="end-bottom"/>
-				</View_1.default>
+				</View>
 
-				<View_1.default gap={4} direction="row">
+				<View gap={4} direction="row">
 					<Demo position="start-top"/>
 					<Demo position="start"/>
 					<Demo position="start-bottom"/>
-				</View_1.default>
+				</View>
 
-				<View_1.default gap={4} direction="row">
+				<View gap={4} direction="row">
 					<Demo position="bottom-start"/>
 					<Demo position="bottom"/>
 					<Demo position="bottom-end"/>
-				</View_1.default>
-			</View_1.default>);
+				</View>
+			</View>);
     },
 };
-exports.defaultActive = {
+export const defaultActive = {
     name: "defaultActive, uncontrolled",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
-    },
-    render: (args) => (<Flyout_1.default onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
-			<Flyout_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Trigger</Button_1.default>}
-			</Flyout_1.default.Trigger>
-			<Flyout_1.default.Content>
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Flyout onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
 				<Content />
-			</Flyout_1.default.Content>
-		</Flyout_1.default>),
+			</Flyout.Content>
+		</Flyout>),
     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("Content");
-        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 (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();
         });
         item = canvas.getByText("Content");
-        (0, test_1.expect)(item).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
     },
 };
-exports.active = {
+export const active = {
     name: "active, controlled",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
-    },
-    render: (args) => (<Flyout_1.default onOpen={args.handleOpen} onClose={args.handleClose} active>
-			<Flyout_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Trigger</Button_1.default>}
-			</Flyout_1.default.Trigger>
-			<Flyout_1.default.Content>
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Flyout onOpen={args.handleOpen} onClose={args.handleClose} active>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
 				<Content />
-			</Flyout_1.default.Content>
-		</Flyout_1.default>),
+			</Flyout.Content>
+		</Flyout>),
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const item = canvas.getByText("Content");
-        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)(),
-    },
-    render: (args) => (<Flyout_1.default onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
-			<Flyout_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Trigger</Button_1.default>}
-			</Flyout_1.default.Trigger>
-			<Flyout_1.default.Content>
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => (<Flyout onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
 				<Content />
-			</Flyout_1.default.Content>
-		</Flyout_1.default>),
+			</Flyout.Content>
+		</Flyout>),
     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("Content");
-        (0, test_1.expect)(item).not.toBeInTheDocument();
+        expect(item).not.toBeInTheDocument();
     },
 };
-const modeContent = (<View_1.default direction="row" gap={2}>
-		<Button_1.default onClick={() => { }}>Action 1</Button_1.default>
-		<Button_1.default onClick={() => { }}>Action 2</Button_1.default>
-		<Button_1.default onClick={() => { }}>Action 3</Button_1.default>
-	</View_1.default>);
-exports.modes = {
+const modeContent = (<View direction="row" gap={2}>
+		<Button onClick={() => { }}>Action 1</Button>
+		<Button onClick={() => { }}>Action 2</Button>
+		<Button onClick={() => { }}>Action 3</Button>
+	</View>);
+export const modes = {
     name: "triggerType, trapFocusMode",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="triggerType: click">
-					<View_1.default direction="row" gap={4}>
+        return (<Example>
+				<Example.Item title="triggerType: click">
+					<View direction="row" gap={4}>
 						<Demo position="bottom-start" trapFocusMode="dialog" text="dialog">
 							{modeContent}
 						</Demo>
@@ -191,11 +185,11 @@ exports.modes = {
 						<Demo position="bottom-start" trapFocusMode={false} text="false">
 							{modeContent}
 						</Demo>
-					</View_1.default>
-				</storybook_1.Example.Item>
+					</View>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="triggerType: hover">
-					<View_1.default direction="row" gap={4}>
+				<Example.Item title="triggerType: hover">
+					<View direction="row" gap={4}>
 						<Demo position="bottom-start" trapFocusMode="dialog" triggerType="hover" text="dialog">
 							{modeContent}
 						</Demo>
@@ -208,31 +202,31 @@ exports.modes = {
 						<Demo position="bottom-start" trapFocusMode="content-menu" triggerType="hover" text="content-menu">
 							{modeContent}
 						</Demo>
-					</View_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+					</View>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.positionFallbacks = {
+export const positionFallbacks = {
     name: "fallbackPositions",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="position: top, default fallbacks">
-					<View_1.default justify="center" align="center">
+        return (<Example>
+				<Example.Item title="position: top, default fallbacks">
+					<View justify="center" align="center">
 						<Demo position="top"/>
-					</View_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="position: top, fallbackPositions: [start]">
-					<View_1.default justify="center" align="center">
+					</View>
+				</Example.Item>
+				<Example.Item title="position: top, fallbackPositions: [start]">
+					<View justify="center" align="center">
 						<Demo position="top" fallbackPositions={["start"]} contentHeight={200} defaultActive/>
-					</View_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="position: top, fallbackPositions: false">
-					<View_1.default justify="center" align="center">
+					</View>
+				</Example.Item>
+				<Example.Item title="position: top, fallbackPositions: false">
+					<View justify="center" align="center">
 						<Demo position="top" fallbackPositions={false} contentHeight={400}/>
-					</View_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+					</View>
+				</Example.Item>
+			</Example>);
     },
 };
 const FallbackAdjustLayoutControls = ({ containerRef, large, }) => {
@@ -241,16 +235,16 @@ const FallbackAdjustLayoutControls = ({ containerRef, large, }) => {
     const content = <div style={{ height: "1500px" }}>Content</div>;
     return (<>
 			{/* Left side */}
-			<View_1.default position="absolute" insetStart={4} insetTop={10} gap={2}>
+			<View position="absolute" insetStart={4} insetTop={10} gap={2}>
 				<Demo contentHeight={contentHeight} position="end" fallbackAdjustLayout fallbackPositions={false} containerRef={containerRef}>
 					{content}
 				</Demo>
 				<Demo contentHeight={contentHeight} position="end-bottom" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}>
 					{content}
 				</Demo>
-			</View_1.default>
+			</View>
 
-			<View_1.default position="absolute" insetStart={4} insetTop={80} gap={2}>
+			<View position="absolute" insetStart={4} insetTop={80} gap={2}>
 				<Demo position="top" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}>
 					{content}
 				</Demo>
@@ -263,29 +257,29 @@ const FallbackAdjustLayoutControls = ({ containerRef, large, }) => {
 				<Demo position="bottom" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}>
 					{content}
 				</Demo>
-			</View_1.default>
+			</View>
 
-			<View_1.default position="absolute" insetBottom={4} insetStart={4} gap={2}>
+			<View position="absolute" insetBottom={4} insetStart={4} gap={2}>
 				<Demo contentHeight={contentHeight} position="end-top" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}>
 					{content}
 				</Demo>
 				<Demo contentHeight={contentHeight} position="end" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}>
 					{content}
 				</Demo>
-			</View_1.default>
+			</View>
 
 			{/* Right side */}
 
-			<View_1.default position="absolute" insetTop={10} insetEnd={4} gap={2}>
+			<View position="absolute" insetTop={10} insetEnd={4} gap={2}>
 				<Demo contentHeight={contentHeight} position="start" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}>
 					{content}
 				</Demo>
 				<Demo contentHeight={contentHeight} position="start-bottom" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}>
 					{content}
 				</Demo>
-			</View_1.default>
+			</View>
 
-			<View_1.default position="absolute" insetEnd={4} insetTop={80} gap={2}>
+			<View position="absolute" insetEnd={4} insetTop={80} gap={2}>
 				<Demo position="top-start" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}>
 					{content}
 				</Demo>
@@ -298,19 +292,19 @@ const FallbackAdjustLayoutControls = ({ containerRef, large, }) => {
 				<Demo position="bottom" fallbackPositions={false} fallbackAdjustLayout contentWidth={contentWidth} containerRef={containerRef}>
 					{content}
 				</Demo>
-			</View_1.default>
+			</View>
 
-			<View_1.default position="absolute" insetBottom={4} insetEnd={4} gap={2}>
+			<View position="absolute" insetBottom={4} insetEnd={4} gap={2}>
 				<Demo contentHeight={contentHeight} position="start-top" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}>
 					{content}
 				</Demo>
 				<Demo contentHeight={contentHeight} position="start" fallbackPositions={false} fallbackAdjustLayout containerRef={containerRef}>
 					{content}
 				</Demo>
-			</View_1.default>
+			</View>
 		</>);
 };
-exports.fallbackAdjustLayout = {
+export const fallbackAdjustLayout = {
     name: "fallbackAdjustLayout",
     render: () => {
         return (<Demo contentHeight={false} position="bottom-start" width="200px" fallbackAdjustLayout defaultActive>
@@ -318,7 +312,7 @@ exports.fallbackAdjustLayout = {
 			</Demo>);
     },
 };
-exports.fallbackMinHeight = {
+export const fallbackMinHeight = {
     name: "fallbackAdjustLayout, fallbackMinHeight",
     render: () => {
         return (<div style={{ height: "1000px", paddingTop: "700px" }}>
@@ -328,189 +322,330 @@ exports.fallbackMinHeight = {
 			</div>);
     },
 };
-exports.fallbackAdjustLayoutShift = {
+export const fallbackAdjustLayoutShift = {
     name: "fallbackAdjustLayout, shift",
     render: () => {
-        const containerRef = react_1.default.useRef(null);
-        return (<View_1.default gap={10}>
-				<View_1.default height="95vh" width="100%" align="center" justify="center">
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" padding={4} paddingBlock={15} overflow="auto">
+        const containerRef = React.useRef(null);
+        return (<View gap={10}>
+				<View height="95vh" width="100%" align="center" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" padding={4} paddingBlock={15} overflow="auto">
 						<FallbackAdjustLayoutControls />
-						<View_1.default height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
-					</View_1.default>
-				</View_1.default>
+						<View height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
+					</View>
+				</View>
 
-				<View_1.default height="95vh" width="100%" align="center" justify="center">
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" attributes={{ ref: containerRef }} padding={4} paddingBlock={15} overflow="auto">
+				<View height="95vh" width="100%" align="center" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" attributes={{ ref: containerRef }} padding={4} paddingBlock={15} overflow="auto">
 						<FallbackAdjustLayoutControls containerRef={containerRef}/>
-						<View_1.default height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
-					</View_1.default>
-				</View_1.default>
+						<View height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
+					</View>
+				</View>
 
 				<FallbackAdjustLayoutControls />
 				<div style={{ height: "100vh", width: "250%" }}/>
-			</View_1.default>);
+			</View>);
     },
 };
-exports.fallbackAdjustLayoutSize = {
+export const fallbackAdjustLayoutSize = {
     name: "fallbackAdjustLayout, size",
     render: () => {
-        const containerRef = react_1.default.useRef(null);
-        return (<View_1.default gap={10}>
-				<View_1.default height="95vh" width="100%" align="center" justify="center">
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" padding={4} paddingBlock={15} overflow="auto">
+        const containerRef = React.useRef(null);
+        return (<View gap={10}>
+				<View height="95vh" width="100%" align="center" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" padding={4} paddingBlock={15} overflow="auto">
 						<FallbackAdjustLayoutControls large/>
-						<View_1.default height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
-					</View_1.default>
-				</View_1.default>
+						<View height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
+					</View>
+				</View>
 
-				<View_1.default height="95vh" width="100%" align="center" justify="center">
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" attributes={{ ref: containerRef }} padding={4} paddingBlock={15} overflow="auto">
+				<View height="95vh" width="100%" align="center" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" height="1000px" width="600px" attributes={{ ref: containerRef }} padding={4} paddingBlock={15} overflow="auto">
 						<FallbackAdjustLayoutControls containerRef={containerRef} large/>
-						<View_1.default height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
-					</View_1.default>
-				</View_1.default>
+						<View height="150%" width="150%" attributes={{ style: { pointerEvents: "none" } }}/>
+					</View>
+				</View>
 
 				<FallbackAdjustLayoutControls large/>
 				<div style={{ height: "100vh", width: "250%" }}/>
-			</View_1.default>);
+			</View>);
     },
 };
-exports.originCoordinates = {
+export const originCoordinates = {
     name: "originCoordinates",
     render: () => {
-        return (<View_1.default gap={4} direction="row">
+        return (<View gap={4} direction="row">
 				<Demo position="bottom-start" originCoordinates={{ x: 150, y: 150 }} defaultActive/>
-			</View_1.default>);
+			</View>);
     },
 };
-exports.width = {
+export const width = {
     name: "width",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="width: 300px">
+    render: () => (<Example>
+			<Example.Item title="width: 300px">
 				<Demo width="300px" contentWidth={false} position="bottom"/>
-			</storybook_1.Example.Item>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="width: trigger">
+			<Example.Item title="width: trigger">
 				<Demo width="trigger" contentWidth={false} defaultActive/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.contentGap = {
+export const contentGap = {
     name: "contentGap",
     render: () => <Demo contentGap={10} defaultActive/>,
 };
-exports.contentShift = {
+export const contentShift = {
     name: "contentShift",
     render: () => <Demo contentShift={10} defaultActive/>,
 };
-exports.contentZIndex = {
+export const contentZIndex = {
     name: "contentZIndex",
-    render: () => (<View_1.default gap={6}>
-			<View_1.default direction="row" gap={20}>
+    render: () => (<View gap={6}>
+			<View direction="row" gap={20}>
 				<Demo contentZIndex={8999} active/>
 				<Demo contentZIndex={9001} active/>
-			</View_1.default>
-			<View_1.default backgroundColor="primary-faded" height={100} width={100} borderRadius="medium" position="relative" zIndex={9000}/>
-		</View_1.default>),
+			</View>
+			<View backgroundColor="primary-faded" height={100} width={100} borderRadius="medium" position="relative" zIndex={9000}/>
+		</View>),
 };
-exports.contentMaxHeight = {
+export const contentMaxHeight = {
     name: "contentMaxHeight",
     render: () => (<Demo contentMaxHeight="500px" defaultActive contentHeight={false} fallbackAdjustLayout>
-			<View_1.default gap={4}>
-				{Array.from({ length: 20 }).map((_, index) => (<View_1.default.Item key={index}>Item {index + 1}</View_1.default.Item>))}
-			</View_1.default>
+			<View gap={4}>
+				{Array.from({ length: 20 }).map((_, index) => (<View.Item key={index}>Item {index + 1}</View.Item>))}
+			</View>
 		</Demo>),
 };
-exports.disableContentHover = {
+export const disableContentHover = {
     name: "disableContentHover",
     render: () => <Demo triggerType="hover" disableContentHover/>,
     // Can't trigger real mouse move from trigger to content in play function, so testing it manually
 };
-exports.disableCloseOnOutsideClick = {
+export const disableCloseOnOutsideClick = {
     name: "disableCloseOnOutsideClick",
     render: () => <Demo disableCloseOnOutsideClick/>,
     play: async ({ canvasElement }) => {
-        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)(() => {
+        await userEvent.click(trigger);
+        await waitFor(() => {
             const content = canvas.getByText("Content");
-            (0, test_1.expect)(content).toBeVisible();
+            expect(content).toBeVisible();
         });
-        await test_1.userEvent.click(document.body);
-        await (0, helpers_1.sleep)(500);
+        await userEvent.click(document.body);
+        await sleep(500);
         const content = canvas.getByText("Content");
-        (0, test_1.expect)(content).toBeVisible();
+        expect(content).toBeVisible();
     },
 };
-exports.disableHideAnimation = {
+export const disableHideAnimation = {
     name: "disableHideAnimation",
     render: () => <Demo disableHideAnimation defaultActive/>,
 };
-exports.disabled = {
+export const testFrozenContentOnClose = {
+    name: "test: content doesn't change while closing",
+    args: {
+        handleAfterClose: fn(),
+    },
+    render: (args) => {
+        const [active, setActive] = React.useState(false);
+        const [value, setValue] = React.useState("First");
+        return (<Flyout active={active} onOpen={() => setActive(true)} onClose={() => setActive(false)} onAfterClose={args.handleAfterClose}>
+				<Flyout.Trigger>
+					{(attributes) => <Button attributes={attributes}>{value}</Button>}
+				</Flyout.Trigger>
+				<Flyout.Content>
+					<Content>
+						<div data-testid="selected-value">Selected: {value}</div>
+						<Button onClick={() => {
+                setValue("Second");
+                setActive(false);
+            }}>
+							Select second
+						</Button>
+					</Content>
+				</Flyout.Content>
+			</Flyout>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        // Transitions are disabled for the first frames after the color mode gets applied
+        await waitFor(() => {
+            expect(document.documentElement).not.toHaveAttribute("data-rs-no-transition");
+        });
+        await userEvent.click(canvas.getByRole("button", { name: "First" }));
+        await waitFor(() => {
+            expect(canvas.getByTestId("selected-value")).toBeVisible();
+        });
+        // Record the content state after every DOM update since the hide animation might end before click resolves
+        const snapshots = [];
+        const observer = new MutationObserver(() => {
+            const el = canvasElement.ownerDocument.querySelector("[data-testid=selected-value]");
+            if (!el)
+                return;
+            snapshots.push({ text: el.textContent, visible: el.checkVisibility() });
+        });
+        observer.observe(canvasElement.ownerDocument.body, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            characterData: true,
+        });
+        await userEvent.click(canvas.getByText("Select second"));
+        await waitFor(() => {
+            expect(canvas.queryByTestId("selected-value")).not.toBeInTheDocument();
+        });
+        observer.disconnect();
+        // Trigger is updated right away while the content keeps its last state during the hide animation
+        expect(canvas.getAllByRole("button")[0]).toHaveTextContent("Second");
+        expect(snapshots.length).toBeGreaterThan(0);
+        snapshots.forEach((snapshot) => {
+            expect(snapshot).toEqual({ text: "Selected: First", visible: true });
+        });
+        expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+    },
+};
+export const testCloseRightAfterOpen = {
+    name: "test: close right after opening",
+    args: {
+        handleAfterClose: fn(),
+    },
+    render: (args) => {
+        const [active, setActive] = React.useState(false);
+        const [closeOnOpen, setCloseOnOpen] = React.useState(false);
+        // Closing in the same frame, before the open transition starts
+        React.useEffect(() => {
+            if (active && closeOnOpen)
+                setActive(false);
+        }, [active, closeOnOpen]);
+        return (<Flyout active={active} onAfterClose={args.handleAfterClose}>
+				<Flyout.Trigger>
+					{(attributes) => (<Button attributes={attributes} onClick={() => {
+                    setCloseOnOpen(true);
+                    setActive(true);
+                }}>
+							Trigger
+						</Button>)}
+				</Flyout.Trigger>
+				<Flyout.Content>
+					<Content />
+				</Flyout.Content>
+			</Flyout>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        // Transitions are disabled for the first frames after the color mode gets applied
+        await waitFor(() => {
+            expect(document.documentElement).not.toHaveAttribute("data-rs-no-transition");
+        });
+        await userEvent.click(canvas.getByRole("button", { name: "Trigger" }));
+        await waitFor(() => {
+            expect(canvas.queryByText("Content")).not.toBeInTheDocument();
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+        });
+    },
+};
+export const testFocusReturnWithoutTransitions = {
+    name: "test: focus returns to the trigger with transitions disabled",
+    render: () => (<Flyout>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
+				<Content>
+					<Button onClick={() => { }}>Inside</Button>
+				</Content>
+			</Flyout.Content>
+		</Flyout>),
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        const trigger = canvas.getByRole("button", { name: "Trigger" });
+        // Wait for the provider to enable transitions after mount before disabling them again
+        await waitFor(() => {
+            expect(document.documentElement).not.toHaveAttribute("data-rs-no-transition");
+        });
+        // Same as prefers-reduced-motion, content is removed without the hide animation
+        document.documentElement.setAttribute("data-rs-no-transition", "true");
+        try {
+            trigger.focus();
+            await userEvent.keyboard("{Enter}");
+            await waitFor(() => {
+                expect(canvas.getByRole("dialog")).toContainElement(document.activeElement);
+            });
+            await userEvent.keyboard("{Escape}");
+            await waitFor(() => {
+                expect(canvas.queryByRole("dialog")).not.toBeInTheDocument();
+            });
+            expect(trigger).toHaveFocus();
+        }
+        finally {
+            document.documentElement.removeAttribute("data-rs-no-transition");
+        }
+    },
+};
+export const disabled = {
     name: "disabled",
     args: {
-        handleOpen: (0, test_1.fn)(),
+        handleOpen: fn(),
     },
-    render: () => (<Flyout_1.default disabled>
-			<Flyout_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Trigger</Button_1.default>}
-			</Flyout_1.default.Trigger>
-			<Flyout_1.default.Content>
+    render: () => (<Flyout disabled>
+			<Flyout.Trigger>
+				{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+			</Flyout.Trigger>
+			<Flyout.Content>
 				<Content />
-			</Flyout_1.default.Content>
-		</Flyout_1.default>),
+			</Flyout.Content>
+		</Flyout>),
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(0);
+        await userEvent.click(button);
+        expect(args.handleOpen).toHaveBeenCalledTimes(0);
     },
 };
-exports.containerRef = {
+export const containerRef = {
     name: "containerRef",
     render: () => {
-        const portalRef = react_1.default.useRef(null);
-        const portalRef2 = react_1.default.useRef(null);
-        const portalRef3 = react_1.default.useRef(null);
-        const [tall, setTall] = react_1.default.useState(false);
+        const portalRef = React.useRef(null);
+        const portalRef2 = React.useRef(null);
+        const portalRef3 = React.useRef(null);
+        const [tall, setTall] = React.useState(false);
         const height = tall ? 90 : 120;
-        return (<View_1.default gap={4}>
-				<View_1.default>
-					<Button_1.default onClick={() => setTall((prev) => !prev)}>Toggle container height</Button_1.default>
-				</View_1.default>
-				<View_1.default gap={4} direction="row">
-					<View_1.default grow backgroundColor="neutral-faded" borderRadius="small" height={height} attributes={{
+        return (<View gap={4}>
+				<View>
+					<Button onClick={() => setTall((prev) => !prev)}>Toggle container height</Button>
+				</View>
+				<View gap={4} direction="row">
+					<View grow backgroundColor="neutral-faded" borderRadius="small" height={height} attributes={{
                 ref: portalRef,
                 "data-testid": "container",
                 style: { transition: "height 0.3s ease-in-out" },
             }} justify="end" align="start" padding={4}>
 						<Demo containerRef={portalRef} position="bottom-start" active/>
-					</View_1.default>
-					<View_1.default grow backgroundColor="neutral-faded" borderRadius="small" height={height} attributes={{ ref: portalRef2, style: { transition: "height 0.3s ease-in-out" } }} justify="start" align="end" padding={4}>
+					</View>
+					<View grow backgroundColor="neutral-faded" borderRadius="small" height={height} attributes={{ ref: portalRef2, style: { transition: "height 0.3s ease-in-out" } }} justify="start" align="end" padding={4}>
 						<Demo containerRef={portalRef2} position="top-end"/>
-					</View_1.default>
-					<View_1.default width={50} backgroundColor="neutral-faded" borderRadius="small" height={height} attributes={{ ref: portalRef3, style: { transition: "height 0.3s ease-in-out" } }} padding={4} overflow="auto">
-						<View_1.default height={200} width="120%" justify="center" align="center">
+					</View>
+					<View width={50} backgroundColor="neutral-faded" borderRadius="small" height={height} attributes={{ ref: portalRef3, style: { transition: "height 0.3s ease-in-out" } }} padding={4} overflow="auto">
+						<View height={200} width="120%" justify="center" align="center">
 							<Demo containerRef={portalRef3} position="bottom-end"/>
-						</View_1.default>
-					</View_1.default>
-				</View_1.default>
-			</View_1.default>);
+						</View>
+					</View>
+				</View>
+			</View>);
     },
 };
-exports.positionRef = {
+export const positionRef = {
     name: "positionRef",
     render: () => {
-        const ref = react_1.default.useRef(null);
-        return (<View_1.default gap={10}>
-				<View_1.default.Item>
-					<Flyout_1.default position="bottom" positionRef={ref} width="trigger" active>
-						<Flyout_1.default.Trigger>
-							{(attributes) => <Button_1.default attributes={attributes}>Trigger</Button_1.default>}
-						</Flyout_1.default.Trigger>
-						<Flyout_1.default.Content attributes={{
+        const ref = React.useRef(null);
+        return (<View gap={10}>
+				<View.Item>
+					<Flyout position="bottom" positionRef={ref} width="trigger" active>
+						<Flyout.Trigger>
+							{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+						</Flyout.Trigger>
+						<Flyout.Content attributes={{
                 style: {
                     background: "var(--rs-color-background-elevation-overlay)",
                     padding: "var(--rs-unit-x4)",
@@ -520,229 +655,229 @@ exports.positionRef = {
                 },
             }}>
 							Content
-						</Flyout_1.default.Content>
-					</Flyout_1.default>
-				</View_1.default.Item>
+						</Flyout.Content>
+					</Flyout>
+				</View.Item>
 
-				<Button_1.default onClick={() => { }} ref={ref}>
+				<Button onClick={() => { }} ref={ref}>
 					Trigger 2
-				</Button_1.default>
-			</View_1.default>);
+				</Button>
+			</View>);
     },
 };
-exports.initialFocusRef = {
+export const initialFocusRef = {
     name: "initialFocusRef",
     render: () => {
-        const initialFocusRef = react_1.default.useRef(null);
+        const initialFocusRef = React.useRef(null);
         return (<Demo initialFocusRef={initialFocusRef}>
-				<View_1.default gap={4}>
-					<Button_1.default onClick={() => { }}>Action 1</Button_1.default>
-					<TextField_1.default name="foo" inputAttributes={{ ref: initialFocusRef }}/>
-				</View_1.default>
+				<View gap={4}>
+					<Button onClick={() => { }}>Action 1</Button>
+					<TextField name="foo" inputAttributes={{ ref: initialFocusRef }}/>
+				</View>
 			</Demo>);
     },
     play: async ({ canvasElement }) => {
-        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)(() => {
+        await userEvent.click(trigger);
+        await waitFor(() => {
             const input = canvas.getByRole("textbox");
-            (0, test_1.expect)(input).toBe(document.activeElement);
+            expect(input).toBe(document.activeElement);
         });
     },
 };
-exports.instanceRef = {
+export const instanceRef = {
     name: "instanceRef",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
+        handleOpen: fn(),
+        handleClose: fn(),
     },
     render: (args) => {
-        const flyoutRef = react_1.default.useRef(null);
-        return (<View_1.default direction="row" gap={4}>
+        const flyoutRef = React.useRef(null);
+        return (<View direction="row" gap={4}>
 				<Demo instanceRef={flyoutRef} disableCloseOnOutsideClick onOpen={args.handleOpen} onClose={args.handleClose}/>
 
-				<Button_1.default onClick={() => flyoutRef.current?.open()}>Open</Button_1.default>
-				<Button_1.default onClick={() => flyoutRef.current?.close()}>Close</Button_1.default>
-			</View_1.default>);
+				<Button onClick={() => flyoutRef.current?.open()}>Open</Button>
+				<Button onClick={() => flyoutRef.current?.close()}>Close</Button>
+			</View>);
     },
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const openTrigger = canvas.getAllByRole("button")[1];
         const closeTrigger = canvas.getAllByRole("button")[2];
-        await test_1.userEvent.click(openTrigger);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledWith();
+        await userEvent.click(openTrigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
         });
-        await (0, helpers_1.sleep)(500);
-        await test_1.userEvent.click(closeTrigger);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({});
+        await sleep(500);
+        await userEvent.click(closeTrigger);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({});
         });
     },
 };
-exports.contentAttributes = {
+export const contentAttributes = {
     name: "content: className, attributes",
     render: () => {
-        return (<Flyout_1.default position="bottom" defaultActive>
-				<Flyout_1.default.Trigger>
-					{(attributes) => <Button_1.default attributes={attributes}>Trigger</Button_1.default>}
-				</Flyout_1.default.Trigger>
-				<Flyout_1.default.Content attributes={{ "data-testid": "test-id" }} className="test-classname">
+        return (<Flyout position="bottom" defaultActive>
+				<Flyout.Trigger>
+					{(attributes) => <Button attributes={attributes}>Trigger</Button>}
+				</Flyout.Trigger>
+				<Flyout.Content attributes={{ "data-testid": "test-id" }} className="test-classname">
 					<Content />
-				</Flyout_1.default.Content>
-			</Flyout_1.default>);
+				</Flyout.Content>
+			</Flyout>);
     },
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const content = canvas.getByTestId("test-id");
-        (0, test_1.expect)(content).toHaveClass("test-classname");
+        expect(content).toHaveClass("test-classname");
     },
 };
 /*
  * Test edge cases
  */
-exports.testInsideFixed = {
+export const testInsideFixed = {
     name: "test: inside position fixed",
-    render: () => (<react_1.default.Fragment>
-			<View_1.default position="fixed" insetBottom={2} insetStart={2} insetEnd={2} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }} height={20}>
+    render: () => (<React.Fragment>
+			<View position="fixed" insetBottom={2} insetStart={2} insetEnd={2} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }} height={20}>
 				<Demo defaultActive position="top-start"/>
-			</View_1.default>
-			<View_1.default paddingTop={18} gap={4}>
-				<View_1.default height={200} backgroundColor="neutral-faded" borderRadius="small"/>
-				<View_1.default height={200} backgroundColor="neutral-faded" borderRadius="small"/>
-			</View_1.default>
-		</react_1.default.Fragment>),
-};
-exports.testInsideSticky = {
+			</View>
+			<View paddingTop={18} gap={4}>
+				<View height={200} backgroundColor="neutral-faded" borderRadius="small"/>
+				<View height={200} backgroundColor="neutral-faded" borderRadius="small"/>
+			</View>
+		</React.Fragment>),
+};
+export const testInsideSticky = {
     name: "test: inside position sticky",
-    render: () => (<react_1.default.Fragment>
-			<View_1.default position="sticky" insetTop={4} insetStart={0} insetEnd={0} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }}>
+    render: () => (<React.Fragment>
+			<View position="sticky" insetTop={4} insetStart={0} insetEnd={0} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }}>
 				<Demo defaultActive/>
-			</View_1.default>
-			<View_1.default gap={4} paddingTop={2}>
-				<View_1.default height={200} backgroundColor="neutral-faded" borderRadius="small"/>
-				<View_1.default height={200} backgroundColor="neutral-faded" borderRadius="small"/>
-			</View_1.default>
-		</react_1.default.Fragment>),
-};
-exports.testInsideScrollable = {
+			</View>
+			<View gap={4} paddingTop={2}>
+				<View height={200} backgroundColor="neutral-faded" borderRadius="small"/>
+				<View height={200} backgroundColor="neutral-faded" borderRadius="small"/>
+			</View>
+		</React.Fragment>),
+};
+export const testInsideScrollable = {
     name: "test: inside scrollable",
     render: () => {
-        const containerRef = react_1.default.useRef(null);
-        return (<View_1.default padding={20}>
-				<View_1.default height={30} overflow="auto" backgroundColor="neutral-faded" borderRadius="small">
-					<View_1.default height={50} attributes={{ ref: containerRef }} padding={20} paddingBottom={50}>
+        const containerRef = React.useRef(null);
+        return (<View padding={20}>
+				<View height={30} overflow="auto" backgroundColor="neutral-faded" borderRadius="small">
+					<View height={50} attributes={{ ref: containerRef }} padding={20} paddingBottom={50}>
 						<Demo position="bottom"/>
-					</View_1.default>
-				</View_1.default>
-			</View_1.default>);
+					</View>
+				</View>
+			</View>);
     },
 };
-exports.testInsideModal = {
+export const testInsideModal = {
     name: "test: inside modal",
     render: () => {
-        return (<Modal_1.default active position="end">
-				<View_1.default gap={4} align="start">
-					<Modal_1.default.Title>Title</Modal_1.default.Title>
+        return (<Modal active position="end">
+				<View gap={4} align="start">
+					<Modal.Title>Title</Modal.Title>
 					<Demo position="bottom-start"/>
-					<View_1.default height={300} width={25} backgroundColor="neutral-faded"/>
+					<View height={300} width={25} backgroundColor="neutral-faded"/>
 					<Demo position="start"/>
-					<View_1.default height={300} width={25} backgroundColor="neutral-faded"/>
+					<View height={300} width={25} backgroundColor="neutral-faded"/>
 					<Demo position="bottom-start"/>
-				</View_1.default>
-			</Modal_1.default>);
+				</View>
+			</Modal>);
     },
 };
-exports.testDynamicBounds = {
+export const testDynamicBounds = {
     name: "test: auto position update",
     render: () => {
-        const [left, setLeft] = react_1.default.useState(50);
-        const [top, setTop] = react_1.default.useState(50);
-        const [size, setSize] = react_1.default.useState("medium");
-        const [contentSize, setContentSize] = react_1.default.useState("medium");
-        const flyoutRef = react_1.default.useRef(null);
-        react_1.default.useEffect(() => {
+        const [left, setLeft] = React.useState(50);
+        const [top, setTop] = React.useState(50);
+        const [size, setSize] = React.useState("medium");
+        const [contentSize, setContentSize] = React.useState("medium");
+        const flyoutRef = React.useRef(null);
+        React.useEffect(() => {
             flyoutRef.current?.updatePosition();
         }, [left, top]);
-        return (<View_1.default gap={4}>
-				<View_1.default direction="row" gap={2}>
-					<Button_1.default onClick={() => setLeft((prev) => prev - 10)}>Left</Button_1.default>
-					<Button_1.default onClick={() => setLeft((prev) => prev + 10)}>Right</Button_1.default>
-					<Button_1.default onClick={() => setTop((prev) => prev - 10)}>Up</Button_1.default>
-					<Button_1.default onClick={() => setTop((prev) => prev + 10)}>Down</Button_1.default>
-					<Button_1.default onClick={() => {
+        return (<View gap={4}>
+				<View direction="row" gap={2}>
+					<Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>
+					<Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>
+					<Button onClick={() => setTop((prev) => prev - 10)}>Up</Button>
+					<Button onClick={() => setTop((prev) => prev + 10)}>Down</Button>
+					<Button onClick={() => {
                 setLeft(50);
                 setTop(50);
             }}>
 						Center
-					</Button_1.default>
-					<Button_1.default onClick={() => setSize("large")}>Large button</Button_1.default>
-					<Button_1.default onClick={() => setSize("medium")}>Small button</Button_1.default>
-					<Button_1.default onClick={() => setContentSize("large")}>Large content</Button_1.default>
-					<Button_1.default onClick={() => setContentSize("medium")}>Small content</Button_1.default>
-				</View_1.default>
-				<View_1.default height={100}>
-					<Flyout_1.default position="bottom" instanceRef={flyoutRef} disableCloseOnOutsideClick defaultActive>
-						<Flyout_1.default.Trigger>
+					</Button>
+					<Button onClick={() => setSize("large")}>Large button</Button>
+					<Button onClick={() => setSize("medium")}>Small button</Button>
+					<Button onClick={() => setContentSize("large")}>Large content</Button>
+					<Button onClick={() => setContentSize("medium")}>Small content</Button>
+				</View>
+				<View height={100}>
+					<Flyout position="bottom" instanceRef={flyoutRef} disableCloseOnOutsideClick defaultActive>
+						<Flyout.Trigger>
 							{(attributes) => (<div style={{ position: "absolute", left: `${left}%`, top: `${top}%` }}>
-									<Button_1.default color="primary" attributes={attributes} size={size}>
+									<Button color="primary" attributes={attributes} size={size}>
 										Open
-									</Button_1.default>
+									</Button>
 								</div>)}
-						</Flyout_1.default.Trigger>
-						<Flyout_1.default.Content>
+						</Flyout.Trigger>
+						<Flyout.Content>
 							<Content height={contentSize === "large" ? 200 : undefined} width={contentSize === "large" ? 200 : undefined}/>
-						</Flyout_1.default.Content>
-					</Flyout_1.default>
-				</View_1.default>
-			</View_1.default>);
+						</Flyout.Content>
+					</Flyout>
+				</View>
+			</View>);
     },
 };
-exports.testScopedTheming = {
+export const testScopedTheming = {
     name: "test: content uses scope theme",
-    render: () => (<View_1.default gap={3} align="start">
-			<Button_1.default color="primary">Slate button</Button_1.default>
-			<Theme_1.default name="figma">
-				<Flyout_1.default triggerType="click" active position="bottom-start">
-					<Flyout_1.default.Trigger>
-						{(attributes) => (<Button_1.default color="primary" attributes={attributes}>
+    render: () => (<View gap={3} align="start">
+			<Button color="primary">Slate button</Button>
+			<Theme name="figma">
+				<Flyout triggerType="click" active position="bottom-start">
+					<Flyout.Trigger>
+						{(attributes) => (<Button color="primary" attributes={attributes}>
 								Figma button
-							</Button_1.default>)}
-					</Flyout_1.default.Trigger>
-					<Flyout_1.default.Content>
+							</Button>)}
+					</Flyout.Trigger>
+					<Flyout.Content>
 						<Content>
-							<View_1.default gap={1}>
-								<View_1.default.Item>Portal content, rendered in body</View_1.default.Item>
-								<Button_1.default color="primary">Figma button</Button_1.default>
-							</View_1.default>
+							<View gap={1}>
+								<View.Item>Portal content, rendered in body</View.Item>
+								<Button color="primary">Figma button</Button>
+							</View>
 						</Content>
-					</Flyout_1.default.Content>
-				</Flyout_1.default>
-			</Theme_1.default>
-		</View_1.default>),
+					</Flyout.Content>
+				</Flyout>
+			</Theme>
+		</View>),
 };
-exports.testWithoutFocusable = {
+export const testWithoutFocusable = {
     name: "test: without focusable content",
     render: () => <Demo position="bottom-start"/>,
     play: async ({ canvasElement }) => {
-        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)(() => {
+        await userEvent.click(trigger);
+        await waitFor(() => {
             const content = canvas.getByText("Content");
-            (0, test_1.expect)(content).toBeVisible();
+            expect(content).toBeVisible();
         });
-        (0, test_1.expect)(document.activeElement).toBe(trigger);
+        expect(document.activeElement).toBe(trigger);
     },
 };
-exports.testChangeSize = {
+export const testChangeSize = {
     name: "test: size updates",
     render: () => {
-        const [position, setPosition] = react_1.default.useState("bottom-start");
-        const [updatedHeight, setUpdatedHeight] = react_1.default.useState(false);
+        const [position, setPosition] = React.useState("bottom-start");
+        const [updatedHeight, setUpdatedHeight] = React.useState(false);
         const positions = [
             "bottom-start",
             "bottom",
@@ -758,16 +893,16 @@ exports.testChangeSize = {
             "end-bottom",
         ];
         return (<>
-				<View_1.default direction="row" gap={4} align="center">
-					<Select_1.default name="position" onChange={(args) => setPosition(args.value)} value={position}>
-						{positions.map((p) => (<Select_1.default.Option key={p} value={p}>
+				<View direction="row" gap={4} align="center">
+					<Select name="position" onChange={(args) => setPosition(args.value)} value={position}>
+						{positions.map((p) => (<Select.Option key={p} value={p}>
 								{p}
-							</Select_1.default.Option>))}
-					</Select_1.default>
-					<Switch_1.default name="height" onChange={(args) => setUpdatedHeight(args.checked)}>
+							</Select.Option>))}
+					</Select>
+					<Switch name="height" onChange={(args) => setUpdatedHeight(args.checked)}>
 						Change height
-					</Switch_1.default>
-				</View_1.default>
+					</Switch>
+				</View>
 				<div style={{
                 position: "fixed",
                 top: "50%",
@@ -775,7 +910,7 @@ exports.testChangeSize = {
                 transform: "translate(-50%, -50%)",
             }}>
 					<Demo position={position} disableCloseOnOutsideClick active contentHeight={false}>
-						<View_1.default backgroundColor="neutral-faded" borderRadius="small" height={updatedHeight ? 50 : 25} attributes={{ style: { transition: "0.2s ease-in-out" } }}/>
+						<View backgroundColor="neutral-faded" borderRadius="small" height={updatedHeight ? 50 : 25} attributes={{ style: { transition: "0.2s ease-in-out" } }}/>
 					</Demo>
 				</div>
 			</>);