reshaped 3.3.11 → 3.3.13

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

@@ -0,0 +1,132 @@
+import { expect, userEvent, fn } from "@storybook/test";
+import Select from "../index.js";
+export default {
+    title: "Components/Select/tests",
+    component: Select,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/select",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "rendering",
+    render: () => (<Select name="test-name" options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const elInput = canvas.getByRole("combobox");
+        const elOptions = canvas.getAllByRole("option");
+        expect(elInput).toHaveAttribute("name", "test-name");
+        expect(elInput).toHaveValue("1");
+        expect(elOptions.length).toBe(2);
+        expect(elOptions[0]).toHaveValue("1");
+        expect(elOptions[0].textContent).toBe("Option 1");
+        expect(elOptions[1]).toHaveValue("2");
+        expect(elOptions[1].textContent).toBe("Option 2");
+    },
+};
+export const startSlot = {
+    name: "startSlot",
+    render: () => (<Select name="test-name" startSlot="Slot" options={[]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const slot = canvas.getByText("Slot");
+        expect(slot).toBeInTheDocument();
+    },
+};
+export const placeholder = {
+    name: "placeholder",
+    render: () => (<Select name="test-name" placeholder="Placeholder" options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("combobox");
+        const options = canvas.getAllByRole("option");
+        expect(input).toHaveValue("");
+        expect(options.length).toBe(3);
+        expect(options[0].textContent).toBe("Placeholder");
+        expect(options[0]).toHaveValue("");
+    },
+};
+export const id = {
+    name: "id",
+    render: () => (<Select name="test-name" id="test-id" options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("combobox");
+        expect(input).toHaveAttribute("id", "test-id");
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Select name="test-name" disabled options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("combobox");
+        expect(input).toBeDisabled();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Select name="test-name" defaultValue="2" onChange={args.handleChange} options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("combobox");
+        expect(input).toHaveValue("2");
+        await userEvent.selectOptions(input, "1");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "1",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("1");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Select name="test-name" value="2" onChange={args.handleChange} options={[
+            { label: "Option 1", value: "1" },
+            { label: "Option 2", value: "2" },
+        ]} inputAttributes={{ "aria-label": "test select" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("combobox");
+        expect(input).toHaveValue("2");
+        await userEvent.selectOptions(input, "1");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "1",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("2");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Select className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} options={[]} name="name"/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("combobox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

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

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

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

@@ -0,0 +1,23 @@
+import { expect } from "@storybook/test";
+import Skeleton from "../index.js";
+export default {
+    title: "Components/Skeleton/tests",
+    component: Skeleton,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/skeleton",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Skeleton 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/Slider/tests/Slider.stories.d.ts

@@ -14,4 +14,3 @@ export declare const step: () => import("react").JSX.Element;
 export declare const boundaries: () => import("react").JSX.Element;
 export declare const status: () => import("react").JSX.Element;
 export declare const customRender: () => import("react").JSX.Element;
-export declare const formControl: () => import("react").JSX.Element;

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

@@ -13,7 +13,7 @@ export default {
 };
 export const base = () => (<Example>
 		<Example.Item title="range">
-			<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100} renderValue={() => "Hundred more times"}/>
+			<Slider range name="slider" defaultMinValue={30} defaultMaxValue={100}/>
 		</Example.Item>
 		<div style={{ height: 2000 }}/>
 	</Example>);
@@ -48,17 +48,16 @@ export const status = () => (<Example>
 	</Example>);
 export const customRender = () => (<Example>
 		<Example.Item title="custom render">
-			<Slider name="slider" defaultValue={30} renderValue={(args) => `$${args.value}`}/>
+			<FormControl>
+				<FormControl.Label>Slider value</FormControl.Label>
+				<Slider name="slider" defaultValue={30} renderValue={(args) => `$${args.value}`}/>
+			</FormControl>
 		</Example.Item>
+
 		<Example.Item title="no tooltip">
-			<Slider name="slider" defaultValue={30} renderValue={false}/>
-		</Example.Item>
-	</Example>);
-export const formControl = () => (<Example>
-		<Example.Item title="form control, disabled">
-			<FormControl disabled>
+			<FormControl>
 				<FormControl.Label>Slider value</FormControl.Label>
-				<Slider name="slider"/>
+				<Slider name="slider" defaultValue={30} renderValue={false}/>
 			</FormControl>
 		</Example.Item>
 	</Example>);

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

@@ -0,0 +1,38 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").SliderProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+    handleChangeCommit: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+    handleChangeCommit: ReturnType<typeof fn>;
+}>;
+export declare const rangeDefaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+    handleChangeCommit: ReturnType<typeof fn>;
+}>;
+export declare const rangeValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+    handleChangeCommit: ReturnType<typeof fn>;
+}>;
+export declare const minMax: StoryObj;
+export declare const step: StoryObj;
+export declare const stepFloat: StoryObj;
+export declare const renderValue: StoryObj;
+export declare const withoutTooltipValue: StoryObj;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,150 @@
+import { expect, fn, fireEvent } from "@storybook/test";
+import Slider from "../index.js";
+export default {
+    title: "Components/Slider/tests",
+    component: Slider,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/slider",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+        handleChangeCommit: fn(),
+    },
+    render: (args) => (<Slider name="test-name" defaultValue={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("slider");
+        expect(input).toHaveValue("50");
+        fireEvent.change(input, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
+        expect(input).toHaveValue("51");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+        handleChangeCommit: fn(),
+    },
+    render: (args) => (<Slider name="test-name" value={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("slider");
+        expect(input).toHaveValue("50");
+        fireEvent.change(input, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
+        expect(input).toHaveValue("50");
+    },
+};
+export const rangeDefaultValue = {
+    name: "range, defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+        handleChangeCommit: fn(),
+    },
+    render: (args) => (<Slider range name="test-name" defaultMinValue={50} defaultMaxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
+    play: async ({ canvas, args }) => {
+        const [minInput, maxInput] = canvas.getAllByRole("slider");
+        expect(minInput).toHaveValue("50");
+        expect(maxInput).toHaveValue("70");
+        fireEvent.change(minInput, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            minValue: 51,
+            maxValue: 70,
+            name: "test-name",
+        });
+        expect(minInput).toHaveValue("51");
+        expect(maxInput).toHaveValue("70");
+    },
+};
+export const rangeValue = {
+    name: "range, value, controlled",
+    args: {
+        handleChange: fn(),
+        handleChangeCommit: fn(),
+    },
+    render: (args) => (<Slider range name="test-name" minValue={50} maxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>),
+    play: async ({ canvas, args }) => {
+        const [minInput, maxInput] = canvas.getAllByRole("slider");
+        expect(minInput).toHaveValue("50");
+        expect(maxInput).toHaveValue("70");
+        fireEvent.change(minInput, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            minValue: 51,
+            maxValue: 70,
+            name: "test-name",
+        });
+        expect(minInput).toHaveValue("50");
+        expect(maxInput).toHaveValue("70");
+    },
+};
+export const minMax = {
+    name: "min, max",
+    render: () => <Slider name="nmae" range min={50} max={70}/>,
+    play: async ({ canvas }) => {
+        const [minInputEl, maxInputEl] = canvas.getAllByRole("slider");
+        expect(minInputEl).toHaveAttribute("min", "50");
+        expect(minInputEl).toHaveAttribute("max", "70");
+        expect(maxInputEl).toHaveAttribute("min", "50");
+        expect(maxInputEl).toHaveAttribute("max", "70");
+    },
+};
+export const step = {
+    name: "step",
+    render: () => <Slider name="name" defaultValue={11} step={5}/>,
+    play: async ({ canvas }) => {
+        const inputEl = canvas.getByRole("slider");
+        expect(inputEl).toHaveValue("10");
+    },
+};
+export const stepFloat = {
+    name: "step, float",
+    render: () => <Slider name="name" defaultValue={20.24} step={0.1}/>,
+    play: async ({ canvas }) => {
+        const inputEl = canvas.getByRole("slider");
+        expect(inputEl).toHaveValue("20.2");
+    },
+};
+export const renderValue = {
+    name: "renderValue",
+    render: () => <Slider name="name" defaultValue={50} renderValue={(args) => `$${args.value}`}/>,
+    play: async ({ canvas }) => {
+        const tooltipEl = canvas.getByText(`$50`);
+        expect(tooltipEl).toBeInTheDocument();
+    },
+};
+export const withoutTooltipValue = {
+    name: "renderValue=false",
+    render: () => <Slider name="name" defaultValue={50} renderValue={false}/>,
+    play: async ({ canvas }) => {
+        const tooltipEl = canvas.queryByText(`$50`);
+        expect(tooltipEl).not.toBeInTheDocument();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => <Slider name="name" defaultValue={50} disabled/>,
+    play: async ({ canvas }) => {
+        const inputEl = canvas.getByRole("slider");
+        expect(inputEl).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Slider name="name" 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/Stepper/Stepper.js

@@ -13,7 +13,7 @@ const StepperItemPrivate = (props) => {
     const { title, subtitle, children, direction, className, attributes, labelDisplay, step, completed, active, last, } = props;
     const labelHidden = labelDisplay && responsivePropDependency(labelDisplay, (value) => value === "hidden");
     const labelNode = (_jsx(View, { gap: 3, grow: true, children: _jsxs(View.Item, { children: [_jsx(Text, { variant: "body-3", weight: "medium", children: title }), _jsx(Text, { variant: "caption-1", color: "neutral-faded", children: subtitle })] }) }));
-    return (_jsxs(View, { children: [_jsxs(View, { attributes: attributes, className: className, direction: "row", gap: 2, align: "center", position: "static", children: [_jsxs(View.Item, { children: [_jsx(View, { align: "center", justify: "center", backgroundColor: active || completed ? "primary" : "neutral-faded", borderColor: active || completed ? undefined : "neutral-faded", borderRadius: "circular", as: "span", width: 8, height: 8, zIndex: 5, children: _jsx(Text, { variant: "body-3", weight: active ? "bold" : "medium", children: completed ? _jsx(Icon, { svg: IconCheckmark, size: 4 }) : step }) }), direction === "column" && !last && _jsx(Divider, { vertical: true, className: s.verticalDivider })] }), labelDisplay ? _jsx(Hidden, { hide: labelHidden, children: labelNode }) : labelNode] }), direction === "column" && children && (_jsx(Expandable, { active: active, children: _jsx(View, { paddingStart: 10, paddingTop: 2, children: children }) }))] }));
+    return (_jsxs(View, { attributes: attributes, className: className, children: [_jsxs(View, { direction: "row", gap: 2, align: "center", position: "static", children: [_jsxs(View.Item, { children: [_jsx(View, { align: "center", justify: "center", backgroundColor: active || completed ? "primary" : "neutral-faded", borderColor: active || completed ? undefined : "neutral-faded", borderRadius: "circular", as: "span", width: 8, height: 8, zIndex: 5, children: _jsx(Text, { variant: "body-3", weight: active ? "bold" : "medium", children: completed ? _jsx(Icon, { svg: IconCheckmark, size: 4 }) : step }) }), direction === "column" && !last && _jsx(Divider, { vertical: true, className: s.verticalDivider })] }), labelDisplay ? _jsx(Hidden, { hide: labelHidden, children: labelNode }) : labelNode] }), direction === "column" && children && (_jsx(Expandable, { active: active, children: _jsx(View, { paddingStart: 10, paddingTop: 2, children: children }) }))] }));
 };
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const StepperItem = (_) => null;

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

@@ -73,9 +73,6 @@ export const labelDisplay = () => (<Example>
 		</Example.Item>
 	</Example>);
 export const edgeCases = () => (<Example>
-		<Example.Item title="collapsible">
-			<Demo />
-		</Example.Item>
 		<Example.Item title={[
         "multiline subtitle",
         "should wrap the text correctly",

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

@@ -0,0 +1,18 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").StepperProps): import("react").JSX.Element;
+        Item: (_: import("../Stepper.types").ItemProps) => null;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const className: StoryObj;

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

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

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

@@ -0,0 +1,23 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: (props: import("./..").SwitchProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const defaultChecked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const checked: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const disabled: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,79 @@
+import { expect, fn, userEvent } from "@storybook/test";
+import Switch from "../index.js";
+export default {
+    title: "Components/Switch/tests",
+    component: Switch,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/switch",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const defaultChecked = {
+    name: "defaultChecked, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Switch name="test-name" defaultChecked onChange={args.handleChange}>
+			Label
+		</Switch>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            checked: false,
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).not.toBeChecked();
+    },
+};
+export const checked = {
+    name: "checked, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<Switch name="test-name" checked onChange={args.handleChange}>
+			Label
+		</Switch>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toBeChecked();
+        await userEvent.click(input);
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            checked: false,
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toBeChecked();
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Switch disabled name="name">
+			Label
+		</Switch>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("checkbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Switch className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} name="name">
+				Label
+			</Switch>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("checkbox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

package/dist/components/Table/index.d.ts

@@ -1,2 +1,2 @@
 export { default } from "./Table";
-export type { Props as TableProps } from "./Table.types";
+export type { Props as TableProps, HeadProps as TableHeadProps, BodyProps as TableBodyProps, RowProps as TableRowProps, CellProps as TableCellProps, HeadingProps as TableHeadingProps, } from "./Table.types";

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

@@ -3,11 +3,11 @@ declare const _default: {
     title: string;
     component: {
         (props: import("./..").TableProps): React.JSX.Element;
-        Cell: (props: import("../Table.types").CellProps) => React.JSX.Element;
-        Heading: (props: import("../Table.types").HeadingProps) => React.JSX.Element;
-        Row: (props: import("../Table.types").RowProps) => React.JSX.Element;
-        Body: (props: import("../Table.types").BodyProps) => React.JSX.Element;
-        Head: (props: import("../Table.types").HeadProps) => React.JSX.Element;
+        Cell: (props: import("./..").TableCellProps) => React.JSX.Element;
+        Heading: (props: import("./..").TableHeadingProps) => React.JSX.Element;
+        Row: (props: import("./..").TableRowProps) => React.JSX.Element;
+        Body: (props: import("./..").TableBodyProps) => React.JSX.Element;
+        Head: (props: import("./..").TableHeadProps) => React.JSX.Element;
     };
     parameters: {
         iframe: {

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

@@ -0,0 +1,25 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").TableProps): import("react").JSX.Element;
+        Cell: (props: import("./..").TableCellProps) => import("react").JSX.Element;
+        Heading: (props: import("./..").TableHeadingProps) => import("react").JSX.Element;
+        Row: (props: import("./..").TableRowProps) => import("react").JSX.Element;
+        Body: (props: import("./..").TableBodyProps) => import("react").JSX.Element;
+        Head: (props: import("./..").TableHeadProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const tbody: StoryObj;
+export declare const tabIndex: StoryObj;
+export declare const className: StoryObj;