reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,19 +1,13 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testComposition = exports.className = exports.onScroll = exports.height = exports.fade = exports.overscrollBehavior = exports.scrollbarDisplay = exports.orientation = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Card_1 = __importDefault(require("../../../components/Card"));
-const ScrollArea_1 = __importDefault(require("../../../components/ScrollArea"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import { expect, fn, userEvent, waitFor } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Card from "../../../components/Card/index.js";
+import ScrollArea from "../../../components/ScrollArea/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/ScrollArea",
-    component: ScrollArea_1.default,
+    component: ScrollArea,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/scroll-area",
@@ -24,12 +18,12 @@ exports.default = {
         },
     },
 };
-exports.base = {
+export const base = {
     name: "base",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="vertical scroll">
-				<ScrollArea_1.default height="100px" scrollbarDisplay="visible">
-					<View_1.default backgroundColor="neutral-faded" padding={4}>
+    render: () => (<Example>
+			<Example.Item title="vertical scroll">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="neutral-faded" padding={4}>
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -37,22 +31,22 @@ exports.base = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="horizontal scroll">
-				<ScrollArea_1.default height="100px" scrollbarDisplay="visible">
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%" height="100px">
+			<Example.Item title="horizontal scroll">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="neutral-faded" padding={4} width="150%" height="100px">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="horizontal and vertical scroll">
-				<ScrollArea_1.default height="100px" scrollbarDisplay="visible">
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+			<Example.Item title="horizontal and vertical scroll">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="neutral-faded" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -60,17 +54,17 @@ exports.base = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</View>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
 };
-exports.orientation = {
+export const orientation = {
     name: "orientation",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="orientation: vertical">
-				<ScrollArea_1.default height="100px" scrollbarDisplay="visible" orientation="vertical">
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+    render: () => (<Example>
+			<Example.Item title="orientation: vertical">
+				<ScrollArea height="100px" scrollbarDisplay="visible" orientation="vertical">
+					<View backgroundColor="neutral-faded" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -78,13 +72,13 @@ exports.orientation = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="orientation: horizontal">
-				<ScrollArea_1.default height="100px" scrollbarDisplay="visible" orientation="horizontal">
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+			<Example.Item title="orientation: horizontal">
+				<ScrollArea height="100px" scrollbarDisplay="visible" orientation="horizontal">
+					<View backgroundColor="neutral-faded" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -92,13 +86,13 @@ exports.orientation = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="orientation: both">
-				<ScrollArea_1.default height="100px" scrollbarDisplay="visible" orientation="both">
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+			<Example.Item title="orientation: both">
+				<ScrollArea height="100px" scrollbarDisplay="visible" orientation="both">
+					<View backgroundColor="neutral-faded" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -106,17 +100,17 @@ exports.orientation = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</View>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
 };
-exports.scrollbarDisplay = {
+export const scrollbarDisplay = {
     name: "scrollbarDisplay",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="scrollbarDisplay: hover">
-				<ScrollArea_1.default height="100px">
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+    render: () => (<Example>
+			<Example.Item title="scrollbarDisplay: hover">
+				<ScrollArea height="100px">
+					<View backgroundColor="neutral-faded" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -124,13 +118,13 @@ exports.scrollbarDisplay = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="scrollbarDisplay: scroll">
-				<ScrollArea_1.default height="100px" scrollbarDisplay="scroll">
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+			<Example.Item title="scrollbarDisplay: scroll">
+				<ScrollArea height="100px" scrollbarDisplay="scroll">
+					<View backgroundColor="neutral-faded" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -138,13 +132,13 @@ exports.scrollbarDisplay = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="scrollbarDisplay: hidden">
-				<ScrollArea_1.default height="100px" scrollbarDisplay="hidden">
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+			<Example.Item title="scrollbarDisplay: hidden">
+				<ScrollArea height="100px" scrollbarDisplay="hidden">
+					<View backgroundColor="neutral-faded" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -152,13 +146,13 @@ exports.scrollbarDisplay = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="scrollbarDisplay: visible">
-				<ScrollArea_1.default height="100px" scrollbarDisplay="visible">
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+			<Example.Item title="scrollbarDisplay: visible">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="neutral-faded" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -166,53 +160,53 @@ exports.scrollbarDisplay = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</View>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
 };
-exports.overscrollBehavior = {
+export const overscrollBehavior = {
     name: "overscrollBehavior",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="overscrollBehavior: auto">
-				<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
-					<View_1.default padding={16} backgroundColor="neutral-faded" borderRadius="medium">
-						<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
-							<View_1.default backgroundColor="neutral" padding={4} borderRadius="medium">
+    render: () => (<Example>
+			<Example.Item title="overscrollBehavior: auto">
+				<ScrollArea height="200px" scrollbarDisplay="visible">
+					<View padding={16} backgroundColor="neutral-faded" borderRadius="medium">
+						<ScrollArea height="200px" scrollbarDisplay="visible">
+							<View backgroundColor="neutral" padding={4} borderRadius="medium">
 								{Array(20)
             .fill("")
             .map((_, index) => {
             return <div key={index}>Item {index + 1}</div>;
         })}
-							</View_1.default>
-						</ScrollArea_1.default>
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+							</View>
+						</ScrollArea>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="overscrollBehavior: contain">
-				<ScrollArea_1.default height="200px" scrollbarDisplay="visible" overscrollBehavior="contain">
-					<View_1.default padding={16} backgroundColor="neutral-faded" borderRadius="medium">
-						<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
-							<View_1.default backgroundColor="neutral" padding={4} borderRadius="medium">
+			<Example.Item title="overscrollBehavior: contain">
+				<ScrollArea height="200px" scrollbarDisplay="visible" overscrollBehavior="contain">
+					<View padding={16} backgroundColor="neutral-faded" borderRadius="medium">
+						<ScrollArea height="200px" scrollbarDisplay="visible">
+							<View backgroundColor="neutral" padding={4} borderRadius="medium">
 								{Array(20)
             .fill("")
             .map((_, index) => {
             return <div key={index}>Item {index + 1}</div>;
         })}
-							</View_1.default>
-						</ScrollArea_1.default>
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+							</View>
+						</ScrollArea>
+					</View>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
 };
-exports.fade = {
+export const fade = {
     name: "fade",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="fade, vertical scroll">
-				<ScrollArea_1.default height="100px" fade>
-					<View_1.default backgroundColor="neutral-faded" padding={4}>
+    render: () => (<Example>
+			<Example.Item title="fade, vertical scroll">
+				<ScrollArea height="100px" fade>
+					<View backgroundColor="neutral-faded" padding={4}>
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -220,22 +214,22 @@ exports.fade = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="fade, horizontal scroll">
-				<ScrollArea_1.default height="100px" fade>
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%" height="100px">
+			<Example.Item title="fade, horizontal scroll">
+				<ScrollArea height="100px" fade>
+					<View backgroundColor="neutral-faded" padding={4} width="150%" height="100px">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="fade, horizontal and vertical scroll">
-				<ScrollArea_1.default height="100px" fade>
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="150%">
+			<Example.Item title="fade, horizontal and vertical scroll">
+				<ScrollArea height="100px" fade>
+					<View backgroundColor="neutral-faded" padding={4} width="150%">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -243,25 +237,25 @@ exports.fade = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="fade, no scrollable overflow">
-				<ScrollArea_1.default height="100px" fade>
-					<View_1.default backgroundColor="neutral-faded" padding={4}>
+			<Example.Item title="fade, no scrollable overflow">
+				<ScrollArea height="100px" fade>
+					<View backgroundColor="neutral-faded" padding={4}>
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</View>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
 };
-exports.height = {
+export const height = {
     name: "height, maxHeight",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="height: 80px">
-				<ScrollArea_1.default height="80px">
-					<View_1.default backgroundColor="neutral-faded" padding={4}>
+    render: () => (<Example>
+			<Example.Item title="height: 80px">
+				<ScrollArea height="80px">
+					<View backgroundColor="neutral-faded" padding={4}>
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -269,13 +263,13 @@ exports.height = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="responsive height: s 80px, m: 120px">
-				<ScrollArea_1.default height={{ s: "80px", m: "120px" }}>
-					<View_1.default backgroundColor="neutral-faded" padding={4}>
+			<Example.Item title="responsive height: s 80px, m: 120px">
+				<ScrollArea height={{ s: "80px", m: "120px" }}>
+					<View backgroundColor="neutral-faded" padding={4}>
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -283,13 +277,13 @@ exports.height = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="maxHeight: 80px">
-				<ScrollArea_1.default maxHeight="80px">
-					<View_1.default backgroundColor="neutral-faded" padding={4}>
+			<Example.Item title="maxHeight: 80px">
+				<ScrollArea maxHeight="80px">
+					<View backgroundColor="neutral-faded" padding={4}>
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -297,13 +291,13 @@ exports.height = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</ScrollArea>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="responsive max height: s 80px, m: 200px">
-				<ScrollArea_1.default maxHeight={{ s: "80px", m: "200px" }}>
-					<View_1.default backgroundColor="neutral-faded" padding={4}>
+			<Example.Item title="responsive max height: s 80px, m: 200px">
+				<ScrollArea maxHeight={{ s: "80px", m: "200px" }}>
+					<View backgroundColor="neutral-faded" padding={4}>
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -311,24 +305,24 @@ exports.height = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</View>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
 };
-exports.onScroll = {
+export const onScroll = {
     name: "ref, onScroll",
     args: {
-        handleScroll: (0, test_1.fn)(),
+        handleScroll: fn(),
     },
     render: (args) => {
-        const ref = react_1.default.useRef(null);
-        return (<View_1.default gap={4}>
-				<View_1.default.Item>
-					<Button_1.default onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button_1.default>
-				</View_1.default.Item>
-				<ScrollArea_1.default height="100px" ref={ref} scrollbarDisplay="visible" onScroll={args.handleScroll}>
-					<View_1.default backgroundColor="neutral-faded" padding={4} width="1000px" height="200px">
+        const ref = React.useRef(null);
+        return (<View gap={4}>
+				<View.Item>
+					<Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>
+				</View.Item>
+				<ScrollArea height="100px" ref={ref} scrollbarDisplay="visible" onScroll={args.handleScroll}>
+					<View backgroundColor="neutral-faded" padding={4} width="1000px" height="200px">
 						Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
 						has been the industry's standard dummy text ever since the 1500s, when an unknown
 						printer took a galley of type and scrambled it to make a type specimen book. It has
@@ -336,80 +330,80 @@ exports.onScroll = {
 						remaining essentially unchanged. It was popularised in the 1960s with the release of
 						Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
 						publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-					</View_1.default>
-				</ScrollArea_1.default>
-			</View_1.default>);
+					</View>
+				</ScrollArea>
+			</View>);
     },
     play: async ({ canvas, args }) => {
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleScroll).toHaveBeenCalledTimes(1);
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleScroll).toHaveBeenCalledTimes(1);
             // x value is flaky, so only testing y here
-            (0, test_1.expect)(args.handleScroll).toHaveBeenCalledWith(test_1.expect.objectContaining({ y: 0.5 }));
+            expect(args.handleScroll).toHaveBeenCalledWith(expect.objectContaining({ y: 0.5 }));
         });
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<ScrollArea_1.default className="test-classname" attributes={{ id: "test-id" }}>
+			<ScrollArea className="test-classname" attributes={{ id: "test-id" }}>
 				Content
-			</ScrollArea_1.default>
+			</ScrollArea>
 		</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.testComposition = {
+export const testComposition = {
     name: "test: composition",
     render: () => {
-        const [count, setCount] = react_1.default.useState(10);
-        const [height, setHeight] = react_1.default.useState(100);
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="composition height">
-					<View_1.default height="200px">
-						<Card_1.default height="100%" padding={0}>
-							<ScrollArea_1.default scrollbarDisplay="visible">
+        const [count, setCount] = React.useState(10);
+        const [height, setHeight] = React.useState(100);
+        return (<Example>
+				<Example.Item title="composition height">
+					<View height="200px">
+						<Card height="100%" padding={0}>
+							<ScrollArea scrollbarDisplay="visible">
 								{/* Should stretch to 100% */}
-								<View_1.default height="100%" padding={4} backgroundColor="primary-faded"/>
-							</ScrollArea_1.default>
-						</Card_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
+								<View height="100%" padding={4} backgroundColor="primary-faded"/>
+							</ScrollArea>
+						</Card>
+					</View>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="dynamic height change, content">
-					<View_1.default gap={4}>
-						<View_1.default.Item>
-							<Button_1.default onClick={() => setCount((prev) => prev + 10)}>Add more items</Button_1.default>
-						</View_1.default.Item>
+				<Example.Item title="dynamic height change, content">
+					<View gap={4}>
+						<View.Item>
+							<Button onClick={() => setCount((prev) => prev + 10)}>Add more items</Button>
+						</View.Item>
 
-						<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
-							<View_1.default gap={2}>
-								{Array.from({ length: count }).map((_, i) => (<View_1.default.Item key={i}>Item {i + 1}</View_1.default.Item>))}
-							</View_1.default>
-						</ScrollArea_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
+						<ScrollArea height="200px" scrollbarDisplay="visible">
+							<View gap={2}>
+								{Array.from({ length: count }).map((_, i) => (<View.Item key={i}>Item {i + 1}</View.Item>))}
+							</View>
+						</ScrollArea>
+					</View>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="dynamic height change, size">
-					<View_1.default gap={4}>
-						<View_1.default.Item>
-							<Button_1.default onClick={() => setHeight((prev) => prev + 10)}>Increase height</Button_1.default>
-						</View_1.default.Item>
+				<Example.Item title="dynamic height change, size">
+					<View gap={4}>
+						<View.Item>
+							<Button onClick={() => setHeight((prev) => prev + 10)}>Increase height</Button>
+						</View.Item>
 
-						<ScrollArea_1.default height="200px" scrollbarDisplay="visible">
-							<View_1.default height={height} padding={4} backgroundColor="neutral-faded"/>
-						</ScrollArea_1.default>
-					</View_1.default>
-				</storybook_1.Example.Item>
+						<ScrollArea height="200px" scrollbarDisplay="visible">
+							<View height={height} padding={4} backgroundColor="neutral-faded"/>
+						</ScrollArea>
+					</View>
+				</Example.Item>
 
-				<storybook_1.Example.Item title="inside a card with rounded corners">
-					<Card_1.default padding={0} height="120px">
-						<ScrollArea_1.default scrollbarDisplay="visible">
-							<View_1.default padding={4}>
+				<Example.Item title="inside a card with rounded corners">
+					<Card padding={0} height="120px">
+						<ScrollArea scrollbarDisplay="visible">
+							<View padding={4}>
 								Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
 								Ipsum has been the industry's standard dummy text ever since the 1500s, when an
 								unknown printer took a galley of type and scrambled it to make a type specimen book.
@@ -418,10 +412,10 @@ exports.testComposition = {
 								the release of Letraset sheets containing Lorem Ipsum passages, and more recently
 								with desktop publishing software like Aldus PageMaker including versions of Lorem
 								Ipsum.
-							</View_1.default>
-						</ScrollArea_1.default>
-					</Card_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+							</View>
+						</ScrollArea>
+					</Card>
+				</Example.Item>
+			</Example>);
     },
 };