reshaped 3.8.0-canary.7 → 3.8.0-canary.9

package/dist/components/View/View.js

@@ -134,6 +134,7 @@ const View = (props) => {
         if (!child)
             return null;
         const usedIndex = renderedItemIndex;
+        // eslint-disable-next-line react-hooks/immutability
         renderedItemIndex += 1;
         if (isMatchingComponentChildId(child, "Hidden")) {
             const { children: hiddenChild, ...hiddenProps } = child.props;

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/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/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/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.7",
+	"version": "3.8.0-canary.9",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -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/Alert/tests/Alert.test.stories.d.ts

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

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

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

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

@@ -1,20 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("../Badge.types").Export;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const href: StoryObj;
-export declare const onClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const className: StoryObj;

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

@@ -1,46 +0,0 @@
-import { expect, fn, userEvent } from "storybook/test";
-import Badge from "../index.js";
-export default {
-    title: "Components/Badge/tests",
-    component: Badge,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/badge",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const href = {
-    name: "href",
-    render: () => (<Badge href="https://reshaped.so" dismissAriaLabel="Dismiss">
-			Badge
-		</Badge>),
-    play: async ({ canvas }) => {
-        const link = canvas.getByRole("link");
-        expect(link).toHaveAttribute("href", "https://reshaped.so");
-    },
-};
-export const onClick = {
-    name: "onClick",
-    args: {
-        handleClick: fn(),
-    },
-    render: (args) => <Badge onClick={args.handleClick}>Badge</Badge>,
-    play: async ({ canvas, args }) => {
-        const button = canvas.getAllByRole("button")[0];
-        await userEvent.click(button);
-        expect(args.handleClick).toHaveBeenCalledTimes(1);
-        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Badge color="primary" className="test-classname" attributes={{ id: "test-id" }}/>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,23 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("react").FC<import("./..").BreadcrumbsProps> & {
-        Item: import("react").FC<import("../Breadcrumbs.types").ItemProps>;
-    };
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const onClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const href: StoryObj;
-export declare const collapsible: StoryObj;
-export declare const className: StoryObj;

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

@@ -1,76 +0,0 @@
-import { fn, expect, userEvent } from "storybook/test";
-import Breadcrumbs from "../index.js";
-export default {
-    title: "Components/Breadcrumbs/tests",
-    component: Breadcrumbs,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/breadcrumbs",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const onClick = {
-    name: "item, onClick, disabled",
-    args: {
-        handleClick: fn(),
-    },
-    render: (args) => (<Breadcrumbs>
-			<Breadcrumbs.Item onClick={args.handleClick}>Trigger</Breadcrumbs.Item>
-			<Breadcrumbs.Item onClick={args.handleClick} disabled>
-				Trigger
-			</Breadcrumbs.Item>
-		</Breadcrumbs>),
-    play: async ({ args, canvas }) => {
-        const trigggers = canvas.getAllByRole("button");
-        await userEvent.click(trigggers[0]);
-        expect(args.handleClick).toHaveBeenCalledTimes(1);
-        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: trigggers[0] }));
-        await userEvent.click(trigggers[1]);
-        expect(args.handleClick).toHaveBeenCalledTimes(1);
-    },
-};
-export const href = {
-    name: "item, href",
-    render: () => (<Breadcrumbs>
-			<Breadcrumbs.Item href="https://reshaped.so">Trigger</Breadcrumbs.Item>
-		</Breadcrumbs>),
-    play: async ({ canvas }) => {
-        const trigggers = canvas.getAllByRole("link");
-        expect(trigggers[0]).toHaveAttribute("href", "https://reshaped.so");
-    },
-};
-export const collapsible = {
-    name: "collapsible",
-    render: () => (<Breadcrumbs defaultVisibleItems={2} expandAriaLabel="Expand">
-			<Breadcrumbs.Item onClick={() => { }}>Trigger 1</Breadcrumbs.Item>
-			<Breadcrumbs.Item onClick={() => { }}>Trigger 2</Breadcrumbs.Item>
-			<Breadcrumbs.Item onClick={() => { }}>Trigger 3</Breadcrumbs.Item>
-			<Breadcrumbs.Item onClick={() => { }}>Trigger 4</Breadcrumbs.Item>
-		</Breadcrumbs>),
-    play: async ({ canvas }) => {
-        let triggers = canvas.getAllByRole("button");
-        expect(triggers[0]).toHaveTextContent("Trigger 1");
-        expect(triggers[1]).toHaveAccessibleName("Expand");
-        expect(triggers[2]).toHaveTextContent("Trigger 4");
-        await userEvent.click(triggers[1]);
-        triggers = canvas.getAllByRole("button");
-        expect(triggers[0]).toHaveTextContent("Trigger 1");
-        expect(triggers[1]).toHaveTextContent("Trigger 2");
-        expect(triggers[2]).toHaveTextContent("Trigger 3");
-        expect(triggers[3]).toHaveTextContent("Trigger 4");
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Breadcrumbs className="test-classname" attributes={{ id: "test-id" }}>
-				<Breadcrumbs.Item>Trigger</Breadcrumbs.Item>
-			</Breadcrumbs>
-		</div>),
-    play: async ({ canvas }) => {
-        const root = canvas.getByTestId("root").firstChild;
-        expect(root).toHaveClass("test-classname");
-        expect(root).toHaveAttribute("id", "test-id");
-    },
-};

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

@@ -1,28 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import { fn } from "storybook/test";
-declare const _default: {
-    title: string;
-    component: import("../Button.types").Export;
-    parameters: {
-        iframe: {
-            url: string;
-        };
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const children: StoryObj;
-export declare const href: StoryObj;
-export declare const onClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const hrefOnClick: StoryObj<{
-    handleClick: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj;
-export declare const as: StoryObj;
-export declare const className: StoryObj;
-export declare const group: StoryObj;
-export declare const groupClassName: StoryObj;