reshaped 3.3.10 → 3.3.12

package/dist/components/Resizable/Resizable.js

@@ -19,6 +19,7 @@ const PrivateResizableHandle = (props) => {
     return (_jsx(View.Item, { className: handleClassNames, attributes: {
             role: "button",
             tabIndex: 0,
+            "aria-hidden": true,
             ref: (el) => {
                 // @ts-ignore
                 ref.current = el;
@@ -138,7 +139,9 @@ const Resizable = (props) => {
         }
         if (isComponent && child.type === Resizable.Item && child.props) {
             const index = currentHandleIndex;
-            return (_jsx(PrivateResizableItem, { ...child.props, index: currentItemIndex++, ref: (el) => (itemsRef.current[index] = { el, props: child.props }) }));
+            return (_jsx(PrivateResizableItem, { ...child.props, index: currentItemIndex++, ref: (el) => {
+                    itemsRef.current[index] = { el, props: child.props };
+                } }));
         }
         return null;
     });

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

@@ -15,11 +15,11 @@ export type PrivateItemProps = ItemProps & {
 };
 export type HandleProps = {
     children?: (attributes: {
-        ref: React.RefObject<HTMLButtonElement>;
+        ref: React.RefObject<HTMLButtonElement | null>;
     }) => React.ReactNode;
 };
 export type PrivateHandleProps = HandleProps & {
-    containerRef: React.RefObject<HTMLDivElement>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
     index: number;
     onDrag: (args: UseDragCallbackArgs & {
         index: number;

package/dist/components/Resizable/tests/Resizable.stories.d.ts

@@ -9,6 +9,9 @@ declare const _default: {
         iframe: {
             url: string;
         };
+        a11y: {
+            disable: boolean;
+        };
     };
 };
 export default _default;

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

@@ -9,6 +9,10 @@ export default {
         iframe: {
             url: "https://reshaped.so/docs/utilities/Resizable",
         },
+        // Skip because of the aria-hidden applied to buttons, they're not needed for the screen reader navigation
+        a11y: {
+            disable: true,
+        },
     },
 };
 export const base = () => (<Example>

package/dist/components/Resizable/tests/Resizable.test.stories.d.ts

@@ -0,0 +1,19 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").ResizableProps): import("react").JSX.Element;
+        Item: import("react").FC<import("./..").ResizableItemProps>;
+        Handle: import("react").FC<import("./..").ResizableHandleProps>;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const className: StoryObj;

package/dist/components/Resizable/tests/Resizable.test.stories.js

@@ -0,0 +1,25 @@
+import { expect } from "@storybook/test";
+import Resizable from "../index.js";
+export default {
+    title: "Components/Resizable/tests",
+    component: Resizable,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/Resizable",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Resizable className="test-classname" attributes={{ id: "test-id" }}>
+				<Resizable.Item>Content</Resizable.Item>
+			</Resizable>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Scrim/tests/Scrim.test.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").ScrimProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const className: StoryObj;

package/dist/components/Scrim/tests/Scrim.test.stories.js

@@ -0,0 +1,25 @@
+import { expect } from "@storybook/test";
+import Scrim from "../index.js";
+export default {
+    title: "Components/Scrim/tests",
+    component: Scrim,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/scrim",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Scrim className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</Scrim>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/ScrollArea/ScrollArea.js

@@ -134,6 +134,6 @@ const ScrollArea = forwardRef((props, ref) => {
         observer.observe(contentEl);
         return () => observer.disconnect();
     }, [updateScroll]);
-    return (_jsxs("div", { ...attributes, className: rootClassNames, style: rootVariables, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, children: _jsx("div", { className: s.content, ref: contentRef, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
+    return (_jsxs("div", { ...attributes, className: rootClassNames, style: rootVariables, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, tabIndex: 0, children: _jsx("div", { className: s.content, ref: contentRef, children: children }) }), scrollRatio.y < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { vertical: true, onThumbMove: handleThumbYMove, ratio: scrollRatio.y, position: scrollPosition.y })), scrollRatio.x < 1 && scrollbarDisplay !== "hidden" && (_jsx(ScrollAreaBar, { onThumbMove: handleThumbXMove, ratio: scrollRatio.x, position: scrollPosition.x }))] }));
 });
 export default ScrollArea;

package/dist/components/ScrollArea/ScrollArea.module.css

@@ -1 +1 @@
-.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);overflow:hidden}.root,.scrollable{height:100%;position:relative}.scrollable{overflow:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}
+.root{--rs-scroll-area-thumb-size:calc(var(--rs-unit-x1) * 1.5);--rs-scroll-area-thumb-offset:calc(var(--rs-unit-x1) / 2);height:100%;overflow:hidden;position:relative}[data-rs-keyboard] .root:has(.scrollable:focus){box-shadow:var(--rs-focus-shadow)}.scrollable{height:100%;overflow:auto;position:relative;scrollbar-width:none;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{display:none;height:0;width:0}.content{display:inline-block;min-height:100%;min-width:100%;vertical-align:top}.scrollbar{box-sizing:initial;padding:var(--rs-scroll-area-thumb-offset);position:absolute}.thumb{height:100%;position:relative;width:100%}.thumb:before{background:var(--rs-color-foreground-neutral);border-radius:999px;content:"";display:block;opacity:0;position:absolute;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}.--scrollbar-y{inset-block:0;inset-inline-end:0;width:var(--rs-scroll-area-thumb-size)}.--scrollbar-y .thumb:before{height:calc(var(--rs-scroll-area-ratio) * 100%);inset-block-start:calc(var(--rs-scroll-area-position) * 100%);width:100%}.--scrollbar-x{height:var(--rs-scroll-area-thumb-size);inset-block-end:0;inset-inline:0}.--scrollbar-x .thumb:before{height:100%;inset-inline-start:calc(var(--rs-scroll-area-position) * 100%);width:calc(var(--rs-scroll-area-ratio) * 100%)}.--scrollbar-y:not(:last-child){inset-block-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--scrollbar-y~.--scrollbar-x{inset-inline-end:calc(var(--rs-scroll-area-thumb-size) + var(--rs-scroll-area-thumb-offset) * 2)}.--display-hover:hover>.scrollbar .thumb:before,.--display-visible .thumb:before{opacity:.2}.--display-hover:hover .--scrollbar-dragging .thumb:before,.--scrollbar-dragging .thumb:before,.scrollbar:hover .thumb:before{opacity:.32}

package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { StoryObj } from "@storybook/react";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
@@ -6,10 +7,22 @@ declare const _default: {
         iframe: {
             url: string;
         };
+        a11y: {
+            disable: boolean;
+        };
     };
 };
 export default _default;
-export declare const direction: () => React.JSX.Element;
-export declare const visibility: () => React.JSX.Element;
-export declare const ref: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
+export declare const direction: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const visibility: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const composition: {
+    name: string;
+    render: () => React.JSX.Element;
+};
+export declare const dynamicHeight: StoryObj;

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

@@ -1,10 +1,8 @@
 import React from "react";
-import { useRef } from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import ScrollArea from "../index.js";
 import View from "../../View/index.js";
 import Button from "../../Button/index.js";
-import useToggle from "../../../hooks/useToggle.js";
 export default {
     title: "Utilities/ScrollArea",
     component: ScrollArea,
@@ -12,150 +10,105 @@ export default {
         iframe: {
             url: "https://reshaped.so/docs/utilities/scroll-area",
         },
+        // Skip because axe core incorrectly reports contrast issues
+        a11y: {
+            disable: true,
+        },
     },
 };
-const Demo = () => {
-    const ref = useRef(null);
-    return (<View gap={4}>
-			<Button onClick={() => ref.current?.scrollTo({ top: 100, behavior: "smooth" })}>
-				Scroll
-			</Button>
-			<ScrollArea height="100px" scrollbarDisplay="visible" ref={ref}>
-				<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 survived not only
-					five centuries, but also the leap into electronic typesetting, 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>
-			</ScrollArea>
-		</View>);
-};
-export const direction = () => (<Example>
-		<Example.Item title="vertical">
-			<ScrollArea height="100px" scrollbarDisplay="visible" onScroll={console.log}>
-				<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 survived not only
-					five centuries, but also the leap into electronic typesetting, 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>
-			</ScrollArea>
-		</Example.Item>
-		<Example.Item title="horizontal">
-			<ScrollArea height="120px" scrollbarDisplay="visible" onScroll={console.log}>
-				<View backgroundColor="neutral-faded" padding={4} width="500px">
-					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>
-			</ScrollArea>
-		</Example.Item>
-		<Example.Item title="both directions">
-			<ScrollArea height="100px" scrollbarDisplay="visible">
-				<View backgroundColor="neutral-faded" padding={4} width="500px">
-					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 survived not only
-					five centuries, but also the leap into electronic typesetting, 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>
-			</ScrollArea>
-		</Example.Item>
-	</Example>);
-export const visibility = () => (<Example>
-		<Example.Item title="visibility: hover">
-			<ScrollArea height="100px">
-				<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 survived not only
-					five centuries, but also the leap into electronic typesetting, 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>
-			</ScrollArea>
-		</Example.Item>
-		<Example.Item title="visibility: hidden">
-			<ScrollArea height="100px" scrollbarDisplay="hidden">
-				<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 survived not only
-					five centuries, but also the leap into electronic typesetting, 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>
-			</ScrollArea>
-		</Example.Item>
-		<Example.Item title="visibility: visible">
-			<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 survived not only
-					five centuries, but also the leap into electronic typesetting, 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>
-			</ScrollArea>
-		</Example.Item>
-	</Example>);
-export const ref = () => (<Example>
-		<Example.Item title="external ref">
-			<Demo />
-		</Example.Item>
-	</Example>);
-export const edgeCases = () => {
-    const toggle = useToggle(true);
-    const [count, setCount] = React.useState(20);
-    return (<Example>
-			<Example.Item title="dynamic content update">
-				<View gap={4}>
-					<Button onClick={toggle.toggle}>Toggle</Button>
-					<ScrollArea height="100px" scrollbarDisplay="visible" ref={ref}>
-						<View backgroundColor="neutral-faded" padding={4} width={toggle.active ? "120%" : "90%"}>
-							{toggle.active ? (<React.Fragment>
-									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 survived not only five centuries, but also the leap into electronic
-									typesetting, 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.
-								</React.Fragment>) : null}
-						</View>
-					</ScrollArea>
-				</View>
+export const direction = {
+    name: "direction",
+    render: () => (<Example>
+			<Example.Item title="vertical">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="elevation-base" 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
+						survived not only five centuries, but also the leap into electronic typesetting,
+						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>
+				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="add items">
-				<View gap={4}>
-					<Button onClick={() => setCount((prev) => prev + 10)}>Add</Button>
+			<Example.Item title="horizontal">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="elevation-base" 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>
+				</ScrollArea>
+			</Example.Item>
 
-					<ScrollArea height="200px" scrollbarDisplay="visible">
-						{Array(count)
-            .fill("")
-            .map((_, index) => {
-            return <div key={index}>Item {index + 1}</div>;
-        })}
-					</ScrollArea>
-				</View>
+			<Example.Item title="horizontal, vertical">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="elevation-base" 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
+						survived not only five centuries, but also the leap into electronic typesetting,
+						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>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
+};
+export const visibility = {
+    name: "scrollbarDisplay",
+    render: () => (<Example>
+			<Example.Item title="visibility: hover">
+				<ScrollArea height="100px">
+					<View backgroundColor="elevation-base" 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
+						survived not only five centuries, but also the leap into electronic typesetting,
+						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>
+				</ScrollArea>
+			</Example.Item>
+
+			<Example.Item title="visibility: hidden">
+				<ScrollArea height="100px" scrollbarDisplay="hidden">
+					<View backgroundColor="elevation-base" 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
+						survived not only five centuries, but also the leap into electronic typesetting,
+						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>
+				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="nested, hover only for the current area">
+			<Example.Item title="visibility: visible">
+				<ScrollArea height="100px" scrollbarDisplay="visible">
+					<View backgroundColor="elevation-base" 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
+						survived not only five centuries, but also the leap into electronic typesetting,
+						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>
+				</ScrollArea>
+			</Example.Item>
+		</Example>),
+};
+export const composition = {
+    name: "composition",
+    render: () => (<Example>
+			<Example.Item title="nested">
 				<ScrollArea height="100px">
-					<View padding={8}>
+					<View padding={4} paddingInline={16}>
 						<ScrollArea height="200px">
 							{Array(20)
             .fill("")
@@ -166,5 +119,27 @@ export const edgeCases = () => {
 					</View>
 				</ScrollArea>
 			</Example.Item>
-		</Example>);
+		</Example>),
+};
+export const dynamicHeight = {
+    name: "composition, dynamic height change",
+    render: () => {
+        const [count, setCount] = React.useState(10);
+        return (<View gap={4}>
+				<View.Item>
+					<Button onClick={() => setCount((prev) => prev + 10)}>Add more items</Button>
+				</View.Item>
+
+				<ScrollArea height="200px" scrollbarDisplay="visible">
+					<View gap={2}>
+						{new Array(count).fill("").map((_, i) => (<View.Item key={i}>Item {i + 1}</View.Item>))}
+					</View>
+				</ScrollArea>
+			</View>);
+    },
+    // TODO: After Using play(), Storybook makes the scroll lag, but not when triggered manually in the browser
+    // play: async ({ canvas }) => {
+    // 	const trigger = canvas.getAllByRole("button")[0];
+    // 	await userEvent.click(trigger);
+    // },
 };

package/dist/components/ScrollArea/tests/ScrollArea.test.stories.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        a11y: {
+            disable: boolean;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const onScroll: StoryObj<{
+    handleScroll: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { expect, fn, userEvent, waitFor } from "@storybook/test";
+import Button from "../../Button/index.js";
+import ScrollArea from "../index.js";
+import View from "../../View/index.js";
+export default {
+    title: "Utilities/ScrollArea/tests",
+    component: ScrollArea,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/text",
+        },
+        // Skip because axe core incorrectly reports contrast issues
+        a11y: {
+            disable: true,
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const onScroll = {
+    name: "ref, onScroll",
+    args: {
+        handleScroll: fn(),
+    },
+    render: (args) => {
+        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
+						survived not only five centuries, but also the leap into electronic typesetting,
+						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>
+				</ScrollArea>
+			</View>);
+    },
+    play: async ({ canvas, args }) => {
+        const trigger = canvas.getAllByRole("button")[0];
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleScroll).toHaveBeenCalledTimes(1);
+            // x value is flaky, so only testing y here
+            expect(args.handleScroll).toHaveBeenCalledWith(expect.objectContaining({ y: 0.5 }));
+        });
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<ScrollArea className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</ScrollArea>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Select/tests/Select.stories.d.ts

@@ -8,7 +8,7 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const selection: () => import("react").JSX.Element;
+export declare const value: () => import("react").JSX.Element;
 export declare const variants: () => import("react").JSX.Element;
 export declare const size: () => import("react").JSX.Element;
 export declare const disabled: () => import("react").JSX.Element;

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

@@ -13,23 +13,16 @@ export default {
         },
     },
 };
-export const selection = () => (<Example>
-		<Example.Item title="unselected, placeholder">
-			<Select name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "test select" }} options={[
+export const value = () => (<Example>
+		<Example.Item title="defaultValue">
+			<Select name="animal" defaultValue="dog" inputAttributes={{ "aria-label": "test select" }} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]}/>
 		</Example.Item>
 
-		<Example.Item title="selected, controlled">
-			<Select name="animal" inputAttributes={{ "aria-label": "test select" }} placeholder="Select an animal" defaultValue="dog" options={[
-        { label: "Dog", value: "dog" },
-        { label: "Turtle", value: "turtle" },
-    ]}/>
-		</Example.Item>
-
-		<Example.Item title="selected, uncontrolled">
-			<Select name="animal" inputAttributes={{ "aria-label": "test select" }} placeholder="Select an animal" value="dog" options={[
+		<Example.Item title="placeholder">
+			<Select name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "test select" }} options={[
         { label: "Dog", value: "dog" },
         { label: "Turtle", value: "turtle" },
     ]}/>

package/dist/components/Select/tests/Select.test.stories.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").SelectProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const startSlot: StoryObj;
+export declare const placeholder: StoryObj;
+export declare const id: StoryObj;
+export declare const disabled: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;