reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,259 +1,229 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.triggerOnly = exports.defaultHandlers = exports.nativeHandlers = exports.nativeOptgroup = exports.nativeRender = exports.testComposition = exports.formControl = exports.fallback = exports.className = exports.disabled = exports.error = exports.renderTrigger = exports.renderValue = exports.startSlot = exports.size = exports.variant = exports.multiple = exports.selectedIconPosition = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Actionable_1 = __importDefault(require("../../../components/Actionable"));
-const Badge_1 = __importDefault(require("../../../components/Badge"));
-const FormControl_1 = __importDefault(require("../../../components/FormControl"));
-const MenuItem_1 = __importDefault(require("../../../components/MenuItem"));
-const Modal_1 = __importDefault(require("../../../components/Modal"));
-const Select_1 = __importStar(require("../../../components/Select"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const View_1 = __importDefault(require("../../../components/View"));
-const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
-const storybook_1 = require("../../../utilities/storybook");
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-exports.default = {
+import React from "react";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import Actionable from "../../../components/Actionable/index.js";
+import Badge from "../../../components/Badge/index.js";
+import FormControl from "../../../components/FormControl/index.js";
+import MenuItem from "../../../components/MenuItem/index.js";
+import Modal from "../../../components/Modal/index.js";
+import Select, { SelectTrigger } from "../../../components/Select/index.js";
+import Text from "../../../components/Text/index.js";
+import View from "../../../components/View/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
     title: "Components/Select",
-    component: Select_1.default,
+    component: Select,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/select",
         },
     },
 };
-exports.base = {
+export const base = {
     name: "name, id, option groups",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="default with options">
-				<Select_1.default name="animal" id="animal-1" placeholder="Select an animal" inputAttributes={{
+    render: () => (<Example>
+			<Example.Item title="default with options">
+				<Select name="animal" id="animal-1" placeholder="Select an animal" inputAttributes={{
             "aria-label": "Select an animal",
         }}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="default with option groups">
-				<Select_1.default name="animal-2" id="animal-2" placeholder="Select an animal" inputAttributes={{
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+			<Example.Item title="default with option groups">
+				<Select name="animal-2" id="animal-2" placeholder="Select an animal" inputAttributes={{
             "aria-label": "Select an animal",
         }}>
-					<Select_1.default.Group label="Birds">
-						<Select_1.default.Option value="pigeon">Pigeon</Select_1.default.Option>
-						<Select_1.default.Option value="parrot">Parrot</Select_1.default.Option>
-					</Select_1.default.Group>
-					<Select_1.default.Group label="Sea Mammals">
-						<Select_1.default.Option value="whale">Whale</Select_1.default.Option>
-						<Select_1.default.Option value="dolphin">Dolphin</Select_1.default.Option>
-					</Select_1.default.Group>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					<Select.Group label="Birds">
+						<Select.Option value="pigeon">Pigeon</Select.Option>
+						<Select.Option value="parrot">Parrot</Select.Option>
+					</Select.Group>
+					<Select.Group label="Sea Mammals">
+						<Select.Option value="whale">Whale</Select.Option>
+						<Select.Option value="dolphin">Dolphin</Select.Option>
+					</Select.Group>
+				</Select>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, canvasElement }) => {
         const [trigger] = canvas.getAllByRole("button");
         const hiddenInputs = canvasElement.querySelectorAll('input[type="hidden"]');
         const [hiddenInput] = Array.from(hiddenInputs);
         // Testing only options
-        (0, test_1.expect)(hiddenInput).toHaveAttribute("name", "animal");
-        (0, test_1.expect)(hiddenInput).toHaveAttribute("id", "animal-1");
-        (0, test_1.expect)(trigger).toHaveTextContent("Select an animal");
-        await test_1.userEvent.click(trigger);
-        const options = (0, test_1.within)(canvasElement.ownerDocument.body).getAllByRole("option");
-        (0, test_1.expect)(options).toHaveLength(2);
-        (0, test_1.expect)(options[0]).toHaveTextContent("Dog");
-        (0, test_1.expect)(options[1]).toHaveTextContent("Turtle");
-        await test_1.userEvent.click(document.body);
+        expect(hiddenInput).toHaveAttribute("name", "animal");
+        expect(hiddenInput).toHaveAttribute("id", "animal-1");
+        expect(trigger).toHaveTextContent("Select an animal");
+        expect(trigger).toHaveAttribute("aria-haspopup", "listbox");
+        await userEvent.click(trigger);
+        const listbox = within(canvasElement.ownerDocument.body).getByRole("listbox");
+        const options = within(listbox).getAllByRole("option");
+        expect(listbox).not.toHaveAttribute("aria-multiselectable");
+        expect(options).toHaveLength(2);
+        expect(options[0]).toHaveTextContent("Dog");
+        expect(options[1]).toHaveTextContent("Turtle");
+        await userEvent.click(document.body);
+        // Wait for the previous menu to finish its hide animation
+        await waitFor(() => {
+            expect(within(canvasElement.ownerDocument.body).queryAllByRole("option")).toHaveLength(0);
+        });
         const [_, triggerWithGroups] = canvas.getAllByRole("button");
         const hiddenInputs2 = canvasElement.querySelectorAll('input[type="hidden"]');
         const [__, hiddenInputWithGroups] = Array.from(hiddenInputs2);
-        await test_1.userEvent.click(triggerWithGroups);
-        const optionsWithGroups = (0, test_1.within)(canvasElement.ownerDocument.body).getAllByRole("option");
-        const optionGroups = (0, test_1.within)(canvasElement.ownerDocument.body).getAllByRole("group");
-        (0, test_1.expect)(hiddenInputWithGroups).toHaveAttribute("name", "animal-2");
-        (0, test_1.expect)(hiddenInputWithGroups).toHaveAttribute("id", "animal-2");
-        (0, test_1.expect)(triggerWithGroups).toHaveTextContent("Select an animal");
-        (0, test_1.expect)(optionGroups).toHaveLength(2);
-        (0, test_1.expect)(optionGroups[0]).toHaveTextContent("Birds");
-        (0, test_1.expect)(optionGroups[1]).toHaveTextContent("Sea Mammals");
-        (0, test_1.expect)(optionsWithGroups).toHaveLength(4);
-        (0, test_1.expect)(optionsWithGroups[0]).toHaveTextContent("Pigeon");
-        (0, test_1.expect)(optionsWithGroups[1]).toHaveTextContent("Parrot");
-        (0, test_1.expect)(optionsWithGroups[2]).toHaveTextContent("Whale");
-        (0, test_1.expect)(optionsWithGroups[3]).toHaveTextContent("Dolphin");
+        await userEvent.click(triggerWithGroups);
+        const optionsWithGroups = within(canvasElement.ownerDocument.body).getAllByRole("option");
+        const optionGroups = within(canvasElement.ownerDocument.body).getAllByRole("group");
+        expect(hiddenInputWithGroups).toHaveAttribute("name", "animal-2");
+        expect(hiddenInputWithGroups).toHaveAttribute("id", "animal-2");
+        expect(triggerWithGroups).toHaveTextContent("Select an animal");
+        expect(optionGroups).toHaveLength(2);
+        expect(optionGroups[0]).toHaveTextContent("Birds");
+        expect(optionGroups[1]).toHaveTextContent("Sea Mammals");
+        expect(optionsWithGroups).toHaveLength(4);
+        expect(optionsWithGroups[0]).toHaveTextContent("Pigeon");
+        expect(optionsWithGroups[1]).toHaveTextContent("Parrot");
+        expect(optionsWithGroups[2]).toHaveTextContent("Whale");
+        expect(optionsWithGroups[3]).toHaveTextContent("Dolphin");
     },
 };
-exports.selectedIconPosition = {
+export const selectedIconPosition = {
     name: "selectedIconPosition",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="selectedIconPosition: start">
-				<Select_1.default name="animal" placeholder="Select an animal" selectedIconPosition="start">
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="selectedIconPosition: end">
-				<Select_1.default name="animal" placeholder="Select an animal" selectedIconPosition="end">
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="selectedIconPosition: start">
+				<Select name="animal" placeholder="Select an animal" selectedIconPosition="start">
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+			<Example.Item title="selectedIconPosition: end">
+				<Select name="animal" placeholder="Select an animal" selectedIconPosition="end">
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
 };
-exports.multiple = {
+export const multiple = {
     name: "multiple",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="multiple">
-				<Select_1.default multiple name="animal" placeholder="Select an animal" defaultValue={["dog"]} onChange={args.handleChange} renderValue={(args) => args.value.join(", ")}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: (args) => (<Example>
+			<Example.Item title="multiple">
+				<Select multiple name="animal" placeholder="Select an animal" defaultValue={["dog"]} onChange={args.handleChange} renderValue={(args) => args.value.join(", ")}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, canvasElement, args }) => {
         const [uncontrolled] = canvas.getAllByRole("button");
         const hiddenInputs = canvasElement.querySelectorAll('input[type="hidden"]');
         const [inputUncontrolled] = Array.from(hiddenInputs);
         // Uncontrolled
-        (0, test_1.expect)(inputUncontrolled).toHaveValue('["dog"]');
-        await test_1.userEvent.click(uncontrolled);
-        const [_, uncontrolledOption] = (0, test_1.within)(canvasElement.ownerDocument.body).getAllByRole("option");
-        await test_1.userEvent.click(uncontrolledOption);
-        (0, test_1.expect)(inputUncontrolled).toHaveValue('["dog","turtle"]');
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(inputUncontrolled).toHaveValue('["dog"]');
+        await userEvent.click(uncontrolled);
+        const [_, uncontrolledOption] = within(canvasElement.ownerDocument.body).getAllByRole("option");
+        await userEvent.click(uncontrolledOption);
+        // Content stays open to select multiple options
+        expect(within(canvasElement.ownerDocument.body).getByRole("listbox")).toHaveAttribute("aria-multiselectable", "true");
+        expect(inputUncontrolled).toHaveValue('["dog","turtle"]');
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "animal",
             value: ["dog", "turtle"],
         });
     },
 };
-exports.variant = {
+export const variant = {
     name: "variant",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="variant: faded">
-				<Select_1.default variant="faded" name="animal-2" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="variant: faded">
+				<Select variant="faded" name="animal-2" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: ghost">
-				<Select_1.default variant="ghost" name="animal-4" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="variant: ghost">
+				<Select variant="ghost" name="animal-4" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: headless">
-				<Select_1.default variant="headless" name="animal-6" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="variant: headless">
+				<Select variant="headless" name="animal-6" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small">
-				<Select_1.default size="small" name="animal" placeholder="Select an animal">
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: medium">
-				<Select_1.default size="medium" name="animal" placeholder="Select an animal">
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: large">
-				<Select_1.default size="large" name="animal" placeholder="Select an animal">
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: xlarge">
-				<Select_1.default size="xlarge" name="animal" placeholder="Select an animal">
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<Select size="small" name="animal" placeholder="Select an animal">
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<Select size="medium" name="animal" placeholder="Select an animal">
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<Select size="large" name="animal" placeholder="Select an animal">
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+			<Example.Item title="size: xlarge">
+				<Select size="xlarge" name="animal" placeholder="Select an animal">
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
 };
-exports.startSlot = {
+export const startSlot = {
     name: "icon,startSlot",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="icon">
-				<Select_1.default name="animal" placeholder="Select an animal" icon={Zap_1.default}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="icon">
+				<Select name="animal" placeholder="Select an animal" icon={IconZap}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="startSlot">
-				<Select_1.default name="animal" placeholder="Select an animal" startSlot={<storybook_1.Placeholder h={20}/>}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="startSlot">
+				<Select name="animal" placeholder="Select an animal" startSlot={<Placeholder h={20}/>}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="selectedIconPosition: end">
-				<Select_1.default name="animal" placeholder="Select an animal" selectedIconPosition="end" defaultValue="dog">
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="selectedIconPosition: end">
+				<Select name="animal" placeholder="Select an animal" selectedIconPosition="end" defaultValue="dog">
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="selectedIconPosition: end (endSlot overrides check)">
-				<Select_1.default name="animal" placeholder="Select an animal" selectedIconPosition="end" defaultValue="dog">
-					<Select_1.default.Option value="dog" endSlot={<storybook_1.Placeholder w={20} h={20}/>}>
+			<Example.Item title="selectedIconPosition: end (endSlot overrides check)">
+				<Select name="animal" placeholder="Select an animal" selectedIconPosition="end" defaultValue="dog">
+					<Select.Option value="dog" endSlot={<Placeholder w={20} h={20}/>}>
 						Dog
-					</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
 };
-exports.renderValue = {
+export const renderValue = {
     name: "renderValue",
     render: () => {
         const options = [
@@ -268,213 +238,221 @@ exports.renderValue = {
                 subtitle: "Subtitle 2",
             },
         ];
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="default renderer, single">
-					<Select_1.default name="animal" defaultValue="1" placeholder="Nothing selected">
-						{options.map((option) => (<Select_1.default.Option key={option.value} value={option.value}>
-								<Text_1.default weight="medium">{option.label}</Text_1.default>
-								<Text_1.default weight="regular" color="neutral-faded">
+        return (<Example>
+				<Example.Item title="default renderer, single">
+					<Select name="animal" defaultValue="1" placeholder="Nothing selected">
+						{options.map((option) => (<Select.Option key={option.value} value={option.value}>
+								<Text weight="medium">{option.label}</Text>
+								<Text weight="regular" color="neutral-faded">
 									{option.subtitle}
-								</Text_1.default>
-							</Select_1.default.Option>))}
-					</Select_1.default>
-				</storybook_1.Example.Item>
+								</Text>
+							</Select.Option>))}
+					</Select>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="default renderer, multiple">
-					<Select_1.default name="animal" defaultValue={["1"]} multiple placeholder="Nothing selected" renderValue={(args) => args.value.join(", ")}>
-						{options.map((option) => (<Select_1.default.Option key={option.value} value={option.value}>
-								<Text_1.default weight="medium">{option.label}</Text_1.default>
-								<Text_1.default weight="regular" color="neutral-faded">
+				<Example.Item title="default renderer, multiple">
+					<Select name="animal" defaultValue={["1"]} multiple placeholder="Nothing selected" renderValue={(args) => args.value.join(", ")}>
+						{options.map((option) => (<Select.Option key={option.value} value={option.value}>
+								<Text weight="medium">{option.label}</Text>
+								<Text weight="regular" color="neutral-faded">
 									{option.subtitle}
-								</Text_1.default>
-							</Select_1.default.Option>))}
-					</Select_1.default>
-				</storybook_1.Example.Item>
+								</Text>
+							</Select.Option>))}
+					</Select>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="renderValue, single">
-					<Select_1.default name="animal" defaultValue="1" placeholder="Nothing selected" renderValue={(args) => <Badge_1.default>Title {args.value}</Badge_1.default>}>
-						{options.map((option) => (<Select_1.default.Option key={option.value} value={option.value}>
-								<Text_1.default weight="medium">{option.label}</Text_1.default>
-								<Text_1.default weight="regular" color="neutral-faded">
+				<Example.Item title="renderValue, single">
+					<Select name="animal" defaultValue="1" placeholder="Nothing selected" renderValue={(args) => <Badge>Title {args.value}</Badge>}>
+						{options.map((option) => (<Select.Option key={option.value} value={option.value}>
+								<Text weight="medium">{option.label}</Text>
+								<Text weight="regular" color="neutral-faded">
 									{option.subtitle}
-								</Text_1.default>
-							</Select_1.default.Option>))}
-					</Select_1.default>
-				</storybook_1.Example.Item>
+								</Text>
+							</Select.Option>))}
+					</Select>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="renderValue, multiple">
-					<Select_1.default name="animal" defaultValue={["1"]} multiple placeholder="Nothing selected" renderValue={(args) => <Badge_1.default>Titles {args.value.join(", ")}</Badge_1.default>}>
-						{options.map((option) => (<Select_1.default.Option key={option.value} value={option.value}>
-								<Text_1.default weight="medium">{option.label}</Text_1.default>
-								<Text_1.default weight="regular" color="neutral-faded">
+				<Example.Item title="renderValue, multiple">
+					<Select name="animal" defaultValue={["1"]} multiple placeholder="Nothing selected" renderValue={(args) => <Badge>Titles {args.value.join(", ")}</Badge>}>
+						{options.map((option) => (<Select.Option key={option.value} value={option.value}>
+								<Text weight="medium">{option.label}</Text>
+								<Text weight="regular" color="neutral-faded">
 									{option.subtitle}
-								</Text_1.default>
-							</Select_1.default.Option>))}
-					</Select_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+								</Text>
+							</Select.Option>))}
+					</Select>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.renderTrigger = {
+export const renderTrigger = {
     name: "renderTrigger",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="renderTrigger">
-				<Select_1.default name="animal" position="bottom-start" width="200px" size="small" placeholder="Select an animal" onChange={args.handleChange} renderTrigger={(attributes) => (<Actionable_1.default attributes={attributes}>
-							<View_1.default direction="row" gap={1} align="center">
-								<Text_1.default color="neutral-faded">{attributes.children}</Text_1.default>
-							</View_1.default>
-						</Actionable_1.default>)}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: (args) => (<Example>
+			<Example.Item title="renderTrigger">
+				<Select name="animal" position="bottom-start" width="200px" size="small" placeholder="Select an animal" onChange={args.handleChange} renderTrigger={(attributes) => (<Actionable attributes={attributes}>
+							<View direction="row" gap={1} align="center">
+								<Text color="neutral-faded">{attributes.children}</Text>
+							</View>
+						</Actionable>)}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, canvasElement, args }) => {
         const [trigger] = canvas.getAllByRole("button");
         const [hiddenInput] = Array.from(canvasElement.querySelectorAll('input[type="hidden"]'));
-        (0, test_1.expect)(hiddenInput).toHaveAttribute("name", "animal");
-        (0, test_1.expect)(hiddenInput).toHaveValue("");
-        (0, test_1.expect)(trigger).toHaveTextContent("Select an animal");
-        (0, test_1.expect)(trigger).toHaveAttribute("aria-expanded", "false");
-        await test_1.userEvent.click(trigger);
-        (0, test_1.expect)(trigger).toHaveAttribute("aria-expanded", "true");
-        const [_, option] = (0, test_1.within)(canvasElement.ownerDocument.body).getAllByRole("option");
-        await test_1.userEvent.click(option);
-        (0, test_1.expect)(hiddenInput).toHaveValue("turtle");
-        (0, test_1.expect)(trigger).toHaveTextContent("Turtle");
-        (0, test_1.expect)(trigger).toHaveAttribute("aria-expanded", "false");
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(hiddenInput).toHaveAttribute("name", "animal");
+        expect(hiddenInput).toHaveValue("");
+        expect(trigger).toHaveTextContent("Select an animal");
+        expect(trigger).toHaveAttribute("aria-expanded", "false");
+        await userEvent.click(trigger);
+        expect(trigger).toHaveAttribute("aria-expanded", "true");
+        const [_, option] = within(canvasElement.ownerDocument.body).getAllByRole("option");
+        await userEvent.click(option);
+        expect(hiddenInput).toHaveValue("turtle");
+        expect(trigger).toHaveTextContent("Turtle");
+        // Trigger stays expanded until the hide animation ends
+        await waitFor(() => {
+            expect(trigger).toHaveAttribute("aria-expanded", "false");
+        });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "animal",
             value: "turtle",
         });
     },
 };
-exports.error = {
+export const error = {
     name: "error",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="error">
-				<Select_1.default name="animal" placeholder="Select an animal" hasError>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="error">
+				<Select name="animal" placeholder="Select an animal" hasError>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabled">
-				<Select_1.default name="animal-2" placeholder="Select an animal" disabled inputAttributes={{ "aria-label": "Select an animal" }}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="disabled">
+				<Select name="animal-2" placeholder="Select an animal" disabled inputAttributes={{ "aria-label": "Select an animal" }}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const [custom] = canvas.getAllByRole("button");
-        (0, test_1.expect)(custom).toBeDisabled();
+        expect(custom).toBeDisabled();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes, inputAttributes",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="default, className, attributes, inputAttributes">
-				<Select_1.default name="animal" placeholder="Select an animal" className="custom-class" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test-label" }}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="default, className, attributes, inputAttributes">
+				<Select name="animal" placeholder="Select an animal" className="custom-class" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test-label" }}>
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
     play: ({ canvasElement }) => {
         const custom = canvasElement.querySelector(".custom-class");
         const [customInput] = canvasElement.querySelectorAll("input[type='hidden']");
-        (0, test_1.expect)(custom).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(customInput).toHaveAttribute("aria-label", "test-label");
+        expect(custom).toHaveAttribute("id", "test-id");
+        expect(customInput).toHaveAttribute("aria-label", "test-label");
     },
 };
-exports.fallback = {
+export const fallback = {
     name: "test: fallbackAdjustLayout",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="fallback">
-				<Select_1.default name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
-					{[...Array(100)].map((_, index) => (<Select_1.default.Option key={index} value={`item-${index}`}>
+    render: () => (<Example>
+			<Example.Item title="fallback">
+				<Select name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
+					{[...Array(100)].map((_, index) => (<Select.Option key={index} value={`item-${index}`}>
 							Item {index + 1}
-						</Select_1.default.Option>))}
-				</Select_1.default>
+						</Select.Option>))}
+				</Select>
 				<div style={{ height: "1000px" }}></div>
-				<Select_1.default name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
-					{[...Array(100)].map((_, index) => (<Select_1.default.Option key={index} value={`item-${index}`}>
+				<Select name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "Select an animal" }}>
+					{[...Array(100)].map((_, index) => (<Select.Option key={index} value={`item-${index}`}>
 							Item {index + 1}
-						</Select_1.default.Option>))}
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						</Select.Option>))}
+				</Select>
+			</Example.Item>
+		</Example>),
 };
-exports.formControl = {
+export const formControl = {
     name: "test: with FormControl",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="FormControl">
-				<FormControl_1.default hasError>
-					<FormControl_1.default.Label>Animal</FormControl_1.default.Label>
-					<Select_1.default name="animal" placeholder="Select an animal">
-						<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-						<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-					</Select_1.default>
-					<FormControl_1.default.Error>This field is required</FormControl_1.default.Error>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="FormControl">
+				<FormControl hasError>
+					<FormControl.Label>Animal</FormControl.Label>
+					<Select name="animal" placeholder="Select an animal">
+						<Select.Option value="dog">Dog</Select.Option>
+						<Select.Option value="turtle">Turtle</Select.Option>
+					</Select>
+					<FormControl.Error>This field is required</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+    play: async ({ canvas }) => {
+        const trigger = canvas.getByRole("button", { name: /Animal/ });
+        expect(trigger).toHaveAccessibleName("Animal Select an animal");
+        expect(trigger).toHaveAccessibleDescription("This field is required");
+    },
 };
-exports.testComposition = {
+export const testComposition = {
     name: "test: composition",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="default with options">
-				<Select_1.default name="animal" id="animal" placeholder="Select an animal" inputAttributes={{
+    render: () => (<Example>
+			<Example.Item title="default with options">
+				<Select name="animal" id="animal" placeholder="Select an animal" inputAttributes={{
             "aria-label": "Select an animal",
         }}>
-					<Select_1.default.Group>
-						<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-						<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-					</Select_1.default.Group>
-					<Select_1.default.Group>
+					<Select.Group>
+						<Select.Option value="dog">Dog</Select.Option>
+						<Select.Option value="turtle">Turtle</Select.Option>
+					</Select.Group>
+					<Select.Group>
 						<div>hello</div>
-					</Select_1.default.Group>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Select.Group>
+				</Select>
+			</Example.Item>
+		</Example>),
 };
-exports.nativeRender = {
+export const nativeRender = {
     name: "native rendering, options, name, id",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="native with option tags">
-				<Select_1.default name="animal" id="animal" placeholder="Select an animal" inputAttributes={{
+    render: () => (<Example>
+			<Example.Item title="native with option tags">
+				<Select name="animal" id="animal" placeholder="Select an animal" inputAttributes={{
             "aria-label": "Select an animal",
         }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Select>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const select = canvas.getByRole("combobox");
-        const options = (0, test_1.within)(select).getAllByRole("option");
-        (0, test_1.expect)(select).toHaveAttribute("name", "animal");
-        (0, test_1.expect)(select).toHaveAttribute("id", "animal");
-        (0, test_1.expect)(options).toHaveLength(3);
-        (0, test_1.expect)(options[0]).toHaveTextContent("Select an animal");
-        (0, test_1.expect)(options[1]).toHaveTextContent("Dog");
-        (0, test_1.expect)(options[2]).toHaveTextContent("Turtle");
+        const options = within(select).getAllByRole("option");
+        expect(select).toHaveAttribute("name", "animal");
+        expect(select).toHaveAttribute("id", "animal");
+        expect(options).toHaveLength(3);
+        expect(options[0]).toHaveTextContent("Select an animal");
+        expect(options[1]).toHaveTextContent("Dog");
+        expect(options[2]).toHaveTextContent("Turtle");
     },
 };
-exports.nativeOptgroup = {
+export const nativeOptgroup = {
     name: "native with optgroup",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="native with optgroup">
-				<Select_1.default name="animal" id="animal-optgroup" placeholder="Select an animal" inputAttributes={{
+    render: () => (<Example>
+			<Example.Item title="native with optgroup">
+				<Select name="animal" id="animal-optgroup" placeholder="Select an animal" inputAttributes={{
             "aria-label": "Select an animal",
         }}>
 					<optgroup label="Mammals">
@@ -485,207 +463,211 @@ exports.nativeOptgroup = {
 						<option value="turtle">Turtle</option>
 						<option value="lizard">Lizard</option>
 					</optgroup>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Select>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const select = canvas.getByRole("combobox");
-        const options = (0, test_1.within)(select).getAllByRole("option");
-        const optgroups = (0, test_1.within)(select).getAllByRole("group");
-        (0, test_1.expect)(select).toHaveAttribute("name", "animal");
-        (0, test_1.expect)(select).toHaveAttribute("id", "animal-optgroup");
+        const options = within(select).getAllByRole("option");
+        const optgroups = within(select).getAllByRole("group");
+        expect(select).toHaveAttribute("name", "animal");
+        expect(select).toHaveAttribute("id", "animal-optgroup");
         // Should have 2 optgroups
-        (0, test_1.expect)(optgroups).toHaveLength(2);
+        expect(optgroups).toHaveLength(2);
         // Should have 5 options total (1 placeholder + 4 options)
-        (0, test_1.expect)(options).toHaveLength(5);
-        (0, test_1.expect)(options[0]).toHaveTextContent("Select an animal");
-        (0, test_1.expect)(options[1]).toHaveTextContent("Dog");
-        (0, test_1.expect)(options[2]).toHaveTextContent("Cat");
-        (0, test_1.expect)(options[3]).toHaveTextContent("Turtle");
-        (0, test_1.expect)(options[4]).toHaveTextContent("Lizard");
+        expect(options).toHaveLength(5);
+        expect(options[0]).toHaveTextContent("Select an animal");
+        expect(options[1]).toHaveTextContent("Dog");
+        expect(options[2]).toHaveTextContent("Cat");
+        expect(options[3]).toHaveTextContent("Turtle");
+        expect(options[4]).toHaveTextContent("Lizard");
     },
 };
-exports.nativeHandlers = {
+export const nativeHandlers = {
     name: "native, controlled, uncontrolled, onChange",
     args: {
-        handleChange: (0, test_1.fn)(),
-        handleControlledChange: (0, test_1.fn)(),
-        handleClick: (0, test_1.fn)(),
+        handleChange: fn(),
+        handleControlledChange: fn(),
+        handleClick: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="native, uncontrolled, onChange">
-				<Select_1.default name="animal" placeholder="Select an animal" defaultValue="dog" onChange={args.handleChange} inputAttributes={{
+    render: (args) => (<Example>
+			<Example.Item title="native, uncontrolled, onChange">
+				<Select name="animal" placeholder="Select an animal" defaultValue="dog" onChange={args.handleChange} inputAttributes={{
             "aria-label": "Select an animal",
         }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="native, controlled, onChange">
-				<Select_1.default name="animal-2" placeholder="Select an animal" value="dog" onChange={args.handleControlledChange} inputAttributes={{
+				</Select>
+			</Example.Item>
+			<Example.Item title="native, controlled, onChange">
+				<Select name="animal-2" placeholder="Select an animal" value="dog" onChange={args.handleControlledChange} inputAttributes={{
             "aria-label": "Select an animal",
         }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="native, onClick">
-				<Select_1.default name="animal-3" placeholder="Select an animal" defaultValue="dog" onClick={args.handleClick} inputAttributes={{
+				</Select>
+			</Example.Item>
+			<Example.Item title="native, onClick">
+				<Select name="animal-3" placeholder="Select an animal" defaultValue="dog" onClick={args.handleClick} inputAttributes={{
             "aria-label": "Select an animal",
         }}>
 					<option value="dog">Dog</option>
 					<option value="turtle">Turtle</option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Select>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, args }) => {
         const [uncontrolled, controlled, focusable] = canvas.getAllByRole("combobox");
         // Uncontrolled
-        (0, test_1.expect)(uncontrolled).toHaveValue("dog");
-        await test_1.userEvent.selectOptions(uncontrolled, "turtle");
-        (0, test_1.expect)(uncontrolled).toHaveValue("turtle");
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(uncontrolled).toHaveValue("dog");
+        await userEvent.selectOptions(uncontrolled, "turtle");
+        expect(uncontrolled).toHaveValue("turtle");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "animal",
             value: "turtle",
-            event: test_1.expect.objectContaining({ target: uncontrolled }),
+            event: expect.objectContaining({ target: uncontrolled }),
         });
         // Controlled
-        (0, test_1.expect)(controlled).toHaveValue("dog");
-        await test_1.userEvent.selectOptions(controlled, "turtle");
-        (0, test_1.expect)(controlled).toHaveValue("dog");
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenCalledWith({
+        expect(controlled).toHaveValue("dog");
+        await userEvent.selectOptions(controlled, "turtle");
+        expect(controlled).toHaveValue("dog");
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleControlledChange).toHaveBeenCalledWith({
             name: "animal-2",
             value: "turtle",
-            event: test_1.expect.objectContaining({ target: controlled }),
+            event: expect.objectContaining({ target: controlled }),
         });
         // Focus + blur
-        await test_1.userEvent.click(focusable);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: focusable }));
+        await userEvent.click(focusable);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: focusable }));
     },
 };
-exports.defaultHandlers = {
+export const defaultHandlers = {
     name: "default, controlled, uncontrolled, onFocus, onBlur, onChange",
     args: {
-        handleChange: (0, test_1.fn)(),
-        handleControlledChange: (0, test_1.fn)(),
-        handleClick: (0, test_1.fn)(),
+        handleChange: fn(),
+        handleControlledChange: fn(),
+        handleClick: fn(),
     },
-    render: (args) => (<storybook_1.Example>
-			<storybook_1.Example.Item title="default, uncontrolled, onChange">
-				<Select_1.default name="animal" placeholder="Select an animal" defaultValue="dog" onChange={args.handleChange} inputAttributes={{
+    render: (args) => (<Example>
+			<Example.Item title="default, uncontrolled, onChange">
+				<Select name="animal" placeholder="Select an animal" defaultValue="dog" onChange={args.handleChange} inputAttributes={{
             "aria-label": "Select an animal",
         }}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="default, controlled, onChange">
-				<Select_1.default name="animal-2" placeholder="Select an animal" value="dog" onChange={args.handleControlledChange} inputAttributes={{
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+			<Example.Item title="default, controlled, onChange">
+				<Select name="animal-2" placeholder="Select an animal" value="dog" onChange={args.handleControlledChange} inputAttributes={{
             "aria-label": "Select an animal",
         }}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="default, onClick">
-				<Select_1.default name="animal-3" placeholder="Select an animal" defaultValue="dog" onClick={args.handleClick} inputAttributes={{
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+			<Example.Item title="default, onClick">
+				<Select name="animal-3" placeholder="Select an animal" defaultValue="dog" onClick={args.handleClick} inputAttributes={{
             "aria-label": "Select an animal",
         }}>
-					<Select_1.default.Option value="dog">Dog</Select_1.default.Option>
-					<Select_1.default.Option value="turtle">Turtle</Select_1.default.Option>
-				</Select_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					<Select.Option value="dog">Dog</Select.Option>
+					<Select.Option value="turtle">Turtle</Select.Option>
+				</Select>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas, canvasElement, args }) => {
         const [uncontrolled] = canvas.getAllByRole("button");
         const hiddenInputs = canvasElement.querySelectorAll('input[type="hidden"]');
         const [inputUncontrolled] = Array.from(hiddenInputs);
         // Uncontrolled
-        (0, test_1.expect)(inputUncontrolled).toHaveValue("dog");
-        await test_1.userEvent.click(uncontrolled);
-        const [_, uncontrolledOption] = (0, test_1.within)(canvasElement.ownerDocument.body).getAllByRole("option");
-        await test_1.userEvent.click(uncontrolledOption);
-        (0, test_1.expect)(inputUncontrolled).toHaveValue("turtle");
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(inputUncontrolled).toHaveValue("dog");
+        await userEvent.click(uncontrolled);
+        const [_, uncontrolledOption] = within(canvasElement.ownerDocument.body).getAllByRole("option");
+        await userEvent.click(uncontrolledOption);
+        expect(inputUncontrolled).toHaveValue("turtle");
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "animal",
             value: "turtle",
         });
         // Controlled
-        await test_1.userEvent.click(document.body);
+        await userEvent.click(document.body);
+        // Wait for the previous menu to finish its hide animation
+        await waitFor(() => {
+            expect(within(canvasElement.ownerDocument.body).queryAllByRole("option")).toHaveLength(0);
+        });
         const [__, controlled, focusable] = canvas.getAllByRole("button");
         const hiddenInputs2 = canvasElement.querySelectorAll('input[type="hidden"]');
         const [___, inputControlled] = Array.from(hiddenInputs2);
-        (0, test_1.expect)(inputControlled).toHaveValue("dog");
-        await test_1.userEvent.click(controlled);
-        const [____, controlledOption] = (0, test_1.within)(canvasElement.ownerDocument.body).getAllByRole("option");
-        await test_1.userEvent.click(controlledOption);
-        (0, test_1.expect)(inputControlled).toHaveValue("dog");
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleControlledChange).toHaveBeenCalledWith({
+        expect(inputControlled).toHaveValue("dog");
+        await userEvent.click(controlled);
+        const [____, controlledOption] = within(canvasElement.ownerDocument.body).getAllByRole("option");
+        await userEvent.click(controlledOption);
+        expect(inputControlled).toHaveValue("dog");
+        expect(args.handleControlledChange).toHaveBeenCalledTimes(1);
+        expect(args.handleControlledChange).toHaveBeenCalledWith({
             name: "animal-2",
             value: "turtle",
         });
-        await test_1.userEvent.click(focusable);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: focusable }));
+        await userEvent.click(focusable);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: focusable }));
     },
 };
-exports.triggerOnly = {
+export const triggerOnly = {
     name: "trigger only, onClick",
     args: {
-        handleClick: (0, test_1.fn)(),
+        handleClick: fn(),
     },
     render: (args) => {
-        const toggle = (0, useToggle_1.default)();
-        const [value, setValue] = react_1.default.useState("Dog");
+        const toggle = useToggle();
+        const [value, setValue] = React.useState("Dog");
         const handleClick = (e) => {
             args.handleClick(e);
             toggle.toggle();
         };
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="trigger only, onClick">
-					<Select_1.SelectTrigger name="animal" placeholder="Select an animal" onClick={handleClick} value="dog" inputAttributes={{
+        return (<Example>
+				<Example.Item title="trigger only, onClick">
+					<SelectTrigger name="animal" placeholder="Select an animal" onClick={handleClick} value="dog" inputAttributes={{
                 "aria-label": "Select an animal",
             }}>
 						{value}
-					</Select_1.SelectTrigger>
-					<Modal_1.default active={toggle.active} onClose={toggle.deactivate} position="bottom" padding={2} attributes={{ "aria-label": "Select an animal" }}>
+					</SelectTrigger>
+					<Modal active={toggle.active} onClose={toggle.deactivate} position="bottom" padding={2} attributes={{ "aria-label": "Select an animal" }}>
 						{/* oxlint-disable-next-line jsx-a11y/prefer-tag-over-role */}
 						<div role="listbox" aria-label="Select an animal">
-							<MenuItem_1.default roundedCorners onClick={() => {
+							<MenuItem roundedCorners onClick={() => {
                 setValue("Dog");
                 toggle.deactivate();
             }} attributes={{
                 role: "option",
             }}>
 								Dog
-							</MenuItem_1.default>
-							<MenuItem_1.default roundedCorners attributes={{
+							</MenuItem>
+							<MenuItem roundedCorners attributes={{
                 role: "option",
             }} onClick={() => {
                 setValue("Turtle");
                 toggle.deactivate();
             }}>
 								Turtle
-							</MenuItem_1.default>
+							</MenuItem>
 						</div>
-					</Modal_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+					</Modal>
+				</Example.Item>
+			</Example>);
     },
     play: async ({ canvas, args, canvasElement }) => {
         const [trigger] = canvas.getAllByRole("button");
         const hiddenInputs = canvasElement.querySelectorAll('input[type="hidden"]');
         const [input] = Array.from(hiddenInputs);
-        (0, test_1.expect)(trigger).toHaveTextContent("Dog");
-        (0, test_1.expect)(input).toHaveAttribute("name", "animal");
-        (0, test_1.expect)(input).toHaveValue("dog");
-        await test_1.userEvent.click(trigger);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: trigger }));
+        expect(trigger).toHaveTextContent("Dog");
+        expect(input).toHaveAttribute("name", "animal");
+        expect(input).toHaveValue("dog");
+        await userEvent.click(trigger);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: trigger }));
     },
 };