reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,22 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.groupClassName = exports.groupFullWidth = exports.group = exports.className = exports.as = exports.hrefOnClick = exports.onClick = exports.href = exports.composition = exports.aligner = exports.disabled = exports.highlighted = exports.loading = exports.fullWidth = exports.rounded = exports.raised = exports.size = exports.icon = exports.variantAndColor = void 0;
-const test_1 = require("storybook/test");
-const Avatar_1 = __importDefault(require("../../../components/Avatar"));
-const Badge_1 = __importDefault(require("../../../components/Badge"));
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Image_1 = __importDefault(require("../../../components/Image"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-const Plus_1 = __importDefault(require("../../../icons/Plus"));
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Avatar from "../../../components/Avatar/index.js";
+import Badge from "../../../components/Badge/index.js";
+import Button from "../../../components/Button/index.js";
+import Image from "../../../components/Image/index.js";
+import Text from "../../../components/Text/index.js";
+import View from "../../../components/View/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import IconChevronDown from "../../../icons/ChevronDown.js";
+import IconPlus from "../../../icons/Plus.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
     title: "Components/Button",
-    component: Button_1.default,
+    component: Button,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/button",
@@ -24,734 +19,744 @@ exports.default = {
     },
 };
 const imgUrl = "https://images.unsplash.com/photo-1632502361954-0dd92ce797db?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1625&q=80";
-exports.variantAndColor = {
+export const variantAndColor = {
     name: "variant, color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="variant: solid">
-				<View_1.default gap={4} direction="row" align="center">
-					<Button_1.default onClick={() => { }}>Neutral</Button_1.default>
-					<Button_1.default onClick={() => { }} color="primary">
+    render: () => (<Example>
+			<Example.Item title="variant: solid">
+				<View gap={4} direction="row" align="center">
+					<Button onClick={() => { }}>Neutral</Button>
+					<Button onClick={() => { }} color="primary">
 						Primary
-					</Button_1.default>
-					<Button_1.default onClick={() => { }} color="critical">
+					</Button>
+					<Button onClick={() => { }} color="critical">
 						Critical
-					</Button_1.default>
-					<Button_1.default onClick={() => { }} color="positive">
+					</Button>
+					<Button onClick={() => { }} color="positive">
 						Positive
-					</Button_1.default>
-					<View_1.default backgroundColor="primary" borderRadius="medium" padding={2} direction="row" gap={4}>
-						<Button_1.default onClick={() => { }} color="media">
+					</Button>
+					<View backgroundColor="primary" borderRadius="medium" padding={2} direction="row" gap={4}>
+						<Button onClick={() => { }} color="media">
 							Media
-						</Button_1.default>
-					</View_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+						</Button>
+					</View>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: outline">
-				<View_1.default direction="row" gap={4}>
-					<Button_1.default onClick={() => { }} variant="outline">
+			<Example.Item title="variant: outline">
+				<View direction="row" gap={4}>
+					<Button onClick={() => { }} variant="outline">
 						Neutral
-					</Button_1.default>
-					<Button_1.default onClick={() => { }} color="primary" variant="outline">
+					</Button>
+					<Button onClick={() => { }} color="primary" variant="outline">
 						Primary
-					</Button_1.default>
-					<Button_1.default onClick={() => { }} color="critical" variant="outline">
+					</Button>
+					<Button onClick={() => { }} color="critical" variant="outline">
 						Critical
-					</Button_1.default>
-					<Button_1.default onClick={() => { }} color="positive" variant="outline">
+					</Button>
+					<Button onClick={() => { }} color="positive" variant="outline">
 						Positive
-					</Button_1.default>
+					</Button>
 
-					<View_1.default attributes={{ style: { color: "#029CFD" } }}>
-						<Button_1.default onClick={() => { }} color="inherit" variant="outline">
+					<View attributes={{ style: { color: "#029CFD" } }}>
+						<Button onClick={() => { }} color="inherit" variant="outline">
 							Inherit
-						</Button_1.default>
-					</View_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: ghost">
-				<View_1.default direction="row" gap={4} align="center">
-					<Button_1.default onClick={() => { }} variant="ghost">
+						</Button>
+					</View>
+				</View>
+			</Example.Item>
+			<Example.Item title="variant: ghost">
+				<View direction="row" gap={4} align="center">
+					<Button onClick={() => { }} variant="ghost">
 						Neutral
-					</Button_1.default>
-					<Button_1.default onClick={() => { }} color="primary" variant="ghost">
+					</Button>
+					<Button onClick={() => { }} color="primary" variant="ghost">
 						Primary
-					</Button_1.default>
-					<Button_1.default onClick={() => { }} color="critical" variant="ghost">
+					</Button>
+					<Button onClick={() => { }} color="critical" variant="ghost">
 						Critical
-					</Button_1.default>
-					<Button_1.default onClick={() => { }} color="positive" variant="ghost">
+					</Button>
+					<Button onClick={() => { }} color="positive" variant="ghost">
 						Positive
-					</Button_1.default>
+					</Button>
 
-					<View_1.default backgroundColor="primary" borderRadius="medium" padding={2} direction="row" gap={4}>
-						<Button_1.default onClick={() => { }} variant="ghost" color="media">
+					<View backgroundColor="primary" borderRadius="medium" padding={2} direction="row" gap={4}>
+						<Button onClick={() => { }} variant="ghost" color="media">
 							Media
-						</Button_1.default>
-					</View_1.default>
+						</Button>
+					</View>
 
-					<View_1.default attributes={{ style: { color: "#029CFD" } }}>
-						<Button_1.default onClick={() => { }} color="inherit" variant="ghost">
+					<View attributes={{ style: { color: "#029CFD" } }}>
+						<Button onClick={() => { }} color="inherit" variant="ghost">
 							Inherit
-						</Button_1.default>
-					</View_1.default>
+						</Button>
+					</View>
 
-					<View_1.default padding={2} backgroundColor="primary" borderRadius="medium">
-						<Button_1.default onClick={() => { }} color="inherit" variant="ghost">
+					<View padding={2} backgroundColor="primary" borderRadius="medium">
+						<Button onClick={() => { }} color="inherit" variant="ghost">
 							Inherit
-						</Button_1.default>
-					</View_1.default>
+						</Button>
+					</View>
 
-					<View_1.default padding={2} backgroundColor="white" borderRadius="medium">
-						<Button_1.default onClick={() => { }} color="inherit" variant="ghost">
+					<View padding={2} backgroundColor="white" borderRadius="medium">
+						<Button onClick={() => { }} color="inherit" variant="ghost">
 							Inherit
-						</Button_1.default>
-					</View_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						</Button>
+					</View>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.icon = {
+export const icon = {
     name: "icon",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="icon">
-				<Button_1.default onClick={() => { }} icon={Plus_1.default}>
+    render: () => (<Example>
+			<Example.Item title="icon">
+				<Button onClick={() => { }} icon={IconPlus}>
 					Button
-				</Button_1.default>
-			</storybook_1.Example.Item>
+				</Button>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="endIcon">
-				<Button_1.default onClick={() => { }} endIcon={Zap_1.default}>
+			<Example.Item title="endIcon">
+				<Button onClick={() => { }} endIcon={IconZap}>
 					Button
-				</Button_1.default>
-			</storybook_1.Example.Item>
+				</Button>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="icon, endIcon">
-				<Button_1.default onClick={() => { }} icon={Zap_1.default} endIcon={Zap_1.default}>
+			<Example.Item title="icon, endIcon">
+				<Button onClick={() => { }} icon={IconZap} endIcon={IconZap}>
 					Button
-				</Button_1.default>
-			</storybook_1.Example.Item>
+				</Button>
+			</Example.Item>
+
+			<Example.Item title="icon only">
+				<Button onClick={() => { }} icon={IconZap} attributes={{ "aria-label": "Action" }}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="icon only">
-				<Button_1.default onClick={() => { }} icon={Zap_1.default} attributes={{ "aria-label": "Action" }}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="icon, endIcon, icon only">
+				<Button onClick={() => { }} icon={IconZap} endIcon={IconChevronDown} attributes={{ "aria-label": "Options", "data-testid": "icon-end-icon-only" }}/>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const el = canvas.getByTestId("icon-end-icon-only");
+        const [startIcon, endIcon] = el.querySelectorAll("[aria-hidden='true']");
+        const gap = endIcon.getBoundingClientRect().left - startIcon.getBoundingClientRect().right;
+        expect(gap).toBe(parseFloat(getComputedStyle(el).getPropertyValue("--rs-button-gap")));
+    },
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small">
-				<View_1.default gap={4} direction="row">
-					<Button_1.default size="small" icon={Zap_1.default}>
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<View gap={4} direction="row">
+					<Button size="small" icon={IconZap}>
 						Button
-					</Button_1.default>
-					<Button_1.default size="small" variant="outline" icon={Zap_1.default}>
+					</Button>
+					<Button size="small" variant="outline" icon={IconZap}>
 						Button
-					</Button_1.default>
-					<Button_1.default size="small" variant="ghost" icon={Zap_1.default}>
+					</Button>
+					<Button size="small" variant="ghost" icon={IconZap}>
 						Button
-					</Button_1.default>
-					<Button_1.default size="small" variant="outline" icon={Zap_1.default}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Button>
+					<Button size="small" variant="outline" icon={IconZap}/>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: medium">
-				<View_1.default gap={4} direction="row">
-					<Button_1.default icon={Zap_1.default}>Button</Button_1.default>
-					<Button_1.default variant="outline" icon={Zap_1.default}>
+			<Example.Item title="size: medium">
+				<View gap={4} direction="row">
+					<Button icon={IconZap}>Button</Button>
+					<Button variant="outline" icon={IconZap}>
 						Button
-					</Button_1.default>
-					<Button_1.default variant="ghost" icon={Zap_1.default}>
+					</Button>
+					<Button variant="ghost" icon={IconZap}>
 						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Button>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: large">
-				<View_1.default gap={4} direction="row">
-					<Button_1.default size="large" icon={Zap_1.default}>
+			<Example.Item title="size: large">
+				<View gap={4} direction="row">
+					<Button size="large" icon={IconZap}>
 						Button
-					</Button_1.default>
-					<Button_1.default size="large" variant="outline" icon={Zap_1.default}>
+					</Button>
+					<Button size="large" variant="outline" icon={IconZap}>
 						Button
-					</Button_1.default>
-					<Button_1.default size="large" variant="ghost" icon={Zap_1.default}>
+					</Button>
+					<Button size="large" variant="ghost" icon={IconZap}>
 						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Button>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: xlarge">
-				<View_1.default gap={4} direction="row">
-					<Button_1.default size="xlarge" icon={Zap_1.default}>
+			<Example.Item title="size: xlarge">
+				<View gap={4} direction="row">
+					<Button size="xlarge" icon={IconZap}>
 						Button
-					</Button_1.default>
-					<Button_1.default size="xlarge" variant="outline" icon={Zap_1.default}>
+					</Button>
+					<Button size="xlarge" variant="outline" icon={IconZap}>
 						Button
-					</Button_1.default>
-					<Button_1.default size="xlarge" variant="ghost" icon={Zap_1.default}>
+					</Button>
+					<Button size="xlarge" variant="ghost" icon={IconZap}>
 						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Button>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: large, [m+] medium">
-				<Button_1.default size={{ s: "large", m: "medium" }} icon={Zap_1.default}>
+			<Example.Item title="size: large, [m+] medium">
+				<Button size={{ s: "large", m: "medium" }} icon={IconZap}>
 					Responsive
-				</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Button>
+			</Example.Item>
+		</Example>),
 };
-exports.raised = {
+export const raised = {
     name: "raised",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="elevated, color: neutral">
-				<View_1.default direction="row" gap={4}>
-					<Button_1.default raised onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="elevated, color: neutral">
+				<View direction="row" gap={4}>
+					<Button raised onClick={() => { }}>
 						Button
-					</Button_1.default>
-					<Button_1.default raised variant="outline" onClick={() => { }}>
+					</Button>
+					<Button raised variant="outline" onClick={() => { }}>
 						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Button>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="elevated, color">
-				<View_1.default direction="row" gap={4}>
-					<Button_1.default raised color="primary">
+			<Example.Item title="elevated, color">
+				<View direction="row" gap={4}>
+					<Button raised color="primary">
 						Button
-					</Button_1.default>
-					<Button_1.default raised variant="outline" color="primary">
+					</Button>
+					<Button raised variant="outline" color="primary">
 						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Button>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="excluded">
-				<View_1.default backgroundColor="primary" padding={4} borderRadius="medium">
-					<Button_1.default color="media" raised>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="excluded">
+				<View backgroundColor="primary" padding={4} borderRadius="medium">
+					<Button color="media" raised>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.rounded = {
+export const rounded = {
     name: "rounded",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="rounded, size: small, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default rounded size="small" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default rounded variant="outline" size="small" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default rounded variant="ghost" size="small" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="rounded, size: medium, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default rounded icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default rounded variant="outline" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default rounded variant="ghost" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="rounded, size: large, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default rounded size="large" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default rounded variant="outline" size="large" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default rounded variant="ghost" size="large" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="rounded, icon only, all sizes">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default rounded size="small" icon={Zap_1.default}/>
-					<Button_1.default rounded icon={Zap_1.default}/>
-					<Button_1.default rounded size="large" icon={Zap_1.default}/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="rounded, size: small, all variants">
+				<View gap={3} direction="row">
+					<Button rounded size="small" icon={IconZap}>
+						Button
+					</Button>
+					<Button rounded variant="outline" size="small" icon={IconZap}>
+						Button
+					</Button>
+					<Button rounded variant="ghost" size="small" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="rounded, size: medium, all variants">
+				<View gap={3} direction="row">
+					<Button rounded icon={IconZap}>
+						Button
+					</Button>
+					<Button rounded variant="outline" icon={IconZap}>
+						Button
+					</Button>
+					<Button rounded variant="ghost" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="rounded, size: large, all variants">
+				<View gap={3} direction="row">
+					<Button rounded size="large" icon={IconZap}>
+						Button
+					</Button>
+					<Button rounded variant="outline" size="large" icon={IconZap}>
+						Button
+					</Button>
+					<Button rounded variant="ghost" size="large" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="rounded, icon only, all sizes">
+				<View gap={3} direction="row">
+					<Button rounded size="small" icon={IconZap}/>
+					<Button rounded icon={IconZap}/>
+					<Button rounded size="large" icon={IconZap}/>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.fullWidth = {
+export const fullWidth = {
     name: "fullWidth",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="fullWidth, all variants">
-				<View_1.default gap={3}>
-					<Button_1.default fullWidth>Neutral</Button_1.default>
-					<Button_1.default fullWidth variant="outline">
+    render: () => (<Example>
+			<Example.Item title="fullWidth, all variants">
+				<View gap={3}>
+					<Button fullWidth>Neutral</Button>
+					<Button fullWidth variant="outline">
 						Outline
-					</Button_1.default>
-					<Button_1.default fullWidth variant="ghost">
+					</Button>
+					<Button fullWidth variant="ghost">
 						Ghost
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+					</Button>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive fullWidth", "[s] true", "[m+] false"]}>
-				<Button_1.default fullWidth={{ s: true, m: false }}>Button</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title={["responsive fullWidth", "[s] true", "[m+] false"]}>
+				<Button fullWidth={{ s: true, m: false }}>Button</Button>
+			</Example.Item>
+		</Example>),
 };
-exports.loading = {
+export const loading = {
     name: "loading",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="loading, color: neutral, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default loading loadingAriaLabel="Loading">
-						Button
-					</Button_1.default>
-					<Button_1.default loading loadingAriaLabel="Loading" variant="outline">
-						Button
-					</Button_1.default>
-					<Button_1.default loading loadingAriaLabel="Loading" variant="ghost">
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="loading, color critical, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default loading loadingAriaLabel="Loading" color="critical">
-						Button
-					</Button_1.default>
-					<Button_1.default loading loadingAriaLabel="Loading" color="critical" variant="outline">
-						Button
-					</Button_1.default>
-					<Button_1.default loading loadingAriaLabel="Loading" color="critical" variant="ghost">
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="loading, color positive, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default loading loadingAriaLabel="Loading" color="positive">
-						Button
-					</Button_1.default>
-					<Button_1.default loading loadingAriaLabel="Loading" color="positive" variant="outline">
-						Button
-					</Button_1.default>
-					<Button_1.default loading loadingAriaLabel="Loading" color="positive" variant="ghost">
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="loading, color: neutral, all variants">
+				<View gap={3} direction="row">
+					<Button loading loadingAriaLabel="Loading">
+						Button
+					</Button>
+					<Button loading loadingAriaLabel="Loading" variant="outline">
+						Button
+					</Button>
+					<Button loading loadingAriaLabel="Loading" variant="ghost">
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="loading, color critical, all variants">
+				<View gap={3} direction="row">
+					<Button loading loadingAriaLabel="Loading" color="critical">
+						Button
+					</Button>
+					<Button loading loadingAriaLabel="Loading" color="critical" variant="outline">
+						Button
+					</Button>
+					<Button loading loadingAriaLabel="Loading" color="critical" variant="ghost">
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="loading, color positive, all variants">
+				<View gap={3} direction="row">
+					<Button loading loadingAriaLabel="Loading" color="positive">
+						Button
+					</Button>
+					<Button loading loadingAriaLabel="Loading" color="positive" variant="outline">
+						Button
+					</Button>
+					<Button loading loadingAriaLabel="Loading" color="positive" variant="ghost">
+						Button
+					</Button>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="loading, color: media">
-				<View_1.default aspectRatio={16 / 9}>
-					<Image_1.default src={imgUrl}/>
+			<Example.Item title="loading, color: media">
+				<View aspectRatio={16 / 9}>
+					<Image src={imgUrl}/>
 
 					<div style={{ position: "absolute", top: 16, left: 16 }}>
-						<View_1.default gap={3} direction="row">
-							<Button_1.default color="media" loading loadingAriaLabel="Loading">
+						<View gap={3} direction="row">
+							<Button color="media" loading loadingAriaLabel="Loading">
 								Button
-							</Button_1.default>
-						</View_1.default>
+							</Button>
+						</View>
 					</div>
-				</View_1.default>
-			</storybook_1.Example.Item>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["loading, long button text", "button size should stay the same"]}>
-				<Button_1.default loading loadingAriaLabel="Loading" color="primary">
+			<Example.Item title={["loading, long button text", "button size should stay the same"]}>
+				<Button loading loadingAriaLabel="Loading" color="primary">
 					Long button text
-				</Button_1.default>
-			</storybook_1.Example.Item>
+				</Button>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["loading, icon only", "button keep square 1/1 ratio"]}>
-				<Button_1.default icon={Zap_1.default} rounded loading loadingAriaLabel="Loading"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title={["loading, icon only", "button keep square 1/1 ratio"]}>
+				<Button icon={IconZap} rounded loading loadingAriaLabel="Loading"/>
+			</Example.Item>
+		</Example>),
 };
-exports.highlighted = {
+export const highlighted = {
     name: "highlighted",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="highlighted, color: neutral, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default highlighted icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default highlighted variant="outline" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default highlighted variant="ghost" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="highlighted, color: primary, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default highlighted color="primary" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default highlighted color="primary" variant="outline" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default highlighted color="critical" variant="ghost" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="highlighted, color: critical, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default highlighted color="critical" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default highlighted color="critical" variant="outline" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default highlighted color="critical" variant="ghost" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="highlighted, color: positive, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default highlighted color="positive" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default highlighted color="positive" variant="outline" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default highlighted color="positive" variant="ghost" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="highlighted, color: neutral, all variants">
+				<View gap={3} direction="row">
+					<Button highlighted icon={IconZap}>
+						Button
+					</Button>
+					<Button highlighted variant="outline" icon={IconZap}>
+						Button
+					</Button>
+					<Button highlighted variant="ghost" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="highlighted, color: primary, all variants">
+				<View gap={3} direction="row">
+					<Button highlighted color="primary" icon={IconZap}>
+						Button
+					</Button>
+					<Button highlighted color="primary" variant="outline" icon={IconZap}>
+						Button
+					</Button>
+					<Button highlighted color="critical" variant="ghost" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="highlighted, color: critical, all variants">
+				<View gap={3} direction="row">
+					<Button highlighted color="critical" icon={IconZap}>
+						Button
+					</Button>
+					<Button highlighted color="critical" variant="outline" icon={IconZap}>
+						Button
+					</Button>
+					<Button highlighted color="critical" variant="ghost" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="highlighted, color: positive, all variants">
+				<View gap={3} direction="row">
+					<Button highlighted color="positive" icon={IconZap}>
+						Button
+					</Button>
+					<Button highlighted color="positive" variant="outline" icon={IconZap}>
+						Button
+					</Button>
+					<Button highlighted color="positive" variant="ghost" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabled, color: neutral, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default disabled icon={Zap_1.default} onClick={() => { }}>
-						Button
-					</Button_1.default>
-					<Button_1.default disabled variant="outline" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default disabled variant="ghost" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="disabled, color: critical, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default disabled color="critical" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default disabled color="critical" variant="outline" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default disabled color="critical" variant="ghost" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="disabled, color: positive, all variants">
-				<View_1.default gap={3} direction="row">
-					<Button_1.default disabled color="positive" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default disabled color="positive" variant="outline" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-					<Button_1.default disabled color="positive" variant="ghost" icon={Zap_1.default}>
-						Button
-					</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="disabled, color: neutral, all variants">
+				<View gap={3} direction="row">
+					<Button disabled icon={IconZap} onClick={() => { }}>
+						Button
+					</Button>
+					<Button disabled variant="outline" icon={IconZap}>
+						Button
+					</Button>
+					<Button disabled variant="ghost" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="disabled, color: critical, all variants">
+				<View gap={3} direction="row">
+					<Button disabled color="critical" icon={IconZap}>
+						Button
+					</Button>
+					<Button disabled color="critical" variant="outline" icon={IconZap}>
+						Button
+					</Button>
+					<Button disabled color="critical" variant="ghost" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
+			<Example.Item title="disabled, color: positive, all variants">
+				<View gap={3} direction="row">
+					<Button disabled color="positive" icon={IconZap}>
+						Button
+					</Button>
+					<Button disabled color="positive" variant="outline" icon={IconZap}>
+						Button
+					</Button>
+					<Button disabled color="positive" variant="ghost" icon={IconZap}>
+						Button
+					</Button>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="disabled, color: media">
-				<View_1.default aspectRatio={16 / 9}>
-					<Image_1.default src={imgUrl}/>
+			<Example.Item title="disabled, color: media">
+				<View aspectRatio={16 / 9}>
+					<Image src={imgUrl}/>
 
 					<div style={{ position: "absolute", top: 16, left: 16 }}>
-						<View_1.default gap={3} direction="row">
-							<Button_1.default color="media" disabled>
+						<View gap={3} direction="row">
+							<Button color="media" disabled>
 								Button
-							</Button_1.default>
-						</View_1.default>
+							</Button>
+						</View>
 					</div>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</View>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const el = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(el).toBeDisabled();
+        expect(el).toBeDisabled();
     },
 };
-exports.aligner = {
+export const aligner = {
     name: "aligner",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="aligner: all">
-				<View_1.default padding={4} borderColor="neutral-faded" direction="row" gap={2}>
-					<View_1.default.Item grow>Content</View_1.default.Item>
-					<Button_1.default.Aligner>
-						<Button_1.default icon={Zap_1.default} variant="ghost" size="small"/>
-					</Button_1.default.Aligner>
-				</View_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="aligner: all">
+				<View padding={4} borderColor="neutral-faded" direction="row" gap={2}>
+					<View.Item grow>Content</View.Item>
+					<Button.Aligner>
+						<Button icon={IconZap} variant="ghost" size="small"/>
+					</Button.Aligner>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="aligner: top">
-				<View_1.default padding={4} borderColor="neutral-faded" direction="row" gap={2}>
-					<View_1.default.Item grow>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-					<Button_1.default.Aligner side="top">
-						<Button_1.default icon={Zap_1.default} variant="ghost"/>
-					</Button_1.default.Aligner>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="aligner: top">
+				<View padding={4} borderColor="neutral-faded" direction="row" gap={2}>
+					<View.Item grow>
+						<Placeholder />
+					</View.Item>
+					<Button.Aligner side="top">
+						<Button icon={IconZap} variant="ghost"/>
+					</Button.Aligner>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="aligner: top and end">
-				<View_1.default padding={4} borderColor="neutral-faded" direction="row" gap={2}>
-					<View_1.default.Item grow>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-					<Button_1.default.Aligner side={["top", "end"]}>
-						<Button_1.default icon={Zap_1.default} variant="ghost"/>
-					</Button_1.default.Aligner>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="aligner: top and end">
+				<View padding={4} borderColor="neutral-faded" direction="row" gap={2}>
+					<View.Item grow>
+						<Placeholder />
+					</View.Item>
+					<Button.Aligner side={["top", "end"]}>
+						<Button icon={IconZap} variant="ghost"/>
+					</Button.Aligner>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="aligner: bottom">
-				<View_1.default padding={4} borderColor="neutral-faded" direction="row" gap={2} align="end">
-					<View_1.default.Item grow>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-					<Button_1.default.Aligner side="bottom">
-						<Button_1.default icon={Zap_1.default} variant="ghost"/>
-					</Button_1.default.Aligner>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="aligner: bottom">
+				<View padding={4} borderColor="neutral-faded" direction="row" gap={2} align="end">
+					<View.Item grow>
+						<Placeholder />
+					</View.Item>
+					<Button.Aligner side="bottom">
+						<Button icon={IconZap} variant="ghost"/>
+					</Button.Aligner>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="aligner: start">
-				<View_1.default padding={4} borderColor="neutral-faded" gap={2} align="start">
-					<View_1.default.Item grow>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-					<Button_1.default.Aligner side="start">
-						<Button_1.default icon={Zap_1.default} variant="ghost"/>
-					</Button_1.default.Aligner>
-				</View_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="aligner: start">
+				<View padding={4} borderColor="neutral-faded" gap={2} align="start">
+					<View.Item grow>
+						<Placeholder />
+					</View.Item>
+					<Button.Aligner side="start">
+						<Button icon={IconZap} variant="ghost"/>
+					</Button.Aligner>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="aligner: end">
-				<View_1.default padding={4} borderColor="neutral-faded" gap={2} align="end">
-					<View_1.default.Item grow>
-						<storybook_1.Placeholder />
-					</View_1.default.Item>
-					<Button_1.default.Aligner side="end">
-						<Button_1.default icon={Zap_1.default} variant="ghost"/>
-					</Button_1.default.Aligner>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="aligner: end">
+				<View padding={4} borderColor="neutral-faded" gap={2} align="end">
+					<View.Item grow>
+						<Placeholder />
+					</View.Item>
+					<Button.Aligner side="end">
+						<Button icon={IconZap} variant="ghost"/>
+					</Button.Aligner>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.composition = {
+export const composition = {
     name: "test: composition",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="slot start">
-				<Button_1.default variant="outline">
-					<Avatar_1.default size={6} initials="RS"/>
+    render: () => (<Example>
+			<Example.Item title="slot start">
+				<Button variant="outline">
+					<Avatar size={6} initials="RS"/>
 					Label
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="slot end">
-				<Button_1.default variant="outline">
+				</Button>
+			</Example.Item>
+			<Example.Item title="slot end">
+				<Button variant="outline">
 					Label
-					<Badge_1.default size="small">B</Badge_1.default>
-				</Button_1.default>
-			</storybook_1.Example.Item>
+					<Badge size="small">B</Badge>
+				</Button>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="slot with text component">
-				<Button_1.default variant="outline">
-					<Text_1.default>Label</Text_1.default>
-				</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="slot with text component">
+				<Button variant="outline">
+					<Text>Label</Text>
+				</Button>
+			</Example.Item>
+		</Example>),
 };
-exports.href = {
+export const href = {
     name: "href",
-    render: () => <Button_1.default href="https://reshaped.so">Trigger</Button_1.default>,
+    render: () => <Button href="https://reshaped.so">Trigger</Button>,
     play: async ({ canvas }) => {
         const el = canvas.getByRole("link");
-        (0, test_1.expect)(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
     },
 };
-exports.onClick = {
+export const onClick = {
     name: "onClick",
     args: {
-        handleClick: (0, test_1.fn)(),
+        handleClick: fn(),
     },
-    render: (args) => <Button_1.default onClick={args.handleClick}>Trigger</Button_1.default>,
+    render: (args) => <Button onClick={args.handleClick}>Trigger</Button>,
     play: async ({ canvas, args }) => {
         const { handleClick } = args;
         const el = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(el);
-        (0, test_1.expect)(el).toHaveAttribute("type", "button");
-        (0, test_1.expect)(handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: el }));
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("type", "button");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
     },
 };
-exports.hrefOnClick = {
+export const hrefOnClick = {
     name: "href, onClick",
     args: {
-        handleClick: (0, test_1.fn)(),
+        handleClick: fn(),
     },
-    render: (args) => (<Button_1.default onClick={(e) => {
+    render: (args) => (<Button onClick={(e) => {
             e.preventDefault();
             args.handleClick(e);
         }} href="https://reshaped.so">
 			Trigger
-		</Button_1.default>),
+		</Button>),
     play: async ({ canvas, args }) => {
         const { handleClick } = args;
         const el = canvas.getByRole("link");
-        await test_1.userEvent.click(el);
-        (0, test_1.expect)(el).toHaveAttribute("href", "https://reshaped.so");
-        (0, test_1.expect)(handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: el }));
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
     },
 };
-exports.as = {
+export const as = {
     name: "as",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="as: span">
-				<Button_1.default onClick={() => { }} as="span">
+    render: () => (<Example>
+			<Example.Item title="as: span">
+				<Button onClick={() => { }} as="span">
 					Trigger
-				</Button_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="render, disabled">
-				<Button_1.default disabled onClick={() => { }} render={(props) => <section {...props}/>} attributes={{ "data-testid": "render-el" }}>
+				</Button>
+			</Example.Item>
+			<Example.Item title="render, disabled">
+				<Button disabled onClick={() => { }} render={(props) => <section {...props}/>} attributes={{ "data-testid": "render-el" }}>
 					Trigger
-				</Button_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Button>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const [asEl] = canvas.getAllByText("Trigger");
         const renderEl = canvas.getByTestId("render-el");
-        (0, test_1.expect)(asEl.tagName).toBe("SPAN");
-        (0, test_1.expect)(renderEl.tagName).toBe("SECTION");
-        (0, test_1.expect)(renderEl).toHaveAttribute("aria-disabled", "true");
+        expect(asEl.tagName).toBe("SPAN");
+        expect(renderEl.tagName).toBe("SECTION");
+        expect(renderEl).toHaveAttribute("aria-disabled", "true");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Button_1.default className="test-classname" attributes={{ id: "test-id" }}>
+			<Button className="test-classname" attributes={{ id: "test-id" }}>
 				Trigger
-			</Button_1.default>
+			</Button>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };
-exports.group = {
+export const group = {
     name: "group",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="with icon">
-				<Button_1.default.Group>
-					<Button_1.default rounded>Submit</Button_1.default>
-					<Button_1.default rounded icon={Zap_1.default}/>
-				</Button_1.default.Group>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: solid">
-				<View_1.default gap={2} align="start">
-					{["neutral", "primary", "critical", "positive"].map((color) => (<Button_1.default.Group key={color}>
-							<Button_1.default color={color}>One</Button_1.default>
-							<Button_1.default color={color}>Two</Button_1.default>
-							<Button_1.default color={color}>Three</Button_1.default>
-						</Button_1.default.Group>))}
-					<View_1.default backgroundColor="primary" padding={4} borderRadius="medium">
-						<Button_1.default.Group>
-							<Button_1.default color="media">One</Button_1.default>
-							<Button_1.default color="media">Two</Button_1.default>
-							<Button_1.default color="media">Three</Button_1.default>
-						</Button_1.default.Group>
-					</View_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: outline">
-				<View_1.default gap={2} align="start">
-					{["neutral", "primary", "critical", "positive"].map((color) => (<Button_1.default.Group key={color}>
-							<Button_1.default color={color} variant="outline">
+    render: () => (<Example>
+			<Example.Item title="with icon">
+				<Button.Group>
+					<Button rounded>Submit</Button>
+					<Button rounded icon={IconZap}/>
+				</Button.Group>
+			</Example.Item>
+			<Example.Item title="variant: solid">
+				<View gap={2} align="start">
+					{["neutral", "primary", "critical", "positive"].map((color) => (<Button.Group key={color}>
+							<Button color={color}>One</Button>
+							<Button color={color}>Two</Button>
+							<Button color={color}>Three</Button>
+						</Button.Group>))}
+					<View backgroundColor="primary" padding={4} borderRadius="medium">
+						<Button.Group>
+							<Button color="media">One</Button>
+							<Button color="media">Two</Button>
+							<Button color="media">Three</Button>
+						</Button.Group>
+					</View>
+				</View>
+			</Example.Item>
+			<Example.Item title="variant: outline">
+				<View gap={2} align="start">
+					{["neutral", "primary", "critical", "positive"].map((color) => (<Button.Group key={color}>
+							<Button color={color} variant="outline">
 								One
-							</Button_1.default>
-							<Button_1.default color={color} variant="outline">
+							</Button>
+							<Button color={color} variant="outline">
 								Two
-							</Button_1.default>
-							<Button_1.default color={color} variant="outline">
+							</Button>
+							<Button color={color} variant="outline">
 								Three
-							</Button_1.default>
-						</Button_1.default.Group>))}
-				</View_1.default>
-			</storybook_1.Example.Item>
+							</Button>
+						</Button.Group>))}
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: ghost">
-				<View_1.default gap={2} align="start">
-					{["neutral", "primary", "critical", "positive"].map((color) => (<Button_1.default.Group key={color}>
-							<Button_1.default color={color} variant="ghost">
+			<Example.Item title="variant: ghost">
+				<View gap={2} align="start">
+					{["neutral", "primary", "critical", "positive"].map((color) => (<Button.Group key={color}>
+							<Button color={color} variant="ghost">
 								One
-							</Button_1.default>
-							<Button_1.default color={color} variant="ghost">
+							</Button>
+							<Button color={color} variant="ghost">
 								Two
-							</Button_1.default>
-							<Button_1.default color={color} variant="ghost">
+							</Button>
+							<Button color={color} variant="ghost">
 								Three
-							</Button_1.default>
-						</Button_1.default.Group>))}
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+							</Button>
+						</Button.Group>))}
+				</View>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const [el] = canvas.getAllByRole("group");
-        (0, test_1.expect)(el).toBeInTheDocument();
-        (0, test_1.expect)(el.childElementCount).toEqual(2);
+        expect(el).toBeInTheDocument();
+        expect(el.childElementCount).toEqual(2);
     },
 };
-exports.groupFullWidth = {
+export const groupFullWidth = {
     name: "group, fullWidth",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="fullWidth">
-				<Button_1.default.Group>
-					<Button_1.default variant="outline" fullWidth>
+    render: () => (<Example>
+			<Example.Item title="fullWidth">
+				<Button.Group>
+					<Button variant="outline" fullWidth>
 						Button 1
-					</Button_1.default>
-					<Button_1.default variant="outline" fullWidth>
+					</Button>
+					<Button variant="outline" fullWidth>
 						Button 2
-					</Button_1.default>
-					<Button_1.default variant="outline">Button 3</Button_1.default>
-				</Button_1.default.Group>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Button>
+					<Button variant="outline">Button 3</Button>
+				</Button.Group>
+			</Example.Item>
+		</Example>),
 };
-exports.groupClassName = {
+export const groupClassName = {
     name: "group className, attributes",
     render: () => (<div data-testid="root">
-			<Button_1.default.Group className="test-classname" attributes={{ id: "test-id" }}>
-				<Button_1.default>Trigger</Button_1.default>
-			</Button_1.default.Group>
+			<Button.Group className="test-classname" attributes={{ id: "test-id" }}>
+				<Button>Trigger</Button>
+			</Button.Group>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };