reshaped 3.3.10 → 3.3.12

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

@@ -9,129 +9,152 @@ export default {
         },
     },
 };
-export const variant = () => (<Example>
-		<Example.Item title="variant: title-1">
-			<Text variant="title-1">Title 1</Text>
-		</Example.Item>
-		<Example.Item title="variant: title-2">
-			<Text variant="title-2">Title 2</Text>
-		</Example.Item>
-		<Example.Item title="variant: title-3">
-			<Text variant="title-3">Title 3</Text>
-		</Example.Item>
-		<Example.Item title="variant: title-4">
-			<Text variant="title-4">Title 4</Text>
-		</Example.Item>
-		<Example.Item title="variant: title-5">
-			<Text variant="title-5">Title 5</Text>
-		</Example.Item>
-		<Example.Item title="variant: title-6">
-			<Text variant="title-6">Title 6</Text>
-		</Example.Item>
-		<Example.Item title="variant: featured-1">
-			<Text variant="featured-1">Featured 1</Text>
-		</Example.Item>
-		<Example.Item title="variant: featured-2">
-			<Text variant="featured-2">Featured 2</Text>
-		</Example.Item>
-		<Example.Item title="variant: featured-3">
-			<Text variant="featured-3">Featured 3</Text>
-		</Example.Item>
-		<Example.Item title="variant: body-1">
-			<Text variant="body-1">Body 1</Text>
-		</Example.Item>
-		<Example.Item title="variant: body-2">
-			<Text variant="body-2">Body 2</Text>
-		</Example.Item>
-		<Example.Item title="variant: body-3">
-			<Text variant="body-3">Body 3</Text>
-		</Example.Item>
-		<Example.Item title="variant: caption-1">
-			<Text variant="caption-1">Caption 1</Text>
-		</Example.Item>
-		<Example.Item title="variant: caption-2">
-			<Text variant="caption-2">Caption 2</Text>
-		</Example.Item>
-		<Example.Item title={["responsive variant", "[s] body-3", "[m+] title-4"]}>
-			<Text variant={{ s: "body-3", m: "title-4" }}>Responsive</Text>
-		</Example.Item>
-	</Example>);
-export const weight = () => (<Example>
-		<Example.Item title="weight: regular">
-			<Text weight="regular">Regular</Text>
-		</Example.Item>
-		<Example.Item title="weight: medium">
-			<Text weight="medium">Medium</Text>
-		</Example.Item>
-		<Example.Item title="weight: bold">
-			<Text weight="bold">Bold</Text>
-		</Example.Item>
-		<Example.Item title={["responsive", "[s] weight: regular", "[m+] bold"]}>
-			<Text weight={{ s: "regular", m: "bold" }}>Responsive</Text>
-		</Example.Item>
-	</Example>);
-export const color = () => (<Example>
-		<Example.Item title="color: inherit">
-			<Text>Neutral</Text>
-		</Example.Item>
-		<Example.Item title="color: neutral-faded">
-			<Text color="neutral-faded">Faded</Text>
-		</Example.Item>
-		<Example.Item title="color: positive">
-			<Text color="positive">Positive</Text>
-		</Example.Item>
-		<Example.Item title="color: warning">
-			<Text color="warning">Warning</Text>
-		</Example.Item>
-		<Example.Item title="color: critical">
-			<Text color="critical">Critical</Text>
-		</Example.Item>
-		<Example.Item title="color: primary">
-			<Text color="primary">Primary</Text>
-		</Example.Item>
-		<Example.Item title="color: disabled">
-			<Text color="disabled">Disabled</Text>
-		</Example.Item>
-	</Example>);
-export const decoration = () => (<Example>
-		<Example.Item title="decoration: line-through">
-			<Text decoration="line-through">Line through</Text>
-		</Example.Item>
-	</Example>);
-export const wrap = () => (<Example>
-		<Example.Item title="wrap: balance">
-			<Text wrap="balance" variant="title-3">
-				The design system you want to build
-			</Text>
-		</Example.Item>
-	</Example>);
-export const maxLines = () => (<Example>
-		<Example.Item title="maxLines: 2">
-			<Text maxLines={2}>
-				There are many variations of passages of Lorem Ipsum available, but the majority have
-				suffered alteration in some form, by injected humour, or randomised words which don't look
-				even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be
-				sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum
-				generators on the Internet tend to repeat predefined chunks as necessary, making this the
-				first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined
-				with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable.
-				The generated Lorem Ipsum is therefore always free from repetition, injected humour, or
-				non-characteristic words etc.
-			</Text>
-		</Example.Item>
-	</Example>);
-export const align = () => (<Example>
-		<Example.Item title="align: start">
-			<Text align="start">Text content</Text>
-		</Example.Item>
-		<Example.Item title="align: center">
-			<Text align="center">Text content</Text>
-		</Example.Item>
-		<Example.Item title="align: end">
-			<Text align="end">Text content</Text>
-		</Example.Item>
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: title-1">
+				<Text variant="title-1">Title 1</Text>
+			</Example.Item>
+			<Example.Item title="variant: title-2">
+				<Text variant="title-2">Title 2</Text>
+			</Example.Item>
+			<Example.Item title="variant: title-3">
+				<Text variant="title-3">Title 3</Text>
+			</Example.Item>
+			<Example.Item title="variant: title-4">
+				<Text variant="title-4">Title 4</Text>
+			</Example.Item>
+			<Example.Item title="variant: title-5">
+				<Text variant="title-5">Title 5</Text>
+			</Example.Item>
+			<Example.Item title="variant: title-6">
+				<Text variant="title-6">Title 6</Text>
+			</Example.Item>
+			<Example.Item title="variant: featured-1">
+				<Text variant="featured-1">Featured 1</Text>
+			</Example.Item>
+			<Example.Item title="variant: featured-2">
+				<Text variant="featured-2">Featured 2</Text>
+			</Example.Item>
+			<Example.Item title="variant: featured-3">
+				<Text variant="featured-3">Featured 3</Text>
+			</Example.Item>
+			<Example.Item title="variant: body-1">
+				<Text variant="body-1">Body 1</Text>
+			</Example.Item>
+			<Example.Item title="variant: body-2">
+				<Text variant="body-2">Body 2</Text>
+			</Example.Item>
+			<Example.Item title="variant: body-3">
+				<Text variant="body-3">Body 3</Text>
+			</Example.Item>
+			<Example.Item title="variant: caption-1">
+				<Text variant="caption-1">Caption 1</Text>
+			</Example.Item>
+			<Example.Item title="variant: caption-2">
+				<Text variant="caption-2">Caption 2</Text>
+			</Example.Item>
+			<Example.Item title={["responsive variant", "[s] body-3", "[m+] title-4"]}>
+				<Text variant={{ s: "body-3", m: "title-4" }}>Responsive</Text>
+			</Example.Item>
+		</Example>),
+};
+export const weight = {
+    name: "weight",
+    render: () => (<Example>
+			<Example.Item title="weight: regular">
+				<Text weight="regular">Regular</Text>
+			</Example.Item>
+			<Example.Item title="weight: medium">
+				<Text weight="medium">Medium</Text>
+			</Example.Item>
+			<Example.Item title="weight: bold">
+				<Text weight="bold">Bold</Text>
+			</Example.Item>
+			<Example.Item title={["responsive", "[s] weight: regular", "[m+] bold"]}>
+				<Text weight={{ s: "regular", m: "bold" }}>Responsive</Text>
+			</Example.Item>
+		</Example>),
+};
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: inherit">
+				<Text>Neutral</Text>
+			</Example.Item>
+			<Example.Item title="color: neutral-faded">
+				<Text color="neutral-faded">Faded</Text>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Text color="positive">Positive</Text>
+			</Example.Item>
+			<Example.Item title="color: warning">
+				<Text color="warning">Warning</Text>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Text color="critical">Critical</Text>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<Text color="primary">Primary</Text>
+			</Example.Item>
+			<Example.Item title="color: disabled">
+				<Text color="disabled" attributes={{ "aria-disabled": true }}>
+					Disabled
+				</Text>
+			</Example.Item>
+		</Example>),
+};
+export const decoration = {
+    name: "decoration",
+    render: () => (<Example>
+			<Example.Item title="decoration: line-through">
+				<Text decoration="line-through">Line through</Text>
+			</Example.Item>
+		</Example>),
+};
+export const wrap = {
+    name: "wrap",
+    render: () => (<Example>
+			<Example.Item title="wrap: balance">
+				<Text wrap="balance" variant="title-3">
+					The design system you want to build
+				</Text>
+			</Example.Item>
+		</Example>),
+};
+export const maxLines = {
+    name: "maxLines",
+    render: () => (<Example>
+			<Example.Item title="maxLines: 2">
+				<Text maxLines={2}>
+					There are many variations of passages of Lorem Ipsum available, but the majority have
+					suffered alteration in some form, by injected humour, or randomised words which don't look
+					even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be
+					sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum
+					generators on the Internet tend to repeat predefined chunks as necessary, making this the
+					first true generator on the Internet. It uses a dictionary of over 200 Latin words,
+					combined with a handful of model sentence structures, to generate Lorem Ipsum which looks
+					reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected
+					humour, or non-characteristic words etc.
+				</Text>
+			</Example.Item>
+		</Example>),
+};
+export const align = {
+    name: "align",
+    render: () => (<Example>
+			<Example.Item title="align: start">
+				<Text align="start">Text content</Text>
+			</Example.Item>
+			<Example.Item title="align: center">
+				<Text align="center">Text content</Text>
+			</Example.Item>
+			<Example.Item title="align: end">
+				<Text align="end">Text content</Text>
+			</Example.Item>
 
-		<Example.Item title={["responsive alignment", "[s]: center", "[m+] start"]}>
-			<Text align={{ s: "center", m: "start" }}>Text content</Text>
-		</Example.Item>
-	</Example>);
+			<Example.Item title={["responsive alignment", "[s]: center", "[m+] start"]}>
+				<Text align={{ s: "center", m: "start" }}>Text content</Text>
+			</Example.Item>
+		</Example>),
+};

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

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

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

@@ -0,0 +1,49 @@
+import { expect } from "@storybook/test";
+import Text from "../index.js";
+export default {
+    title: "Utilities/Text/tests",
+    component: Text,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/text",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const asProp = {
+    name: "as",
+    render: () => <Text as="h1">Content</Text>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("heading");
+        expect(el).toBeInTheDocument();
+    },
+};
+export const headingAs = {
+    name: "heading tag resolving",
+    render: () => <Text variant="title-3">Content</Text>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("heading");
+        expect(el.tagName).toBe("H3");
+    },
+};
+export const headingAsResponsive = {
+    name: "heading tag resolving, responsive",
+    render: () => <Text variant={{ s: "title-3", m: "title-4" }}>Content</Text>,
+    play: async ({ canvas }) => {
+        const el = canvas.getByRole("heading");
+        expect(el.tagName).toBe("H4");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Text className="test-classname" attributes={{ id: "test-id" }}>
+				Content
+			</Text>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/TextArea/TextArea.module.css

@@ -1 +1 @@
-.root{display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";visibility:hidden;white-space:pre-wrap}.input,.root:after{border:1px solid var(--rs-color-border-neutral);box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:calc(var(--rs-p) - 1px);width:100%;word-break:break-word}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-radius-small);color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input[disabled]{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded .input:focus{border-color:var(--rs-color-border-primary)}.root.--variant-headless .input{background:transparent;border-color:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{border-color:transparent;box-shadow:none}.root.--status-error .input{border-color:var(--rs-color-border-critical)}.root.--status-error .input:active,.root.--status-error .input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
+.root{display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";visibility:hidden;white-space:pre-wrap}.input,.root:after{border:1px solid var(--rs-color-border-neutral);box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:calc(var(--rs-p) - 1px);width:100%;word-break:break-all}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-radius-small);color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input[disabled]{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded .input:focus{border-color:var(--rs-color-border-primary)}.root.--variant-headless .input{background:transparent;border-color:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{border-color:transparent;box-shadow:none}.root.--status-error .input{border-color:var(--rs-color-border-critical)}.root.--status-error .input:active,.root.--status-error .input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}

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

@@ -109,6 +109,6 @@ export const edgeCases = () => (<Example>
 		<Example.Item title="long value without breaks">
 			<TextArea name="hey" defaultValue={`<div style="position:relative;width:100%;padding-top:calc(150% + 72px)">
 	<iframe src="nskjdfdsdkjfsjkdfhbsjlhdfbsjlhfbs;jhbsdljfhsbljhfsbljhfbsjlfdhbsljhfbsdljhfbsljhfbslufbhsdlfds" />
-</div>`} resize="auto"/>
+</div>`} resize="auto" placeholder="Placeholder"/>
 		</Example.Item>
 	</Example>);

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

@@ -0,0 +1,29 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").TextAreaProps): import("react").JSX.Element;
+        Aligner: (props: import("../../_private/Aligner").AlignerProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const placeholder: StoryObj;
+export declare const id: StoryObj;
+export declare const disabled: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;

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

@@ -0,0 +1,99 @@
+import { expect, fn, userEvent } from "@storybook/test";
+import TextArea from "../index.js";
+export default {
+    title: "Components/TextArea/tests",
+    component: TextArea,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/text-area",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const render = {
+    name: "base",
+    render: () => <TextArea name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).toHaveAccessibleName("Label");
+    },
+};
+export const placeholder = {
+    name: "placeholder",
+    render: () => (<TextArea name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("");
+        expect(input).toHaveAttribute("placeholder", "Placeholder");
+    },
+};
+export const id = {
+    name: "id",
+    render: () => (<TextArea name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveAttribute("id", "test-id");
+    },
+};
+export const disabled = {
+    name: "disabled",
+    render: () => <TextArea name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
+    play: async ({ canvas }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toBeDisabled();
+    },
+};
+export const defaultValue = {
+    name: "defaultValue, uncontrolled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextArea name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2value",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("2value");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextArea name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    play: async ({ canvas, args }) => {
+        const input = canvas.getByRole("textbox");
+        expect(input).toHaveValue("value");
+        input.focus();
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
+            name: "test-name",
+            value: "2value",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<TextArea className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const input = canvas.getByRole("textbox");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
+    },
+};

package/dist/components/TextField/TextField.js

@@ -12,7 +12,9 @@ const TextFieldSlot = (props) => {
     if (!icon && !slot && !affix)
         return null;
     // In case fragment is used, map over its children instead
-    const renderedSlot = React.isValidElement(slot) && slot.type === React.Fragment ? slot.props.children : slot;
+    const renderedSlot = React.isValidElement(slot) && slot.type === React.Fragment
+        ? slot.props.children
+        : slot;
     const slotNode = slot &&
         React.Children.map(renderedSlot, (child) => (_jsx("div", { className: classNames(s.slot, s[`slot--position-${position}`]), children: child }, "slot")));
     const iconNode = icon && (_jsx("label", { className: s.icon, htmlFor: id, children: _jsx(Icon, { size: responsivePropDependency(size, (size) => {

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

@@ -113,7 +113,7 @@ export const slots = () => (<Example>
 			<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={20}/>}/>
 		</Example.Item>
 		<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }}/>}/>
+			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlot={<Button icon={IconZap} size="small" onClick={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
 		</Example.Item>
 		<Example.Item title="multiline wrap">
 			<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge key={i}>Item {i + 1}</Badge>))} multiline/>

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

@@ -0,0 +1,29 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: {
+        (props: import("./..").TextFieldProps): import("react").JSX.Element;
+        Aligner: (props: import("../../_private/Aligner").AlignerProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const render: StoryObj;
+export declare const placeholder: StoryObj;
+export declare const id: StoryObj;
+export declare const disabled: StoryObj;
+export declare const defaultValue: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const value: StoryObj<{
+    handleChange: ReturnType<typeof fn>;
+}>;
+export declare const className: StoryObj;