reshaped 3.5.4-canary.0 → 3.6.0-canary.0

package/dist/components/Flyout/utilities/flyout.js

@@ -0,0 +1,79 @@
+import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
+import calculatePosition from "./calculatePosition.js";
+import getPositionFallbacks from "./getPositionFallbacks.js";
+import isFullyVisible from "./isFullyVisible.js";
+import { resetStyles } from "../Flyout.constants.js";
+/**
+ * Set position of the target element to fit on the screen
+ */
+const flyout = (args) => {
+    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, position, fallbackPositions, width, container: passedContainer, lastUsedFallback, onFallback, rtl, } = args;
+    const targetClone = flyoutEl.cloneNode(true);
+    const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
+    const unitModifier = baseUnit ? parseInt(baseUnit) : 4;
+    const triggerBounds = passedTriggerBounds || triggerEl?.getBoundingClientRect();
+    if (!triggerBounds)
+        return;
+    const resolvedTriggerBounds = getRectFromCoordinates(triggerBounds);
+    // Reset all styles applied on the previous hook execution
+    targetClone.style.cssText = "";
+    Object.keys(resetStyles).forEach((key) => {
+        const value = resetStyles[key];
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        if (value)
+            targetClone.style[key] = value.toString();
+    });
+    if (width === "trigger") {
+        targetClone.style.width = `${resolvedTriggerBounds.width}px`;
+    }
+    else if (width && width !== "full") {
+        targetClone.style.width = width;
+    }
+    const shadowRoot = triggerEl && getShadowRoot(triggerEl);
+    // Insert inside shadow root if possible to make sure styles are applied correctly
+    (shadowRoot || document.body).appendChild(targetClone);
+    const cloneRect = targetClone.getBoundingClientRect();
+    const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
+    const closestFixedContainer = !passedContainer && triggerEl ? findClosestPositionContainer({ el: triggerEl }) : undefined;
+    const container = passedContainer ||
+        // Render inside fixed position container automatically to keep their position synced on scroll
+        closestFixedContainer ||
+        document.body;
+    const renderContainerBounds = container.getBoundingClientRect();
+    const visualContainerBounds = (passedContainer || document.body).getBoundingClientRect();
+    let calculated = null;
+    const testOrder = getPositionFallbacks(position, fallbackPositions);
+    testOrder.some((currentPosition) => {
+        const tested = calculatePosition({
+            triggerBounds: resolvedTriggerBounds,
+            flyoutBounds,
+            containerBounds: renderContainerBounds,
+            position: currentPosition,
+            contentGap: contentGap * unitModifier,
+            contentShift: contentShift * unitModifier,
+            rtl,
+            width,
+            passedContainer,
+        });
+        const visible = isFullyVisible({
+            flyoutBounds: tested.boundaries,
+            visualContainerBounds,
+            renderContainerBounds,
+            container,
+        });
+        const validPosition = visible || fallbackPositions?.length === 0;
+        // Saving first try in case non of the options work
+        if (validPosition || lastUsedFallback === currentPosition) {
+            calculated = tested;
+            onFallback(currentPosition);
+        }
+        return validPosition;
+    });
+    if (!calculated) {
+        throw new Error(`[Reshaped] Can't calculate styles for the ${position} position`);
+    }
+    targetClone.parentNode?.removeChild(targetClone);
+    return calculated;
+};
+export default flyout;

package/dist/components/Flyout/utilities/isFullyVisible.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Check if element visually fits on the screen
+ */
+declare const isFullyVisible: (args: {
+    flyoutBounds: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    visualContainerBounds: DOMRect;
+    renderContainerBounds: DOMRect;
+    container: HTMLElement;
+}) => boolean;
+export default isFullyVisible;

package/dist/components/Flyout/utilities/isFullyVisible.js

@@ -0,0 +1,24 @@
+/**
+ * Check if element visually fits on the screen
+ */
+const isFullyVisible = (args) => {
+    const { flyoutBounds, visualContainerBounds, renderContainerBounds, container } = args;
+    const scrollX = container === document.body ? window.scrollX : container.scrollLeft;
+    const scrollY = container === document.body ? window.scrollY : container.scrollTop;
+    if (renderContainerBounds.left + flyoutBounds.left - scrollX < visualContainerBounds.left) {
+        return false;
+    }
+    if (renderContainerBounds.top + flyoutBounds.top - scrollY < visualContainerBounds.top) {
+        return false;
+    }
+    if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width - scrollX >
+        visualContainerBounds.right) {
+        return false;
+    }
+    if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height - scrollY >
+        visualContainerBounds.bottom) {
+        return false;
+    }
+    return true;
+};
+export default isFullyVisible;

package/dist/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 import { type ActionableRef } from "../Actionable";
-declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "type" | "onClick" | "href" | "stopPropagation"> & {
+declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "children" | "className" | "attributes" | "type" | "href" | "onClick" | "stopPropagation"> & {
     icon?: import("../Icon").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";

package/dist/components/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import Flyout from "../_private/Flyout";
+import Flyout from "../Flyout";
 import { type DismissibleProps } from "../Dismissible";
 import type * as T from "./Popover.types";
 declare const Popover: React.FC<T.Props> & {

package/dist/components/Popover/Popover.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "../../utilities/helpers.js";
-import Flyout, { useFlyoutContext } from "../_private/Flyout/index.js";
+import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import Dismissible from "../Dismissible/index.js";
 import s from "./Popover.module.css";
 import getPaddingStyles from "../../styles/padding/index.js";

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

@@ -1,8 +1,9 @@
 import type React from "react";
-import type { FlyoutProps, FlyoutInstance } from "../_private/Flyout";
+import type { FlyoutProps, FlyoutInstance } from "../Flyout";
 export type Instance = FlyoutInstance;
 export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef" | "initialFocusRef" | "originCoordinates"> & {
     children?: React.ReactNode;
     padding?: number;
+    /** @deprecated use Flyout utility instead, will be removed in v4 */
     variant?: "elevated" | "headless";
 };

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

@@ -2,8 +2,8 @@ declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PopoverProps> & {
         Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
-        Trigger: import("react").FC<import("../../_private/Flyout").FlyoutTriggerProps>;
-        Content: import("react").FC<import("../../_private/Flyout").FlyoutContentProps>;
+        Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
+        Content: import("react").FC<import("../../Flyout").FlyoutContentProps>;
     };
     parameters: {
         iframe: {

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

@@ -4,8 +4,8 @@ declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PopoverProps> & {
         Dismissible: import("react").FC<import("../../Dismissible").DismissibleProps>;
-        Trigger: import("react").FC<import("../../_private/Flyout").FlyoutTriggerProps>;
-        Content: import("react").FC<import("../../_private/Flyout").FlyoutContentProps>;
+        Trigger: import("react").FC<import("../../Flyout").FlyoutTriggerProps>;
+        Content: import("react").FC<import("../../Flyout").FlyoutContentProps>;
     };
     parameters: {
         iframe: {

package/dist/components/Radio/Radio.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-radio-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-line-height)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-line-height) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-line-height) * .4)}.--size-small{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .decorator:after{background-color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}@media (--rs-viewport-m ){.--size-small--m{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--m{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--l{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}
+@layer rs.radio.base;@layer rs.radio.error;@layer rs.radio.checked;@layer rs.radio.disabled;@layer rs.radio.base{.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-radio-gap);user-select:none;vertical-align:top;-webkit-tap-highlight-color:transparent}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-radio-line-height);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-radio-line-height)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:calc(var(--rs-radio-line-height) * .4);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:calc(var(--rs-radio-line-height) * .4)}.--size-small{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}}@layer rs.radio.error{.root.--error .decorator{border-color:var(--rs-color-border-critical)}}@layer rs.radio.checked{.input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}}@layer rs.radio.disabled{.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .decorator:after{background-color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}}@media (--rs-viewport-m ){.--size-small--m{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--m{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--m{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-l ){.--size-small--l{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--l{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--l{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-radio-line-height:var(--rs-line-height-caption-1);--rs-radio-gap:var(--rs-unit-x1)}.--size-medium--xl{--rs-radio-line-height:var(--rs-line-height-body-3);--rs-radio-gap:var(--rs-unit-x2)}.--size-large--xl{--rs-radio-line-height:var(--rs-line-height-body-2);--rs-radio-gap:var(--rs-unit-x2)}}

package/dist/components/ScrollArea/ScrollArea.js

@@ -73,8 +73,11 @@ const ScrollArea = forwardRef((props, ref) => {
     const contentRef = React.useRef(null);
     const heightStyles = getHeightStyles(height);
     const maxHeightStyles = getMaxHeightStyles(maxHeight);
-    const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles?.classNames, className);
-    const contentClassNames = classNames(s.content, maxHeightStyles?.classNames);
+    const rootClassNames = classNames(s.root, scrollbarDisplay && s[`--display-${scrollbarDisplay}`], heightStyles?.classNames, maxHeightStyles?.classNames, className);
+    const rootVariables = {
+        ...heightStyles?.variables,
+        ...maxHeightStyles?.variables,
+    };
     const updateScroll = React.useCallback(() => {
         const scrollableEl = scrollableRef.current;
         if (!scrollableEl)
@@ -131,7 +134,7 @@ const ScrollArea = forwardRef((props, ref) => {
         observer.observe(contentEl);
         return () => observer.disconnect();
     }, [updateScroll]);
-    return (_jsxs("div", { ...attributes, className: rootClassNames, style: { ...heightStyles?.variables }, children: [_jsx("div", { className: s.scrollable, ref: scrollableRef, onScroll: handleScroll, tabIndex: 0, children: _jsx("div", { className: contentClassNames, ref: contentRef, style: { ...maxHeightStyles?.variables }, 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 }))] }));
 });
 ScrollArea.displayName = "ScrollArea";
 export default ScrollArea;

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { StoryObj } from "@storybook/react";
-import { Mock } from "@storybook/test";
 declare const _default: {
     title: string;
     component: React.ForwardRefExoticComponent<import("./..").ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
@@ -14,24 +13,16 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: {
+export declare const direction: {
     name: string;
     render: () => React.JSX.Element;
 };
-export declare const scrollbarDisplay: {
+export declare const visibility: {
     name: string;
     render: () => React.JSX.Element;
 };
-export declare const height: {
+export declare const composition: {
     name: string;
     render: () => React.JSX.Element;
 };
-export declare const onScroll: StoryObj<{
-    handleScroll: Mock;
-}>;
-export declare const className: StoryObj;
-export declare const testNested: {
-    name: string;
-    render: () => React.JSX.Element;
-};
-export declare const testDynamicHeight: StoryObj;
+export declare const dynamicHeight: StoryObj;

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

@@ -1,5 +1,4 @@
 import React from "react";
-import { userEvent, expect, waitFor, fn } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import ScrollArea from "../index.js";
 import View from "../../View/index.js";
@@ -17,10 +16,10 @@ export default {
         },
     },
 };
-export const base = {
-    name: "base",
+export const direction = {
+    name: "direction",
     render: () => (<Example>
-			<Example.Item title="vertical scroll">
+			<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
@@ -34,7 +33,7 @@ export const base = {
 				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="horizontal scroll">
+			<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
@@ -43,7 +42,7 @@ export const base = {
 				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="horizontal and vertical scroll">
+			<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
@@ -58,57 +57,11 @@ export const base = {
 			</Example.Item>
 		</Example>),
 };
-export const scrollbarDisplay = {
+export const visibility = {
     name: "scrollbarDisplay",
     render: () => (<Example>
-			<Example.Item title="scrollbarDisplay: hover">
+			<Example.Item title="visibility: hover">
 				<ScrollArea height="100px">
-					<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.Item title="scrollbarDisplay: hidden">
-				<ScrollArea height="100px" scrollbarDisplay="hidden">
-					<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.Item title="scrollbarDisplay: visible">
-				<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 height = {
-    name: "height, maxHeight",
-    render: () => (<Example>
-			<Example.Item title="height: 80px">
-				<ScrollArea height="80px">
 					<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
@@ -121,22 +74,8 @@ export const height = {
 				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="responsive height: s 80px, m: 120px">
-				<ScrollArea height={{ s: "80px", m: "120px" }}>
-					<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="maxHeight: 80px">
-				<ScrollArea maxHeight="80px">
+			<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
@@ -149,8 +88,8 @@ export const height = {
 				</ScrollArea>
 			</Example.Item>
 
-			<Example.Item title="responsive max height: s 80px, m: 200px">
-				<ScrollArea maxHeight={{ s: "80px", m: "200px" }}>
+			<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
@@ -164,69 +103,26 @@ export const height = {
 			</Example.Item>
 		</Example>),
 };
-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");
-    },
-};
-export const testNested = {
-    name: "test: nested",
-    render: () => (<ScrollArea height="100px" scrollbarDisplay="visible">
-			<View padding={4} paddingInline={16}>
-				<ScrollArea height="200px" scrollbarDisplay="visible">
-					{Array(20)
+export const composition = {
+    name: "composition",
+    render: () => (<Example>
+			<Example.Item title="nested">
+				<ScrollArea height="100px">
+					<View padding={4} paddingInline={16}>
+						<ScrollArea height="200px">
+							{Array(20)
             .fill("")
             .map((_, index) => {
             return <div key={index}>Item {index + 1}</div>;
         })}
+						</ScrollArea>
+					</View>
 				</ScrollArea>
-			</View>
-		</ScrollArea>),
+			</Example.Item>
+		</Example>),
 };
-export const testDynamicHeight = {
-    name: "test: dynamic height change",
+export const dynamicHeight = {
+    name: "composition, dynamic height change",
     render: () => {
         const [count, setCount] = React.useState(10);
         return (<View gap={4}>
@@ -241,4 +137,9 @@ export const testDynamicHeight = {
 				</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: "Utility components/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/Tabs/TabsContext.d.ts

@@ -4,13 +4,13 @@ export declare const TabsProvider: React.Provider<T.Context>;
 export declare const useTabs: (value?: string) => {
     panelId: string | undefined;
     buttonId: string | undefined;
+    variant?: "bordered" | "borderless" | "pills" | "pills-elevated" | undefined;
     name?: string | undefined;
+    direction?: "column" | "row" | undefined;
     onChange?: ((args: {
         value: string;
         name?: string;
     }) => void) | undefined;
-    variant?: "bordered" | "borderless" | "pills" | "pills-elevated" | undefined;
-    direction?: "column" | "row" | undefined;
     itemWidth?: "equal" | undefined;
     size: NonNullable<T.BaseProps["size"]>;
     value?: string;

package/dist/components/Tooltip/Tooltip.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Theme from "../Theme/index.js";
 import Text from "../Text/index.js";
-import Flyout from "../_private/Flyout/index.js";
+import Flyout from "../Flyout/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
     const { text, children, position = "bottom", ...flyoutProps } = props;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { FlyoutProps, FlyoutTriggerProps } from "../_private/Flyout";
+import type { FlyoutProps, FlyoutTriggerProps } from "../Flyout";
 export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift" | "originCoordinates"> & {
     children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
     text?: React.ReactNode;

package/dist/config/tailwind.d.ts

@@ -1,2 +1,2 @@
 import type { ThemeDefinition } from "../themes/_generator/tokens/types";
-export declare const getTheme: (theme?: ThemeDefinition) => Record<"borderRadius" | "backgroundColor" | "borderColor" | "boxShadow" | "spacing" | "textColor" | "colors" | "screens", Record<string, string>>;
+export declare const getTheme: (theme?: ThemeDefinition) => Record<"backgroundColor" | "borderColor" | "borderRadius" | "spacing" | "boxShadow" | "textColor" | "colors" | "screens", Record<string, string>>;

package/dist/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
+declare const useIsomorphicLayoutEffect: typeof React.useEffect;
 export default useIsomorphicLayoutEffect;