reshaped 3.3.12 → 3.4.0-rc.0

package/dist/components/_private/Flyout/useFlyout.js

@@ -33,7 +33,8 @@ const flyout = (args) => {
     const targetClone = flyoutEl.cloneNode(true);
     const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
     const unitModifier = baseUnit ? parseInt(baseUnit) : 0;
-    const triggerBounds = passedTriggerBounds || triggerEl?.getBoundingClientRect();
+    const internalTriggerBounds = triggerEl?.getBoundingClientRect();
+    const triggerBounds = passedTriggerBounds || internalTriggerBounds;
     if (!triggerBounds)
         return;
     const resolvedTriggerBounds = getRectFromCoordinates(triggerBounds);
@@ -56,7 +57,12 @@ const flyout = (args) => {
     // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
     const flyoutBounds = targetClone.getBoundingClientRect();
-    const containerParent = container || (triggerEl ? findClosestRenderContainer({ el: triggerEl }) : document.body);
+    const closestRenderContainer = !container && triggerEl ? findClosestRenderContainer({ el: triggerEl }) : undefined;
+    const containerParent = container ||
+        // Only render inside non-scrollable container to make sure it doesn't get clipped by overflow auto
+        // We render those cases in the document root and then sync the position on scroll instead
+        (!closestRenderContainer?.scrollable ? closestRenderContainer?.el : undefined) ||
+        document.body;
     const containerBounds = containerParent.getBoundingClientRect();
     const scopeOffset = {
         top: containerBounds.top + document.documentElement.scrollTop - containerParent.scrollTop,
@@ -74,7 +80,7 @@ const flyout = (args) => {
             contentGap: contentGap * unitModifier,
             contentShift: contentShift * unitModifier,
         });
-        const visible = isFullyVisible(tested);
+        const visible = isFullyVisible({ ...tested, container });
         const validPosition = visible || fallbackPositions?.length === 0;
         // Saving first try in case non of the options work
         if (validPosition || lastUsedFallback === currentPosition) {

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

@@ -2,5 +2,7 @@ import calculatePosition from "./calculatePosition";
 /**
  * Check if element visually fits on the screen
  */
-declare const isFullyVisible: (args: ReturnType<typeof calculatePosition>) => boolean;
+declare const isFullyVisible: (args: ReturnType<typeof calculatePosition> & {
+    container?: HTMLElement | null;
+}) => boolean;
 export default isFullyVisible;

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

@@ -2,8 +2,8 @@
  * Check if element visually fits on the screen
  */
 const isFullyVisible = (args) => {
-    const { styles, scopeOffset } = args;
-    const htmlEl = document.documentElement;
+    const { styles, scopeOffset, container } = args;
+    const htmlEl = container || document.documentElement;
     const pageLeft = htmlEl.scrollLeft;
     const pageRight = pageLeft + htmlEl.clientWidth;
     const pageTop = htmlEl.scrollTop;

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

@@ -0,0 +1,2 @@
+declare const usePrevious: <T>(value?: T, clean?: boolean) => T;
+export default usePrevious;

package/dist/hooks/_private/usePrevious.js

@@ -0,0 +1,17 @@
+"use client";
+import React from "react";
+const copy = (value) => {
+    const valueIsDate = value instanceof Date;
+    if (valueIsDate)
+        return String(valueIsDate);
+    const string = JSON.stringify(value);
+    return JSON.parse(string);
+};
+const usePrevious = (value, clean = false) => {
+    const ref = React.useRef(clean ? copy(value) : value);
+    React.useEffect(() => {
+        ref.current = clean ? copy(value) : value;
+    }, [value, clean]);
+    return ref.current;
+};
+export default usePrevious;

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

@@ -5,5 +5,5 @@ type Context = {
     defaultViewport: G.Viewport;
 };
 export declare const SingletonEnvironmentContext: React.Context<Context>;
-export declare const useSingletonRTL: (defaultRTL?: boolean) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
+export declare const useSingletonEnvironment: (defaultRTL?: boolean) => [boolean, React.Dispatch<React.SetStateAction<boolean>>];
 export {};

package/dist/hooks/_private/useSingletonEnvironment.js

@@ -4,7 +4,7 @@ export const SingletonEnvironmentContext = React.createContext({
     rtl: [false, () => { }],
     defaultViewport: "s",
 });
-export const useSingletonRTL = (defaultRTL) => {
+export const useSingletonEnvironment = (defaultRTL) => {
     const state = React.useState(defaultRTL || false);
     const [isRTL, setRTL] = state;
     /**

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

@@ -1,2 +1,13 @@
-declare const useSingletonKeyboardMode: () => void;
-export default useSingletonKeyboardMode;
+import React from "react";
+type ContextProps = {
+    disabledRef: React.RefObject<boolean> | null;
+    disable: () => void;
+    enable: () => void;
+    activate: () => void;
+    deactivate: () => void;
+};
+export declare const SingletonKeyboardModeContext: React.Context<ContextProps>;
+export declare const SingletonKeyboardModeProvider: (props: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/hooks/_private/useSingletonKeyboardMode.js

@@ -1,25 +1,58 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import * as keys from "../../constants/keys.js";
-import { enableKeyboardMode, disableKeyboardMode } from "../../utilities/a11y/index.js";
-const useSingletonKeyboardMode = () => {
+import { activateKeyboardMode, deactivateKeyboardMode } from "../../utilities/a11y/index.js";
+export const SingletonKeyboardModeContext = React.createContext({
+    disabledRef: null,
+    disable: () => { },
+    enable: () => { },
+    activate: () => { },
+    deactivate: () => { },
+});
+export const SingletonKeyboardModeProvider = (props) => {
+    const disabledRef = React.useRef(false);
+    const disable = React.useCallback(() => {
+        disabledRef.current = true;
+    }, []);
+    const enable = React.useCallback(() => {
+        disabledRef.current = false;
+    }, []);
+    const activate = React.useCallback(() => {
+        if (disabledRef.current)
+            return;
+        activateKeyboardMode();
+    }, []);
+    const deactivate = React.useCallback(() => {
+        if (disabledRef.current)
+            return;
+        deactivateKeyboardMode();
+    }, []);
+    const handleKeyDown = React.useCallback((e) => {
+        if (e.metaKey || e.altKey || e.ctrlKey)
+            return;
+        // Prevent focus ring from appearing when using mouse but closing with esc
+        if (e.key === keys.ESC)
+            return;
+        activate();
+    }, [activate]);
+    const handleClick = React.useCallback(() => {
+        deactivate();
+    }, [deactivate]);
     React.useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.metaKey || e.altKey || e.ctrlKey)
-                return;
-            // Prevent focus ring from appearing when using mouse but closing with esc
-            if (e.key === keys.ESC)
-                return;
-            enableKeyboardMode();
-        };
-        const handleClick = () => {
-            disableKeyboardMode();
-        };
         window.addEventListener("keydown", handleKeyDown);
         window.addEventListener("mousedown", handleClick);
         return () => {
             window.removeEventListener("keydown", handleKeyDown);
             window.removeEventListener("mousedown", handleClick);
         };
-    }, []);
+    }, [handleClick, handleKeyDown]);
+    const value = React.useMemo(() => ({
+        disabledRef,
+        disable,
+        enable,
+        activate,
+        deactivate,
+    }), [disable, enable, activate, deactivate]);
+    return (_jsx(SingletonKeyboardModeContext.Provider, { value: value, children: props.children }));
 };
-export default useSingletonKeyboardMode;

package/dist/hooks/tests/useKeyboardMode.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+};
+export default _default;
+export declare const base: StoryObj;

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

@@ -0,0 +1,37 @@
+import { expect, userEvent } from "@storybook/test";
+import Button from "../../components/Button/index.js";
+import View from "../../components/View/index.js";
+import useKeyboardMode from "../useKeyboardMode.js";
+export default { title: "Hooks/useKeyboardMode" };
+const Component = () => {
+    const { activate, deactivate, disable, enable } = useKeyboardMode();
+    return (<View direction="row" gap={2}>
+			<Button onClick={activate}>Activate</Button>
+			<Button onClick={deactivate}>Deactivate</Button>
+			<Button onClick={disable}>Disable</Button>
+			<Button onClick={enable}>Enable</Button>
+		</View>);
+};
+export const base = {
+    name: "base",
+    render: () => <Component />,
+    play: async ({ canvas }) => {
+        const attribute = "data-rs-keyboard";
+        const root = document.documentElement;
+        const activateTrigger = canvas.getAllByRole("button")[0];
+        const deactivateTrigger = canvas.getAllByRole("button")[1];
+        const disableTrigger = canvas.getAllByRole("button")[2];
+        const enableTrigger = canvas.getAllByRole("button")[3];
+        expect(root).not.toHaveAttribute(attribute);
+        await userEvent.click(activateTrigger);
+        expect(root).toHaveAttribute(attribute);
+        await userEvent.click(deactivateTrigger);
+        expect(root).not.toHaveAttribute(attribute);
+        await userEvent.click(disableTrigger);
+        await userEvent.click(activateTrigger);
+        expect(root).not.toHaveAttribute(attribute);
+        await userEvent.click(enableTrigger);
+        await userEvent.click(activateTrigger);
+        expect(root).toHaveAttribute(attribute);
+    },
+};

package/dist/hooks/useKeyboardMode.d.ts

@@ -0,0 +1,7 @@
+declare const useKeyboardMode: () => {
+    enable: () => void;
+    disable: () => void;
+    activate: () => void;
+    deactivate: () => void;
+};
+export default useKeyboardMode;

package/dist/hooks/useKeyboardMode.js

@@ -0,0 +1,13 @@
+"use client";
+import React from "react";
+import { SingletonKeyboardModeContext } from "./_private/useSingletonKeyboardMode.js";
+const useKeyboardMode = () => {
+    const singletonKeyboardMode = React.useContext(SingletonKeyboardModeContext);
+    return React.useMemo(() => ({
+        enable: singletonKeyboardMode.enable,
+        disable: singletonKeyboardMode.disable,
+        activate: singletonKeyboardMode.activate,
+        deactivate: singletonKeyboardMode.deactivate,
+    }), [singletonKeyboardMode]);
+};
+export default useKeyboardMode;

package/dist/index.d.ts

@@ -73,6 +73,8 @@ export { default as Popover } from "./components/Popover";
 export type { PopoverProps, PopoverInstance } from "./components/Popover";
 export { default as Progress } from "./components/Progress";
 export type { ProgressProps } from "./components/Progress";
+export { default as ProgressIndicator } from "./components/ProgressIndicator";
+export type { ProgressIndicatorProps } from "./components/ProgressIndicator";
 export { default as Radio } from "./components/Radio";
 export type { RadioProps } from "./components/Radio";
 export { default as RadioGroup } from "./components/RadioGroup";
@@ -96,7 +98,7 @@ export type { StepperProps } from "./components/Stepper";
 export { default as Switch } from "./components/Switch";
 export type { SwitchProps } from "./components/Switch";
 export { default as Table } from "./components/Table";
-export type { TableProps } from "./components/Table";
+export type { TableProps, TableBodyProps, TableHeadProps, TableHeadingProps, TableCellProps, TableRowProps, } from "./components/Table";
 export { default as Tabs } from "./components/Tabs";
 export type { TabsProps } from "./components/Tabs";
 export { default as Text } from "./components/Text";
@@ -124,6 +126,7 @@ export { default as useToggle } from "./hooks/useToggle";
 export { default as useRTL } from "./hooks/useRTL";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect";
 export { default as useHotkeys } from "./hooks/useHotkeys";
+export { default as useKeyboardMode } from "./hooks/useKeyboardMode";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue";
 /**
  * Utilities

package/dist/index.js

@@ -37,6 +37,7 @@ export { default as Pagination } from "./components/Pagination/index.js";
 export { default as PinField } from "./components/PinField/index.js";
 export { default as Popover } from "./components/Popover/index.js";
 export { default as Progress } from "./components/Progress/index.js";
+export { default as ProgressIndicator } from "./components/ProgressIndicator/index.js";
 export { default as Radio } from "./components/Radio/index.js";
 export { default as RadioGroup } from "./components/RadioGroup/index.js";
 export { default as Reshaped } from "./components/Reshaped/index.js";
@@ -67,6 +68,7 @@ export { default as useToggle } from "./hooks/useToggle.js";
 export { default as useRTL } from "./hooks/useRTL.js";
 export { default as useIsomorphicLayoutEffect } from "./hooks/useIsomorphicLayoutEffect.js";
 export { default as useHotkeys } from "./hooks/useHotkeys.js";
+export { default as useKeyboardMode } from "./hooks/useKeyboardMode.js";
 export { default as useResponsiveClientValue } from "./hooks/useResponsiveClientValue.js";
 /**
  * Utilities

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

@@ -1,4 +1,4 @@
 export { focusableSelector, getActiveElement, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus";
-export { enableKeyboardMode, disableKeyboardMode, checkKeyboardMode } from "./keyboardMode";
+export { activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode } from "./keyboardMode";
 export { default as TrapFocus } from "./TrapFocus";
 export type { TrapMode, FocusableElement } from "./types";

package/dist/utilities/a11y/index.js

@@ -1,3 +1,3 @@
 export { focusableSelector, getActiveElement, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus.js";
-export { enableKeyboardMode, disableKeyboardMode, checkKeyboardMode } from "./keyboardMode.js";
+export { activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode } from "./keyboardMode.js";
 export { default as TrapFocus } from "./TrapFocus.js";

package/dist/utilities/a11y/keyboardMode.d.ts

@@ -1,3 +1,3 @@
-export declare const enableKeyboardMode: () => void;
-export declare const disableKeyboardMode: () => void;
+export declare const activateKeyboardMode: () => void;
+export declare const deactivateKeyboardMode: () => void;
 export declare const checkKeyboardMode: () => boolean;

package/dist/utilities/a11y/keyboardMode.js

@@ -1,8 +1,8 @@
 const keyboardModeAttribute = "data-rs-keyboard";
-export const enableKeyboardMode = () => {
+export const activateKeyboardMode = () => {
     document.documentElement.setAttribute(keyboardModeAttribute, "true");
 };
-export const disableKeyboardMode = () => {
+export const deactivateKeyboardMode = () => {
     document.documentElement.removeAttribute(keyboardModeAttribute);
 };
 export const checkKeyboardMode = () => {

package/dist/utilities/dom/find.d.ts

@@ -7,4 +7,7 @@ export declare const findClosestRenderContainer: (args: {
     el: HTMLElement | null;
     iteration?: number;
     overflowOnly?: boolean;
-}) => HTMLElement;
+}) => {
+    el: HTMLElement;
+    scrollable?: boolean;
+};

package/dist/utilities/dom/find.js

@@ -23,13 +23,13 @@ export const findClosestRenderContainer = (args) => {
     if (iteration === 0) {
         const shadowRoot = getShadowRoot(el);
         if (shadowRoot?.firstElementChild)
-            return shadowRoot.firstElementChild;
+            return { el: shadowRoot.firstElementChild };
     }
     if (el === document.body || !el)
-        return document.body;
+        return { el: document.body };
     if (isScrollable && el.scrollHeight > el.clientHeight)
-        return el;
+        return { el, scrollable: true };
     if (isFixed && !overflowOnly)
-        return el;
+        return { el };
     return findClosestRenderContainer({ el: el.parentElement, iteration: iteration + 1 });
 };

package/dist/utilities/scroll/lockStandard.js

@@ -5,7 +5,7 @@ const styleCache = new StyleCache();
 const lockStandardScroll = (args) => {
     let container = document.body;
     if (args.originEl)
-        container = findClosestRenderContainer({ el: args.originEl });
+        container = findClosestRenderContainer({ el: args.originEl }).el;
     if (args.containerEl)
         container = args.containerEl;
     const rect = container.getBoundingClientRect();

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.3.12",
+	"version": "3.4.0-rc.0",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",
@@ -71,9 +71,8 @@
 		"build:cjs": "tsc -p tsconfig.cjs.json && resolve-tspaths -p tsconfig.cjs.json && node ./bin/format-cjs-build.js",
 		"build:css": "postcss \"src/**/*.css\" --dir dist --base src --config tools/build",
 		"build:stories": "tsc -p tsconfig.stories.json && resolve-tspaths -p tsconfig.stories.json",
-		"build:bundle:vite": "vite build",
-		"build:bundle": "yarn build:bundle:vite && cp dist/index.d.ts dist/bundle.d.ts",
-		"build:size": "yarn clean && yarn build:esm && yarn build:bundle:vite",
+		"build:bundle": "vite build && cp dist/index.d.ts dist/bundle.d.ts",
+		"build:size": "yarn clean && yarn build:esm && yarn build:bundle",
 		"build:storybook": "storybook build -o dist/app --disable-telemetry",
 		"build:chromatic": "STORYBOOK_ENV=chromatic storybook build",
 		"release": "read -p 'Have you updated chromatic tests?' && yarn release:lib && yarn release:source && yarn build:storybook && yarn release:copy",
@@ -96,31 +95,31 @@
 		"defaults and not IE 11"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "19.6.0",
-		"@commitlint/config-conventional": "19.6.0",
+		"@commitlint/cli": "19.7.1",
+		"@commitlint/config-conventional": "19.7.1",
 		"@commitlint/types": "19.5.0",
 		"@eslint/js": "9.16.0",
-		"@size-limit/preset-big-lib": "11.1.6",
-		"@storybook/addon-a11y": "8.5.2",
-		"@storybook/addon-actions": "8.5.2",
-		"@storybook/addon-controls": "8.5.2",
-		"@storybook/addon-docs": "8.5.2",
-		"@storybook/addon-storysource": "8.5.2",
-		"@storybook/experimental-addon-test": "8.5.2",
-		"@storybook/react": "8.5.2",
-		"@storybook/react-vite": "8.5.2",
+		"@size-limit/preset-big-lib": "11.2.0",
+		"@storybook/addon-a11y": "8.6.2",
+		"@storybook/addon-actions": "8.6.2",
+		"@storybook/addon-controls": "8.6.2",
+		"@storybook/addon-docs": "8.6.2",
+		"@storybook/addon-storysource": "8.6.2",
+		"@storybook/experimental-addon-test": "8.6.2",
+		"@storybook/react": "8.6.2",
+		"@storybook/react-vite": "8.6.2",
 		"@types/culori": "2.1.1",
 		"@types/events": "3.0.3",
-		"@types/node": "22.10.1",
-		"@types/react": "19.0.8",
-		"@types/react-dom": "19.0.3",
+		"@types/node": "22.13.5",
+		"@types/react": "19.0.10",
+		"@types/react-dom": "19.0.4",
 		"@typescript-eslint/eslint-plugin": "7.18.0",
 		"@typescript-eslint/parser": "7.18.0",
 		"@vitejs/plugin-react": "4.3.4",
-		"@vitest/browser": "2.1.8",
-		"@vitest/coverage-istanbul": "2.1.8",
-		"@vitest/coverage-v8": "2.1.8",
-		"chromatic": "11.19.0",
+		"@vitest/browser": "3.0.7",
+		"@vitest/coverage-istanbul": "3.0.7",
+		"@vitest/coverage-v8": "3.0.7",
+		"chromatic": "11.26.1",
 		"cz-conventional-changelog": "3.3.0",
 		"eslint": "8.57.1",
 		"eslint-config-prettier": "9.1.0",
@@ -130,29 +129,29 @@
 		"eslint-plugin-react": "7.37.2",
 		"eslint-plugin-react-hooks": "5.0.0",
 		"globals": "15.12.0",
-		"lefthook": "1.8.4",
-		"playwright": "1.49.1",
-		"postcss": "8.4.49",
+		"lefthook": "1.11.2",
+		"playwright": "1.50.1",
+		"postcss": "8.5.3",
 		"postcss-cli": "11.0.0",
 		"postcss-each": "1.1.0",
 		"postcss-nested": "7.0.2",
-		"prettier": "3.4.1",
+		"prettier": "3.5.2",
 		"react": "18",
 		"react-dom": "18",
 		"react-shadow": "20.5.0",
 		"resolve-tspaths": "0.8.23",
-		"size-limit": "11.1.6",
-		"storybook": "8.5.2",
-		"stylelint": "16.11.0",
+		"size-limit": "11.2.0",
+		"storybook": "8.6.2",
+		"stylelint": "16.14.1",
 		"stylelint-config-prettier": "9.0.5",
-		"stylelint-config-standard": "36.0.1",
+		"stylelint-config-standard": "37.0.0",
 		"ts-node": "10.9.2",
-		"typescript": "5.7.2",
+		"typescript": "5.7.3",
 		"typescript-eslint": "8.16.0",
-		"vite": "6.0.1",
-		"vite-tsconfig-paths": "5.1.3",
-		"vitest": "2.1.8",
-		"vitest-browser-react": "0.0.4"
+		"vite": "6.2.0",
+		"vite-tsconfig-paths": "5.1.4",
+		"vitest": "3.0.7",
+		"vitest-browser-react": "0.1.1"
 	},
 	"peerDependencies": {
 		"postcss": "^8",

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

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

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

@@ -1,52 +0,0 @@
-import { expect } from "@storybook/test";
-import Carousel from "../index.js";
-export default {
-    title: "Components/Carousel/tests",
-    component: Carousel,
-    parameters: {
-        iframe: {
-            url: "https://reshaped.so/docs/components/carousel",
-        },
-        chromatic: { disableSnapshot: true },
-    },
-};
-export const render = {
-    name: "rendering",
-    render: () => (<Carousel attributes={{ "data-testid": "test-id" }}>
-			<div>Content</div>
-			<div>Content</div>
-		</Carousel>),
-    play: async ({ canvas }) => {
-        const elRoot = canvas.getByTestId("test-id");
-        const elItems = canvas.getAllByText("Content");
-        const elButtons = elRoot.querySelectorAll("button");
-        expect(elRoot).toBeInTheDocument();
-        expect(elRoot.tagName).toBe("SECTION");
-        expect(elItems).toHaveLength(2);
-        expect(elButtons).toHaveLength(2);
-    },
-};
-export const navigationDisplay = {
-    name: "navigationDisplay",
-    render: () => (<Carousel navigationDisplay="hidden" attributes={{ "data-testid": "test-id" }}>
-			<div>Content</div>
-		</Carousel>),
-    play: async ({ canvas }) => {
-        const elRoot = canvas.getByTestId("test-id");
-        const elButtons = elRoot.querySelectorAll("button");
-        expect(elButtons).toHaveLength(0);
-    },
-};
-export const className = {
-    name: "className, attributes",
-    render: () => (<div data-testid="root">
-			<Carousel className="test-classname" attributes={{ id: "test-id" }}>
-				<div>Content</div>
-			</Carousel>
-		</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/Flyout/tests/Flyout.test.stories.d.ts

@@ -1,28 +0,0 @@
-import { StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-declare const _default: {
-    title: string;
-};
-export default _default;
-export declare const defaultActive: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const active: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const activeFalse: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const triggerType: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-    handleClose: ReturnType<typeof fn>;
-}>;
-export declare const disabled: StoryObj<{
-    handleOpen: ReturnType<typeof fn>;
-}>;
-export declare const containerRef: StoryObj;
-export declare const shadowDom: StoryObj;
-export declare const className: StoryObj;