reshaped 3.8.0-canary.1 → 3.8.0-canary.10

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

@@ -1,6 +1,4 @@
-import { expect, fn, userEvent, within, waitFor } from "storybook/test";
 import Tooltip from "../index.js";
-import Button from "../../Button/index.js";
 export default {
     title: "Components/Tooltip/tests",
     component: Tooltip,
@@ -11,30 +9,3 @@ export default {
         chromatic: { disableSnapshot: true },
     },
 };
-export const defaultActive = {
-    name: "uncontrolled",
-    args: {
-        handleOpen: fn(),
-        handleClose: fn(),
-    },
-    render: (args) => (<Tooltip text="Content" onOpen={args.handleOpen} onClose={args.handleClose}>
-			{(attributes) => <Button attributes={attributes}>Trigger</Button>}
-		</Tooltip>),
-    play: async ({ canvasElement, args }) => {
-        const canvas = within(canvasElement.ownerDocument.body);
-        const trigger = canvas.getAllByRole("button")[0];
-        await userEvent.hover(trigger);
-        await waitFor(() => {
-            expect(args.handleOpen).toHaveBeenCalledTimes(1);
-            expect(args.handleOpen).toHaveBeenCalledWith();
-        });
-        const item = canvas.getByText("Content");
-        expect(item).toBeInTheDocument();
-        await userEvent.unhover(trigger);
-        await waitFor(() => {
-            expect(args.handleClose).toHaveBeenCalledTimes(1);
-            expect(args.handleClose).toHaveBeenCalledWith({});
-            expect(item).not.toBeInTheDocument();
-        });
-    },
-};

package/dist/components/View/View.js

@@ -1,6 +1,6 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { isValidElement } from "react";
 import { classNames, responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
 import Divider from "../Divider/index.js";
 import Hidden from "../Hidden/index.js";
@@ -100,13 +100,15 @@ const View = (props) => {
         return (_jsx("div", { className: dividerClassName, children: _jsx(Divider, { vertical: isDividerVertical, blank: true }) }, `${key}-divider`));
     };
     const renderItem = ({ className, child, index }) => {
-        const isItem = child.type === ViewItem;
-        const isView = child.type === View;
+        const isElement = isValidElement(child);
+        const isItem = isElement && child.type === ViewItem;
+        const isView = isElement && child.type === View;
         const key = child.key;
         const dividerElement = !!index && divided && renderDivider({ className, key });
         let itemElement;
         if (isItem) {
             itemElement = React.cloneElement(child, {
+                // @ts-expect-error -- child is guaranteed to be an element
                 className: classNames(className, child.props.className),
             });
         }
@@ -120,10 +122,13 @@ const View = (props) => {
             itemElement = (_jsx("div", { className: className, children: child }, key));
         }
         // Passing grow here because it's responsive and nowrap should follow it
+        // @ts-expect-error -- child is guaranteed to be an element
         if ((isItem || isView) && child.props?.grow) {
+            // @ts-expect-error -- child is guaranteed to be an element
             nowrap = child.props.grow;
             isFlex = true;
         }
+        // @ts-expect-error -- child is guaranteed to be an element
         if (isItem && child.props?.gap === "auto")
             nowrap = true;
         return (_jsxs(React.Fragment, { children: [dividerElement, itemElement] }, key ? `${key}-fragment` : undefined));
@@ -134,8 +139,10 @@ const View = (props) => {
         if (!child)
             return null;
         const usedIndex = renderedItemIndex;
+        // eslint-disable-next-line react-hooks/immutability
         renderedItemIndex += 1;
-        if (child.type === Hidden) {
+        if (isValidElement(child) && child.type === Hidden) {
+            // @ts-expect-error -- child is guaranteed to be an element
             const { children: hiddenChild, ...hiddenProps } = child.props;
             const key = child.key || index;
             return (_createElement(Hidden, { ...hiddenProps, key: key }, renderItem({ child: hiddenChild, index: usedIndex })));

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

@@ -1,5 +1,6 @@
 import React from "react";
 import { type ViewProps } from "./..";
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: {
@@ -137,3 +138,6 @@ export declare const testComposition: {
     name: string;
     render: () => React.JSX.Element;
 };
+export declare const asProp: StoryObj;
+export declare const className: StoryObj;
+export declare const itemClassName: StoryObj;

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

@@ -9,6 +9,7 @@ import MenuItem from "../../MenuItem/index.js";
 import Button from "../../Button/index.js";
 import IconPlus from "../../../icons/Plus.js";
 import useToggle from "../../../hooks/useToggle.js";
+import { expect } from "storybook/test";
 export default {
     title: "Utility components/View",
     component: View,
@@ -1288,3 +1289,41 @@ export const testComposition = {
 			</Example.Item>
 		</Example>),
 };
+export const asProp = {
+    name: "as",
+    render: () => (<View as="ul">
+			<View.Item as="li">Content</View.Item>
+		</View>),
+    play: async ({ canvas }) => {
+        const list = canvas.getByRole("list");
+        const item = canvas.getByRole("listitem");
+        expect(list).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<View className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</View>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};
+export const itemClassName = {
+    name: "item className, attributes",
+    render: () => (<div data-testid="root">
+			<View.Item className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</View.Item>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/_private/Expandable/Expandable.js

@@ -10,7 +10,9 @@ const Expandable = (props) => {
     const rootRef = React.useRef(null);
     const mountedRef = React.useRef(false);
     const [animatedHeight, setAnimatedHeight] = React.useState(active ? "auto" : null);
-    const contentClassNames = classNames(s.root, mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
+    const contentClassNames = classNames(s.root, 
+    // eslint-disable-next-line react-hooks/refs
+    mountedRef.current && animatedHeight !== "auto" && s["--animated"]);
     const handleTransitionEnd = (e) => {
         if (e.propertyName !== "height")
             return;

package/dist/components/_private/Portal/Portal.js

@@ -18,18 +18,20 @@ const Portal = (props) => {
     const { children, targetRef } = props;
     const mountedToggle = useToggle();
     const rootRef = React.useRef(null);
+    // eslint-disable-next-line react-hooks/refs
     const rootNode = rootRef.current?.getRootNode();
     const isShadowDom = rootNode instanceof ShadowRoot;
     const defaultTargetEl = isShadowDom ? rootNode : document.body;
     /**
      * Check for parent portal to render inside it
-     * To avoid z-iondex issues
+     * To avoid z-index issues
      * Example:
      * Dropdown rendered on the page should render under the modal
      * Dropdown inside the modal should render above it
      */
     const portal = usePortalScope();
     const nextScopeRef = targetRef || portal.scopeRef;
+    // eslint-disable-next-line react-hooks/refs
     const targetEl = nextScopeRef?.current || defaultTargetEl;
     useIsomorphicLayoutEffect(() => {
         mountedToggle.activate();
@@ -37,6 +39,7 @@ const Portal = (props) => {
     }, []);
     /* Preserve the current theme when rendered in body */
     return [
+        // eslint-disable-next-line react-hooks/refs
         ReactDOM.createPortal(_jsx(Theme, { children: children }), targetEl),
         // Make sure this element doesn't affect components using :last-child when their children use portals
         !mountedToggle.active && _jsx("div", { ref: rootRef, className: s.root }, "root"),

package/dist/hooks/_private/useIsDismissible.d.ts

@@ -8,5 +8,6 @@ declare const useIsDismissible: (args: {
     active?: boolean;
     contentRef: Ref;
     triggerRef?: Ref;
+    hasTrigger?: boolean;
 }) => () => boolean;
 export default useIsDismissible;

package/dist/hooks/_private/useIsDismissible.js

@@ -4,7 +4,6 @@
  */
 import React from "react";
 import useElementId from "../useElementId.js";
-import { onNextFrame } from "../../utilities/animation.js";
 let queue = {};
 let latestId = null;
 const removeFromQueue = (id) => {
@@ -23,12 +22,12 @@ const addToQueue = (id, contentRef, triggerRef) => {
     latestId = id;
 };
 const useIsDismissible = (args) => {
-    const { active, contentRef, triggerRef } = args;
+    const { active, contentRef, triggerRef, hasTrigger = true } = args;
     const id = useElementId();
     React.useEffect(() => {
         if (!active)
             return;
-        onNextFrame(() => addToQueue(id, contentRef, triggerRef));
+        addToQueue(id, contentRef, triggerRef);
         return () => removeFromQueue(id);
     }, [active, id, contentRef, triggerRef]);
     return React.useCallback(() => {
@@ -38,10 +37,11 @@ const useIsDismissible = (args) => {
         const latestTrigger = latest?.triggerRef?.current;
         const prev = latest?.parentId ? queue[latest.parentId] : undefined;
         const prevContent = prev?.contentRef.current;
+        const nested = prevContent && latestTrigger && prevContent.contains(latestTrigger);
         // Don't block independently rendered components that are not nested in each other
-        if (!prevContent || !latestTrigger || !prevContent.contains(latestTrigger))
+        if (hasTrigger && !nested)
             return true;
-        return latestId === id;
-    }, [id, active]);
+        return !latestId || latestId === id;
+    }, [id, active, hasTrigger]);
 };
 export default useIsDismissible;

package/dist/hooks/_private/usePrevious.js

@@ -12,6 +12,7 @@ const usePrevious = (value, clean = false) => {
     React.useEffect(() => {
         ref.current = clean ? copy(value) : value;
     }, [value, clean]);
+    // eslint-disable-next-line react-hooks/refs
     return ref.current;
 };
 export default usePrevious;

package/dist/hooks/tests/useDrag.stories.js

@@ -5,7 +5,7 @@ import useDrag from "../_private/useDrag.js";
 import useToggle from "../useToggle.js";
 import Button from "../../components/Button/index.js";
 export default {
-    title: "Internal/Hooks/useDrag",
+    title: "Internal/useDrag",
     parameters: {
         chromatic: { disableSnapshot: true },
     },

package/dist/hooks/useScrollLock.js

@@ -1,18 +1,20 @@
 "use client";
 import React from "react";
-import { lockScroll, unlockScroll } from "../utilities/scroll/index.js";
+import { lockScroll } from "../utilities/scroll/index.js";
 const useScrollLock = (options) => {
     const { containerRef, originRef } = options || {};
     const [locked, setLocked] = React.useState(false);
+    const unlockScrollRef = React.useRef(null);
     const handleLockScroll = React.useCallback(() => {
-        lockScroll({
+        unlockScrollRef.current = lockScroll({
             containerEl: containerRef?.current,
             originEl: originRef?.current,
             cb: () => setLocked(true),
         });
     }, [containerRef, originRef]);
     const handleUnlockScroll = React.useCallback(() => {
-        unlockScroll(() => setLocked(false));
+        unlockScrollRef.current?.(() => setLocked(false));
+        unlockScrollRef.current = null;
     }, []);
     return React.useMemo(() => ({
         scrollLocked: locked,

package/dist/index.d.ts

@@ -103,7 +103,7 @@ export type { ContainerProps } from "./components/Container";
 export { default as Dismissible } from "./components/Dismissible";
 export type { DismissibleProps } from "./components/Dismissible";
 export { default as Flyout } from "./components/Flyout";
-export type { FlyoutProps, FlyoutInstance } from "./components/Flyout";
+export type { FlyoutProps, FlyoutInstance, FlyoutTriggerAttributes } from "./components/Flyout";
 export { default as FormControl } from "./components/FormControl";
 export type { FormControlProps } from "./components/FormControl";
 export { default as Grid } from "./components/Grid";

package/dist/styles/resolvers/align/align.css

@@ -1 +1 @@
-[style*="--rs-align-s:"]{align-items:var(--rs-align)!important;--rs-align-s: ;--rs-align-m:var(--rs-align-s);--rs-align-l:var(--rs-align-m);--rs-align-xl:var(--rs-align-l);--rs-align:var(--rs-align-s)}@media (--rs-viewport-m ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-m)}}@media (--rs-viewport-l ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-align-s:"]{--rs-align:var(--rs-align-xl)}}
+[style*="--rs-align-"]{align-items:var(--rs-align)!important;--rs-align-s: ;--rs-align-m:var(--rs-align-s);--rs-align-l:var(--rs-align-m);--rs-align-xl:var(--rs-align-l);--rs-align:var(--rs-align-s)}@media (--rs-viewport-m ){[style*="--rs-align-"]{--rs-align:var(--rs-align-m)}}@media (--rs-viewport-l ){[style*="--rs-align-"]{--rs-align:var(--rs-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-align-"]{--rs-align:var(--rs-align-xl)}}

package/dist/styles/resolvers/aspectRatio/aspectRatio.css

@@ -1 +1 @@
-[style*="--rs-ratio-s:"]{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}[style*="--rs-ratio-s:"]:empty,[style*="--rs-ratio-s:"]:not(:empty)>*{aspect-ratio:var(--rs-ratio)}[style*="--rs-ratio-s:"]>img{object-fit:cover}@media (--rs-viewport-m ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){[style*="--rs-ratio-s:"]{--rs-ratio:var(--rs-ratio-xl)}}
+[style*="--rs-ratio-"]{--rs-ratio-s:0;--rs-ratio-m:var(--rs-ratio-s);--rs-ratio-l:var(--rs-ratio-m);--rs-ratio-xl:var(--rs-ratio-l);--rs-ratio:var(--rs-ratio-s)}[style*="--rs-ratio-s:"]:empty,[style*="--rs-ratio-s:"]:not(:empty)>*{aspect-ratio:var(--rs-ratio)}[style*="--rs-ratio-s:"]>img{object-fit:cover}@media (--rs-viewport-m ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-m)}}@media (--rs-viewport-l ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-l)}}@media (--rs-viewport-xl ){[style*="--rs-ratio-"]{--rs-ratio:var(--rs-ratio-xl)}}

package/dist/styles/resolvers/bleed/bleed.module.css

@@ -1 +1 @@
-.root[style*="--rs-bleed-s:"]{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}@media (--rs-viewport-m ){.root[style*="--rs-bleed-s:"]{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-l ){.root[style*="--rs-bleed-s:"]{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-xl ){.root[style*="--rs-bleed-s:"]{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}
+.root[style*="--rs-bleed-"]{margin-left:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);margin-right:calc(var(--rs-unit-x1) * var(--rs-bleed) * -1);--rs-bleed-s:0;--rs-bleed-m:var(--rs-bleed-s);--rs-bleed-l:var(--rs-bleed-m);--rs-bleed-xl:var(--rs-bleed-l);--rs-bleed:var(--rs-bleed-s)}.--bleed{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}@media (--rs-viewport-m ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-m)}.--bleed-true--m{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--m{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-l ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-l)}.--bleed-true--l{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--l{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}@media (--rs-viewport-xl ){.root[style*="--rs-bleed-"]{--rs-bleed:var(--rs-bleed-xl)}.--bleed-true--xl{border-left-style:none!important;border-radius:0!important;border-right-style:none!important}.--bleed-false--xl{border-left-style:solid!important;border-radius:var(--rs-radius)!important;border-right-style:solid!important}}

package/dist/styles/resolvers/justify/justify.css

@@ -1 +1 @@
-[style*="--rs-justify-s:"]{justify-content:var(--rs-justify)!important;--rs-justify-s: ;--rs-justify-m:var(--rs-justify-s);--rs-justify-l:var(--rs-justify-m);--rs-justify-xl:var(--rs-justify-l);--rs-justify:var(--rs-justify-s)}@media (--rs-viewport-m ){[style*="--rs-justify-s:"]{--rs-justify:var(--rs-justify-m)}}@media (--rs-viewport-l ){[style*="--rs-justify-s:"]{--rs-justify:var(--rs-justify-l)}}@media (--rs-viewport-xl ){[style*="--rs-justify-s:"]{--rs-justify:var(--rs-justify-xl)}}
+[style*="--rs-justify-"]{justify-content:var(--rs-justify)!important;--rs-justify-s: ;--rs-justify-m:var(--rs-justify-s);--rs-justify-l:var(--rs-justify-m);--rs-justify-xl:var(--rs-justify-l);--rs-justify:var(--rs-justify-s)}@media (--rs-viewport-m ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-m)}}@media (--rs-viewport-l ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-l)}}@media (--rs-viewport-xl ){[style*="--rs-justify-"]{--rs-justify:var(--rs-justify-xl)}}

package/dist/styles/resolvers/maxHeight/maxHeight.module.css

@@ -1 +1 @@
-.root[style*="--rs-max-h-s:"]{--rs-max-h-s:none;--rs-max-h-m:var(--rs-max-h-s);--rs-max-h-l:var(--rs-max-h-m);--rs-max-h-xl:var(--rs-max-h-l);--rs-max-h:var(--rs-max-h-s)}.--type-literal{max-height:var(--rs-max-h)!important}.--type-unit{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-h-s:"]{--rs-max-h:var(--rs-max-h-m)}.--type-literal--m{max-height:var(--rs-max-h)!important}.--type-unit--m{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-h-s:"]{--rs-max-h:var(--rs-max-h-l)}.--type-literal--l{max-height:var(--rs-max-h)!important}.--type-unit--l{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-h-s:"]{--rs-max-h:var(--rs-max-h-xl)}.--type-literal--xl{max-height:var(--rs-max-h)!important}.--type-unit--xl{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-max-h-"]{--rs-max-h-s:none;--rs-max-h-m:var(--rs-max-h-s);--rs-max-h-l:var(--rs-max-h-m);--rs-max-h-xl:var(--rs-max-h-l);--rs-max-h:var(--rs-max-h-s)}.--type-literal{max-height:var(--rs-max-h)!important}.--type-unit{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-m)}.--type-literal--m{max-height:var(--rs-max-h)!important}.--type-unit--m{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-l)}.--type-literal--l{max-height:var(--rs-max-h)!important}.--type-unit--l{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-h-"]{--rs-max-h:var(--rs-max-h-xl)}.--type-literal--xl{max-height:var(--rs-max-h)!important}.--type-unit--xl{max-height:calc(var(--rs-max-h) * var(--rs-unit-x1))!important}}

package/dist/styles/resolvers/maxWidth/maxWidth.module.css

@@ -1 +1 @@
-.root[style*="--rs-max-w-s:"]{--rs-max-w-s:none;--rs-max-w-m:var(--rs-max-w-s);--rs-max-w-l:var(--rs-max-w-m);--rs-max-w-xl:var(--rs-max-w-l);--rs-max-w:var(--rs-max-w-s)}.--type-literal{max-width:var(--rs-max-w)!important}.--type-unit{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-w-s:"]{--rs-max-w:var(--rs-max-w-m)}.--type-literal--m{max-width:var(--rs-max-w)!important}.--type-unit--m{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-w-s:"]{--rs-max-w:var(--rs-max-w-l)}.--type-literal--l{max-width:var(--rs-max-w)!important}.--type-unit--l{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-w-s:"]{--rs-max-w:var(--rs-max-w-xl)}.--type-literal--xl{max-width:var(--rs-max-w)!important}.--type-unit--xl{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-max-w-"]{--rs-max-w-s:none;--rs-max-w-m:var(--rs-max-w-s);--rs-max-w-l:var(--rs-max-w-m);--rs-max-w-xl:var(--rs-max-w-l);--rs-max-w:var(--rs-max-w-s)}.--type-literal{max-width:var(--rs-max-w)!important}.--type-unit{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-m)}.--type-literal--m{max-width:var(--rs-max-w)!important}.--type-unit--m{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-l)}.--type-literal--l{max-width:var(--rs-max-w)!important}.--type-unit--l{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-max-w-"]{--rs-max-w:var(--rs-max-w-xl)}.--type-literal--xl{max-width:var(--rs-max-w)!important}.--type-unit--xl{max-width:calc(var(--rs-max-w) * var(--rs-unit-x1))!important}}

package/dist/styles/resolvers/minHeight/minHeight.module.css

@@ -1 +1 @@
-.root[style*="--rs-min-h-s:"]{--rs-min-h-s:none;--rs-min-h-m:var(--rs-min-h-s);--rs-min-h-l:var(--rs-min-h-m);--rs-min-h-xl:var(--rs-min-h-l);--rs-min-h:var(--rs-min-h-s)}.--type-literal{min-height:var(--rs-min-h)!important}.--type-unit{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-h-s:"]{--rs-min-h:var(--rs-min-h-m)}.--type-literal--m{min-height:var(--rs-min-h)!important}.--type-unit--m{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-h-s:"]{--rs-min-h:var(--rs-min-h-l)}.--type-literal--l{min-height:var(--rs-min-h)!important}.--type-unit--l{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-h-s:"]{--rs-min-h:var(--rs-min-h-xl)}.--type-literal--xl{min-height:var(--rs-min-h)!important}.--type-unit--xl{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-min-h-"]{--rs-min-h-s:none;--rs-min-h-m:var(--rs-min-h-s);--rs-min-h-l:var(--rs-min-h-m);--rs-min-h-xl:var(--rs-min-h-l);--rs-min-h:var(--rs-min-h-s)}.--type-literal{min-height:var(--rs-min-h)!important}.--type-unit{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-m)}.--type-literal--m{min-height:var(--rs-min-h)!important}.--type-unit--m{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-l)}.--type-literal--l{min-height:var(--rs-min-h)!important}.--type-unit--l{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-h-"]{--rs-min-h:var(--rs-min-h-xl)}.--type-literal--xl{min-height:var(--rs-min-h)!important}.--type-unit--xl{min-height:calc(var(--rs-min-h) * var(--rs-unit-x1))!important}}

package/dist/styles/resolvers/minWidth/minWidth.module.css

@@ -1 +1 @@
-.root[style*="--rs-min-w-s:"]{--rs-min-w-s:none;--rs-min-w-m:var(--rs-min-w-s);--rs-min-w-l:var(--rs-min-w-m);--rs-min-w-xl:var(--rs-min-w-l);--rs-min-w:var(--rs-min-w-s)}.--type-literal{min-width:var(--rs-min-w)!important}.--type-unit{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-w-s:"]{--rs-min-w:var(--rs-min-w-m)}.--type-literal--m{min-width:var(--rs-min-w)!important}.--type-unit--m{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-w-s:"]{--rs-min-w:var(--rs-min-w-l)}.--type-literal--l{min-width:var(--rs-min-w)!important}.--type-unit--l{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-w-s:"]{--rs-min-w:var(--rs-min-w-xl)}.--type-literal--xl{min-width:var(--rs-min-w)!important}.--type-unit--xl{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-min-w-"]{--rs-min-w-s:none;--rs-min-w-m:var(--rs-min-w-s);--rs-min-w-l:var(--rs-min-w-m);--rs-min-w-xl:var(--rs-min-w-l);--rs-min-w:var(--rs-min-w-s)}.--type-literal{min-width:var(--rs-min-w)!important}.--type-unit{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-min-w-"]{--rs-min-w:var(--rs-min-w-m)}.--type-literal--m{min-width:var(--rs-min-w)!important}.--type-unit--m{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-min-w-"]{--rs-min-w:var(--rs-min-w-l)}.--type-literal--l{min-width:var(--rs-min-w)!important}.--type-unit--l{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-min-w-"]{--rs-min-w:var(--rs-min-w-xl)}.--type-literal--xl{min-width:var(--rs-min-w)!important}.--type-unit--xl{min-width:calc(var(--rs-min-w) * var(--rs-unit-x1))!important}}

package/dist/styles/resolvers/position/position.css

@@ -1 +1 @@
-[style*="--rs-position-s:"]{position:var(--rs-position)!important;--rs-position-s: ;--rs-position-m:var(--rs-position-s);--rs-position-l:var(--rs-position-m);--rs-position-xl:var(--rs-position-l);--rs-position:var(--rs-position-s)}@media (--rs-viewport-m ){[style*="--rs-position-s:"]{--rs-position:var(--rs-position-m)}}@media (--rs-viewport-l ){[style*="--rs-position-s:"]{--rs-position:var(--rs-position-l)}}@media (--rs-viewport-xl ){[style*="--rs-position-s:"]{--rs-position:var(--rs-position-xl)}}
+[style*="--rs-position-"]{position:var(--rs-position)!important;--rs-position-s: ;--rs-position-m:var(--rs-position-s);--rs-position-l:var(--rs-position-m);--rs-position-xl:var(--rs-position-l);--rs-position:var(--rs-position-s)}@media (--rs-viewport-m ){[style*="--rs-position-"]{--rs-position:var(--rs-position-m)}}@media (--rs-viewport-l ){[style*="--rs-position-"]{--rs-position:var(--rs-position-l)}}@media (--rs-viewport-xl ){[style*="--rs-position-"]{--rs-position:var(--rs-position-xl)}}

package/dist/styles/resolvers/textAlign/textAlign.css

@@ -1 +1 @@
-[style*="--rs-text-align-s:"]{text-align:var(--rs-text-align)!important;--rs-text-align-s: ;--rs-text-align-m:var(--rs-text-align-s);--rs-text-align-l:var(--rs-text-align-m);--rs-text-align-xl:var(--rs-text-align-l);--rs-text-align:var(--rs-text-align-s)}@media (--rs-viewport-m ){[style*="--rs-text-align-s:"]{--rs-text-align:var(--rs-text-align-m)}}@media (--rs-viewport-l ){[style*="--rs-text-align-s:"]{--rs-text-align:var(--rs-text-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-text-align-s:"]{--rs-text-align:var(--rs-text-align-xl)}}
+[style*="--rs-text-align-"]{text-align:var(--rs-text-align)!important;--rs-text-align-s: ;--rs-text-align-m:var(--rs-text-align-s);--rs-text-align-l:var(--rs-text-align-m);--rs-text-align-xl:var(--rs-text-align-l);--rs-text-align:var(--rs-text-align-s)}@media (--rs-viewport-m ){[style*="--rs-text-align-"]{--rs-text-align:var(--rs-text-align-m)}}@media (--rs-viewport-l ){[style*="--rs-text-align-"]{--rs-text-align:var(--rs-text-align-l)}}@media (--rs-viewport-xl ){[style*="--rs-text-align-"]{--rs-text-align:var(--rs-text-align-xl)}}

package/dist/styles/resolvers/width/width.module.css

@@ -1 +1 @@
-.root[style*="--rs-w-s:"]{--rs-w-s:auto;--rs-w-m:var(--rs-w-s);--rs-w-l:var(--rs-w-m);--rs-w-xl:var(--rs-w-l);--rs-w:var(--rs-w-s)}.--type-literal{width:var(--rs-w)!important}.--type-unit{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-w-s:"]{--rs-w:var(--rs-w-m)}.--type-literal--m{width:var(--rs-w)!important}.--type-unit--m{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-w-s:"]{--rs-w:var(--rs-w-l)}.--type-literal--l{width:var(--rs-w)!important}.--type-unit--l{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-w-s:"]{--rs-w:var(--rs-w-xl)}.--type-literal--xl{width:var(--rs-w)!important}.--type-unit--xl{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}
+.root[style*="--rs-w-"]{--rs-w-s:auto;--rs-w-m:var(--rs-w-s);--rs-w-l:var(--rs-w-m);--rs-w-xl:var(--rs-w-l);--rs-w:var(--rs-w-s)}.--type-literal{width:var(--rs-w)!important}.--type-unit{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}@media (--rs-viewport-m ){.root[style*="--rs-w-"]{--rs-w:var(--rs-w-m)}.--type-literal--m{width:var(--rs-w)!important}.--type-unit--m{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-l ){.root[style*="--rs-w-"]{--rs-w:var(--rs-w-l)}.--type-literal--l{width:var(--rs-w)!important}.--type-unit--l{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}@media (--rs-viewport-xl ){.root[style*="--rs-w-"]{--rs-w:var(--rs-w-xl)}.--type-literal--xl{width:var(--rs-w)!important}.--type-unit--xl{width:calc(var(--rs-w) * var(--rs-unit-x1))!important}}

package/dist/utilities/scroll/disable.js

@@ -4,8 +4,8 @@ export const preventDefault = (e) => e.preventDefault();
  * without locking the page with overflow
  */
 export const disableScroll = () => {
-    window.addEventListener("wheel", preventDefault, { passive: false });
-    window.addEventListener("touchmove", preventDefault, { passive: false });
+    window.addEventListener("wheel", preventDefault);
+    window.addEventListener("touchmove", preventDefault);
 };
 export const enableScroll = () => {
     window.removeEventListener("wheel", preventDefault);

package/dist/utilities/scroll/index.d.ts

@@ -1,2 +1,2 @@
 export { disableScroll, enableScroll } from "./disable";
-export { lockScroll, unlockScroll } from "./lock";
+export { lockScroll } from "./lock";

package/dist/utilities/scroll/index.js

@@ -1,2 +1,2 @@
 export { disableScroll, enableScroll } from "./disable.js";
-export { lockScroll, unlockScroll } from "./lock.js";
+export { lockScroll } from "./lock.js";

package/dist/utilities/scroll/lock.d.ts

@@ -2,5 +2,4 @@ export declare const lockScroll: (args: {
     containerEl?: HTMLElement | null;
     originEl?: HTMLElement | null;
     cb?: () => void;
-}) => void;
-export declare const unlockScroll: (cb?: () => void) => void;
+}) => ((cb?: () => void) => void) | undefined;

package/dist/utilities/scroll/lock.js

@@ -3,31 +3,32 @@ import { findClosestScrollableContainer } from "../dom/index.js";
 import lockSafariScroll from "./lockSafari.js";
 import lockStandardScroll from "./lockStandard.js";
 let bodyLockedCount = 0;
-let reset = () => { };
 export const lockScroll = (args) => {
-    const isIOSLock = isIOS() && !args.containerEl && !args.originEl;
+    const isIOSLock = isIOS();
+    let reset = () => { };
     let container = document.body;
-    if (args.originEl && !isIOSLock) {
+    if (args.originEl)
         container = findClosestScrollableContainer({ el: args.originEl });
-    }
-    if (args.containerEl && !isIOSLock)
+    if (args.containerEl)
         container = args.containerEl;
-    if (container === document.body)
+    const lockedBodyScroll = container === document.body;
+    if (lockedBodyScroll)
         bodyLockedCount += 1;
-    if (bodyLockedCount > 1)
+    console.log("bodyLockedCount", { bodyLockedCount, lockedBodyScroll, isIOSLock });
+    if (lockedBodyScroll && bodyLockedCount > 1)
         return;
-    if (isIOSLock) {
+    if (isIOSLock && lockedBodyScroll) {
         reset = lockSafariScroll();
     }
     else {
         reset = lockStandardScroll({ container });
     }
     args.cb?.();
-};
-export const unlockScroll = (cb) => {
-    bodyLockedCount -= 1;
-    if (bodyLockedCount > 0)
-        return;
-    reset();
-    cb?.();
+    return (cb) => {
+        if (lockedBodyScroll)
+            bodyLockedCount -= 1;
+        console.log("bodyLockedCount remove", bodyLockedCount, lockedBodyScroll);
+        reset();
+        cb?.();
+    };
 };

package/dist/utilities/scroll/lockSafari.js

@@ -13,6 +13,7 @@ const lockSafariScroll = () => {
         overflow: "hidden",
     });
     return () => {
+        console.log("reset safari scroll", styleCache);
         styleCache.reset();
         window.scrollTo({ top: scrollY, left: scrollX, behavior: "instant" });
     };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.8.0-canary.1",
+	"version": "3.8.0-canary.10",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -89,8 +89,8 @@
 		"release:minor": "node bin/release.js minor",
 		"release:major": "node bin/release.js major",
 		"release:lib": "pnpm build && pnpm publish",
-		"release:canary": "pnpm build && yarn publish --tag canary",
-		"release:test": "pnpm build && pnpm pack --filename reshaped-test.tgz",
+		"release:canary": "pnpm build && yarn publish --tag canary && git push --follow-tags",
+		"release:test": "pnpm build && pnpm pack --out reshaped-test.tgz",
 		"release:copy": "sh ./bin/release-copy.sh",
 		"chromatic": "chromatic -b build:chromatic --project-token=$(cat .chromatic)",
 		"test:vrt": "pnpm chromatic",
@@ -110,34 +110,34 @@
 		"@commitlint/cli": "19.8.1",
 		"@commitlint/config-conventional": "19.8.1",
 		"@commitlint/types": "19.8.1",
-		"@eslint/js": "9.35.0",
+		"@eslint/js": "9.37.0",
 		"@size-limit/preset-big-lib": "11.2.0",
-		"@storybook/addon-a11y": "9.1.5",
-		"@storybook/addon-docs": "9.1.5",
-		"@storybook/addon-vitest": "9.1.5",
-		"@storybook/react": "9.1.5",
-		"@storybook/react-vite": "9.1.5",
+		"@storybook/addon-a11y": "9.1.10",
+		"@storybook/addon-docs": "9.1.10",
+		"@storybook/addon-vitest": "9.1.10",
+		"@storybook/react": "9.1.10",
+		"@storybook/react-vite": "9.1.10",
 		"@testing-library/user-event": "14.6.1",
 		"@types/culori": "4.0.1",
 		"@types/events": "3.0.3",
-		"@types/node": "24.3.3",
-		"@types/react": "19.1.13",
-		"@types/react-dom": "19.1.9",
+		"@types/node": "24.7.0",
+		"@types/react": "19.2.1",
+		"@types/react-dom": "19.2.0",
 		"@vitejs/plugin-react": "4.6.0",
 		"@vitest/browser": "3.2.4",
 		"@vitest/coverage-istanbul": "3.2.4",
 		"@vitest/coverage-v8": "3.2.4",
-		"chromatic": "13.1.4",
+		"chromatic": "13.3.0",
 		"conventional-changelog-cli": "5.0.0",
 		"cz-conventional-changelog": "3.3.0",
-		"eslint": "9.35.0",
+		"eslint": "9.37.0",
 		"eslint-config-prettier": "10.1.8",
 		"eslint-plugin-jsx-a11y": "6.10.2",
 		"eslint-plugin-prettier": "5.5.4",
 		"eslint-plugin-react": "7.37.5",
-		"eslint-plugin-react-hooks": "5.2.0",
-		"lefthook": "1.13.0",
-		"playwright": "1.55.0",
+		"eslint-plugin-react-hooks": "6.1.1",
+		"lefthook": "1.13.6",
+		"playwright": "1.56.0",
 		"postcss": "8.5.6",
 		"postcss-cli": "11.0.1",
 		"postcss-each": "1.1.0",
@@ -148,14 +148,14 @@
 		"react-shadow": "20.6.0",
 		"resolve-tspaths": "0.8.23",
 		"size-limit": "11.2.0",
-		"storybook": "9.1.5",
-		"stylelint": "16.24.0",
+		"storybook": "9.1.10",
+		"stylelint": "16.25.0",
 		"stylelint-config-prettier": "9.0.5",
-		"stylelint-config-standard": "39.0.0",
+		"stylelint-config-standard": "39.0.1",
 		"ts-node": "10.9.2",
-		"typescript": "5.9.2",
-		"typescript-eslint": "8.43.0",
-		"vite": "7.1.5",
+		"typescript": "5.9.3",
+		"typescript-eslint": "8.46.0",
+		"vite": "7.1.9",
 		"vite-tsconfig-paths": "5.1.4",
 		"vitest": "3.2.4",
 		"vitest-browser-react": "1.0.1"

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

@@ -1,32 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").ForwardRefExoticComponent<import("./..").ActionableProps & import("react").RefAttributes<import("./..").ActionableRef>>;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const children: StoryObj;
-export declare const href: StoryObj;
-export declare const attributesHref: StoryObj;
-export declare const onClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const hrefOnClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const as: StoryObj;
-export declare const type: StoryObj<{
-    handleSubmit: ReturnType<typeof fn>;
-}>;
-export declare const stopPropagation: StoryObj<{
-    handleParentClick: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;