reshaped 3.3.11 → 3.3.12

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

@@ -1,8 +1,7 @@
+import { expect } from "@storybook/test";
 import { Example } from "../../../utilities/storybook/index.js";
-import FormControl, { useFormControl } from "../index.js";
-import RadioGroup from "../../RadioGroup/index.js";
-import Radio from "../../Radio/index.js";
-import View from "../../View/index.js";
+import FormControl from "../index.js";
+import TextField from "../../TextField/index.js";
 export default {
     title: "Utilities/FormControl",
     component: FormControl,
@@ -12,74 +11,80 @@ export default {
         },
     },
 };
-const Input = () => {
-    const { attributes } = useFormControl();
-    return <input {...attributes}/>;
-};
-export const status = () => (<Example>
-		<Example.Item title="status: default">
-			<FormControl>
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-				<FormControl.Error>Error</FormControl.Error>
-			</FormControl>
-		</Example.Item>
+export const status = {
+    name: "status",
+    render: () => (<Example>
+			<Example.Item title="status: default">
+				<FormControl>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+					<FormControl.Error>Error</FormControl.Error>
+				</FormControl>
+			</Example.Item>
 
-		<Example.Item title="status: error">
-			<FormControl hasError>
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-				<FormControl.Error>Error</FormControl.Error>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: medium">
-			<FormControl size="medium">
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-			</FormControl>
-		</Example.Item>
-		<Example.Item title="size: large">
-			<FormControl size="large">
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled">
-			<FormControl disabled>
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const required = () => (<Example>
-		<Example.Item title="required">
-			<FormControl required>
-				<FormControl.Label>Label</FormControl.Label>
-				<Input />
-				<FormControl.Helper>Caption</FormControl.Helper>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const group = () => (<Example>
-		<Example.Item title="form group">
-			<FormControl group>
-				<FormControl.Label>Favorite animals:</FormControl.Label>
+			<Example.Item title="status: error">
+				<FormControl hasError>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+					<FormControl.Error>Error</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const inputs = canvas.getAllByRole("textbox");
+        expect(inputs[0]).toHaveAccessibleName("Label");
+        expect(inputs[0]).toHaveAccessibleDescription("Caption");
+        expect(inputs[1]).toHaveAccessibleName("Label");
+        expect(inputs[1]).toHaveAccessibleDescription("Caption Error");
+    },
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: medium">
+				<FormControl size="medium">
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
 
-				<RadioGroup name="animalGroup">
-					<View gap={2}>
-						<Radio value="dog">Dog</Radio>
-						<Radio value="cat">Cat</Radio>
-					</View>
-				</RadioGroup>
-			</FormControl>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="size: large">
+				<FormControl size="large">
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name" size="large"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+};
+export const disabled = {
+    name: "disabled",
+    render: () => (<Example>
+			<Example.Item title="disabled">
+				<FormControl disabled>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+    play: ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const required = {
+    name: "required",
+    render: () => (<Example>
+			<Example.Item title="required">
+				<FormControl required>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+};

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

@@ -0,0 +1,20 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: import("react").ComponentType<import("./..").FormControlProps> & {
+        Label: React.ComponentType<import("../FormControl.types").LabelProps>;
+        Helper: React.ComponentType<import("../FormControl.types").CaptionProps>;
+        Error: React.ComponentType<import("../FormControl.types").CaptionProps>;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const className: StoryObj;
+export declare const group: StoryObj;

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

@@ -0,0 +1,49 @@
+import { expect } from "@storybook/test";
+import FormControl from "../index.js";
+import Radio from "../../Radio/index.js";
+import RadioGroup from "../../RadioGroup/index.js";
+import TextField from "../../TextField/index.js";
+import View from "../../View/index.js";
+export default {
+    title: "Utilities/FormControl/tests",
+    component: FormControl,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/form-control",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const className = {
+    name: "id",
+    render: () => (<FormControl id="test-id" hasError>
+			<FormControl.Label>Label</FormControl.Label>
+			<TextField name="name"/>
+			<FormControl.Helper>Caption</FormControl.Helper>
+			<FormControl.Error>Error</FormControl.Error>
+		</FormControl>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        const label = canvas.getByText("Label");
+        expect(input).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("aria-describedby", `test-id-caption test-id-error`);
+        expect(label).toHaveAttribute("for", "test-id");
+        expect(label).toHaveAttribute("id", `test-id-label`);
+    },
+};
+export const group = {
+    name: "group",
+    render: () => (<FormControl group>
+			<FormControl.Label>Label</FormControl.Label>
+			<RadioGroup name="name">
+				<View gap={2}>
+					<Radio value="1">One</Radio>
+					<Radio value="2">Two</Radio>
+				</View>
+			</RadioGroup>
+		</FormControl>),
+    play: async ({ canvas }) => {
+        const group = canvas.getByRole("group");
+        expect(group).toBeInTheDocument();
+    },
+};

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

@@ -11,8 +11,23 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const layout: () => import("react").JSX.Element;
-export declare const itemLayout: () => import("react").JSX.Element;
-export declare const areas: () => import("react").JSX.Element;
-export declare const auto: () => import("react").JSX.Element;
+export declare const base: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const layout: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const itemLayout: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const areas: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const auto: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};

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

@@ -10,161 +10,176 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="gap: 2">
-			<Grid gap={2} columns={2}>
-				{[1, 2].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-		<Example.Item title="align: center">
-			<Grid gap={2} columns={2} align="center">
-				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-					1
-				</View>
-				<View backgroundColor="neutral-faded" borderRadius="medium" padding={8}>
-					2
-				</View>
-			</Grid>
-		</Example.Item>
-		<Example.Item title="justify: center">
-			<Grid gap={2} columns="200px 200px" justify="center">
-				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-					1
-				</View>
-				<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
-					2
-				</View>
-			</Grid>
-		</Example.Item>
-	</Example>);
-export const layout = () => (<Example>
-		<Example.Item title="simple: 2 rows, 3 columns">
-			<Grid gap={4} columns={3} rows={2}>
-				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-		<Example.Item title="columns template, 1fr 2fr 1fr">
-			<Grid gap={4} columns="1fr 2fr 1fr" rows={2}>
-				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-		<Example.Item title="rows template, 1fr 2fr">
-			<Grid gap={4} columns={3} rows="1fr 2fr">
-				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-		<Example.Item title="responsive">
-			<Grid gap={4} columns={{ s: 3, m: "1fr 2fr 1fr" }} rows={{ s: 2, m: "1fr 2fr" }}>
-				{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-	</Example>);
-export const itemLayout = () => (<Example>
-		<Example.Item title="column, start 1, end 3">
-			<Grid gap={4} columns={3} rows={2}>
-				<Grid.Item colStart={1} colEnd={3}>
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+export const base = {
+    name: "gap, align, justify",
+    render: () => (<Example>
+			<Example.Item title="gap: 2">
+				<Grid gap={2} columns={2}>
+					{[1, 2].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="align: center">
+				<Grid gap={2} columns={2} align="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
 						1
 					</View>
-				</Grid.Item>
-				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-		<Example.Item title="column, start 1, span 2">
-			<Grid gap={4} columns={3} rows={2}>
-				<Grid.Item colStart={1} colSpan={2}>
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-						1
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={8}>
+						2
 					</View>
-				</Grid.Item>
-				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-
-		<Example.Item title="row, start 1, end 3">
-			<Grid gap={4} columns={3} rows={2}>
-				<Grid.Item rowStart={1} rowEnd={3}>
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+				</Grid>
+			</Example.Item>
+			<Example.Item title="justify: center">
+				<Grid gap={2} columns="200px 200px" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
 						1
 					</View>
-				</Grid.Item>
-				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-
-		<Example.Item title="row, start 1, span 2">
-			<Grid gap={4} columns={3} rows={2}>
-				<Grid.Item rowStart={1} rowSpan={2}>
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-						1
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+						2
 					</View>
-				</Grid.Item>
-				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
+				</Grid>
+			</Example.Item>
+		</Example>),
+};
+export const layout = {
+    name: "rows, columns",
+    render: () => (<Example>
+			<Example.Item title="simple: 2 rows, 3 columns">
+				<Grid gap={4} columns={3} rows={2}>
+					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="columns template, 1fr 2fr 1fr">
+				<Grid gap={4} columns="1fr 2fr 1fr" rows={2}>
+					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="rows template, 1fr 2fr">
+				<Grid gap={4} columns={3} rows="1fr 2fr">
+					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="responsive">
+				<Grid gap={4} columns={{ s: 3, m: "1fr 2fr 1fr" }} rows={{ s: 2, m: "1fr 2fr" }}>
+					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+		</Example>),
+};
+export const itemLayout = {
+    name: "colStart, colEnd, rowStart, rowEnd",
+    render: () => (<Example>
+			<Example.Item title="column, start 1, end 3">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item colStart={1} colEnd={3}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+							1
+						</View>
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="column, start 1, span 2">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item colStart={1} colSpan={2}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+							1
+						</View>
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
 
-		<Example.Item title="responsive">
-			<Grid gap={4} columns={3} rows={2}>
-				<Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>
-					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-						1
-					</View>
-				</Grid.Item>
-				{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-	</Example>);
-export const areas = () => (<Example>
-		<Example.Item title="simple: 2 rows, 3 columns">
-			<Grid gap={4} rows={2} areas={["a .", "a b"]}>
-				{["a", "b"].map((area) => (<Grid.Item area={area} key={area}>
+			<Example.Item title="row, start 1, end 3">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item rowStart={1} rowEnd={3}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+							1
+						</View>
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+
+			<Example.Item title="row, start 1, span 2">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item rowStart={1} rowSpan={2}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+							1
+						</View>
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+
+			<Example.Item title="responsive">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>
 						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
-							{area}
+							1
 						</View>
-					</Grid.Item>))}
-			</Grid>
-		</Example.Item>
-	</Example>);
-export const auto = () => (<Example>
-		<Example.Item title="auto flow: column">
-			<Grid gap={4} autoFlow="column" rows={2} columns={2}>
-				{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-		<Example.Item title="auto rows">
-			<Grid gap={4} autoRows="100px" columns={2}>
-				{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-		<Example.Item title="auto columns">
-			<Grid gap={4} autoColumns="100px" autoFlow="column">
-				{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
-						{i}
-					</View>))}
-			</Grid>
-		</Example.Item>
-	</Example>);
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+		</Example>),
+};
+export const areas = {
+    name: "areas",
+    render: () => (<Example>
+			<Example.Item title="simple: 2 rows, 3 columns">
+				<Grid gap={4} rows={2} areas={["a .", "a b"]}>
+					{["a", "b"].map((area) => (<Grid.Item area={area} key={area}>
+							<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+								{area}
+							</View>
+						</Grid.Item>))}
+				</Grid>
+			</Example.Item>
+		</Example>),
+};
+export const auto = {
+    name: "autoFlow, autoColumns, autoRows",
+    render: () => (<Example>
+			<Example.Item title="auto flow: column">
+				<Grid gap={4} autoFlow="column" rows={2} columns={2}>
+					{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="auto rows">
+				<Grid gap={4} autoRows="100px" columns={2}>
+					{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="auto columns">
+				<Grid gap={4} autoColumns="100px" autoFlow="column">
+					{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+							{i}
+						</View>))}
+				</Grid>
+			</Example.Item>
+		</Example>),
+};

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

@@ -0,0 +1,19 @@
+import { StoryObj } from "@storybook/react";
+declare const _default: {
+    title: string;
+    component: {
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridProps<As>): import("react").JSX.Element;
+        Item: <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").GridItemProps<As>) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const as: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,42 @@
+import { expect } from "@storybook/test";
+import Grid from "../index.js";
+export default {
+    title: "Utilities/Grid/tests",
+    component: Grid,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/grid",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const as = {
+    name: "as",
+    render: () => (<Grid as="ul">
+			<Grid.Item as="li">Content</Grid.Item>
+		</Grid>),
+    play: ({ canvas }) => {
+        const ul = canvas.getByRole("list");
+        const li = canvas.getByRole("listitem");
+        expect(ul).toBeInTheDocument();
+        expect(li).toBeInTheDocument();
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Grid className="test-class" attributes={{ id: "test-id" }}>
+				<Grid.Item className="test-item-class" attributes={{ id: "test-item-id" }}>
+					Content
+				</Grid.Item>
+			</Grid>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const item = root?.firstChild;
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-class");
+        expect(item).toHaveAttribute("id", "test-item-id");
+        expect(item).toHaveClass("test-item-class");
+    },
+};

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

@@ -8,4 +8,7 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const visibility: () => import("react").JSX.Element;
+export declare const visibility: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};