reshaped 3.8.0-canary.2 → 3.8.0-canary.21

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

@@ -6,6 +6,7 @@ import View from "../../View/index.js";
 import Text from "../../Text/index.js";
 import Button from "../../Button/index.js";
 import Badge from "../../Badge/index.js";
+import { expect, fn, userEvent } from "storybook/test";
 export default {
     title: "Components/TextField",
     component: TextField,
@@ -15,143 +16,222 @@ export default {
         },
     },
 };
-export const value = () => (<Example>
-		<Example.Item title="no value, placeholder">
-			<TextField name="Name" placeholder="Enter your name" icon={IconZap} endIcon={<div>EndIconHere</div>}/>
-		</Example.Item>
+export const variant = {
+    name: "variant",
+    render: () => (<Example>
+			<Example.Item title="variant: faded">
+				<TextField variant="faded" name="Name" placeholder="Enter your name"/>
+			</Example.Item>
 
-		<Example.Item title="value, uncontrolled">
-			<TextField name="Name" defaultValue="Reshaped" placeholder="Enter your name"/>
-		</Example.Item>
+			<Example.Item title="variant: headless">
+				<TextField variant="headless" name="Name" placeholder="Enter your name"/>
+			</Example.Item>
+		</Example>),
+};
+export const rounded = {
+    name: "rounded",
+    render: () => (<Example>
+			<Example.Item title="rounded">
+				<TextField rounded name="Name" placeholder="Enter your name" icon={IconZap} prefix="+31" endSlot={<Button rounded size="small" icon={IconZap}/>}/>
+			</Example.Item>
 
-		<Example.Item title="value, controlled">
-			<TextField name="Name" value="Reshaped" placeholder="Enter your name"/>
-		</Example.Item>
-	</Example>);
-export const variants = () => (<Example>
-		<Example.Item title="variant: faded">
-			<TextField variant="faded" name="Name" placeholder="Enter your name"/>
-		</Example.Item>
+			<Example.Item title="rounded, variant: faded">
+				<View direction="row" gap={2}>
+					<View.Item grow>
+						<TextField rounded variant="faded" name="Name" placeholder="Enter your name" startSlot={<Badge rounded size="small">
+									Hello
+								</Badge>}/>
+					</View.Item>
+					<Button rounded>Submit</Button>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const error = {
+    name: "hasError",
+    render: () => (<Example>
+			<Example.Item title="error">
+				<TextField name="Name" placeholder="Enter your name" hasError/>
+			</Example.Item>
+		</Example>),
+};
+export const attachments = {
+    name: "icon, endIcon, suffix, prefix, startSlot, endSlot, startSlotPadding, endSlotPadding",
+    render: () => (<Example>
+			<Example.Item title="icon">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="endIcon">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title="variant: headless">
-			<TextField variant="headless" name="Name" placeholder="Enter your name"/>
-		</Example.Item>
-	</Example>);
-export const rounded = () => (<Example>
-		<Example.Item title="rounded">
-			<TextField rounded name="Name" placeholder="Enter your name" icon={IconZap} prefix="+31" endSlot={<Button rounded size="small" icon={IconZap}/>}/>
-		</Example.Item>
+			<Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={20}/>}/>
+			</Example.Item>
 
-		<Example.Item title="rounded, variant: faded">
-			<View direction="row" gap={2}>
-				<View.Item grow>
-					<TextField rounded variant="faded" name="Name" placeholder="Enter your name" startSlot={<Badge rounded size="small">
-								Hello
-							</Badge>}/>
-				</View.Item>
-				<Button rounded>Submit</Button>
-			</View>
-		</Example.Item>
-	</Example>);
-export const disabled = () => (<Example>
-		<Example.Item title="disabled, no value">
-			<TextField name="Name" placeholder="Enter your name" disabled/>
-		</Example.Item>
-		<Example.Item title="disabled, value">
-			<TextField name="Name" placeholder="Enter your name" disabled value="Reshaped"/>
-		</Example.Item>
-	</Example>);
-export const error = () => (<Example>
-		<Example.Item title="error">
-			<TextField name="Name" placeholder="Enter your name" hasError/>
-		</Example.Item>
-	</Example>);
-export const attachments = () => (<Example>
-		<Example.Item title="icon">
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" icon={IconZap}/>
-		</Example.Item>
-		<Example.Item title="endIcon">
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap}/>
-		</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={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
+			</Example.Item>
 
-		<Example.Item title="width affixes">
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2"/>
-		</Example.Item>
+			<Example.Item title="paddingSlotStart=4, paddingSlotEnd=2">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlotPadding={4} endSlotPadding={2} startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>}/>
+			</Example.Item>
 
-		<Example.Item title="multine">
-			<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2" multiline/>
-		</Example.Item>
-	</Example>);
-export const size = () => (<Example>
-		<Example.Item title="size: small">
-			<TextField name="Name" placeholder="Enter your name" size="small" icon={IconZap}/>
-		</Example.Item>
+			<Example.Item title="with all affixes">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2" startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>}/>
+			</Example.Item>
 
-		<Example.Item title="size: medium">
-			<TextField name="Name" placeholder="Enter your name" size="medium" icon={IconZap}/>
-		</Example.Item>
+			<Example.Item title="multiline wrap">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge size="small" key={i}>
+							Item {i + 1}
+						</Badge>))} multiline/>
+			</Example.Item>
+		</Example>),
+};
+export const size = {
+    name: "size",
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<TextField name="Name" placeholder="Enter your name" size="small" icon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title="size: large">
-			<TextField name="Name" placeholder="Enter your name" size="large" icon={IconZap}/>
-		</Example.Item>
+			<Example.Item title="size: medium">
+				<TextField name="Name" placeholder="Enter your name" size="medium" icon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title="size: xlarge">
-			<TextField name="Name" placeholder="Enter your name" size="xlarge" icon={IconZap}/>
-		</Example.Item>
+			<Example.Item title="size: large">
+				<TextField name="Name" placeholder="Enter your name" size="large" icon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
-			<TextField name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }} icon={IconZap}/>
-		</Example.Item>
-	</Example>);
-export const affixes = () => (<Example>
-		<Example.Item title="prefix">
-			<TextField name="phone" placeholder="Enter your phone number" value="Reshaped" prefix="+31"/>
-		</Example.Item>
+			<Example.Item title="size: xlarge">
+				<TextField name="Name" placeholder="Enter your name" size="xlarge" icon={IconZap}/>
+			</Example.Item>
 
-		<Example.Item title="suffix">
-			<TextField name="area" placeholder="Enter your room ara" value="25" suffix="m2"/>
-		</Example.Item>
-	</Example>);
-export const slots = () => (<Example>
-		<Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
-			<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={() => { }} 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 size="small" key={i}>
-						Item {i + 1}
-					</Badge>))} multiline/>
-		</Example.Item>
-	</Example>);
-export const formControl = () => (<Example>
-		<Example.Item title="with helper">
-			<FormControl>
-				<FormControl.Label>Name</FormControl.Label>
-				<TextField name="name" placeholder="Enter your name"/>
-				<FormControl.Helper>Helper</FormControl.Helper>
-				<FormControl.Error>This field is required</FormControl.Error>
-			</FormControl>
-		</Example.Item>
-		<Example.Item title="with error">
-			<FormControl hasError>
-				<FormControl.Label>Name</FormControl.Label>
-				<TextField name="name" placeholder="Enter your name"/>
-				<FormControl.Error>This field is required</FormControl.Error>
-			</FormControl>
-		</Example.Item>
-	</Example>);
-export const aligner = () => (<Example>
-		<Example.Item title="aligner">
-			<View gap={2}>
-				<Text variant="featured-2">What problem are you trying to solve?</Text>
-				<TextField.Aligner>
-					<TextField variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
-				</TextField.Aligner>
-				<View.Item>
-					<Button>Next</Button>
-				</View.Item>
-			</View>
-		</Example.Item>
-	</Example>);
+			<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
+				<TextField name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }} icon={IconZap}/>
+			</Example.Item>
+		</Example>),
+};
+export const aligner = {
+    name: "aligner",
+    render: () => (<Example>
+			<Example.Item title="aligner">
+				<View gap={2}>
+					<Text variant="featured-2">What problem are you trying to solve?</Text>
+					<TextField.Aligner>
+						<TextField variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
+					</TextField.Aligner>
+					<View.Item>
+						<Button>Next</Button>
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const render = {
+    name: "base",
+    render: () => <TextField 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: () => (<TextField 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: () => (<TextField 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: () => <TextField 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) => (<TextField 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: "value2",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value2");
+    },
+};
+export const value = {
+    name: "value, controlled",
+    args: {
+        handleChange: fn(),
+    },
+    render: (args) => (<TextField 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: "value2",
+            event: expect.objectContaining({ target: input }),
+        });
+        expect(input).toHaveValue("value");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<TextField 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");
+    },
+};
+export const formControl = {
+    name: "test: form control",
+    render: () => (<Example>
+			<Example.Item title="with helper">
+				<FormControl>
+					<FormControl.Label>Name</FormControl.Label>
+					<TextField name="name" placeholder="Enter your name"/>
+					<FormControl.Helper>Helper</FormControl.Helper>
+					<FormControl.Error>This field is required</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+			<Example.Item title="with error">
+				<FormControl hasError>
+					<FormControl.Label>Name</FormControl.Label>
+					<TextField name="name" placeholder="Enter your name"/>
+					<FormControl.Error>This field is required</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
+};

package/dist/components/Theme/Theme.module.css

@@ -1 +1 @@
-.root{--rs-focus-shadow:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-focus-inset-shadow:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral);display:contents}
+.root{--rs-radius-circular:9999px;--rs-shadow-focus:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-shadow-focus-inset:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base);color:var(--rs-color-foreground-neutral);display:contents}

package/dist/components/Timeline/Timeline.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import React, { isValidElement } from "react";
 import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
 import s from "./Timeline.module.css";
@@ -13,7 +13,7 @@ const Timeline = (props) => {
     const { children, className, attributes } = props;
     const rootClassNames = classNames(className);
     return (_jsx("ul", { ...attributes, className: rootClassNames, children: React.Children.map(children, (child, index) => {
-            return React.isValidElement(child) && child.type === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
+            return isValidElement(child) && child.type === TimelineItem ? (child) : (_jsx(TimelineItem, { children: child }, index));
         }) }));
 };
 Timeline.Item = TimelineItem;

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: import("react").FC<import("./..").TimelineProps> & {
@@ -10,5 +11,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const marker: () => import("react").JSX.Element;
+export declare const base: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const marker: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const className: StoryObj;

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

@@ -1,5 +1,6 @@
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Timeline from "../index.js";
+import { expect } from "storybook/test";
 export default {
     title: "Components/Timeline",
     component: Timeline,
@@ -9,54 +10,77 @@ export default {
         },
     },
 };
-export const base = () => (<Example>
-		<Example.Item title="children passed directly">
-			<Timeline>
-				<Placeholder />
-				<Placeholder />
-				<Placeholder />
-			</Timeline>
-		</Example.Item>
-		<Example.Item title="children wrapped with Timeline.Item">
-			<Timeline>
-				<Timeline.Item>
-					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item>
+export const base = {
+    name: "base",
+    render: () => (<Example>
+			<Example.Item title="children passed directly">
+				<Timeline>
 					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item>
 					<Placeholder />
-				</Timeline.Item>
-			</Timeline>
-		</Example.Item>
-	</Example>);
-export const marker = () => (<Example>
-		<Example.Item title="slot">
-			<Timeline>
-				<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
 					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
-					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
-					<Placeholder />
-				</Timeline.Item>
-			</Timeline>
-		</Example.Item>
+				</Timeline>
+			</Example.Item>
+			<Example.Item title="children wrapped with Timeline.Item">
+				<Timeline>
+					<Timeline.Item>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item>
+						<Placeholder />
+					</Timeline.Item>
+				</Timeline>
+			</Example.Item>
+		</Example>),
+};
+export const marker = {
+    name: "markerSlot",
+    render: () => (<Example>
+			<Example.Item title="slot">
+				<Timeline>
+					<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item markerSlot={<Placeholder h="20px" w="20px"/>}>
+						<Placeholder />
+					</Timeline.Item>
+				</Timeline>
+			</Example.Item>
 
-		<Example.Item title="null marker">
-			<Timeline>
-				<Timeline.Item markerSlot={null}>
-					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item markerSlot={null}>
-					<Placeholder />
-				</Timeline.Item>
-				<Timeline.Item>
-					<Placeholder />
+			<Example.Item title="null marker">
+				<Timeline>
+					<Timeline.Item markerSlot={null}>
+						<Placeholder />
+					</Timeline.Item>
+					<Timeline.Item markerSlot={null}>
+						<Placeholder />
+					</Timeline.Item>
+				</Timeline>
+			</Example.Item>
+		</Example>),
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Timeline className="test-classname" attributes={{ id: "test-id" }}>
+				<Timeline.Item className="test-item-classname" attributes={{ id: "test-item-id" }}>
+					Content
 				</Timeline.Item>
+				<Timeline.Item>Content</Timeline.Item>
 			</Timeline>
-		</Example.Item>
-	</Example>);
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        const items = canvas.getAllByRole("listitem");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(items).toHaveLength(2);
+        expect(items[0]).toHaveClass("test-item-classname");
+        expect(items[0]).toHaveAttribute("id", "test-item-id");
+    },
+};

package/dist/components/Toast/ToastContainer.js

@@ -89,6 +89,7 @@ const ToastContainer = (props) => {
             // Height + padding + borders
             height: status === "entered" ? `calc(${toastHeight}px + var(--rs-unit-x2) + 2px)` : 0,
             // Disable transition when height of the toast can change
+            // eslint-disable-next-line react-hooks/refs
             transitionDuration: resizingRef.current ? "0s" : undefined,
         }, onTransitionEnd: handleTransitionEnd, onFocus: stopTimer, onBlur: startTimer, children: _jsx("span", { className: s.wrapper, children: _jsx(Toast, { ...toastProps, collapsed: index > 0 && !inspected, attributes: { ...toastProps.attributes, ref: wrapperRef } }) }) }));
 };

package/dist/components/Toast/ToastRegion.js

@@ -56,6 +56,7 @@ const ToastRegion = (props) => {
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
     _jsx("ul", { role: "region", "aria-live": "polite", className: regionClassNames, ref: rootRef, onTouchStart: handleTouchStart, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: { width }, children: queue.map((data, index) => {
             const visibleIndex = filteredLength - index + hiddenCount - 1;
+            // eslint-disable-next-line react-hooks/immutability
             if (data.status !== "entered")
                 hiddenCount += 1;
             return (_jsx(ToastContainer, { ...data, index: visibleIndex, inspected: inspecting || !!expanded }, data.id));

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

@@ -1,3 +1,4 @@
+import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     parameters: {
@@ -7,11 +8,34 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const base: () => import("react").JSX.Element;
-export declare const size: () => import("react").JSX.Element;
-export declare const position: () => import("react").JSX.Element;
-export declare const color: () => import("react").JSX.Element;
-export declare const timeout: () => import("react").JSX.Element;
-export declare const regionOptions: () => import("react").JSX.Element;
-export declare const slots: () => import("react").JSX.Element;
-export declare const edgeCases: () => import("react").JSX.Element;
+export declare const size: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const position: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const color: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const timeout: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const regionOptions: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const slots: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const base: StoryObj;
+export declare const nested: StoryObj;
+export declare const className: StoryObj;
+export declare const edgeCases: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};