reshaped 3.6.0-canary.1 → 3.6.0-canary.3

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import { userEvent, waitFor, within, expect, fn } from "@storybook/test";
+import { userEvent, waitFor, within, expect, fn } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Reshaped from "../../Reshaped/index.js";
 import View from "../../View/index.js";
@@ -11,6 +11,7 @@ import TextField from "../../TextField/index.js";
 import Select from "../../Select/index.js";
 import Switch from "../../Switch/index.js";
 import { sleep } from "../../../utilities/helpers.js";
+import Modal from "../../Modal/index.js";
 export default { title: "Utility components/Flyout" };
 const Content = (props) => (<div style={{
         background: "var(--rs-color-background-elevation-overlay)",
@@ -174,6 +175,9 @@ export const modes = {
 						<Demo position="bottom-start" trapFocusMode="content-menu" text="content-menu">
 							{modeContent}
 						</Demo>
+						<Demo position="bottom-start" trapFocusMode={false} text="false">
+							{modeContent}
+						</Demo>
 					</View>
 				</Example.Item>
 
@@ -420,7 +424,7 @@ export const testShadowDom = {
 export const testInsideFixed = {
     name: "test: inside position fixed",
     render: () => (<React.Fragment>
-			<View position="fixed" insetBottom={2} insetStart={2} insetEnd={2} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }}>
+			<View position="fixed" insetBottom={2} insetStart={2} insetEnd={2} backgroundColor="elevation-overlay" borderColor="neutral-faded" borderRadius="small" padding={4} zIndex={10} attributes={{ "data-testid": "container" }} height={20}>
 				<Demo defaultActive position="top-start"/>
 			</View>
 			<View paddingTop={18} gap={4}>
@@ -455,15 +459,30 @@ export const testInsideScrollable = {
     name: "test: inside scrollable",
     render: () => {
         const containerRef = React.useRef(null);
-        return (<View padding={50}>
+        return (<View padding={20}>
 				<View height={30} overflow="auto" backgroundColor="neutral-faded" borderRadius="small">
-					<View height={50} attributes={{ ref: containerRef }} padding={4} paddingBottom={30}>
-						<Demo position="start"/>
+					<View height={50} attributes={{ ref: containerRef }} padding={20} paddingBottom={30}>
+						<Demo position="bottom"/>
 					</View>
 				</View>
 			</View>);
     },
 };
+export const testInsideModal = {
+    name: "test: inside modal",
+    render: () => {
+        return (<Modal active position="end">
+				<View gap={4} align="start">
+					<Modal.Title>Title</Modal.Title>
+					<Demo position="bottom-start"/>
+					<View height={300} width={25} backgroundColor="neutral-faded"/>
+					<Demo position="start"/>
+					<View height={300} width={25} backgroundColor="neutral-faded"/>
+					<Demo position="bottom-start"/>
+				</View>
+			</Modal>);
+    },
+};
 export const testDynamicBounds = {
     name: "test: auto position update",
     render: () => {

package/dist/components/Flyout/useFlyout.js

@@ -39,7 +39,7 @@ const flyoutReducer = (state, action) => {
 const useFlyout = (args) => {
     const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
-    const lastUsedFallbackRef = React.useRef(defaultPosition);
+    const lastUsedPositionRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
     const cachedFallbackPositions = React.useMemo(() => fallbackPositions, 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -62,28 +62,32 @@ const useFlyout = (args) => {
     const remove = React.useCallback(() => {
         dispatch({ type: "remove" });
     }, []);
-    const handleFallback = React.useCallback((position) => {
-        lastUsedFallbackRef.current = position;
+    const handlePosition = React.useCallback((position) => {
+        lastUsedPositionRef.current = position;
     }, []);
     const updatePosition = React.useCallback((options) => {
         if (!flyoutElRef.current)
             return;
+        const changePositon = options?.fallback !== false;
         const nextFlyoutData = flyout({
             triggerEl: triggerElRef.current,
             flyoutEl: flyoutElRef.current,
             triggerBounds,
             width,
-            position: defaultPosition,
-            fallbackPositions: cachedFallbackPositions,
-            lastUsedFallback: lastUsedFallbackRef.current,
-            onFallback: handleFallback,
+            position: changePositon ? defaultPosition : lastUsedPositionRef.current,
+            fallbackPositions: changePositon ? cachedFallbackPositions : [],
+            lastUsedPosition: lastUsedPositionRef.current,
+            onPositionChoose: handlePosition,
             rtl: isRTL,
             container,
             contentGap,
             contentShift,
         });
         if (nextFlyoutData) {
-            dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
+            dispatch({
+                type: "position",
+                payload: { ...nextFlyoutData, sync: options?.sync },
+            });
         }
     }, [
         container,
@@ -96,7 +100,7 @@ const useFlyout = (args) => {
         width,
         contentGap,
         contentShift,
-        handleFallback,
+        handlePosition,
     ]);
     React.useEffect(() => {
         if (state.status === "rendered")

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

@@ -7,7 +7,7 @@ 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 { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, position, fallbackPositions, width, container: passedContainer, lastUsedPosition, onPositionChoose, rtl, } = args;
     const targetClone = flyoutEl.cloneNode(true);
     const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
     const unitModifier = baseUnit ? parseInt(baseUnit) : 4;
@@ -63,10 +63,10 @@ const flyout = (args) => {
             container,
         });
         const validPosition = visible || fallbackPositions?.length === 0;
-        // Saving first try in case non of the options work
-        if (validPosition || lastUsedFallback === currentPosition) {
+        // Saving first try in case none of the options work
+        if (validPosition || lastUsedPosition === currentPosition) {
             calculated = tested;
-            onFallback(currentPosition);
+            onPositionChoose(currentPosition);
         }
         return validPosition;
     });

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").FormControlProps> & {

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

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import FormControl from "../index.js";
 import TextField from "../../TextField/index.js";

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").FormControlProps> & {

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

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import FormControl from "../index.js";
 import Radio from "../../Radio/index.js";
 import RadioGroup from "../../RadioGroup/index.js";

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: {

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

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Grid from "../index.js";
 export default {
     title: "Utility components/Grid/tests",

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").HiddenProps>;

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

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Hidden from "../index.js";
 export default {
     title: "Utility components/Hidden/tests",

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").HiddenVisuallyProps>;

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

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import HiddenVisually from "../index.js";
 export default {
     title: "Utility components/HiddenVisually/tests",

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("..").HotkeyProps>;

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

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Hotkey from "../Hotkey.js";
 export default {
     title: "Components/Hotkey/tests",

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").IconProps>;

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

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Icon from "../index.js";
 import IconZap from "../../../icons/Zap.js";
 export default {

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn, Mock } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn, Mock } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("..").ImageProps>;

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

@@ -1,4 +1,4 @@
-import { expect, fn, waitFor } from "@storybook/test";
+import { expect, fn, waitFor } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Icon from "../../Icon/index.js";

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "type" | "onClick" | "href" | "stopPropagation"> & {

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

@@ -1,4 +1,4 @@
-import { userEvent, expect, fn } from "@storybook/test";
+import { userEvent, expect, fn } from "storybook/test";
 import Link from "../index.js";
 export default {
     title: "Components/Link/tests",

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").LoaderProps>;

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

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Loader from "../index.js";
 export default {
     title: "Components/Loader/tests",

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("../MenuItem.types").Export;

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

@@ -1,4 +1,4 @@
-import { userEvent, expect, fn } from "@storybook/test";
+import { userEvent, expect, fn } from "storybook/test";
 import MenuItem from "../index.js";
 export default {
     title: "Components/MenuItem/tests",

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
+import { classNames, responsiveVariables, responsiveClassNames, responsivePropDependency, } from "../../utilities/props.js";
 import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
 import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
@@ -168,7 +168,7 @@ const Modal = (props) => {
         setHideProgress(progress / 2);
         dragDistanceRef.current = dragDistance;
     }, [dragDistance, clientPosition, rootRef]);
-    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, className: overlayClassName, containerRef: containerRef, attributes: {
+    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, overflow: responsivePropDependency(position, (p) => (p === "center" ? "auto" : "hidden")), className: overlayClassName, containerRef: containerRef, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {
             const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position));

package/dist/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{--rs-modal-container-width:100vw;--rs-modal-position:fixed;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root.--contained{--rs-modal-position:absolute;--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
+.root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root.--contained{--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").ModalProps> & {

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { within, expect, fn, userEvent, waitFor } from "@storybook/test";
+import { within, expect, fn, userEvent, waitFor } from "storybook/test";
 import Button from "../../Button/index.js";
 import Modal from "../index.js";
 import useToggle from "../../../hooks/useToggle.js";

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { Mock } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").NumberFieldProps>;

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

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent } from "@storybook/test";
+import { expect, fn, userEvent } from "storybook/test";
 import FormControl from "../../FormControl/index.js";
 import NumberField from "../index.js";
 import { Example } from "../../../utilities/storybook/index.js";

package/dist/components/Overlay/Overlay.js

@@ -13,7 +13,7 @@ import Portal from "../_private/Portal/index.js";
 import s from "./Overlay.module.css";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 const Overlay = (props) => {
-    const { active, children, transparent, blurred, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
+    const { active, children, transparent, blurred, overflow, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
     // Selectors wrapped with refs to simplify working with useEffect dependency array
     const onCloseRef = useHandlerRef(onClose);
     const onOpenRef = useHandlerRef(onOpen);
@@ -33,7 +33,7 @@ const Overlay = (props) => {
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
     // Check that when close was triggered there were no other overlays / flyouts rendered above it
     const isDismissible = useIsDismissible({ active, contentRef, blocking: true });
-    const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], className);
+    const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
     const isInsideContent = (el) => {
         if (!contentRef.current)
             return;

package/dist/components/Overlay/Overlay.module.css

@@ -1 +1 @@
-.root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;overflow:auto;overflow-x:clip;position:fixed;-webkit-overflow-scrolling:touch;background-color:rgba(var(--rs-color-rgb-black),0);color:var(--rs-color-white);cursor:default!important;left:var(--rs-overlay-offset-x);opacity:0;outline:none;top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-overlay)}.root,.wrapper{height:100%;width:100%}.wrapper{display:table}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{background-color:rgba(var(--rs-color-rgb-black),var(--rs-overlay-opacity));opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--blurred{backdrop-filter:blur(3px);height:calc(100% + 2px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}
+.root{--rs-overlay-offset-y:0px;--rs-overlay-offset-x:0px;overflow-x:clip;position:fixed;-webkit-overflow-scrolling:touch;background-color:rgba(var(--rs-color-rgb-black),0);color:var(--rs-color-white);cursor:default!important;left:var(--rs-overlay-offset-x);opacity:0;outline:none;top:var(--rs-overlay-offset-y);z-index:var(--rs-z-index-overlay)}.root,.wrapper{height:100%;width:100%}.wrapper{display:table}.inner{display:table-cell;text-align:center}.content,.inner{vertical-align:middle}.content{display:inline-block;text-align:initial}.root.--visible{background-color:rgba(var(--rs-color-rgb-black),var(--rs-overlay-opacity));opacity:1}.root.--click-through{color:inherit;pointer-events:none}.root.--blurred{backdrop-filter:blur(3px);height:calc(100% + 2px);left:calc(var(--rs-overlay-offset-x) - 1px);top:calc(var(--rs-overlay-offset-y) - 1px);width:calc(100% + 2px)}.root.--click-through .content,.root.--click-through>:not(.wrapper){pointer-events:all}.root.--contained{position:absolute}.root.--animated{transition:var(--rs-duration-medium) var(--rs-easing-accelerate);transition-property:background-color,opacity}.root.--animated.--visible{transition-timing-function:var(--rs-easing-decelerate)}.root.--overflow-auto{overflow:auto}

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

@@ -4,6 +4,7 @@ export type CloseReason = "overlay-click" | "escape-key";
 export type Props = {
     transparent?: boolean | number;
     blurred?: boolean;
+    overflow?: "auto" | "hidden";
     children?: React.ReactNode | ((props: {
         active: boolean;
     }) => React.ReactNode);

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").OverlayProps>;

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

@@ -1,4 +1,4 @@
-import { userEvent } from "@storybook/test";
+import { userEvent } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import Overlay from "../index.js";
 import Button from "../../Button/index.js";

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: React.FC<import("./..").OverlayProps>;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { within, expect, fn, userEvent, waitFor } from "@storybook/test";
+import { within, expect, fn, userEvent, waitFor } from "storybook/test";
 import Button from "../../Button/index.js";
 import Overlay from "../index.js";
 import useToggle from "../../../hooks/useToggle.js";

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PaginationProps>;

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

@@ -1,4 +1,4 @@
-import { expect, within, fn, userEvent } from "@storybook/test";
+import { expect, within, fn, userEvent } from "storybook/test";
 import Pagination from "../index.js";
 export default {
     title: "Components/Pagination/tests",

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PinFieldProps>;

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

@@ -1,4 +1,4 @@
-import { expect, fn, userEvent, waitFor } from "@storybook/test";
+import { expect, fn, userEvent, waitFor } from "storybook/test";
 import FormControl from "../../FormControl/index.js";
 import PinField from "../index.js";
 export default {

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

@@ -1,5 +1,5 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").PopoverProps> & {
@@ -58,3 +58,7 @@ export declare const variant: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const teslContentEditable: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -1,10 +1,13 @@
-import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
+import { useState } from "react";
+import { expect, fn, userEvent, within, waitFor } from "storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
 import { sleep } from "../../../utilities/helpers.js";
 import View from "../../View/index.js";
 import Popover from "../index.js";
 import Tooltip from "../../Tooltip/index.js";
 import Button from "../../Button/index.js";
+import MenuItem from "../../MenuItem/index.js";
+import ScrollArea from "../../ScrollArea/index.js";
 export default {
     title: "Components/Popover",
     component: Popover,
@@ -256,3 +259,43 @@ export const variant = {
 			</Example.Item>
 		</Example>),
 };
+export const teslContentEditable = {
+    name: "test: contenteditable",
+    render: () => {
+        const [active, setActive] = useState(false);
+        return (<Popover>
+				<Popover.Trigger>
+					{(attributes) => <Button attributes={attributes}>Open</Button>}
+				</Popover.Trigger>
+				<Popover.Content>
+					<View gap={4}>
+						<View.Item>
+							<Button onClick={() => { }}>Hello</Button>
+						</View.Item>
+
+						<ScrollArea height="100px">
+							<div style={{ height: "200px" }} contentEditable tabIndex={0} onInput={(e) => {
+                setActive(e.currentTarget.innerText.startsWith("@"));
+            }} onKeyDown={(e) => {
+                console.log(e.key);
+                if (e.key === "Enter" && active) {
+                    e.preventDefault();
+                    e.currentTarget.innerText = "@hello";
+                    setActive(false);
+                }
+            }}/>
+						</ScrollArea>
+
+						<Popover active={active} onClose={() => setActive(false)} originCoordinates={{ x: 300, y: 300 }} trapFocusMode="selection-menu">
+							<Popover.Content>
+								<View gap={4}>
+									<MenuItem onClick={() => { }}>Action</MenuItem>
+									<MenuItem onClick={() => { }}>Close</MenuItem>
+								</View>
+							</Popover.Content>
+						</Popover>
+					</View>
+				</Popover.Content>
+			</Popover>);
+    },
+};

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

@@ -1,4 +1,4 @@
-import { StoryObj } from "@storybook/react";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").ProgressProps>;

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

@@ -1,4 +1,4 @@
-import { expect } from "@storybook/test";
+import { expect } from "storybook/test";
 import Progress from "../index.js";
 export default {
     title: "Components/Progress/tests",