From 0358ef20d753f3de60a1bb5fdd72ab5600fa09b8 Mon Sep 17 00:00:00 2001
From: Michael Shilman <shilman@users.noreply.github.com>
Date: Thu, 20 Nov 2025 18:21:35 +0800
Subject: [PATCH 1/2] Update reshaped flight booking eval

---
 .../components.json                           | 3549 +----------------
 .../stories/FlightBooking.stories.tsx         |  281 +-
 .../110-flight-booking-reshaped/prompt.md     |   18 +-
 3 files changed, 250 insertions(+), 3598 deletions(-)

diff --git a/eval/evals/110-flight-booking-reshaped/components.json b/eval/evals/110-flight-booking-reshaped/components.json
index c3b408c5..85e34449 100644
--- a/eval/evals/110-flight-booking-reshaped/components.json
+++ b/eval/evals/110-flight-booking-reshaped/components.json
@@ -1,3548 +1 @@
-{
-	"v": 0,
-	"components": {
-		"components-actionbar": {
-			"id": "components-actionbar",
-			"name": "ActionBar",
-			"path": "./src/components/ActionBar/tests/ActionBar.stories.tsx",
-			"stories": [
-				{
-					"name": "positionRelative",
-					"snippet": "const positionRelative = () => (\n    <Example>\n        <Example.Item title=\"position: top\">\n            <ActionBar position=\"top\">\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <ActionBar position=\"bottom\">\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "positionAbsolute",
-					"snippet": "const positionAbsolute = () => (\n    <Example>\n        <Example.Item title=\"position: top-start\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top-start\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: top\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: top-end\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top-end\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom-start\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom-start\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom-end\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "positionFixed",
-					"snippet": "const positionFixed = () => (\n    <>\n        <ActionBar padding={2} position=\"top-start\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"top\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"top-end\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom-start\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom-end\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <div style={{ height: 2000 }} />\n    </>\n);"
-				},
-				{
-					"name": "elevated",
-					"snippet": "const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated, position: top\">\n            <ActionBar position=\"top\" elevated>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"elevated, position: bottom\">\n            <ActionBar elevated>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"auto elevated, position: bottom\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "offset",
-					"snippet": "const offset = () => (\n    <Example>\n        <Example.Item title=\"offset 2, position: top\">\n            <Fixtures.Container>\n                <ActionBar position=\"top\" positionType=\"absolute\" offset={2}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"offset 2, position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\" offset={2}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"offset s: 2, m: 4, position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\" offset={{ s: 2, m: 4 }}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "active",
-					"snippet": "const active = () => {\n    const barToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => barToggle.toggle()}>Toggle</Button>\n            <ActionBar active={barToggle.active} positionType=\"fixed\" position=\"top-end\">\n                <Fixtures.Actions />\n            </ActionBar>\n        </>\n    );\n};"
-				},
-				{
-					"name": "padding",
-					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 6\">\n            <ActionBar padding={6}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"paddingBlock: 2, paddingInline: 4\">\n            <ActionBar paddingBlock={2} paddingInline={4}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"padding: [s] 4, [m+] 6\">\n            <ActionBar padding={{ s: 4, m: 6 }}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <ActionBar className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </ActionBar>\n    </div>\n);"
-				}
-			],
-			"import": "import ActionBar from \"components/ActionBar\";\nimport Button from \"components/Button\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "ActionBar",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/ActionBar/ActionBar.tsx",
-				"actualName": "ActionBar",
-				"exportName": "default"
-			}
-		},
-		"components-alert": {
-			"id": "components-alert",
-			"name": "Alert",
-			"path": "./src/components/Alert/tests/Alert.stories.tsx",
-			"stories": [
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        {([\"neutral\", \"primary\", \"critical\", \"positive\", \"warning\"] as const).map((color) => (\n            <Example.Item title={`color: ${color}`} key={color}>\n                <Alert\n                    color={color}\n                    title=\"Alert title goes here\"\n                    icon={IconZap}\n                    actionsSlot={\n                        <>\n                            <Link\n                                variant=\"plain\"\n                                color={color === \"neutral\" ? \"primary\" : color}\n                                onClick={() => {}}\n                            >\n                                View now\n                            </Link>\n                            <Link\n                                variant=\"plain\"\n                                color={color === \"neutral\" ? \"primary\" : color}\n                                onClick={() => {}}\n                            >\n                                Dismiss\n                            </Link>\n                        </>\n                    }\n                >\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard\n                </Alert>\n            </Example.Item>\n        ))}\n    </Example>\n);"
-				},
-				{
-					"name": "inline",
-					"snippet": "const inline = () => (\n    <Example>\n        <Example.Item title=\"inline: true\">\n            <Alert\n                inline\n                title=\"Alert title goes here\"\n                icon={IconZap}\n                actionsSlot={\n                    <>\n                        <Link variant=\"plain\" onClick={() => {}}>\n                            View now\n                        </Link>\n                        <Link variant=\"plain\" onClick={() => {}}>\n                            Dismiss\n                        </Link>\n                    </>\n                }\n            >\n                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n                been the industry's standard\n            </Alert>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "bleed",
-					"snippet": "const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4\">\n            <Alert bleed={4} icon={IconZap}>\n                Content\n            </Alert>\n        </Example.Item>\n        <Example.Item title=\"bleed: [s] 4, [m+] 0\">\n            <Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>\n                Content\n            </Alert>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Alert className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </Alert>\n    </div>\n);"
-				}
-			],
-			"import": "import Alert from \"components/Alert\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport Link from \"components/Link\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Alert",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Alert/Alert.tsx",
-				"actualName": "Alert",
-				"exportName": "default"
-			}
-		},
-		"components-autocomplete": {
-			"id": "components-autocomplete",
-			"name": "Autocomplete",
-			"path": "./src/components/Autocomplete/tests/Autocomplete.stories.tsx",
-			"stories": [
-				{
-					"name": "active",
-					"snippet": "const active = (args) => {\n    const toggle = useToggle(true);\n\n    return (\n        <Example>\n            <Example.Item title=\"active, onOpen, onClose\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete\n                        name=\"fruit\"\n                        placeholder=\"Pick your food\"\n                        active={toggle.active}\n                        onOpen={() => {\n                            args.handleOpen();\n                            toggle.activate();\n                        }}\n                        onClose={() => {\n                            args.handleClose();\n                            toggle.deactivate();\n                        }}\n                        onChange={(args) => console.log(args)}\n                    >\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "base",
-					"snippet": "const base = () => {\n    const [value, setValue] = React.useState(\"\");\n\n    return (\n        <Example>\n            <Example.Item title=\"Base\">\n                <FormControl>\n                    <FormControl.Label>Food</FormControl.Label>\n                    <Autocomplete\n                        name=\"fruit\"\n                        placeholder=\"Pick your food\"\n                        value={value}\n                        onChange={(args) => setValue(args.value)}\n                        onBackspace={fn()}\n                        onItemSelect={fn()}>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "itemData",
-					"snippet": "const itemData = () => {\n    return (\n        <Example>\n            <Example.Item title=\"item data\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete name=\"fruit\" placeholder=\"Pick your food\" onItemSelect={fn()} active>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v} data={i === 1 ? { foo: true } : undefined}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "itemDisabled",
-					"snippet": "const itemDisabled = () => {\n    return (\n        <Example>\n            <Example.Item title=\"item disabled\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete name=\"fruit\" placeholder=\"Pick your food\" active>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v} disabled={i === 1}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "multiselect",
-					"snippet": "const multiselect = () => {\n    const options = [\n        \"Pizza\",\n        \"Pie\",\n        \"Ice-cream\",\n        \"Fries\",\n        \"Salad\",\n        \"Option 4\",\n        \"Option 5\",\n        \"Option 6\",\n    ];\n\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const [values, setValues] = React.useState<string[]>([\n        \"Option 4\",\n        \"Option 5\",\n        \"Option 6\",\n        \"Pizza\",\n        \"Ice-cream\",\n    ]);\n    const [query, setQuery] = React.useState(\"\");\n\n    const handleDismiss = (dismissedValue: string) => {\n        const nextValues = values.filter((value) => value !== dismissedValue);\n        setValues(nextValues);\n        inputRef.current?.focus();\n    };\n\n    const valuesNode = values.map((value) => (\n        <Badge dismissAriaLabel=\"Dismiss value\" onDismiss={() => handleDismiss(value)} key={value}>\n            {value}\n        </Badge>\n    ));\n\n    return (\n        <FormControl>\n            <FormControl.Label>Food</FormControl.Label>\n            <Autocomplete\n                name=\"fruit\"\n                value={query}\n                placeholder=\"Pick your food\"\n                startSlot={valuesNode}\n                multiline\n                inputAttributes={{ ref: inputRef }}\n                onChange={(args) => setQuery(args.value)}\n                onBackspace={() => {\n                    if (query.length === 0) {\n                        setValues((prev) => prev.slice(0, -1));\n                    }\n                }}\n                onItemSelect={(args) => {\n                    setQuery(\"\");\n                    setValues((prev) => [...prev, args.value]);\n                }}\n            >\n                {options.map((v) => {\n                    if (!v.toLowerCase().includes(query.toLowerCase())) return;\n                    if (values.includes(v)) return;\n\n                    return (\n                        <Autocomplete.Item key={v} value={v}>\n                            {v}\n                        </Autocomplete.Item>\n                    );\n                })}\n            </Autocomplete>\n        </FormControl>\n    );\n};"
-				}
-			],
-			"import": "import Autocomplete from \"components/Autocomplete\";\nimport Badge from \"components/Badge\";\nimport { Example } from \"utilities/storybook\";\nimport FormControl from \"components/FormControl\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Autocomplete",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Autocomplete/Autocomplete.tsx",
-				"actualName": "Autocomplete",
-				"exportName": "default"
-			}
-		},
-		"components-avatar": {
-			"id": "components-avatar",
-			"name": "Avatar",
-			"path": "./src/components/Avatar/tests/Avatar.stories.tsx",
-			"stories": [
-				{
-					"name": "src",
-					"snippet": "const src = () => (\n    <Example>\n        <Example.Item title=\"src, alt\">\n            <Avatar\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n                alt=\"Amsterdam canal\"\n                size={12}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"src\">\n            <Avatar src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "initials",
-					"snippet": "const initials = () => (\n    <Example>\n        <Example.Item title=\"initials\">\n            <Avatar initials=\"RS\" />\n        </Example.Item>\n\n        <Example.Item title=\"icon\">\n            <Avatar icon={IconZap} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: 6\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={6} icon={IconZap} />\n                <Avatar size={6} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: 15\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={15} icon={IconZap} />\n                <Avatar size={15} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: 40\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={40} icon={IconZap} />\n                <Avatar size={40} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] 10\", \"[m+] 20\"]}>\n            <View direction=\"row\" gap={3}>\n                <Avatar size={{ s: 10, m: 20 }} icon={IconZap} />\n                <Avatar size={{ s: 10, m: 20 }} icon={IconZap} squared />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "squared",
-					"snippet": "const squared = () => (\n    <Example>\n        <Example.Item title=\"squared, with image\">\n            <Avatar\n                squared\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n            />\n        </Example.Item>\n        <Example.Item title=\"squared, with initials\">\n            <Avatar squared initials=\"RS\" />\n        </Example.Item>\n        <Example.Item title=\"squared, with initials\">\n            <Avatar squared icon={IconZap} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "colors",
-					"snippet": "const colors = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"neutral\" icon={IconZap} />\n                <Avatar color=\"neutral\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"primary\" icon={IconZap} />\n                <Avatar color=\"primary\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"positive\" icon={IconZap} />\n                <Avatar color=\"positive\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"warning\" icon={IconZap} />\n                <Avatar color=\"warning\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"critical\" icon={IconZap} />\n                <Avatar color=\"critical\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "fallback",
-					"snippet": "const fallback = (args) => {\n    const [error, setError] = useState(false);\n\n    return (\n        <Avatar\n            src={error ? undefined : \"/foo\"}\n            icon={IconZap}\n            imageAttributes={{\n                onError: () => {\n                    setError(true);\n                    args.handleError();\n                },\n            }}\n        />\n    );\n};"
-				},
-				{
-					"name": "renderImage",
-					"snippet": "const renderImage = () => (\n    <Example>\n        <Example.Item title=\"renderImage\">\n            <Avatar\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n                alt=\"Amsterdam canal\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image\" />}\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Avatar\n            src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            imageAttributes={{ id: \"test-image-id\", alt: \"test image\" }}\n        />\n    </div>\n);"
-				}
-			],
-			"import": "import Avatar from \"components/Avatar\";\nimport { Example } from \"utilities/storybook\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Avatar",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Avatar/Avatar.tsx",
-				"actualName": "Avatar",
-				"exportName": "default"
-			}
-		},
-		"components-badge": {
-			"id": "components-badge",
-			"name": "Badge",
-			"path": "./src/components/Badge/tests/Badge.stories.tsx",
-			"stories": [
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Badge>Badge</Badge>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <Badge variant=\"faded\">Badge</Badge>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <Badge variant=\"outline\">Badge</Badge>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"primary\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"primary\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"primary\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: positive, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"positive\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"positive\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"positive\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: critical, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"critical\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"critical\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"critical\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: warning, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"warning\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"warning\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"warning\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"small\">Badge</Badge>\n                <Badge rounded size=\"small\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge>Badge</Badge>\n                <Badge rounded>Badge</Badge>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"large\">Badge</Badge>\n                <Badge rounded size=\"large\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "icon",
-					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={3} direction=\"row\">\n                <Badge icon={IconCheckmark} endIcon={IconChevronRight} size=\"small\">\n                    Badge\n                </Badge>\n                <Badge icon={IconCheckmark} size=\"small\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={3} direction=\"row\">\n                <Badge icon={IconCheckmark} endIcon={IconChevronRight}>\n                    Badge\n                </Badge>\n                <Badge icon={IconCheckmark} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"large\" icon={IconCheckmark} endIcon={IconChevronRight}>\n                    Badge\n                </Badge>\n\n                <Badge icon={IconCheckmark} size=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "onDismiss",
-					"snippet": "const onDismiss = () => <Example>\n    <Example.Item title=\"onDismiss\">\n        <Badge onDismiss={fn()} dismissAriaLabel=\"Dismiss\">Badge\n                            </Badge>\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "rounded",
-					"snippet": "const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded>Badge</Badge>\n                <Badge rounded variant=\"faded\">\n                    Badge\n                </Badge>\n                <Badge rounded variant=\"outline\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"rounded, all sizes, color: critical\", \"one character, renders as circle\"]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Badge rounded color=\"critical\" size=\"small\">\n                    2\n                </Badge>\n                <Badge rounded color=\"critical\">\n                    2\n                </Badge>\n                <Badge rounded color=\"critical\" size=\"large\">\n                    2\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "empty",
-					"snippet": "const empty = () => (\n    <Example>\n        <Example.Item title=\"empty, not rounded, all sizes, color: critical\">\n            <View direction=\"row\" gap={3}>\n                <Badge size=\"small\" color=\"critical\" />\n                <Badge color=\"critical\" />\n                <Badge size=\"large\" color=\"critical\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"empty, rounded, all sizes, color: critical\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded size=\"small\" color=\"critical\" />\n                <Badge rounded color=\"critical\" />\n                <Badge rounded size=\"large\" color=\"critical\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"empty, rounded, all sizes, color: neutral\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded size=\"small\" color=\"neutral\" />\n                <Badge rounded />\n                <Badge rounded size=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "highlighted",
-					"snippet": "const highlighted = () => (\n    <Example>\n        <Example.Item title=\"highlighted, color: neutral\">\n            <View gap={3} direction=\"row\">\n                <Badge highlighted>Badge</Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "container",
-					"snippet": "const container = () => {\n    const [hidden, setHidden] = React.useState(false);\n\n    return (\n        <Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>\n            <Example.Item title=\"position: top-end\">\n                <Badge.Container>\n                    <Badge color=\"primary\" hidden={hidden}>\n                        5\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: bottom-end\">\n                <Badge.Container position=\"bottom-end\">\n                    <Badge color=\"primary\" hidden={hidden}>\n                        5\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: top-end, rounded, multiple digits\">\n                <Badge.Container>\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        123\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: top-end, rounded, empty\">\n                <Badge.Container>\n                    <Badge color=\"primary\" rounded hidden={hidden} />\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: top-end, overlap\", \"should cover the circular avatar\"]}>\n                <Badge.Container overlap>\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        2\n                    </Badge>\n                    <Avatar initials=\"A\" />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: bottom-end, overlap\", \"should cover the circular avatar\"]}>\n                <Badge.Container overlap position=\"bottom-end\">\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        2\n                    </Badge>\n                    <Avatar initials=\"A\" />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: top-end, overlap\", \"should cover the icon\"]}>\n                <Badge.Container overlap position=\"top-end\">\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden} />\n                    <Icon svg={IconCheckmark} size={5} />\n                </Badge.Container>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "href",
-					"snippet": "const href = () => (\n    <Badge href=\"https://reshaped.so\" dismissAriaLabel=\"Dismiss\">\n        Badge\n    </Badge>\n);"
-				},
-				{
-					"name": "onClick",
-					"snippet": "const onClick = () => <Badge onClick={fn()}>Badge</Badge>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Badge color=\"primary\" className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
-				}
-			],
-			"import": "import Avatar from \"components/Avatar\";\nimport Badge from \"components/Badge\";\nimport Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport Icon from \"components/Icon\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Badge",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Badge/Badge.tsx",
-				"actualName": "Badge",
-				"exportName": "default"
-			}
-		},
-		"components-breadcrumbs": {
-			"id": "components-breadcrumbs",
-			"name": "Breadcrumbs",
-			"path": "./src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx",
-			"stories": [
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <Breadcrumbs ariaLabel=\"breadcrumb neutral\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"color: primary\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb primary\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "item",
-					"snippet": "const item = () => (\n    <Example>\n        <Example.Item title=\"disabled item\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb disabled\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}} disabled>\n                    Disabled item 2\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "icon",
-					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"item with icon\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb with icon\">\n                <Breadcrumbs.Item icon={IconZap} onClick={() => {}}>\n                    Item 1\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "slots",
-					"snippet": "const slots = () => (\n    <Example>\n        <Example.Item title=\"slot: separator\">\n            <Breadcrumbs color=\"primary\" separator=\"/\" ariaLabel=\"breadcrumb with separator\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"custom child content\">\n            <Breadcrumbs ariaLabel=\"breadcrumb with custom children\">\n                <Breadcrumbs.Item onClick={() => {}}>\n                    <Badge>Item 1</Badge>\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>\n                    <Badge>Item 2</Badge>\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "collapsed",
-					"snippet": "const collapsed = () => (\n    <Example>\n        <Example.Item title=\"collapsed, 3 items shown by default\">\n            <Breadcrumbs\n                defaultVisibleItems={3}\n                ariaLabel=\"breadcrumbs one\"\n                expandAriaLabel=\"Expand items\"\n            >\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"collapsed, 4 items shown by default\">\n            <Breadcrumbs\n                defaultVisibleItems={4}\n                ariaLabel=\"breadcrumb two\"\n                expandAriaLabel=\"Expand items\"\n            >\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"collapsed, 3 items shown by default, not expandable\">\n            <Breadcrumbs defaultVisibleItems={3} ariaLabel=\"breadcrumb three\" disableExpand>\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "multiline",
-					"snippet": "const multiline = () => (\n    <Example>\n        <Example.Item title=\"wraps content when multiline\">\n            <Breadcrumbs ariaLabel=\"breadcrumb multiline\">\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (\n                    <Breadcrumbs.Item onClick={() => {}} key={i}>\n                        Item {i}\n                    </Breadcrumbs.Item>\n                ))}\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "onClick",
-					"snippet": "const onClick = () => <Breadcrumbs>\n    <Breadcrumbs.Item onClick={fn()}>Trigger</Breadcrumbs.Item>\n    <Breadcrumbs.Item onClick={fn()} disabled>Trigger\n                    </Breadcrumbs.Item>\n</Breadcrumbs>;"
-				},
-				{
-					"name": "href",
-					"snippet": "const href = () => (\n    <Breadcrumbs>\n        <Breadcrumbs.Item href=\"https://reshaped.so\">Trigger</Breadcrumbs.Item>\n    </Breadcrumbs>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Breadcrumbs className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Breadcrumbs.Item>Trigger</Breadcrumbs.Item>\n        </Breadcrumbs>\n    </div>\n);"
-				}
-			],
-			"import": "import Badge from \"components/Badge\";\nimport Breadcrumbs from \"components/Breadcrumbs\";\nimport { Example } from \"utilities/storybook\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Breadcrumbs",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx",
-				"actualName": "Breadcrumbs",
-				"exportName": "default"
-			}
-		},
-		"components-button": {
-			"id": "components-button",
-			"name": "Button",
-			"path": "./src/components/Button/tests/Button.stories.tsx",
-			"stories": [
-				{
-					"name": "variantAndColor",
-					"snippet": "const variantAndColor = () => (\n    <Example>\n        <Example.Item title=\"variant: solid\">\n            <View gap={4} direction=\"row\">\n                <Button onClick={() => {}}>Button</Button>\n                <Button onClick={() => {}} color=\"primary\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"faded\">\n                    Button\n                </Button>\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"outline\">\n                    Button\n                </Button>\n\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: ghost\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"ghost\">\n                    Button\n                </Button>\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: media\">\n            <View backgroundColor=\"primary\" borderRadius=\"medium\" padding={4} direction=\"row\" gap={4}>\n                <Button onClick={() => {}} color=\"media\">\n                    Button\n                </Button>\n\n                <Button onClick={() => {}} color=\"media\" variant=\"faded\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "icon",
-					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Button onClick={() => {}} icon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"endIcon\">\n            <Button onClick={() => {}} endIcon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"icon, endIcon\">\n            <Button onClick={() => {}} icon={IconZap} endIcon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"icon only\">\n            <Button onClick={() => {}} icon={IconZap} attributes={{ \"aria-label\": \"Action\" }} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"small\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"small\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Button icon={IconZap}>Button</Button>\n                <Button variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"large\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"large\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"xlarge\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"xlarge\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"xlarge\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large, [m+] medium\">\n            <Button size={{ s: \"large\", m: \"medium\" }} icon={IconZap}>\n                Responsive\n            </Button>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "elevated",
-					"snippet": "const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated, color: neutral\">\n            <View direction=\"row\" gap={4}>\n                <Button elevated onClick={() => {}}>\n                    Button\n                </Button>\n                <Button elevated variant=\"outline\" onClick={() => {}}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"elevated, color\">\n            <View direction=\"row\" gap={4}>\n                <Button elevated color=\"primary\">\n                    Button\n                </Button>\n                <Button elevated variant=\"outline\" color=\"primary\">\n                    Button\n                </Button>\n                <View backgroundColor=\"primary\" padding={4} borderRadius=\"medium\">\n                    <Button color=\"media\" elevated>\n                        Button\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "rounded",
-					"snippet": "const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded, size: small, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, size: medium, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, size: large, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, icon only, all sizes\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"small\" icon={IconZap} />\n                <Button rounded icon={IconZap} />\n                <Button rounded size=\"large\" icon={IconZap} />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "fullWidth",
-					"snippet": "const fullWidth = () => (\n    <Example>\n        <Example.Item title=\"fullWidth, all variants\">\n            <View gap={3}>\n                <Button fullWidth>Neutral</Button>\n                <Button fullWidth variant=\"faded\">\n                    Faded\n                </Button>\n                <Button fullWidth variant=\"outline\">\n                    Outline\n                </Button>\n                <Button fullWidth variant=\"ghost\">\n                    Ghost\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive fullWidth\", \"[s] true\", \"[m+] false\"]}>\n            <Button fullWidth={{ s: true, m: false }}>Button</Button>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "loading",
-					"snippet": "const loading = () => (\n    <Example>\n        <Example.Item title=\"loading, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"loading, color critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"loading, color positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"loading, color: media\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n\n                <div style={{ position: \"absolute\", top: 16, left: 16 }}>\n                    <View gap={3} direction=\"row\">\n                        <Button color=\"media\" loading loadingAriaLabel=\"Loading\">\n                            Button\n                        </Button>\n                        <Button color=\"media\" variant=\"faded\" loading loadingAriaLabel=\"Loading\">\n                            Button\n                        </Button>\n                    </View>\n                </div>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"loading, long button text\", \"button size should stay the same\"]}>\n            <Button loading loadingAriaLabel=\"Loading\" color=\"primary\">\n                Long button text\n            </Button>\n        </Example.Item>\n\n        <Example.Item title={[\"loading, icon only\", \"button keep square 1/1 ratio\"]}>\n            <Button icon={IconZap} rounded loading loadingAriaLabel=\"Loading\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "highlighted",
-					"snippet": "const highlighted = () => (\n    <Example>\n        <Example.Item title=\"highlighted, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"highlighted, color: critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted color=\"critical\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"highlighted, color: positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted color=\"positive\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled icon={IconZap} onClick={() => {}}>\n                    Button\n                </Button>\n                <Button disabled variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"disabled, color: critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled color=\"critical\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"disabled, color: positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled color=\"positive\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"disabled, color: media\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n\n                <div style={{ position: \"absolute\", top: 16, left: 16 }}>\n                    <View gap={3} direction=\"row\">\n                        <Button color=\"media\" disabled>\n                            Button\n                        </Button>\n                        <Button color=\"media\" variant=\"faded\" disabled>\n                            Button\n                        </Button>\n                    </View>\n                </div>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "aligner",
-					"snippet": "const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner: all\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>Content</View.Item>\n                <Button.Aligner>\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: top\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"top\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: top and end\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side={[\"top\", \"end\"]}>\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: bottom\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2} align=\"end\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"bottom\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: start\">\n            <View padding={4} borderColor=\"neutral-faded\" gap={2} align=\"start\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"start\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: end\">\n            <View padding={4} borderColor=\"neutral-faded\" gap={2} align=\"end\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"end\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "composition",
-					"snippet": "const composition = () => (\n    <Example>\n        <Example.Item title=\"slot gap\">\n            <Button variant=\"outline\">\n                <Avatar size={6} initials=\"RS\" />\n                Label\n                <Hotkey>B</Hotkey>\n            </Button>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "href",
-					"snippet": "const href = () => <Button href=\"https://reshaped.so\">Trigger</Button>;"
-				},
-				{
-					"name": "onClick",
-					"snippet": "const onClick = () => <Button onClick={fn()}>Trigger</Button>;"
-				},
-				{
-					"name": "hrefOnClick",
-					"snippet": "const hrefOnClick = (args) => (\n    <Button\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </Button>\n);"
-				},
-				{
-					"name": "as",
-					"snippet": "const as = () => (\n    <Example>\n        <Example.Item title=\"as: span\">\n            <Button onClick={() => {}} as=\"span\">\n                Trigger\n            </Button>\n        </Example.Item>\n        <Example.Item title=\"render, disabled\">\n            <Button\n                disabled\n                onClick={() => {}}\n                render={(props) => <section {...props} />}\n                attributes={{ \"data-testid\": \"render-el\" }}\n            >\n                Trigger\n            </Button>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Button className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Button>\n    </div>\n);"
-				},
-				{
-					"name": "group",
-					"snippet": "const group = () => (\n    <Example>\n        <Example.Item title=\"with icon\">\n            <Button.Group>\n                <Button rounded>Submit</Button>\n                <Button rounded icon={IconZap} />\n            </Button.Group>\n        </Example.Item>\n        <Example.Item title=\"variant: solid\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\", \"media\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color}>One</Button>\n                        <Button color={color}>Two</Button>\n                        <Button color={color}>Three</Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"outline\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"outline\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"outline\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\", \"media\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"faded\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"faded\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"faded\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"variant: ghost\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"ghost\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"ghost\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"ghost\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "groupClassName",
-					"snippet": "const groupClassName = () => (\n    <div data-testid=\"root\">\n        <Button.Group className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Button>Trigger</Button>\n        </Button.Group>\n    </div>\n);"
-				}
-			],
-			"import": "import Avatar from \"components/Avatar\";\nimport Button from \"components/Button\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport Hotkey from \"components/Hotkey\";\nimport Image from \"components/Image\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Button",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Button/Button.tsx",
-				"actualName": "Button",
-				"exportName": "default"
-			}
-		},
-		"components-calendar": {
-			"id": "components-calendar",
-			"name": "Calendar",
-			"path": "./src/components/Calendar/tests/Calendar.stories.tsx",
-			"stories": [
-				{
-					"name": "defaultMonth",
-					"snippet": "const defaultMonth = () => (\n    <Example>\n        <Example.Item title=\"defaultMonth: 2020 January\">\n            <Calendar defaultMonth={new Date(2020, 0)} range />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "uncontrolled",
-					"snippet": "const uncontrolled = () => <Example>\n    <Example.Item title=\"defaultValue\">\n        <Calendar\n            defaultMonth={new Date(2020, 0)}\n            defaultValue={new Date(2020, 0, 10)}\n            onChange={fn()} />\n    </Example.Item>\n    <Example.Item title=\"defaultValue, range\">\n        <Calendar\n            range\n            defaultMonth={new Date(2020, 0)}\n            defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }}\n            onChange={fn()} />\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "controlled",
-					"snippet": "const controlled = () => <Example>\n    <Example.Item title=\"value\">\n        <Calendar\n            defaultMonth={new Date(2020, 0)}\n            value={new Date(2020, 0, 10)}\n            onChange={fn()} />\n    </Example.Item>\n    <Example.Item title=\"defaultValue, range\">\n        <Calendar\n            range\n            defaultMonth={new Date(2020, 0)}\n            value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }}\n            onChange={fn()} />\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "selectedDates",
-					"snippet": "const selectedDates = () => (\n    <Example>\n        <Example.Item title=\"selectedDates: [4,8]\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                value={null}\n                selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "minMax",
-					"snippet": "const minMax = () => (\n    <Example>\n        <Example.Item title=\"min: 4, max: 20\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                min={new Date(2020, 0, 4)}\n                max={new Date(2020, 0, 20)}\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "firstWeekDay",
-					"snippet": "const firstWeekDay = () => (\n    <Example>\n        <Example.Item title=\"firstWeekDay: 3 (Wed)\">\n            <Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "translation",
-					"snippet": "const translation = () => (\n    <Example>\n        <Example.Item title=\"translated to NL\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                renderMonthLabel={({ date }) => date.toLocaleDateString(\"nl\", { month: \"short\" })}\n                renderSelectedMonthLabel={({ date }) =>\n                    date.toLocaleDateString(\"nl\", { month: \"long\", year: \"numeric\" })\n                }\n                renderWeekDay={({ date }) => date.toLocaleDateString(\"nl\", { weekday: \"short\" })}\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "ariaLabels",
-					"snippet": "const ariaLabels = () => (\n    <Example>\n        <Example.Item title=\"aria labels\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                nextYearAriaLabel=\"Test next year\"\n                nextMonthAriaLabel=\"Test next month\"\n                renderDateAriaLabel={() => \"Test date\"}\n                renderMonthAriaLabel={() => \"Test month\"}\n                previousYearAriaLabel=\"Test previous year\"\n                previousMonthAriaLabel=\"Test previous month\"\n                monthSelectionAriaLabel=\"Test month selection\"\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "monthSelection",
-					"snippet": "const monthSelection = () => (\n    <Example>\n        <Example.Item title=\"month selection\">\n            <Calendar defaultMonth={new Date(2020, 1)} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "keyboardNavigation",
-					"snippet": "const keyboardNavigation = () => (\n    <Example>\n        <Example.Item title=\"keyboard navigation\">\n            <Calendar defaultMonth={new Date(2020, 0)} />\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Calendar from \"components/Calendar\";\nimport { Example } from \"utilities/storybook\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Calendar",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Calendar/Calendar.tsx",
-				"actualName": "Calendar",
-				"exportName": "default"
-			}
-		},
-		"components-card": {
-			"id": "components-card",
-			"name": "Card",
-			"path": "./src/components/Card/tests/Card.stories.tsx",
-			"stories": [
-				{
-					"name": "padding",
-					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: default\">\n            <Card>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title=\"padding: 2\">\n            <Card padding={2}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title=\"padding: 0\">\n            <Card padding={0}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive padding\", \"[s] 4\", \"[m+] 8\"]}>\n            <Card padding={{ s: 4, m: 8 }}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "selected",
-					"snippet": "const selected = () => (\n    <Example>\n        <Example.Item title=\"selected\">\n            <Card selected>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "elevated",
-					"snippet": "const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated\">\n            <Card elevated>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "bleed",
-					"snippet": "const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4\">\n            <Card bleed={4}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n        <Example.Item title={[\"responsive bleed\", \"[s] 4\", \"[m+] 0\"]}>\n            <Card bleed={{ s: 4, m: 0 }}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "height",
-					"snippet": "const height = () => (\n    <Example>\n        <Example.Item title=\"height: 200px\">\n            <Card height=\"200px\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "onClick",
-					"snippet": "const onClick = () => <Card onClick={fn()}>Trigger</Card>;"
-				},
-				{
-					"name": "href",
-					"snippet": "const href = () => <Card href=\"https://reshaped.so\">Trigger</Card>;"
-				},
-				{
-					"name": "as",
-					"snippet": "const as = () => <Card as=\"span\" attributes={{ \"data-testid\": \"root\" }} />;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Card className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
-				}
-			],
-			"import": "import Card from \"components/Card\";\nimport { Example, Placeholder } from \"utilities/storybook\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Card",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Card/Card.tsx",
-				"actualName": "Card",
-				"exportName": "default"
-			}
-		},
-		"components-carousel": {
-			"id": "components-carousel",
-			"name": "Carousel",
-			"path": "./src/components/Carousel/tests/Carousel.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n    <Carousel attributes={{ \"data-testid\": \"test-id\" }} visibleItems={3}>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n    </Carousel>\n);"
-				},
-				{
-					"name": "visibleItems",
-					"snippet": "const visibleItems = () => (\n    <Example>\n        <Example.Item title=\"visibleItems: 3\">\n            <Carousel visibleItems={3}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive visibleItems\", \"s: 2, m+ 3\"]}>\n            <Carousel visibleItems={{ s: 2, m: 3 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title=\"visibleItems: auto\">\n            <Carousel>\n                <Placeholder h={100} />\n                <Placeholder h={100} w={200} />\n                <Placeholder h={100} w={300} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "gap",
-					"snippet": "const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 2, visibleItems 3\">\n            <Carousel visibleItems={3} gap={2}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"gap: responsive, visibleItems: 3\", \"s: 2, l: 8\"]}>\n            <Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "bleed",
-					"snippet": "const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4, visibleItems: 3\">\n            <Carousel visibleItems={3} bleed={4}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive bleed, visibleItems: 3\", \"[s] 4, [l+] 0\"]}>\n            <Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "navigationDisplay",
-					"snippet": "const navigationDisplay = () => (\n    <Example>\n        <Example.Item title=\"navigationDisplay: hidden\">\n            <Carousel\n                visibleItems={3}\n                navigationDisplay=\"hidden\"\n                attributes={{ \"data-testid\": \"test-id\" }}\n            >\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "instanceRef",
-					"snippet": "const instanceRef = (args) => {\n    const carouselRef = React.useRef<CarouselInstanceRef>(null);\n    const [index, setIndex] = React.useState(0);\n\n    return (\n        <Example>\n            <Example.Item title=\"instanceRef, onChange\">\n                <View gap={3}>\n                    <View gap={3} direction=\"row\" align=\"center\">\n                        <Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>\n                        <Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>\n                        <Button onClick={() => carouselRef.current?.navigateTo(3)}>To 3</Button>\n                        <View.Item>Index: {index}</View.Item>\n                    </View>\n                    <Carousel\n                        visibleItems={2}\n                        instanceRef={carouselRef}\n                        navigationDisplay=\"hidden\"\n                        onChange={(changeArgs) => {\n                            args.handleChange(changeArgs);\n                            setIndex(changeArgs.index);\n                        }}\n                    >\n                        <Placeholder h={100}>Item 0</Placeholder>\n                        <Placeholder h={100}>Item 1</Placeholder>\n                        <Placeholder h={100}>Item 2</Placeholder>\n                        <Placeholder h={100}>Item 3</Placeholder>\n                        <Placeholder h={100}>Item 4</Placeholder>\n                        <Placeholder h={100}>Item 5</Placeholder>\n                    </Carousel>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Carousel visibleItems={2} className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder h={100}>Item 0</Placeholder>\n            <Placeholder h={100}>Item 1</Placeholder>\n            <Placeholder h={100}>Item 2</Placeholder>\n            <Placeholder h={100}>Item 3</Placeholder>\n            <Placeholder h={100}>Item 4</Placeholder>\n            <Placeholder h={100}>Item 5</Placeholder>\n        </Carousel>\n    </div>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport Carousel from \"components/Carousel\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [
-					{
-						"name": "navigateTo",
-						"docblock": null,
-						"modifiers": [],
-						"params": [
-							{
-								"name": "index",
-								"optional": false,
-								"type": { "name": "number" }
-							}
-						],
-						"returns": null
-					}
-				],
-				"displayName": "Carousel",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Carousel/Carousel.tsx",
-				"actualName": "Carousel",
-				"exportName": "default"
-			}
-		},
-		"components-checkbox": {
-			"id": "components-checkbox",
-			"name": "Checkbox",
-			"path": "./src/components/Checkbox/tests/Checkbox.stories.tsx",
-			"stories": [
-				{
-					"name": "render",
-					"snippet": "const render = () => (\n    <Checkbox name=\"test-name\" value=\"test-value\">\n        Content\n    </Checkbox>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"small\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"small\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"medium\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"medium\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"large\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"large\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: responsive, s: small, m: large\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size={{ s: \"small\", m: \"large\" }} defaultChecked>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "error",
-					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Checkbox name=\"animal\" value=\"dog\" hasError>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n        <Example.Item title=\"disabled, checked\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled checked>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n        <Example.Item title=\"disabled, indeterminate\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled indeterminate>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "checked",
-					"snippet": "const checked = () => <Checkbox name=\"test-name\" value=\"test-value\" checked onChange={fn()}>Content\n            </Checkbox>;"
-				},
-				{
-					"name": "defaultChecked",
-					"snippet": "const defaultChecked = () => <Checkbox name=\"test-name\" value=\"test-value\" defaultChecked onChange={fn()}>Content\n            </Checkbox>;"
-				},
-				{
-					"name": "indeterminate",
-					"snippet": "const indeterminate = () => (\n    <Checkbox name=\"test-name\" value=\"test-value\" indeterminate>\n        Content\n    </Checkbox>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Checkbox className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Checkbox>\n    </div>\n);"
-				}
-			],
-			"import": "import Checkbox from \"components/Checkbox\";\nimport { Example } from \"utilities/storybook\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Checkbox",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Checkbox/Checkbox.tsx",
-				"actualName": "Checkbox",
-				"exportName": "default"
-			}
-		},
-		"components-checkboxgroup": {
-			"id": "components-checkboxgroup",
-			"name": "CheckboxGroup",
-			"path": "./src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx",
-			"stories": [
-				{
-					"name": "value",
-					"snippet": "const value = () => <View gap={2}>\n    <CheckboxGroup name=\"test-name\" value={[\"1\"]} onChange={fn()}>\n        {/* checked should be ignored */}\n        <Checkbox value=\"1\" checked={false}>Content\n                            </Checkbox>\n        <Checkbox value=\"2\">Content 2</Checkbox>\n    </CheckboxGroup>\n</View>;"
-				},
-				{
-					"name": "defaultValue",
-					"snippet": "const defaultValue = () => <View gap={2}>\n    <CheckboxGroup name=\"test-name\" defaultValue={[\"1\"]} onChange={fn()}>\n        {/* checked should be ignored */}\n        <Checkbox value=\"1\" checked={false}>Content\n                            </Checkbox>\n        <Checkbox value=\"2\">Content 2</Checkbox>\n    </CheckboxGroup>\n</View>;"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <CheckboxGroup name=\"test-name\" disabled>\n        <Checkbox value=\"test-value\">Item 1</Checkbox>\n        <Checkbox value=\"test-value-2\">Item 2</Checkbox>\n    </CheckboxGroup>\n);"
-				}
-			],
-			"import": "import Checkbox from \"components/Checkbox\";\nimport CheckboxGroup from \"components/CheckboxGroup\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "CheckboxGroup",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/CheckboxGroup/CheckboxGroup.tsx",
-				"actualName": "CheckboxGroup",
-				"exportName": "default"
-			}
-		},
-		"components-contextmenu": {
-			"id": "components-contextmenu",
-			"name": "ContextMenu",
-			"path": "./src/components/ContextMenu/tests/ContextMenu.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"base\">\n            <div style={{ height: 200, overflow: \"auto\" }}>\n                <ContextMenu>\n                    <View height=\"400px\" backgroundColor=\"neutral-faded\" borderRadius=\"medium\" />\n\n                    <ContextMenu.Content>\n                        <ContextMenu.Item>Item 1</ContextMenu.Item>\n                        <ContextMenu.Item>Item 2</ContextMenu.Item>\n                    </ContextMenu.Content>\n                </ContextMenu>\n            </div>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "handlers",
-					"snippet": "const handlers = () => <div style={{ height: 200, overflow: \"auto\" }} data-testid=\"scroll\">\n    <ContextMenu onOpen={fn()} onClose={fn()}>\n        <View\n            height=\"400px\"\n            backgroundColor=\"neutral-faded\"\n            borderRadius=\"medium\"\n            attributes={{ \"data-testid\": \"root\" }} />\n        <ContextMenu.Content>\n            <ContextMenu.Item>Item</ContextMenu.Item>\n        </ContextMenu.Content>\n    </ContextMenu>\n</div>;"
-				}
-			],
-			"import": "import ContextMenu from \"components/ContextMenu\";\nimport { Example } from \"utilities/storybook\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "ContextMenu",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/ContextMenu/ContextMenu.tsx",
-				"actualName": "ContextMenu",
-				"exportName": "default"
-			}
-		},
-		"components-divider": {
-			"id": "components-divider",
-			"name": "Divider",
-			"path": "./src/components/Divider/tests/Divider.stories.tsx",
-			"stories": [
-				{
-					"name": "rendering",
-					"snippet": "const rendering = () => (\n    <Example>\n        <Example.Item title=\"default rendering\">\n            <Divider />\n        </Example.Item>\n\n        <Example.Item title={[\"blank rendering\", \"box should overlap with divider\"]}>\n            <View width=\"40px\" height=\"10px\" backgroundColor=\"primary\" />\n            <Divider blank />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "vertical",
-					"snippet": "const vertical = () => (\n    <Example>\n        <Example.Item title=\"vertical\">\n            <View gap={3} direction=\"row\" align=\"stretch\">\n                <Placeholder />\n                <View.Item>\n                    <Divider vertical />\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive vertical\", \"[s] true\", \"[m+]: false\"]}>\n            <View gap={3} direction={{ s: \"row\", m: \"column\" }} align=\"stretch\">\n                <Placeholder />\n                <View.Item>\n                    <Divider vertical={{ s: true, m: false }} />\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "label",
-					"snippet": "const label = () => {\n    return (\n        <Example>\n            <Example.Item title=\"alignment\">\n                <View gap={4}>\n                    <Divider>Centered label</Divider>\n                    <Divider contentPosition=\"start\">Start label</Divider>\n                    <Divider contentPosition=\"end\">End label</Divider>\n                </View>\n            </Example.Item>\n\n            <Example.Item title=\"responsive\">\n                <View gap={3} direction={{ s: \"column\", m: \"row\" }} align=\"stretch\">\n                    <Placeholder />\n                    <View.Item>\n                        <Divider vertical={{ s: false, m: true }}>or pick second option</Divider>\n                    </View.Item>\n                    <Placeholder />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Divider className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
-				}
-			],
-			"import": "import Divider from \"components/Divider\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Divider",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Divider/Divider.tsx",
-				"actualName": "Divider",
-				"exportName": "default"
-			}
-		},
-		"components-dropdownmenu": {
-			"id": "components-dropdownmenu",
-			"name": "DropdownMenu",
-			"path": "./src/components/DropdownMenu/tests/DropdownMenu.stories.tsx",
-			"stories": [
-				{
-					"name": "position",
-					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title=\"position: default\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <DropdownMenu position=\"end\">\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n\n        <Example.Item title={[\"position: top-start\", \"should change to top-start to fit viewport\"]}>\n            <DropdownMenu position=\"top-end\">\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n        <div style={{ height: 2000 }} />\n    </Example>\n);"
-				},
-				{
-					"name": "sections",
-					"snippet": "const sections = () => (\n    <Example>\n        <Example.Item title=\"2 sections\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Section>\n                        <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                    </DropdownMenu.Section>\n\n                    <DropdownMenu.Section>\n                        <DropdownMenu.Item>Item 3</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 4</DropdownMenu.Item>\n                    </DropdownMenu.Section>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "submenu",
-					"snippet": "const submenu = () => (\n    <Example>\n        <Example.Item title=\"submenu\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item onClick={() => {}}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger>Item 3</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2-1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2-2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger disabled>Item 4, disabled</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 3-1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 3-2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "defaultActive",
-					"snippet": "const defaultActive = () => <DropdownMenu onOpen={fn()} onClose={fn()} defaultActive>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"
-				},
-				{
-					"name": "active",
-					"snippet": "const active = () => <DropdownMenu onOpen={fn()} onClose={fn()} active>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"
-				},
-				{
-					"name": "activeFalse",
-					"snippet": "const activeFalse = () => <DropdownMenu onOpen={fn()} onClose={fn()} active={false}>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <DropdownMenu active>\n            <DropdownMenu.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n                <DropdownMenu.Item>Item</DropdownMenu.Item>\n            </DropdownMenu.Content>\n        </DropdownMenu>\n    </div>\n);"
-				},
-				{
-					"name": "testScroll",
-					"snippet": "const testScroll = () => (\n    <Example>\n        <Example.Item title=\"Scrolls on page mount to the dropdown\">\n            <div style={{ height: 1000 }} />\n            <DropdownMenu position=\"end\" key=\"scroll\" defaultActive>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "testTheme",
-					"snippet": "const testTheme = () => (\n    <Example>\n        <Example.Item title=\"switch color mode while dropdown is active and check that it still works\">\n            <ThemeSwitching />\n        </Example.Item>\n        <Example.Item title=\"dropdown inherits multiple themes\">\n            <ThemeMultiple />\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport DropdownMenu from \"components/DropdownMenu\";\nimport { Example } from \"utilities/storybook\";\nimport Theme from \"components/Theme\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "DropdownMenu",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/DropdownMenu/DropdownMenu.tsx",
-				"actualName": "DropdownMenu",
-				"exportName": "default"
-			}
-		},
-		"components-fileupload": {
-			"id": "components-fileupload",
-			"name": "FileUpload",
-			"path": "./src/components/FileUpload/tests/FileUpload.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"Base upload with previews\">\n            <Demo />\n        </Example.Item>\n        <Example.Item title=\"With trigger\">\n            <FileUpload name=\"file\">\n                <div>\n                    Drop files to attach, or{\" \"}\n                    <FileUpload.Trigger>\n                        <Link variant=\"plain\">browse</Link>\n                    </FileUpload.Trigger>\n                </div>\n            </FileUpload>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "inline",
-					"snippet": "const inline = () => {\n    return (\n        <Example>\n            <Example.Item title=\"inline\">\n                <FileUpload name=\"file\" inline onChange={console.log}>\n                    <View padding={2} paddingInline={3}>\n                        Upload\n                    </View>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"variant headless\">\n                <FileUpload name=\"file2\" variant=\"headless\" onChange={console.log}>\n                    <Button variant=\"outline\" fullWidth>\n                        Upload\n                    </Button>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"variant headless, inline\">\n                <FileUpload name=\"file2\" variant=\"headless\" inline onChange={console.log}>\n                    <Button>Upload</Button>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"inline, render props\">\n                <FileUpload name=\"file3\" variant=\"headless\" inline onChange={console.log}>\n                    {(props) => <Button highlighted={props.highlighted}>Upload</Button>}\n                </FileUpload>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "height",
-					"snippet": "const height = () => (\n    <Example>\n        <Example.Item title=\"Custom height\">\n            <FileUpload name=\"file\" height=\"300px\">\n                <View gap={3}>\n                    <Icon svg={IconMic} size={8} />\n                    Drop files to attach\n                </View>\n            </FileUpload>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "onChange",
-					"snippet": "const onChange = () => <div data-testid=\"root\">\n    <FileUpload name=\"test-name\" onChange={fn()}>Content\n                    </FileUpload>\n</div>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <FileUpload\n            name=\"name\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ id: \"test-input-id\" }}\n        >\n            Content\n        </FileUpload>\n    </div>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport FileUpload from \"components/FileUpload\";\nimport Icon from \"components/Icon\";\nimport Image from \"components/Image\";\nimport Link from \"components/Link\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "FileUpload",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/FileUpload/FileUpload.tsx",
-				"actualName": "FileUpload",
-				"exportName": "default"
-			}
-		},
-		"components-hotkey": {
-			"id": "components-hotkey",
-			"name": "Hotkey",
-			"path": "./src/components/Hotkey/tests/Hotkey.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n\t<Example>\n\t\t<Example.Item title=\"Base\">\n\t\t\t<Demo />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"Active\">\n\t\t\t<Hotkey active>⌘K</Hotkey>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"Inside input slot\">\n\t\t\t<View width=\"300px\">\n\t\t\t\t<TextField\n\t\t\t\t\tname=\"hey\"\n\t\t\t\t\tendSlot={<Demo />}\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"hotkey test\" }}\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Example.Item>\n\t</Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Hotkey className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            ⌘K\n        </Hotkey>\n    </div>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport { Hotkey } from \"reshaped\";\nimport TextField from \"components/TextField\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Hotkey",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Hotkey/Hotkey.tsx",
-				"actualName": "Hotkey",
-				"exportName": "default"
-			}
-		},
-		"components-link": {
-			"id": "components-link",
-			"name": "Link",
-			"path": "./src/components/Link/tests/Link.stories.tsx",
-			"stories": [
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: underline\">\n            <Link href=\"http://reshaped.so\" attributes={{ target: \"_blank\" }}>\n                Reshaped\n            </Link>\n        </Example.Item>\n        <Example.Item title=\"variant: plain\">\n            <Link onClick={() => {}} variant=\"plain\">\n                Link\n            </Link>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary\">\n            <Link color=\"primary\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Link color=\"critical\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Link color=\"positive\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <Link color=\"warning\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <Link color=\"inherit\">Link</Link>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "icon",
-					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"icon, variant: underline\">\n            <Link icon={IconZap}>Link</Link>\n        </Example.Item>\n        <Example.Item title=\"icon, variant: plain\">\n            <Link icon={IconZap} variant=\"plain\">\n                Link\n            </Link>\n        </Example.Item>\n        <Example.Item\n            title={[\"icon, variant: underline\", \"should inherit display-1 size from the parent\"]}\n        >\n            <Text variant=\"title-3\">\n                <Link icon={IconZap} variant=\"underline\">\n                    Instant delivery\n                </Link>\n            </Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "href",
-					"snippet": "const href = () => <Link href=\"https://reshaped.so\">Trigger</Link>;"
-				},
-				{
-					"name": "onClick",
-					"snippet": "const onClick = () => <Link onClick={fn()}>Trigger</Link>;"
-				},
-				{
-					"name": "hrefOnClick",
-					"snippet": "const hrefOnClick = (args) => (\n    <Link\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </Link>\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Link disabled onClick={() => {}}>\n        Trigger\n    </Link>\n);"
-				},
-				{
-					"name": "render",
-					"snippet": "const render = () => <Link render={(props) => <section {...props} />}>Trigger</Link>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Link className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Link>\n    </div>\n);"
-				},
-				{
-					"name": "testMultilineInText",
-					"snippet": "const testMultilineInText = () => (\n    <Example>\n        <Example.Item title=\"should wrap inside the text\">\n            <div>\n                Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;\n                <Link href=\"/\">this very very long link</Link> to it.\n            </div>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Link from \"components/Link\";\nimport Text from \"components/Text\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Link",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Link/Link.tsx",
-				"actualName": "Link",
-				"exportName": "default"
-			}
-		},
-		"components-loader": {
-			"id": "components-loader",
-			"name": "Loader",
-			"path": "./src/components/Loader/tests/Loader.stories.tsx",
-			"stories": [
-				{
-					"name": "size",
-					"snippet": "const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: medium\">\n                <Loader size=\"medium\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title=\"size: small\">\n                <Loader size=\"small\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title=\"size: large\">\n                <Loader size=\"large\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title={[\"responsive size\", \"[s] small\", \"[m+] medium\"]}>\n                <Loader size={{ s: \"small\", m: \"medium\" }} ariaLabel=\"Loading\" />\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary\">\n            <Loader ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Loader color=\"critical\" ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Loader color=\"positive\" ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <Loader color=\"inherit\" ariaLabel=\"Loading\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "ariaLabel",
-					"snippet": "const ariaLabel = () => <Loader ariaLabel=\"Loading\" attributes={{ \"data-testid\": \"root\" }} />;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Loader className=\"test-classname\" attributes={{ id: \"test-id\" }} ariaLabel=\"Loading\" />\n    </div>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Loader from \"components/Loader\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Loader",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Loader/Loader.tsx",
-				"actualName": "Loader",
-				"exportName": "default"
-			}
-		},
-		"components-menuitem": {
-			"id": "components-menuitem",
-			"name": "MenuItem",
-			"path": "./src/components/MenuItem/tests/MenuItem.stories.tsx",
-			"stories": [
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <MenuItem size=\"small\" icon={IconZap} onClick={() => {}} endSlot={<Hotkey>⌘K</Hotkey>}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <MenuItem icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <MenuItem size=\"large\" icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title={[\"responsive size\", \"[s] small\", \"[m] medium\", \"[l+] large\"]}>\n            <MenuItem size={{ s: \"small\", m: \"medium\", l: \"large\" }} icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <MenuItem color=\"neutral\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <MenuItem color=\"primary\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <MenuItem color=\"critical\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "selected",
-					"snippet": "const selected = () => (\n    <Example>\n        <Example.Item title=\"selected, color: neutral\">\n            <MenuItem color=\"neutral\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"selected, color: primary\">\n            <MenuItem color=\"primary\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"selected, color: critical\">\n            <MenuItem color=\"critical\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "roundedCorners",
-					"snippet": "const roundedCorners = () => (\n    <Example>\n        <Example.Item title=\"roundedCorners\">\n            <MenuItem roundedCorners selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive roundedCorners\", \"[s]: false\", \"[m+]: true\"]}>\n            <MenuItem roundedCorners={{ s: false, m: true }} selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "slots",
-					"snippet": "const slots = () => (\n    <Example>\n        <Example.Item title=\"startSlot, endSlot, selected\">\n            <MenuItem startSlot={<Placeholder h={20} />} endSlot={<Placeholder h={20} />} selected>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "aligner",
-					"snippet": "const aligner = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem size=\"small\" selected onClick={() => {}}>\n                        Menu item\n                    </MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem selected>Menu item</MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem size=\"large\" selected>\n                        Menu item\n                    </MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "href",
-					"snippet": "const href = () => <MenuItem href=\"https://reshaped.so\">Trigger</MenuItem>;"
-				},
-				{
-					"name": "onClick",
-					"snippet": "const onClick = () => <MenuItem onClick={fn()}>Trigger</MenuItem>;"
-				},
-				{
-					"name": "hrefOnClick",
-					"snippet": "const hrefOnClick = (args) => (\n    <MenuItem\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </MenuItem>\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <MenuItem disabled onClick={() => {}}>\n        Trigger\n    </MenuItem>\n);"
-				},
-				{
-					"name": "as",
-					"snippet": "const as = () => (\n    <Example>\n        <Example.Item title=\"render, disabled\">\n            <MenuItem\n                disabled\n                onClick={() => {}}\n                render={(props) => <section {...props} />}\n                attributes={{ \"data-testid\": \"render-el\" }}\n            >\n                Trigger\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <MenuItem className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </MenuItem>\n    </div>\n);"
-				},
-				{
-					"name": "alignerClassName",
-					"snippet": "const alignerClassName = () => (\n    <div data-testid=\"root\">\n        <MenuItem.Aligner className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <MenuItem>Trigger</MenuItem>\n        </MenuItem.Aligner>\n    </div>\n);"
-				}
-			],
-			"import": "import { Example, Placeholder } from \"utilities/storybook\";\nimport Hotkey from \"components/Hotkey\";\nimport MenuItem from \"components/MenuItem\";\nimport Text from \"components/Text\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "MenuItem",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/MenuItem/MenuItem.tsx",
-				"actualName": "MenuItem",
-				"exportName": "default"
-			}
-		},
-		"components-modal": {
-			"id": "components-modal",
-			"name": "Modal",
-			"path": "./src/components/Modal/tests/Modal.stories.tsx",
-			"stories": [
-				{
-					"name": "position",
-					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title={[\"responsive position\", \"[s] full-screen\", \"[m] center\", \"[l] end\"]}>\n            <Demo position={{ s: \"full-screen\", m: \"center\", l: \"end\" }} />\n        </Example.Item>\n        <Example.Item title=\"position: center\">\n            <Demo position=\"center\" />\n        </Example.Item>\n        <Example.Item title=\"position: bottom\">\n            <Demo position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"position: start\">\n            <Demo position=\"start\" />\n        </Example.Item>\n        <Example.Item title=\"position: end\">\n            <Demo position=\"end\" />\n        </Example.Item>\n        <Example.Item title=\"position: full-screen\">\n            <Demo position=\"full-screen\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: default\">\n                <Demo />\n            </Example.Item>\n            <Example.Item title=\"size: 300px\">\n                <Demo size=\"300px\" />\n            </Example.Item>\n            <Example.Item\n                title={[\"size: 800px\", \"should have max width of 100% minus gaps on the sides\"]}\n            >\n                <Demo size=\"800px\" />\n            </Example.Item>\n            <Example.Item\n                title={[\n                    \"responsive size, responsive position\",\n                    \"[s] auto\",\n                    \"[m+] 600px\",\n                    \"bottom position changes height instead of width\",\n                ]}\n            >\n                <Demo\n                    position={{ s: \"bottom\", m: \"center\", l: \"end\" }}\n                    size={{ s: \"auto\", m: \"600px\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "padding",
-					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 0\">\n            <Demo padding={0} />\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <Demo padding={6} />\n        </Example.Item>\n        <Example.Item title={[\"responsive padding\", \"[s] 2\", \"[m+]: 6\"]}>\n            <Demo padding={{ s: 2, m: 6 }} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "overflow",
-					"snippet": "const overflow = () => (\n    <Example>\n        <Example.Item title=\"default overflow\">\n            <Demo>\n                <div\n                    style={{\n                        position: \"absolute\",\n                        top: -32,\n                        left: -32,\n                        height: 100,\n                        width: 100,\n                        background: \"tomato\",\n                    }}\n                />\n            </Demo>\n        </Example.Item>\n\n        <Example.Item title=\"overflow: visible\">\n            <Demo overflow=\"visible\">\n                <div\n                    style={{\n                        position: \"absolute\",\n                        top: -32,\n                        left: -32,\n                        height: 100,\n                        width: 100,\n                        background: \"tomato\",\n                    }}\n                />\n            </Demo>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "composition",
-					"snippet": "const composition = () => (\n    <Example>\n        <Example.Item title=\"title, subtitle, dismissible\">\n            <Demo title=\"Modal title\" subtitle=\"Modal subtitle\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "overlay",
-					"snippet": "const overlay = () => (\n    <Example>\n        <Example.Item title=\"transparentOverlay, doesn't lock scroll\">\n            <Demo transparentOverlay />\n        </Example.Item>\n        <Example.Item title=\"blurredOverlay\">\n            <Demo blurredOverlay />\n        </Example.Item>\n        <View height=\"1000px\" />\n    </Example>\n);"
-				},
-				{
-					"name": "flags",
-					"snippet": "const flags = () => {\n    return (\n        <Example>\n            <Example.Item title=\"disableCloseOnOutsideClick\">\n                <Demo disableCloseOnOutsideClick onClose={fn()} active />\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "containerRef",
-					"snippet": "const containerRef = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const containerRef2 = React.useRef<HTMLDivElement>(null);\n    const toggle = useToggle();\n    const toggle2 = useToggle();\n\n    return (\n        <Example>\n            <Example.Item title={[\"in scrollable container\", \"scroll and then open\"]}>\n                <View\n                    attributes={{ ref: containerRef2 }}\n                    borderRadius=\"medium\"\n                    height=\"400px\"\n                    overflow=\"auto\"\n                    backgroundColor=\"neutral-faded\"\n                    padding={4}\n                >\n                    <View gap={4} align=\"start\">\n                        <Button onClick={toggle2.activate}>Open modal</Button>\n                        <View height=\"500px\" backgroundColor=\"primary\" width=\"500px\" borderRadius=\"medium\" />\n                    </View>\n                    <Modal\n                        containerRef={containerRef2}\n                        active={toggle2.active}\n                        onClose={toggle2.deactivate}\n                        position=\"end\"\n                    >\n                        <Placeholder />\n                    </Modal>\n                </View>\n            </Example.Item>\n            <Example.Item title=\"in static container\">\n                <View\n                    attributes={{ ref: containerRef }}\n                    borderRadius=\"medium\"\n                    height=\"400px\"\n                    overflow=\"hidden\"\n                    backgroundColor=\"neutral-faded\"\n                    padding={4}\n                >\n                    <Button onClick={toggle.activate}>Open modal</Button>\n                    <Modal\n                        containerRef={containerRef}\n                        active={toggle.active}\n                        onClose={toggle.deactivate}\n                        position=\"end\"\n                    >\n                        <Placeholder />\n                    </Modal>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "renderProps",
-					"snippet": "const renderProps = () => (\n    <Modal active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        <Modal.Title>Title</Modal.Title>\n        Content\n    </Modal>\n);"
-				},
-				{
-					"name": "handlers",
-					"snippet": "const handlers = () => {\n    const overlayToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>\n            <Modal\n                active={overlayToggle.active}\n                onClose={(closeArgs) => {\n                    overlayToggle.deactivate();\n                    args.handleClose(closeArgs);\n                }}\n                onOpen={fn()}\n                onAfterOpen={fn()}\n                onAfterClose={fn()}>\n                <Modal.Title>Title</Modal.Title>Content\n                                </Modal>\n        </>\n    );\n};"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <Modal active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        <Modal.Title>Title</Modal.Title>\n        Content\n    </Modal>\n);"
-				},
-				{
-					"name": "edgeCases",
-					"snippet": "const edgeCases = () => {\n    const menuModalToggle = useToggle();\n    const menuModalToggleInner = useToggle();\n    const scrollModalToggle = useToggle();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    return (\n        <Example>\n            <Example.Item title=\"Scrolls with long content on touch devices\">\n                <Demo position=\"center\">\n                    <Button onClick={() => {}}>Action</Button>\n                    <View height=\"2000px\" backgroundColor=\"primary-faded\" />\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"keyboard focus stays on the modal first\">\n                <Demo title=\"Modal title\" autoFocus={false} />\n            </Example.Item>\n            <Example.Item title=\"trap focus works with custom children components\">\n                <Demo title=\"Modal title\">\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <Switch name=\"switch\" />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"focus moves to the input\">\n                <Demo\n                    title=\"Modal title\"\n                    onOpen={() => {\n                        inputRef.current?.focus();\n                    }}\n                >\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <TextField name=\"name\" inputAttributes={{ ref: inputRef }} />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"Focus moves to the input with autoFocus\">\n                <Demo title=\"Modal title\">\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <TextField\n                            name=\"name\"\n                            placeholder=\"autofocus\"\n                            inputAttributes={{ autoFocus: true }}\n                        />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"scrollable area in modal ignores swipe-to-close\">\n                <View gap={3} direction=\"row\">\n                    <Button onClick={scrollModalToggle.activate}>Open</Button>\n                    <Modal\n                        active={scrollModalToggle.active}\n                        onClose={scrollModalToggle.deactivate}\n                        size=\"300px\"\n                        position=\"bottom\"\n                    >\n                        <View\n                            height=\"1000px\"\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            padding={4}\n                        >\n                            Content\n                        </View>\n                    </Modal>\n                </View>\n            </Example.Item>\n            <Example.Item\n                title={[\n                    \"trap focus works correctly when it was already trapped\",\n                    \"focus return back to the dropdown trigger on modal close\",\n                    \"closing dropdown inside the modal doesn't close the modal\",\n                ]}\n            >\n                <DropdownMenu>\n                    <DropdownMenu.Trigger>\n                        {(attributes) => <Button attributes={attributes}>Open menu</Button>}\n                    </DropdownMenu.Trigger>\n                    <DropdownMenu.Content>\n                        <DropdownMenu.Item onClick={menuModalToggle.activate}>Open dialog</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                </DropdownMenu>\n                <Modal active={menuModalToggle.active} onClose={menuModalToggle.deactivate}>\n                    <View gap={3}>\n                        <DropdownMenu>\n                            <DropdownMenu.Trigger>\n                                {(attributes) => <Button attributes={attributes}>Open menu</Button>}\n                            </DropdownMenu.Trigger>\n                            <DropdownMenu.Content>\n                                <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                                <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                            </DropdownMenu.Content>\n                        </DropdownMenu>\n                        <Button onClick={menuModalToggleInner.activate}>Open dialog</Button>\n                        <Button onClick={menuModalToggle.deactivate}>Close</Button>\n                        <Modal active={menuModalToggleInner.active} onClose={menuModalToggleInner.deactivate}>\n                            <Button onClick={menuModalToggleInner.deactivate}>Close</Button>\n                        </Modal>\n                    </View>\n                </Modal>\n            </Example.Item>\n\n            <Example.Item title=\"disableSwipeGesture\">\n                <Demo disableSwipeGesture position=\"start\" />\n            </Example.Item>\n\n            <Example.Item title=\"scroll locks on open\">\n                <Demo />\n                <View height=\"1000px\" />\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "trapFocusEdgeCases",
-					"snippet": "const trapFocusEdgeCases = () => {\n    const toggle = useToggle();\n\n    return (\n        <Example>\n            <Example.Item title=\"Radio should be navigatable with arrow keys\">\n                <Button onClick={toggle.activate}>Open modal</Button>\n                <Modal active={toggle.active} onClose={toggle.deactivate}>\n                    <View gap={2}>\n                        <Button onClick={() => {}}>Action 1</Button>\n                        <Radio name=\"radio\" value=\"1\">\n                            Option 1\n                        </Radio>\n                        <Radio name=\"radio\" value=\"2\">\n                            Option 2\n                        </Radio>\n                        <Button onClick={() => {}}>Action 2</Button>\n                    </View>\n                </Modal>\n            </Example.Item>\n        </Example>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport Dismissible from \"components/Dismissible\";\nimport DropdownMenu from \"components/DropdownMenu\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport Modal from \"components/Modal\";\nimport Radio from \"components/Radio\";\nimport Switch from \"components/Switch\";\nimport TextField from \"components/TextField\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Modal",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Modal/Modal.tsx",
-				"actualName": "Modal",
-				"exportName": "default"
-			}
-		},
-		"components-numberfield": {
-			"id": "components-numberfield",
-			"name": "NumberField",
-			"path": "./src/components/NumberField/tests/NumberField.stories.tsx",
-			"stories": [
-				{
-					"name": "variant",
-					"snippet": "const variant = () => {\n    return (\n        <Example>\n            <Example.Item title=\"variant: outline\">\n                <NumberField\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"variant: faded\">\n                <NumberField\n                    variant=\"faded\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"variant: headless\">\n                <NumberField\n                    variant=\"headless\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: small\">\n                <NumberField\n                    size=\"small\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    suffix=\"m2\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: medium\">\n                <NumberField\n                    size=\"medium\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: large\">\n                <NumberField\n                    size=\"large\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: xlarge\">\n                <NumberField\n                    size=\"xlarge\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => <NumberField\n    name=\"test-name\"\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    disabled\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "defaultValue",
-					"snippet": "const defaultValue = () => <NumberField\n    name=\"test-name\"\n    defaultValue={2}\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "value",
-					"snippet": "const value = () => <NumberField\n    name=\"test-name\"\n    value={2}\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "minMax",
-					"snippet": "const minMax = () => (\n    <NumberField\n        name=\"test-name\"\n        defaultValue={6}\n        min={5}\n        max={10}\n        increaseAriaLabel=\"Increase\"\n        decreaseAriaLabel=\"Decrease\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"
-				},
-				{
-					"name": "step",
-					"snippet": "const step = () => (\n    <NumberField\n        name=\"test-name\"\n        defaultValue={6}\n        step={0.5}\n        increaseAriaLabel=\"Increase\"\n        decreaseAriaLabel=\"Decrease\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <NumberField\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n            increaseAriaLabel=\"Increase\"\n            decreaseAriaLabel=\"Decrease\"\n        />\n    </div>\n);"
-				},
-				{
-					"name": "formControl",
-					"snippet": "const formControl = () => (\n    <Example>\n        <Example.Item title=\"FormControl\">\n            <FormControl>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"FormControl, disabled\">\n            <FormControl disabled>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"FormControl, error\">\n            <FormControl hasError>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "valueChanges",
-					"snippet": "const valueChanges = () => (\n    <Example>\n        <Example.Item title=\"keyboard\">\n            <NumberField\n                name=\"name\"\n                increaseAriaLabel=\"Increase\"\n                decreaseAriaLabel=\"Decrease\"\n                inputAttributes={{ \"aria-label\": \"Label\" }}\n            />\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport FormControl from \"components/FormControl\";\nimport NumberField from \"components/NumberField\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "NumberField",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/NumberField/NumberField.tsx",
-				"actualName": "NumberField",
-				"exportName": "default"
-			}
-		},
-		"components-pagination": {
-			"id": "components-pagination",
-			"name": "Pagination",
-			"path": "./src/components/Pagination/tests/Pagination.stories.tsx",
-			"stories": [
-				{
-					"name": "truncate",
-					"snippet": "const truncate = () => {\n    return (\n        <Example>\n            <Example.Item title=\"start\">\n                <Pagination\n                    total={10}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"middle\">\n                <Pagination\n                    total={10}\n                    defaultPage={5}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"end\">\n                <Pagination\n                    total={10}\n                    defaultPage={10}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"no truncation\">\n                <Pagination\n                    total={4}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "render",
-					"snippet": "const render = () => (\n    <div data-testid=\"root\">\n        <Pagination\n            total={10}\n            previousAriaLabel=\"Previous\"\n            nextAriaLabel=\"Next\"\n            pageAriaLabel={(args) => `Page ${args.page}`}\n        />\n    </div>\n);"
-				},
-				{
-					"name": "defaultPage",
-					"snippet": "const defaultPage = () => <div data-testid=\"root\">\n    <Pagination\n        total={10}\n        defaultPage={2}\n        onChange={fn()}\n        previousAriaLabel=\"Previous\"\n        nextAriaLabel=\"Next\" />\n</div>;"
-				},
-				{
-					"name": "page",
-					"snippet": "const page = () => <div data-testid=\"root\">\n    <Pagination\n        total={10}\n        page={2}\n        onChange={fn()}\n        previousAriaLabel=\"Previous\"\n        nextAriaLabel=\"Next\" />\n</div>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Pagination\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            total={10}\n            previousAriaLabel=\"Previous\"\n            nextAriaLabel=\"Next\"\n        />\n    </div>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Pagination from \"components/Pagination\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Pagination",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Pagination/Pagination.tsx",
-				"actualName": "Pagination",
-				"exportName": "default"
-			}
-		},
-		"components-pinfield": {
-			"id": "components-pinfield",
-			"name": "PinField",
-			"path": "./src/components/PinField/tests/PinField.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => <PinField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <PinField name=\"pin\" variant=\"faded\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <PinField name=\"pin\" size=\"small\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <PinField name=\"pin\" size=\"medium\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <PinField name=\"pin\" size=\"large\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <PinField name=\"pin\" size=\"xlarge\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: responsive, s: medium, m+: xlarge\">\n            <PinField\n                name=\"pin\"\n                size={{ s: \"medium\", m: \"xlarge\" }}\n                inputAttributes={{ \"aria-label\": \"Pin\" }}\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "valueLength",
-					"snippet": "const valueLength = () => (\n    <PinField name=\"test-name\" valueLength={6} inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"
-				},
-				{
-					"name": "defaultValue",
-					"snippet": "const defaultValue = () => <PinField\n    name=\"test-name\"\n    onChange={fn()}\n    defaultValue=\"12\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "value",
-					"snippet": "const value = () => <PinField\n    name=\"test-name\"\n    onChange={fn()}\n    value=\"12\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "pattern",
-					"snippet": "const pattern = () => <PinField\n    name=\"test-name\"\n    pattern=\"alphabetic\"\n    defaultValue=\"ab\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <PinField\n            name=\"test-name\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ \"aria-label\": \"Label\", id: \"test-input-id\" }}\n        />\n    </div>\n);"
-				},
-				{
-					"name": "formControl",
-					"snippet": "const formControl = () => (\n    <FormControl>\n        <FormControl.Label>Label</FormControl.Label>\n        <PinField name=\"test-name\" />\n    </FormControl>\n);"
-				},
-				{
-					"name": "keyboard",
-					"snippet": "const keyboard = () => <PinField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport FormControl from \"components/FormControl\";\nimport PinField from \"components/PinField\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "PinField",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/PinField/PinField.tsx",
-				"actualName": "PinField",
-				"exportName": "default"
-			}
-		},
-		"components-popover": {
-			"id": "components-popover",
-			"name": "Popover",
-			"path": "./src/components/Popover/tests/Popover.stories.tsx",
-			"stories": [
-				{
-					"name": "position",
-					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title=\"position: bottom\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"bottom-start\" />\n                <Demo position=\"bottom\" />\n                <Demo position=\"bottom-end\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: top\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"top-start\" />\n                <Demo position=\"top\" />\n                <Demo position=\"top-end\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: start\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"start-top\" />\n                <Demo position=\"start\" />\n                <Demo position=\"start-bottom\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: end\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"end-top\" />\n                <Demo position=\"end\" />\n                <Demo position=\"end-bottom\" defaultActive />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "widthNumber",
-					"snippet": "const widthNumber = () => <Demo width=\"400px\" defaultActive />;"
-				},
-				{
-					"name": "widthFull",
-					"snippet": "const widthFull = () => <Demo width=\"100%\" defaultActive />;"
-				},
-				{
-					"name": "padding",
-					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 0\">\n            <Demo padding={0} />\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <Demo padding={6} defaultActive />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "elevation",
-					"snippet": "const elevation = () => (\n    <Example>\n        <Example.Item title=\"elevation: raised\">\n            <Demo elevation=\"raised\" defaultActive />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "defaultActive",
-					"snippet": "const defaultActive = () => <Popover onOpen={fn()} onClose={fn()} defaultActive>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"
-				},
-				{
-					"name": "active",
-					"snippet": "const active = () => <Popover onOpen={fn()} onClose={fn()} active>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"
-				},
-				{
-					"name": "activeFalse",
-					"snippet": "const activeFalse = () => <Popover onOpen={fn()} onClose={fn()} active={false}>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"
-				},
-				{
-					"name": "dismissible",
-					"snippet": "const dismissible = () => <Popover onClose={fn()} defaultActive>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>\n        <Popover.Dismissible\n            closeAriaLabel=\"Close\"\n            attributes={{ \"data-testid\": \"test-id\" }}\n            className=\"test-classname\">Content\n                            </Popover.Dismissible>\n    </Popover.Content>\n</Popover>;"
-				},
-				{
-					"name": "autoFocus",
-					"snippet": "const autoFocus = () => (\n    <Example>\n        <Example.Item title=\"autoFocus=false\">\n            <Demo autoFocus={false} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Popover active>\n            <Popover.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </Popover.Trigger>\n            <Popover.Content className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n                Content\n            </Popover.Content>\n        </Popover>\n    </div>\n);"
-				},
-				{
-					"name": "testNested",
-					"snippet": "const testNested = () => (\n    <Popover position=\"bottom\">\n        <Popover.Trigger>\n            {(attributes) => <Button attributes={attributes}>Open</Button>}\n        </Popover.Trigger>\n        <Popover.Content>\n            <View gap={2} align=\"start\">\n                Popover content\n                <Popover>\n                    <Popover.Trigger>\n                        {(attributes) => <Button attributes={attributes}>Open</Button>}\n                    </Popover.Trigger>\n                    <Popover.Content>Hello</Popover.Content>\n                </Popover>\n            </View>\n        </Popover.Content>\n    </Popover>\n);"
-				},
-				{
-					"name": "testWithTooltip",
-					"snippet": "const testWithTooltip = () => (\n    <View paddingTop={10}>\n        <Tooltip position=\"top\" text=\"Hello\">\n            {(tooltipAttributes) => (\n                <Popover position=\"bottom\">\n                    <Popover.Trigger>\n                        {(attributes) => (\n                            <Button\n                                attributes={{\n                                    ...attributes,\n                                    ...tooltipAttributes,\n                                }}\n                            >\n                                Open\n                            </Button>\n                        )}\n                    </Popover.Trigger>\n                    <Popover.Content>\n                        <View gap={2} align=\"start\">\n                            Popover content\n                            <Button onClick={() => {}}>Button</Button>\n                        </View>\n                    </Popover.Content>\n                </Popover>\n            )}\n        </Tooltip>\n    </View>\n);"
-				},
-				{
-					"name": "testContentEditable",
-					"snippet": "const testContentEditable = () => {\n    const [active, setActive] = useState(false);\n\n    return (\n        <Popover>\n            <Popover.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </Popover.Trigger>\n            <Popover.Content>\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={() => {}}>Hello</Button>\n                    </View.Item>\n\n                    <ScrollArea height=\"100px\">\n                        <div\n                            style={{ height: \"200px\" }}\n                            contentEditable\n                            tabIndex={0}\n                            onInput={(e) => {\n                                setActive(e.currentTarget.innerText.startsWith(\"@\"));\n                            }}\n                            onKeyDown={(e) => {\n                                console.log(e.key);\n                                if (e.key === \"Enter\" && active) {\n                                    e.preventDefault();\n                                    e.currentTarget.innerText = \"@hello\";\n                                    setActive(false);\n                                }\n                            }}\n                        />\n                    </ScrollArea>\n\n                    <Popover\n                        active={active}\n                        onClose={() => setActive(false)}\n                        originCoordinates={{ x: 300, y: 300 }}\n                        trapFocusMode=\"selection-menu\"\n                    >\n                        <Popover.Content>\n                            <View gap={4}>\n                                <MenuItem onClick={() => {}}>Action</MenuItem>\n                                <MenuItem onClick={() => {}}>Close</MenuItem>\n                            </View>\n                        </Popover.Content>\n                    </Popover>\n                </View>\n            </Popover.Content>\n        </Popover>\n    );\n};"
-				},
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: headless\">\n            <Popover variant=\"headless\" defaultActive position=\"bottom-start\">\n                <Popover.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </Popover.Trigger>\n                <Popover.Content>\n                    <View\n                        height=\"100px\"\n                        width=\"100px\"\n                        borderColor=\"primary\"\n                        borderRadius=\"medium\"\n                        backgroundColor=\"primary-faded\"\n                    />\n                </Popover.Content>\n            </Popover>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport MenuItem from \"components/MenuItem\";\nimport Popover from \"components/Popover\";\nimport ScrollArea from \"components/ScrollArea\";\nimport Tooltip from \"components/Tooltip\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Popover",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Popover/Popover.tsx",
-				"actualName": "Popover",
-				"exportName": "default"
-			}
-		},
-		"components-progress": {
-			"id": "components-progress",
-			"name": "Progress",
-			"path": "./src/components/Progress/tests/Progress.stories.tsx",
-			"stories": [
-				{
-					"name": "value",
-					"snippet": "const value = () => (\n    <Example>\n        <Example.Item title=\"value: 50\">\n            <Progress value={50} ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"value: 20, min: 0, max: 40\">\n            <Progress value={20} min={0} max={40} ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"value: 50, min: 0, max: 40\">\n            <Progress value={50} min={0} max={40} ariaLabel=\"rating value\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small, value: 50\">\n            <Progress value={50} size=\"small\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"size: medium, value: 50\">\n            <Progress value={50} size=\"medium\" ariaLabel=\"rating value\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: critical, value: 50\">\n            <Progress value={50} color=\"critical\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: warning, value: 50\">\n            <Progress value={50} color=\"warning\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive, value: 50\">\n            <Progress value={50} color=\"positive\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: media, value: 50\">\n            <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                <Progress value={50} color=\"media\" ariaLabel=\"rating value\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "duration",
-					"snippet": "const duration = () => {\n    const [active, setActive] = React.useState(false);\n\n    const handleChange = () => {\n        setActive((state) => !state);\n    };\n\n    return (\n        <Example>\n            <Example.Item title=\"duration: 2000\">\n                <View gap={3}>\n                    <View.Item>\n                        <Button onClick={handleChange}>Change</Button>\n                    </View.Item>\n\n                    <Progress value={active ? 100 : 0} duration={2000} ariaLabel=\"rating value\" />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "render",
-					"snippet": "const render = () => <Progress value={75} min={50} max={100} ariaLabel=\"progress\" />;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Progress className=\"test-classname\" attributes={{ id: \"test-id\" }} ariaLabel=\"progress\" />\n    </div>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport Progress from \"components/Progress\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Progress",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Progress/Progress.tsx",
-				"actualName": "Progress",
-				"exportName": "default"
-			}
-		},
-		"components-progressindicator": {
-			"id": "components-progressindicator",
-			"name": "ProgressIndicator",
-			"path": "./src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => {\n    const [activeIndex, setActiveIndex] = React.useState(0);\n    const total = 10;\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <View gap={4}>\n                    <View direction=\"row\" gap={2} align=\"center\">\n                        <Button\n                            onClick={() => {\n                                setActiveIndex((prev) => Math.max(0, prev - 1));\n                            }}\n                        >\n                            Previous\n                        </Button>\n                        <Button\n                            onClick={() => {\n                                setActiveIndex((prev) => Math.min(total - 1, prev + 1));\n                            }}\n                        >\n                            Next\n                        </Button>\n                        <Text weight=\"medium\">Index: {activeIndex}</Text>\n                    </View>\n\n                    <View borderRadius=\"medium\" overflow=\"hidden\" width=\"300px\">\n                        <Scrim\n                            position=\"bottom\"\n                            backgroundSlot={<View aspectRatio={16 / 9} backgroundColor=\"neutral-faded\" />}\n                        >\n                            <View align=\"center\">\n                                <ProgressIndicator total={total} activeIndex={activeIndex} color=\"media\" />\n                            </View>\n                        </Scrim>\n                    </View>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "color",
-					"snippet": "const color = () => {\n    return (\n        <Example>\n            <Example.Item title=\"color: primary\">\n                <ProgressIndicator total={10} activeIndex={5} color=\"primary\" />\n            </Example.Item>\n            <Example.Item title=\"color: media\">\n                <View borderRadius=\"medium\" overflow=\"hidden\" width=\"300px\">\n                    <Scrim\n                        position=\"bottom\"\n                        backgroundSlot={<View aspectRatio={16 / 9} backgroundColor=\"neutral-faded\" />}\n                    >\n                        <View align=\"center\">\n                            <ProgressIndicator total={10} activeIndex={5} color=\"media\" />\n                        </View>\n                    </Scrim>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "ariaLabel",
-					"snippet": "const ariaLabel = () => <ProgressIndicator total={10} className=\"test-classname\" ariaLabel=\"Progress\" />;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <ProgressIndicator total={10} className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport ProgressIndicator from \"components/ProgressIndicator\";\nimport Scrim from \"components/Scrim\";\nimport Text from \"components/Text\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "ProgressIndicator",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/ProgressIndicator/ProgressIndicator.tsx",
-				"actualName": "ProgressIndicator",
-				"exportName": "default"
-			}
-		},
-		"components-radio": {
-			"id": "components-radio",
-			"name": "Radio",
-			"path": "./src/components/Radio/tests/Radio.stories.tsx",
-			"stories": [
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"small\" defaultChecked>\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"medium\">\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"large\">\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: responsive, s: small, m: large\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size={{ s: \"small\", m: \"large\" }}>\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "error",
-					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Radio name=\"error\" value=\"dog\" hasError>\n                Radio\n            </Radio>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "render",
-					"snippet": "const render = () => (\n    <Radio name=\"test-name\" value=\"test-value\">\n        Content\n    </Radio>\n);"
-				},
-				{
-					"name": "checked",
-					"snippet": "const checked = () => <Radio name=\"test-name\" value=\"test-value\" checked onChange={fn()}>Content\n            </Radio>;"
-				},
-				{
-					"name": "checkedFalse",
-					"snippet": "const checkedFalse = () => <Radio name=\"test-name\" value=\"test-value\" checked={false} onChange={fn()}>Content\n            </Radio>;"
-				},
-				{
-					"name": "defaultChecked",
-					"snippet": "const defaultChecked = () => <Radio name=\"test-name\" value=\"test-value\" defaultChecked onChange={fn()}>Content\n            </Radio>;"
-				},
-				{
-					"name": "defaultCheckedFalse",
-					"snippet": "const defaultCheckedFalse = () => <Radio name=\"test-name\" value=\"test-value\" onChange={fn()}>Content\n            </Radio>;"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Radio name=\"test-name\" value=\"test-value\" disabled>\n        Content\n    </Radio>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Radio className=\"test-classname\" attributes={{ id: \"test-id\" }} value=\"value\">\n            Content\n        </Radio>\n    </div>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Radio from \"components/Radio\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Radio",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Radio/Radio.tsx",
-				"actualName": "Radio",
-				"exportName": "default"
-			}
-		},
-		"components-radiogroup": {
-			"id": "components-radiogroup",
-			"name": "RadioGroup",
-			"path": "./src/components/RadioGroup/tests/RadioGroup.stories.tsx",
-			"stories": [
-				{
-					"name": "value",
-					"snippet": "const value = () => <RadioGroup name=\"test-name\" value=\"1\" onChange={fn()}>\n    {/* checked should be ignored */}\n    <Radio value=\"1\" checked={false}>Content\n                    </Radio>\n    <Radio value=\"2\">Content 2</Radio>\n</RadioGroup>;"
-				},
-				{
-					"name": "defaultValue",
-					"snippet": "const defaultValue = () => <RadioGroup name=\"test-name\" defaultValue=\"1\" onChange={fn()}>\n    {/* checked should be ignored */}\n    <Radio value=\"1\" checked={false}>Content\n                    </Radio>\n    <Radio value=\"2\">Content 2</Radio>\n</RadioGroup>;"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <RadioGroup name=\"test-name\" disabled>\n        <Radio value=\"test-value\">Content</Radio>\n    </RadioGroup>\n);"
-				}
-			],
-			"import": "import Radio from \"components/Radio\";\nimport RadioGroup from \"components/RadioGroup\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "RadioGroup",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/RadioGroup/RadioGroup.tsx",
-				"actualName": "RadioGroup",
-				"exportName": "default"
-			}
-		},
-		"components-resizable": {
-			"id": "components-resizable",
-			"name": "Resizable",
-			"path": "./src/components/Resizable/tests/Resizable.stories.tsx",
-			"stories": [
-				{
-					"name": "direction",
-					"snippet": "const direction = () => {\n    return (\n        <Example>\n            <Example.Item title=\"row\">\n                <Resizable height=\"200px\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n            <Example.Item title=\"column\">\n                <Resizable height=\"400px\" direction=\"column\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n\n            {/* Test that page doesn't scroll on dragging */}\n            <div style={{ height: 2000 }} />\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "children",
-					"snippet": "const children = () => {\n    return (\n        <Example>\n            <Example.Item title=\"render props, row\">\n                <Resizable height=\"200px\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n            <Example.Item title=\"render props, column\">\n                <Resizable height=\"400px\" direction=\"column\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"bordered, row\">\n            <Resizable height=\"200px\" variant=\"bordered\">\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n            </Resizable>\n        </Example.Item>\n        <Example.Item title=\"bordered, column\">\n            <Resizable height=\"400px\" direction=\"column\" variant=\"bordered\">\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n            </Resizable>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Resizable className=\"test-classname\" attributes={{ id: \"test-id\" }} height=\"200px\">\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n        <Resizable.Handle />\n        <Resizable.Item minSize=\"200px\" maxSize=\"500px\" defaultSize=\"300px\">\n            <Panel />\n        </Resizable.Item>\n    </Resizable>\n);"
-				},
-				{
-					"name": "layout",
-					"snippet": "const layout = () => (\n    <Resizable height=\"100px\" gap={8}>\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n        <Resizable.Handle />\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n    </Resizable>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Resizable className=\"test-classname\" attributes={{ id: \"test-id\" }} height=\"200px\">\n            <Resizable.Item>\n                <Panel />\n            </Resizable.Item>\n            <Resizable.Handle />\n            <Resizable.Item>\n                <Panel />\n            </Resizable.Item>\n        </Resizable>\n    </div>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport Resizable from \"components/Resizable\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Resizable",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Resizable/Resizable.tsx",
-				"actualName": "Resizable",
-				"exportName": "default"
-			}
-		},
-		"components-scrim": {
-			"id": "components-scrim",
-			"name": "Scrim",
-			"path": "./src/components/Scrim/tests/Scrim.stories.tsx",
-			"stories": [
-				{
-					"name": "position",
-					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title=\"position: center\">\n            <Scrim backgroundSlot={<Placeholder h={200} />}>Scrim</Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <Scrim position=\"bottom\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: top\">\n            <Scrim position=\"top\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: start\">\n            <Scrim position=\"start\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <Scrim position=\"end\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Scrim className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Scrim>\n    </div>\n);"
-				},
-				{
-					"name": "composition",
-					"snippet": "const composition = () => (\n    <Example>\n        <Example.Item title=\"without backgroundSlot, size is based on the parent component\">\n            <div style={{ height: 300, position: \"relative\" }}>\n                <Scrim>Text</Scrim>\n            </div>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import { Example, Placeholder } from \"utilities/storybook\";\nimport Scrim from \"components/Scrim\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Scrim",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Scrim/Scrim.tsx",
-				"actualName": "Scrim",
-				"exportName": "default"
-			}
-		},
-		"components-select": {
-			"id": "components-select",
-			"name": "Select",
-			"path": "./src/components/Select/tests/Select.stories.tsx",
-			"stories": [
-				{
-					"name": "nativeRender",
-					"snippet": "const nativeRender = () => (\n    <Example>\n        <Example.Item title=\"native with options prop\">\n            <Select\n                name=\"animal\"\n                id=\"animal-1\"\n                placeholder=\"Select an animal\"\n                options={[\n                    { label: \"Dog\", value: \"dog\" },\n                    { label: \"Turtle\", value: \"turtle\" },\n                ]}\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            />\n        </Example.Item>\n        <Example.Item title=\"native with option tags\">\n            <Select\n                name=\"animal\"\n                id=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "customRender",
-					"snippet": "const customRender = () => (\n    <Example>\n        <Example.Item title=\"custom with options\">\n            <Select.Custom\n                name=\"animal\"\n                id=\"animal-1\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"native with option tags\">\n            <Select.Custom\n                name=\"animal-2\"\n                id=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Group label=\"Birds\">\n                    <Select.Option value=\"pigeon\">Pigeon</Select.Option>\n                    <Select.Option value=\"parrot\">Parrot</Select.Option>\n                </Select.Group>\n                <Select.Group label=\"Sea Mammals\">\n                    <Select.Option value=\"whale\">Whale</Select.Option>\n                    <Select.Option value=\"dolphin\">Dolphin</Select.Option>\n                </Select.Group>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "nativeHandlers",
-					"snippet": "const nativeHandlers = () => <Example>\n    <Example.Item title=\"native, uncontrolled, onChange\">\n        <Select\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n    <Example.Item title=\"native, controlled, onChange\">\n        <Select\n            name=\"animal-2\"\n            placeholder=\"Select an animal\"\n            value=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n    <Example.Item title=\"native, onFocus, onBlur, onClick\">\n        <Select\n            name=\"animal-3\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onFocus={fn()}\n            onBlur={fn()}\n            onClick={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "customHandlers",
-					"snippet": "const customHandlers = () => <Example>\n    <Example.Item title=\"custom, uncontrolled, onChange\">\n        <Select.Custom\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n    <Example.Item title=\"custom, controlled, onChange\">\n        <Select.Custom\n            name=\"animal-2\"\n            placeholder=\"Select an animal\"\n            value=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n    <Example.Item title=\"native, onFocus, onBlur, onClick\">\n        <Select.Custom\n            name=\"animal-3\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onFocus={fn()}\n            onBlur={fn()}\n            onClick={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "triggerOnly",
-					"snippet": "const triggerOnly = (args) => {\n    const toggle = useToggle();\n    const [value, setValue] = React.useState(\"Dog\");\n\n    const handleClick: SelectProps[\"onClick\"] = (e) => {\n        args.handleClick(e);\n        toggle.toggle();\n    };\n\n    return (\n        <Example>\n            <Example.Item title=\"trigger only, onClick\">\n                <Select\n                    name=\"animal\"\n                    placeholder=\"Select an animal\"\n                    onClick={handleClick}\n                    value=\"dog\"\n                    inputAttributes={{\n                        \"aria-label\": \"Select an animal\",\n                    }}\n                >\n                    {value}\n                </Select>\n                <Modal\n                    active={toggle.active}\n                    onClose={toggle.deactivate}\n                    position=\"bottom\"\n                    padding={2}\n                    attributes={{ \"aria-label\": \"Select an animal\" }}\n                >\n                    <div role=\"listbox\" aria-label=\"Select an animal\">\n                        <MenuItem\n                            roundedCorners\n                            onClick={() => {\n                                setValue(\"Dog\");\n                                toggle.deactivate();\n                            }}\n                            attributes={{\n                                role: \"option\",\n                            }}\n                        >\n                            Dog\n                        </MenuItem>\n                        <MenuItem\n                            roundedCorners\n                            attributes={{\n                                role: \"option\",\n                            }}\n                            onClick={() => {\n                                setValue(\"Turtle\");\n                                toggle.deactivate();\n                            }}\n                        >\n                            Turtle\n                        </MenuItem>\n                    </div>\n                </Modal>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "multiple",
-					"snippet": "const multiple = () => <Example>\n    <Example.Item title=\"multiple\">\n        <Select.Custom\n            multiple\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue={[\"dog\"]}\n            onChange={fn()}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded, native\">\n            <Select\n                variant=\"faded\"\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n\n        <Example.Item title=\"variant: faded, custom\">\n            <Select.Custom\n                variant=\"faded\"\n                name=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless, native\">\n            <Select\n                variant=\"headless\"\n                name=\"animal-3\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless, custom\">\n            <Select.Custom\n                variant=\"headless\"\n                name=\"animal-4\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <Select.Custom size=\"small\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <Select.Custom size=\"medium\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <Select.Custom size=\"large\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: xlarge\">\n            <Select.Custom size=\"xlarge\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "startSlot",
-					"snippet": "const startSlot = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Select.Custom name=\"animal\" placeholder=\"Select an animal\" icon={IconZap}>\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n\n        <Example.Item title=\"startSlot\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                startSlot={<Placeholder h={20} />}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "renderValue",
-					"snippet": "const renderValue = () => {\n    const options = [\n        {\n            value: \"1\",\n            label: \"Title 1\",\n            subtitle: \"Subtitle 1\",\n        },\n        {\n            value: \"2\",\n            label: \"Title 2\",\n            subtitle: \"Subtitle 2\",\n        },\n    ];\n\n    return (\n        <Example>\n            <Example.Item title=\"default renderer, single\">\n                <Select.Custom name=\"animal\" defaultValue=\"1\" placeholder=\"Nothing selected\">\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"default renderer, multiple\">\n                <Select.Custom name=\"animal\" defaultValue={[\"1\"]} multiple placeholder=\"Nothing selected\">\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"renderValue, single\">\n                <Select.Custom\n                    name=\"animal\"\n                    defaultValue=\"1\"\n                    placeholder=\"Nothing selected\"\n                    renderValue={(args) => <Badge>Title {args.value}</Badge>}\n                >\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"renderValue, multiple\">\n                <Select.Custom\n                    name=\"animal\"\n                    defaultValue={[\"1\"]}\n                    multiple\n                    placeholder=\"Nothing selected\"\n                    renderValue={(args) => <Badge>Titles {args.value.join(\", \")}</Badge>}\n                >\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "error",
-					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Select.Custom name=\"animal\" placeholder=\"Select an animal\" hasError>\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, native\">\n            <Select\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                disabled\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n        <Example.Item title=\"disabled, custom\">\n            <Select.Custom\n                name=\"animal-2\"\n                placeholder=\"Select an animal\"\n                disabled\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <Example>\n        <Example.Item title=\"native, className, attributes, inputAttributes\">\n            <Select\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                className=\"native-class\"\n                attributes={{ id: \"test-id\" }}\n                inputAttributes={{ \"aria-label\": \"test-label\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n        <Example.Item title=\"custom, className, attributes, inputAttributes\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                className=\"custom-class\"\n                attributes={{ id: \"test-id\" }}\n                inputAttributes={{ \"aria-label\": \"test-label\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "fallback",
-					"snippet": "const fallback = () => (\n    <Example>\n        <Example.Item title=\"fallback\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                {[...Array(100)].map((_, index) => (\n                    <Select.Option key={index} value={`item-${index}`}>\n                        Item {index + 1}\n                    </Select.Option>\n                ))}\n            </Select.Custom>\n            <div style={{ height: \"1000px\" }}></div>\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                {[...Array(100)].map((_, index) => (\n                    <Select.Option key={index} value={`item-${index}`}>\n                        Item {index + 1}\n                    </Select.Option>\n                ))}\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "formControl",
-					"snippet": "const formControl = () => (\n    <Example>\n        <Example.Item title=\"FormControl\">\n            <FormControl hasError>\n                <FormControl.Label>Animal</FormControl.Label>\n                <Select.Custom name=\"animal\" placeholder=\"Select an animal\">\n                    <Select.Option value=\"dog\">Dog</Select.Option>\n                    <Select.Option value=\"turtle\">Turtle</Select.Option>\n                </Select.Custom>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "testComposition",
-					"snippet": "const testComposition = () => (\n    <Example>\n        <Example.Item title=\"custom with options\">\n            <Select.Custom\n                name=\"animal\"\n                id=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Group>\n                    <Select.Option value=\"dog\">Dog</Select.Option>\n                    <Select.Option value=\"turtle\">Turtle</Select.Option>\n                </Select.Group>\n                <Select.Group>Hello</Select.Group>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Badge from \"components/Badge\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport FormControl from \"components/FormControl\";\nimport MenuItem from \"components/MenuItem\";\nimport Modal from \"components/Modal\";\nimport Select from \"components/Select\";\nimport Text from \"components/Text\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Select",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Select/Select.tsx",
-				"actualName": "Select",
-				"exportName": "default"
-			}
-		},
-		"components-skeleton": {
-			"id": "components-skeleton",
-			"name": "Skeleton",
-			"path": "./src/components/Skeleton/tests/Skeleton.stories.tsx",
-			"stories": [
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"text\">\n            <Skeleton />\n        </Example.Item>\n\n        <Example.Item title=\"view, rectangle\">\n            <Skeleton width=\"100px\" height=\"100px\" />\n        </Example.Item>\n\n        <Example.Item title=\"view, circle\">\n            <Skeleton width=\"100px\" height=\"100px\" borderRadius=\"circular\" />\n        </Example.Item>\n\n        <Example.Item title=\"view, rectangle, responsive\">\n            <Skeleton width={{ s: \"100px\", m: \"200px\" }} height={{ s: \"100px\", m: \"200px\" }} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "radius",
-					"snippet": "const radius = () => (\n    <Example>\n        <Example.Item title=\"radius=small\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"small\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=medium\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"medium\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=large\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"large\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=circular\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"circular\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Skeleton className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Skeleton from \"components/Skeleton\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Skeleton",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Skeleton/Skeleton.tsx",
-				"actualName": "Skeleton",
-				"exportName": "default"
-			}
-		},
-		"components-slider": {
-			"id": "components-slider",
-			"name": "Slider",
-			"path": "./src/components/Slider/tests/Slider.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"single, name\">\n            <Slider name=\"slider-single\" defaultValue={30} />\n        </Example.Item>\n        <Example.Item title=\"range, name\">\n            <Slider range name=\"slider-range\" defaultMinValue={30} defaultMaxValue={85} />\n        </Example.Item>\n        <Example.Item title=\"range, minName, maxName\">\n            <Slider\n                range\n                minName=\"slider-min\"\n                maxName=\"slider-max\"\n                defaultMinValue={30}\n                defaultMaxValue={85}\n            />\n        </Example.Item>\n        <div style={{ height: 2000 }} />\n    </Example>\n);"
-				},
-				{
-					"name": "orientation",
-					"snippet": "const orientation = () => (\n    <Example>\n        <Example.Item title=\"orientation: vertical\">\n            <View height=\"200px\">\n                <Slider\n                    range\n                    name=\"slider\"\n                    defaultMinValue={30}\n                    defaultMaxValue={85}\n                    orientation=\"vertical\"\n                />\n            </View>\n        </Example.Item>\n        <View height=\"2000px\" />\n    </Example>\n);"
-				},
-				{
-					"name": "minMax",
-					"snippet": "const minMax = () => (\n    <Example>\n        <Example.Item title=\"min, max\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={60} />\n        </Example.Item>\n        <Example.Item title=\"min, max, value < min\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={30} />\n        </Example.Item>\n        <Example.Item title=\"min, max, value > max\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={80} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "step",
-					"snippet": "const step = () => (\n    <Example>\n        <Example.Item title=\"step: 5\">\n            <Slider name=\"slider\" defaultValue={30} step={5} />\n        </Example.Item>\n\n        <Example.Item title=\"step: 5, defaultValue: 31, rounded down to 30\">\n            <Slider name=\"slider\" defaultValue={31} step={5} />\n        </Example.Item>\n\n        <Example.Item title=\"step: 0.01, float\">\n            <Slider name=\"slider\" defaultValue={30} step={0.01} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <Slider name=\"slider\" defaultValue={30} disabled />\n        </Example.Item>\n\n        <Example.Item title=\"disabled, range\">\n            <Slider name=\"slider\" range defaultMinValue={30} defaultMaxValue={80} disabled />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "renderValue",
-					"snippet": "const renderValue = () => (\n    <Example>\n        <Example.Item title=\"renderValue: $\">\n            <Slider name=\"name\" defaultValue={50} renderValue={(args) => `$${args.value}`} />\n        </Example.Item>\n        <Example.Item title=\"renderValue: false\">\n            <Slider name=\"name\" defaultValue={50} renderValue={false} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "defaultValue",
-					"snippet": "const defaultValue = () => <View paddingTop={10}>\n    <Slider name=\"test-name\" defaultValue={50} onChange={fn()} onChangeCommit={fn()} />\n</View>;"
-				},
-				{
-					"name": "value",
-					"snippet": "const value = () => <View paddingTop={10}>\n    <Slider name=\"test-name\" value={50} onChange={fn()} onChangeCommit={fn()} />\n</View>;"
-				},
-				{
-					"name": "rangeDefaultValue",
-					"snippet": "const rangeDefaultValue = () => <View paddingTop={10}>\n    <Slider\n        range\n        name=\"test-name\"\n        defaultMinValue={50}\n        defaultMaxValue={70}\n        onChange={fn()}\n        onChangeCommit={fn()} />\n</View>;"
-				},
-				{
-					"name": "rangeValue",
-					"snippet": "const rangeValue = () => <View paddingTop={10}>\n    <Slider\n        range\n        minName=\"test-name-min\"\n        maxName=\"test-name-max\"\n        minValue={50}\n        maxValue={70}\n        onChange={fn()}\n        onChangeCommit={fn()} />\n</View>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Slider name=\"name\" className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
-				},
-				{
-					"name": "testForm",
-					"snippet": "const testForm = (args) => {\n    const formRef = React.useRef<HTMLFormElement>(null);\n    const [data, setData] = React.useState<[string, FormDataEntryValue][]>([]);\n\n    const handleChange = (e: React.FormEvent<HTMLFormElement>) => {\n        const formData = new FormData(e.currentTarget);\n        const nextState = [...formData.entries()];\n\n        args.handleFormChange({ formData: nextState });\n        setData(nextState);\n    };\n\n    return (\n        <View paddingTop={10} gap={4}>\n            <form onChange={handleChange} ref={formRef}>\n                <Slider\n                    range\n                    minName=\"slider-min\"\n                    maxName=\"slider-max\"\n                    defaultMinValue={30}\n                    defaultMaxValue={50}\n                />\n            </form>\n\n            {data.map((v) => v.join(\": \")).join(\", \")}\n        </View>\n    );\n};"
-				},
-				{
-					"name": "testSwipe",
-					"snippet": "const testSwipe = () => {\n    const toggle = useToggle(true);\n\n    return (\n        <Modal active={toggle.active} onClose={toggle.deactivate} position=\"end\">\n            <View gap={4}>\n                <Modal.Title>Modal</Modal.Title>\n                <Slider name=\"slider\" defaultValue={30} />\n            </View>\n        </Modal>\n    );\n};"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Modal from \"components/Modal\";\nimport Slider from \"components/Slider\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Slider",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Slider/Slider.tsx",
-				"actualName": "Slider",
-				"exportName": "default"
-			}
-		},
-		"components-stepper": {
-			"id": "components-stepper",
-			"name": "Stepper",
-			"path": "./src/components/Stepper/tests/Stepper.stories.tsx",
-			"stories": [
-				{
-					"name": "direction",
-					"snippet": "const direction = () => (\n    <Example>\n        <Example.Item title=\"direction: row\">\n            <Stepper activeId=\"1\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <Stepper activeId=\"1\" direction=\"column\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "labelDisplay",
-					"snippet": "const labelDisplay = () => (\n    <Example>\n        <Example.Item title=\"direction: row, labels hidden\">\n            <Stepper activeId=\"1\" labelDisplay=\"hidden\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: column, labels hiden\">\n            <Stepper activeId=\"1\" direction=\"column\" labelDisplay=\"hidden\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: row, labels hidden on s\">\n            <Stepper activeId=\"1\" labelDisplay={{ s: \"hidden\", m: \"inline\" }}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "gap",
-					"snippet": "const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 6, direction: row\">\n            <Stepper activeId=\"1\" gap={6}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"gap: 6, direction: column\">\n            <Stepper activeId=\"1\" direction=\"column\" gap={6}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap\", \"[s] 2\", \"[m+] 5\"]}>\n            <Stepper activeId=\"1\" gap={{ s: 2, m: 5 }}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Stepper className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Stepper.Item attributes={{ id: \"test-item-id\" }} className=\"test-item-classname\" />\n        </Stepper>\n    </div>\n);"
-				},
-				{
-					"name": "edgeCases",
-					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"multiline subtitle\",\n                \"should wrap the text correctly\",\n                \"should display the connector correctly\",\n            ]}\n        >\n            <Demo\n                activeId={0}\n                subtitle=\"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy\"\n            />\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport Stepper from \"components/Stepper\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Stepper",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Stepper/Stepper.tsx",
-				"actualName": "Stepper",
-				"exportName": "default"
-			}
-		},
-		"components-switch": {
-			"id": "components-switch",
-			"name": "Switch",
-			"path": "./src/components/Switch/tests/Switch.stories.tsx",
-			"stories": [
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n\t<Example>\n\t\t<Example.Item title=\"size: medium\">\n\t\t\t<Switch name=\"active\" size=\"medium\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: small\">\n\t\t\t<Switch name=\"active\" size=\"small\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: large\">\n\t\t\t<Switch name=\"active\" size=\"large\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: responsive, s: small, m: large\">\n\t\t\t<Switch\n\t\t\t\tname=\"active\"\n\t\t\t\tsize={{ s: \"small\", m: \"large\" }}\n\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t/>\n\t\t</Example.Item>\n\t</Example>\n);"
-				},
-				{
-					"name": "label",
-					"snippet": "const label = () => (\n\t<Example>\n\t\t<Example.Item title=\"size: medium\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch reversed name=\"active\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: small\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" size=\"small\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch\n\t\t\t\t\treversed\n\t\t\t\t\tname=\"active\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t\t>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\n\t\t<Example.Item title=\"size: large\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" size=\"large\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch\n\t\t\t\t\treversed\n\t\t\t\t\tname=\"active\"\n\t\t\t\t\tsize=\"large\"\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t\t>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\t</Example>\n);"
-				},
-				{
-					"name": "defaultChecked",
-					"snippet": "const defaultChecked = () => <Switch name=\"test-name\" defaultChecked onChange={fn()}>Label\n            </Switch>;"
-				},
-				{
-					"name": "checked",
-					"snippet": "const checked = () => <Switch name=\"test-name\" checked onChange={fn()}>Label\n            </Switch>;"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, unselected\">\n            <Switch name=\"active\" disabled inputAttributes={{ \"aria-label\": \"test switch\" }} />\n        </Example.Item>\n        <Example.Item title=\"disabled, selected\">\n            <Switch\n                name=\"active\"\n                disabled\n                defaultChecked\n                inputAttributes={{ \"aria-label\": \"test switch\" }}\n            />\n        </Example.Item>\n        <Example.Item title=\"disabled, with label\">\n            <Switch name=\"active\" disabled>\n                Switch\n            </Switch>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Switch\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ \"aria-label\": \"test select\", id: \"test-input-id\" }}\n            name=\"name\"\n        >\n            Label\n        </Switch>\n    </div>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Switch from \"components/Switch\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Switch",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Switch/Switch.tsx",
-				"actualName": "Switch",
-				"exportName": "default"
-			}
-		},
-		"components-table": {
-			"id": "components-table",
-			"name": "Table",
-			"path": "./src/components/Table/tests/Table.stories.tsx",
-			"stories": [
-				{
-					"name": "layout",
-					"snippet": "const layout = () => (\n    <Example>\n        <Example.Item title=\"base\">\n            <Table>\n                <Table.Head>\n                    <Table.Row>\n                        <Table.Heading>Column 1</Table.Heading>\n                        <Table.Heading>Column 2</Table.Heading>\n                    </Table.Row>\n                </Table.Head>\n                <Table.Body>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell>Cell 2</Table.Cell>\n                    </Table.Row>\n                </Table.Body>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"colspan: 2 for col 2, rowspan: 2 for cell 3\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading colSpan={2}>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                    <Table.Cell rowSpan={2}>Cell 3</Table.Cell>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"align: center for heading 1, align: end for heading 2\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading align=\"center\">Column 1</Table.Heading>\n                    <Table.Heading align=\"end\">Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"valign: center for cell 2, valign: end for cell 3\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>\n                        <View height={15} backgroundColor=\"neutral-faded\" />\n                    </Table.Cell>\n                    <Table.Cell verticalAlign=\"center\">Cell 2</Table.Cell>\n                    <Table.Cell verticalAlign=\"end\">Cell 3</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"width: 40%, minWidth: 200px for col 1\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"40%\" minWidth=\"200px\">\n                        Column 1\n                    </Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "border",
-					"snippet": "const border = () => (\n    <Example>\n        <Example.Item title=\"border: true\">\n            <Table border>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"columnBorder: true\">\n            <Table columnBorder>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"columnBorder: true, border: true\">\n            <Table columnBorder border>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "rows",
-					"snippet": "const rows = () => (\n    <Example>\n        <Example.Item title=\"highlighted for row 2\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row highlighted>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"clickable row 2, focus ring\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row onClick={() => {}}>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "render",
-					"snippet": "const render = () => (\n    <Table>\n        <Table.Head>\n            <Table.Row>\n                <Table.Heading>Heading</Table.Heading>\n                <Table.Heading>Heading</Table.Heading>\n            </Table.Row>\n        </Table.Head>\n        <Table.Body>\n            <Table.Row>\n                <Table.Cell>Content</Table.Cell>\n                <Table.Cell>Content</Table.Cell>\n            </Table.Row>\n        </Table.Body>\n    </Table>\n);"
-				},
-				{
-					"name": "tbody",
-					"snippet": "const tbody = () => (\n    <Table>\n        <Table.Row>\n            <Table.Heading>Heading</Table.Heading>\n            <Table.Heading>Heading</Table.Heading>\n        </Table.Row>\n    </Table>\n);"
-				},
-				{
-					"name": "tabIndex",
-					"snippet": "const tabIndex = () => (\n    <Table>\n        <Table.Row>\n            <Table.Cell />\n        </Table.Row>\n        <Table.Row onClick={() => {}}>\n            <Table.Cell />\n        </Table.Row>\n        <Table.Row attributes={{ onClick: () => {} }}>\n            <Table.Cell />\n        </Table.Row>\n    </Table>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Table className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Table.Row attributes={{ id: \"test-row-id\" }}>\n                <Table.Cell attributes={{ id: \"test-cell-id\" }}></Table.Cell>\n            </Table.Row>\n        </Table>\n    </div>\n);"
-				},
-				{
-					"name": "edgeCases",
-					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"scroll fade\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"500px\">Column 1</Table.Heading>\n                    <Table.Heading width=\"500px\">Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"card with highlighted heading\">\n            <Card elevated padding={0}>\n                <Table>\n                    <Table.Row highlighted>\n                        <Table.Heading width=\"50%\" minWidth=\"200px\">\n                            Column 1\n                        </Table.Heading>\n                        <Table.Heading colSpan={2} align=\"end\">\n                            Column 2\n                        </Table.Heading>\n                    </Table.Row>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell align=\"center\">Cell 2</Table.Cell>\n                        <Table.Cell align=\"end\">Cell 3</Table.Cell>\n                    </Table.Row>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell align=\"center\">Cell 2</Table.Cell>\n                        <Table.Cell align=\"end\">Cell 3</Table.Cell>\n                    </Table.Row>\n                </Table>\n            </Card>\n        </Example.Item>\n        <Example.Item title=\"width: auto, nowrap\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"50%\">Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                    <Table.Heading>Column 3</Table.Heading>\n                    <Table.Heading width=\"auto\">Long heading title</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                    <Table.Cell>Cell 3</Table.Cell>\n                    <Table.Cell>Cell 4</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "examples",
-					"snippet": "const examples = () => (\n    <Example>\n        <Example.Item title=\"selectable\">\n            <SelectionDemo />\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Card from \"components/Card\";\nimport Checkbox from \"components/Checkbox\";\nimport { Example } from \"utilities/storybook\";\nimport Table from \"components/Table\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Table",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Table/Table.tsx",
-				"actualName": "Table",
-				"exportName": "default"
-			}
-		},
-		"components-tabs": {
-			"id": "components-tabs",
-			"name": "Tabs",
-			"path": "./src/components/Tabs/tests/Tabs.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n    <Tabs>\n        <Tabs.List>\n            <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n            <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n        </Tabs.List>\n\n        <Tabs.Panel value=\"1\">\n            <View padding={4}>Content 1</View>\n        </Tabs.Panel>\n        <Tabs.Panel value=\"2\">\n            <View padding={4}>Content 2</View>\n        </Tabs.Panel>\n    </Tabs>\n);"
-				},
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Tabs defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills\">\n            <Tabs variant=\"pills\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills-elevated\">\n            <Tabs variant=\"pills-elevated\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: borderless\">\n            <Tabs variant=\"borderless\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"variant: default, size: large\">\n            <Tabs size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills, size: large\">\n            <Tabs variant=\"pills\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills-elevated, size: large\">\n            <Tabs variant=\"pills-elevated\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: borderless, size: large\">\n            <Tabs variant=\"borderless\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "direction",
-					"snippet": "const direction = () => (\n    <Example>\n        <Example.Item title=\"direction: column, variant: underline\">\n            <Tabs direction=\"column\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: pills\">\n            <Tabs direction=\"column\" variant=\"pills\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: pills-elevated\">\n            <Tabs direction=\"column\" variant=\"pills-elevated\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: borderless\">\n            <Tabs direction=\"column\" variant=\"borderless\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "icon",
-					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Tabs>\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"1\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"icon only\">\n            <Tabs variant=\"pills-elevated\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap} attributes={{ \"aria-label\": \"Tab 1\" }} />\n                    <Tabs.Item value=\"1\" icon={IconZap} attributes={{ \"aria-label\": \"Tab 2\" }} />\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "equalWidth",
-					"snippet": "const equalWidth = () => (\n    <Example>\n        <Example.Item title=\"equal width items\">\n            <Tabs onChange={console.log} itemWidth=\"equal\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"1\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                    <Tabs.Item value=\"2\" icon={IconZap}>\n                        Very long item 3\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "href",
-					"snippet": "const href = () => (\n    <Example>\n        <Example.Item title=\"href, no onChange\">\n            <Tabs value=\"2\">\n                <Tabs.List>\n                    <Tabs.Item value=\"1\" href=\"#item-1\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"2\" href=\"#item-2\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                    <Tabs.Item value=\"3\" href=\"#item-3\" icon={IconZap}>\n                        Very long item 3\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => {\n    return (\n        <Example>\n            <Example.Item title=\"disabled\">\n                <Tabs defaultValue=\"1\">\n                    <Tabs.List>\n                        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"2\" disabled icon={IconZap}>\n                            Item 2\n                        </Tabs.Item>\n                        <Tabs.Item value=\"3\">Item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"1\">\n                        <View padding={4}>Content 1</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <View padding={4}>Content 2</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"3\">\n                        <View padding={4}>Content 3</View>\n                    </Tabs.Panel>\n                </Tabs>\n            </Example.Item>\n\n            <Example.Item title=\"disabled, href\">\n                <Tabs defaultValue=\"1\">\n                    <Tabs.List>\n                        <Tabs.Item href=\"#item1\" value=\"1\">\n                            Item 1\n                        </Tabs.Item>\n                        <Tabs.Item href=\"#item2\" value=\"2\" disabled icon={IconZap}>\n                            Item 2\n                        </Tabs.Item>\n                        <Tabs.Item href=\"#item3\" value=\"3\">\n                            Item 3\n                        </Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"1\">\n                        <View padding={4}>Content 1</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <View padding={4}>Content 2</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"3\">\n                        <View padding={4}>Content 3</View>\n                    </Tabs.Panel>\n                </Tabs>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "defaultValue",
-					"snippet": "const defaultValue = () => <Tabs defaultValue=\"2\" onChange={fn()}>\n    <Tabs.List>\n        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n        <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n    </Tabs.List>\n    <Tabs.Panel value=\"1\">Content 1</Tabs.Panel>\n    <Tabs.Panel value=\"2\">Content 2</Tabs.Panel>\n</Tabs>;"
-				},
-				{
-					"name": "value",
-					"snippet": "const value = () => <Tabs value=\"2\" onChange={fn()}>\n    <Tabs.List>\n        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n        <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n    </Tabs.List>\n    <Tabs.Panel value=\"1\">Content 1</Tabs.Panel>\n    <Tabs.Panel value=\"2\">Content 2</Tabs.Panel>\n</Tabs>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Tabs>\n            <Tabs.List attributes={{ id: \"test-list-id\" }} className=\"test-list-classname\">\n                <Tabs.Item attributes={{ id: \"test-item-id\" }} value=\"1\">\n                    Item\n                </Tabs.Item>\n            </Tabs.List>\n\n            <Tabs.Panel\n                attributes={{ \"data-testid\": \"test-panel-id\" }}\n                className=\"test-panel-classname\"\n                value=\"1\"\n            />\n        </Tabs>\n    </div>\n);"
-				},
-				{
-					"name": "testFocusableContent",
-					"snippet": "const testFocusableContent = () => (\n    <Example>\n        <Example.Item title=\"panels without focusable content\">\n            <Tabs>\n                <View gap={4}>\n                    <Tabs.List>\n                        <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                        <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"0\">Tab 1</Tabs.Panel>\n                    <Tabs.Panel value=\"1\">Tab 2</Tabs.Panel>\n                    <Tabs.Panel value=\"2\">Tab 3</Tabs.Panel>\n                </View>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"panels with focusable content\">\n            <Tabs>\n                <View gap={4}>\n                    <Tabs.List>\n                        <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                        <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"0\">\n                        <Button onClick={() => {}}>Tab 1 action</Button>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"1\">\n                        <Button onClick={() => {}}>Tab 2 action</Button>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <Button onClick={() => {}}>Tab 3 action</Button>\n                    </Tabs.Panel>\n                </View>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "testComposition",
-					"snippet": "const testComposition = () => (\n    <Example>\n        <Example.Item title=\"Viewport overflow\">\n            <Tabs>\n                <Tabs.List>\n                    {[...Array(8)].map((_, i) => (\n                        <Tabs.Item value={`${i}`} key={i} icon={IconZap}>\n                            Very long item {i}\n                        </Tabs.Item>\n                    ))}\n                </Tabs.List>\n\n                {[...Array(8)].map((_, i) => (\n                    <Tabs.Panel value={`${i}`} key={i}>\n                        Tab {i}\n                    </Tabs.Panel>\n                ))}\n            </Tabs>\n        </Example.Item>\n        <Example.Item>\n            <Tabs onChange={console.log} variant=\"pills-elevated\" name=\"hey\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">\n                        <View borderColor=\"neutral-faded\" padding={5}>\n                            Item 3\n                        </View>\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"Custom non-interactive list children\">\n            <Tabs direction=\"column\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <View height={6} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "testEdgeCaseDom",
-					"snippet": "const testEdgeCaseDom = () => {\n    const [activeItem, setActiveItem] = React.useState(\"1\");\n    const sectionsRef = React.useRef(null);\n\n    return (\n        <Example>\n            <Example.Item title=\"active item changes on scroll\">\n                <View justify=\"center\" align=\"center\" padding={10}>\n                    <View width={60} gap={2}>\n                        <Tabs value={activeItem} onChange={(args) => setActiveItem(args.value)}>\n                            <Tabs.List>\n                                <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                                <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n                                <Tabs.Item value=\"3\">Item 3</Tabs.Item>\n                                <Tabs.Item value=\"4\">Item 4</Tabs.Item>\n                            </Tabs.List>\n                        </Tabs>\n\n                        <ScrollArea\n                            attributes={{ ref: sectionsRef }}\n                            height={70}\n                            onScroll={(args) => {\n                                setActiveItem(Math.min(4, Math.floor(args.y * 10) + 1).toString());\n                            }}\n                        >\n                            <View gap={4}>\n                                <View gap={2}>\n                                    <Text>Section 1</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View grow height=\"100px\" backgroundColor=\"neutral-faded\" key={i} />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 2</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 3</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 4</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n                            </View>\n                        </ScrollArea>\n                    </View>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport ScrollArea from \"components/ScrollArea\";\nimport Tabs from \"components/Tabs\";\nimport Text from \"components/Text\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Tabs",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Tabs/Tabs.tsx",
-				"actualName": "Tabs",
-				"exportName": "default"
-			}
-		},
-		"components-textarea": {
-			"id": "components-textarea",
-			"name": "TextArea",
-			"path": "./src/components/TextArea/tests/TextArea.stories.tsx",
-			"stories": [
-				{
-					"name": "variants",
-					"snippet": "const variants = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <TextArea variant=\"faded\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless\">\n            <TextArea variant=\"headless\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: medium\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"medium\" />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"large\" />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"xlarge\" />\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] large\", \"[m+] medium\"]}>\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size={{ s: \"xlarge\", m: \"medium\" }} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "resize",
-					"snippet": "const resize = () => (\n    <Example>\n        <Example.Item title=\"resize: none\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" resize=\"none\" />\n        </Example.Item>\n        <Example.Item title=\"resize: auto\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" resize=\"auto\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "error",
-					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" hasError />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "aligner",
-					"snippet": "const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner\">\n            <View gap={2}>\n                <Text variant=\"featured-2\">What problem are you trying to solve?</Text>\n                <TextArea.Aligner>\n                    <TextArea\n                        variant=\"headless\"\n                        placeholder=\"Try something like 'I have a job'\"\n                        name=\"description\"\n                    />\n                </TextArea.Aligner>\n                <View.Item>\n                    <Button>Next</Button>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "edgeCases",
-					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"long value without breaks\">\n            <TextArea\n                name=\"hey\"\n                defaultValue={`<div style=\"position:relative;width:100%;padding-top:calc(150% + 72px)\">\n<iframe src=\"nskjdfdsdkjfsjkdfhbsjlhdfbsjlhfbs;jhbsdljfhsbljhfsbljhfbsjlfdhbsljhfbsdljhfbsljhfbslufbhsdlfds\" />\n</div>`}\n                resize=\"auto\"\n                placeholder=\"Placeholder\"\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "render",
-					"snippet": "const render = () => <TextArea name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "placeholder",
-					"snippet": "const placeholder = () => (\n    <TextArea\n        name=\"test-name\"\n        placeholder=\"Placeholder\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"
-				},
-				{
-					"name": "id",
-					"snippet": "const id = () => (\n    <TextArea name=\"test-name\" id=\"test-id\" inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => <TextArea name=\"test-name\" disabled inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "defaultValue",
-					"snippet": "const defaultValue = () => <TextArea\n    name=\"test-name\"\n    defaultValue=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "value",
-					"snippet": "const value = () => <TextArea\n    name=\"test-name\"\n    value=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <TextArea\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n        />\n    </div>\n);"
-				},
-				{
-					"name": "formControl",
-					"snippet": "const formControl = () => (\n    <Example>\n        <Example.Item title=\"with helper\">\n            <FormControl>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextArea name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n        <Example.Item title=\"with error\">\n            <FormControl hasError>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextArea name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport FormControl from \"components/FormControl\";\nimport Text from \"components/Text\";\nimport TextArea from \"components/TextArea\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "TextArea",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/TextArea/TextArea.tsx",
-				"actualName": "TextArea",
-				"exportName": "default"
-			}
-		},
-		"components-textfield": {
-			"id": "components-textfield",
-			"name": "TextField",
-			"path": "./src/components/TextField/tests/TextField.stories.tsx",
-			"stories": [
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <TextField variant=\"faded\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless\">\n            <TextField variant=\"headless\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "rounded",
-					"snippet": "const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded\">\n            <TextField\n                rounded\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                icon={IconZap}\n                prefix=\"+31\"\n                endSlot={<Button rounded size=\"small\" icon={IconZap} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"rounded, variant: faded\">\n            <View direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <TextField\n                        rounded\n                        variant=\"faded\"\n                        name=\"Name\"\n                        placeholder=\"Enter your name\"\n                        startSlot={\n                            <Badge rounded size=\"small\">\n                                Hello\n                            </Badge>\n                        }\n                    />\n                </View.Item>\n                <Button rounded>Submit</Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "error",
-					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" hasError />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "attachments",
-					"snippet": "const attachments = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" value=\"Reshaped\" icon={IconZap} />\n        </Example.Item>\n        <Example.Item title=\"endIcon\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" value=\"Reshaped\" endIcon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title={[\"startSlot\", \"vertical and horizontal padding aligned\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title={[\"endSlot\", \"vertical and horizontal padding aligned\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                endSlot={\n                    <Button\n                        icon={IconZap}\n                        size=\"small\"\n                        onClick={() => {}}\n                        attributes={{ \"aria-label\": \"Action\" }}\n                    />\n                }\n            />\n        </Example.Item>\n\n        <Example.Item title=\"paddingSlotStart=4, paddingSlotEnd=2\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlotPadding={4}\n                endSlotPadding={2}\n                startSlot={<Placeholder h={20} />}\n                endSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"with all affixes\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                endIcon={IconZap}\n                icon={IconZap}\n                prefix=\"Estimated value\"\n                suffix=\"m2\"\n                startSlot={<Placeholder h={20} />}\n                endSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"multiline wrap\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlot={[...Array(10).keys()].map((i) => (\n                    <Badge size=\"small\" key={i}>\n                        Item {i + 1}\n                    </Badge>\n                ))}\n                multiline\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"small\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"medium\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"large\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"xlarge\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] xlarge\", \"[m+] medium\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                size={{ s: \"xlarge\", m: \"medium\" }}\n                icon={IconZap}\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "aligner",
-					"snippet": "const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner\">\n            <View gap={2}>\n                <Text variant=\"featured-2\">What problem are you trying to solve?</Text>\n                <TextField.Aligner>\n                    <TextField\n                        variant=\"headless\"\n                        placeholder=\"Try something like 'I have a job'\"\n                        name=\"description\"\n                    />\n                </TextField.Aligner>\n                <View.Item>\n                    <Button>Next</Button>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "render",
-					"snippet": "const render = () => <TextField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "placeholder",
-					"snippet": "const placeholder = () => (\n    <TextField\n        name=\"test-name\"\n        placeholder=\"Placeholder\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"
-				},
-				{
-					"name": "id",
-					"snippet": "const id = () => (\n    <TextField name=\"test-name\" id=\"test-id\" inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => <TextField name=\"test-name\" disabled inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "defaultValue",
-					"snippet": "const defaultValue = () => <TextField\n    name=\"test-name\"\n    defaultValue=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "value",
-					"snippet": "const value = () => <TextField\n    name=\"test-name\"\n    value=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <TextField\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n        />\n    </div>\n);"
-				},
-				{
-					"name": "formControl",
-					"snippet": "const formControl = () => (\n    <Example>\n        <Example.Item title=\"with helper\">\n            <FormControl>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextField name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n        <Example.Item title=\"with error\">\n            <FormControl hasError>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextField name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Badge from \"components/Badge\";\nimport Button from \"components/Button\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport FormControl from \"components/FormControl\";\nimport Text from \"components/Text\";\nimport TextField from \"components/TextField\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "TextField",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/TextField/TextField.tsx",
-				"actualName": "TextField",
-				"exportName": "default"
-			}
-		},
-		"components-timeline": {
-			"id": "components-timeline",
-			"name": "Timeline",
-			"path": "./src/components/Timeline/tests/Timeline.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"children passed directly\">\n            <Timeline>\n                <Placeholder />\n                <Placeholder />\n                <Placeholder />\n            </Timeline>\n        </Example.Item>\n        <Example.Item title=\"children wrapped with Timeline.Item\">\n            <Timeline>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "marker",
-					"snippet": "const marker = () => (\n    <Example>\n        <Example.Item title=\"slot\">\n            <Timeline>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n\n        <Example.Item title=\"null marker\">\n            <Timeline>\n                <Timeline.Item markerSlot={null}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={null}>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Timeline className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Timeline.Item className=\"test-item-classname\" attributes={{ id: \"test-item-id\" }}>\n                Content\n            </Timeline.Item>\n            <Timeline.Item>Content</Timeline.Item>\n        </Timeline>\n    </div>\n);"
-				}
-			],
-			"import": "import { Example, Placeholder } from \"utilities/storybook\";\nimport Timeline from \"components/Timeline\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Timeline",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Timeline/Timeline.tsx",
-				"actualName": "Timeline",
-				"exportName": "default"
-			}
-		},
-		"components-toast": {
-			"id": "components-toast",
-			"name": "Toast",
-			"path": "./src/components/Toast/tests/Toast.stories.tsx",
-			"stories": [
-				{ "name": "size", "snippet": "const size = () => <Size />;" },
-				{
-					"name": "position",
-					"snippet": "const position = () => <Position />;"
-				},
-				{ "name": "color", "snippet": "const color = () => <Color />;" },
-				{ "name": "timeout", "snippet": "const timeout = () => <Timeout />;" },
-				{
-					"name": "regionOptions",
-					"snippet": "const regionOptions = () => <Expanded />;"
-				},
-				{ "name": "slots", "snippet": "const slots = () => <Slots />;" },
-				{
-					"name": "base",
-					"snippet": "const base = () => {\n    const toast = useToast();\n\n    return (\n        <Button\n            onClick={() => {\n                const id = toast.show({\n                    title: \"Title\",\n                    text: \"Text\",\n                    children: \"Children\",\n                    startSlot: \"Slot\",\n                    actionsSlot: (\n                        <Button attributes={{ \"data-testid\": \"trigger-id\" }} onClick={() => toast.hide(id)}>\n                            Trigger\n                        </Button>\n                    ),\n                });\n            }}\n        >\n            Show toast\n        </Button>\n    );\n};"
-				},
-				{
-					"name": "nested",
-					"snippet": "const nested = () => {\n    return (\n        <div data-testid=\"test-container-id\">\n            <ToastProvider>\n                <NestedDemo />\n            </ToastProvider>\n        </div>\n    );\n};"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => {\n    const toast = useToast();\n\n    return (\n        <Button\n            onClick={() => {\n                const id = toast.show({\n                    text: \"Content\",\n                    attributes: { \"data-testid\": \"test-id\" },\n                    className: \"test-classname\",\n                });\n            }}\n        >\n            Show toast\n        </Button>\n    );\n};"
-				},
-				{
-					"name": "edgeCases",
-					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"Multiline, should support dynamic height\">\n            <Multiline />\n        </Example.Item>\n        <Example.Item title=\"Nested ToastProvider\">\n            <ToastProvider>\n                <Nested />\n            </ToastProvider>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport Dismissible from \"components/Dismissible\";\nimport { Example } from \"utilities/storybook\";\nimport Image from \"components/Image\";\nimport Text from \"components/Text\";\nimport { ToastProvider } from \"components/Toast\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n  11 | import { sleep } from \"utilities/helpers\";\n  12 |\n> 13 | export default {\n     | ^\n  14 | \ttitle: \"Components/Toast\",\n  15 | \tparameters: {\n  16 | \t\tiframe: {"
-			}
-		},
-		"components-togglebutton": {
-			"id": "components-togglebutton",
-			"name": "ToggleButton",
-			"path": "./src/components/ToggleButton/tests/ToggleButton.stories.tsx",
-			"stories": [
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"outline\">\n            <ToggleButton>Button</ToggleButton>\n        </Example.Item>\n        <Example.Item title=\"ghost\">\n            <ToggleButton variant=\"ghost\">Button</ToggleButton>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "selectedColor",
-					"snippet": "const selectedColor = () => (\n    <Example>\n        <Example.Item title=\"selectedColor: primary\">\n            <ToggleButton selectedColor=\"primary\" defaultChecked>\n                Button\n            </ToggleButton>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "onChange",
-					"snippet": "const onChange = () => <Example>\n    <Example.Item title=\"defaultChecked, onChange\">\n        <ToggleButton defaultChecked onChange={fn()} value=\"1\">Button\n                                </ToggleButton>\n    </Example.Item>\n    <Example.Item title=\"checked, onChange\">\n        <ToggleButton checked onChange={fn()} value=\"2\">Button\n                                </ToggleButton>\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "onClick",
-					"snippet": "const onClick = () => <ToggleButton onClick={fn()}>Button</ToggleButton>;"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport { ToggleButton } from \"reshaped\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "ToggleButton",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/ToggleButton/ToggleButton.tsx",
-				"actualName": "ToggleButton",
-				"exportName": "default"
-			}
-		},
-		"components-togglebuttongroup": {
-			"id": "components-togglebuttongroup",
-			"name": "ToggleButtonGroup",
-			"path": "./src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx",
-			"stories": [
-				{
-					"name": "single",
-					"snippet": "const single = () => <Example>\n    <Example.Item title=\"single, uncontrolled, onChange\">\n        <ToggleButtonGroup onChange={fn()}>\n            <ToggleButton value=\"1\" onChange={fn()}>Button\n                                    </ToggleButton>\n            <ToggleButton value=\"2\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n    <Example.Item title=\"single, controlled, onChange\">\n        <ToggleButtonGroup onChange={fn()} value={[]}>\n            <ToggleButton value=\"3\" onChange={fn()}>Button\n                                    </ToggleButton>\n            <ToggleButton value=\"4\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "multiple",
-					"snippet": "const multiple = () => <Example>\n    <Example.Item title=\"multiple, uncontrolled, onChange\">\n        <ToggleButtonGroup onChange={fn()} selectionMode=\"multiple\">\n            <ToggleButton value=\"1\">Button</ToggleButton>\n            <ToggleButton value=\"2\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n    <Example.Item title=\"multiple, controlled, onChange\">\n        <ToggleButtonGroup onChange={fn()} value={[]} selectionMode=\"multiple\">\n            <ToggleButton value=\"3\">Button</ToggleButton>\n            <ToggleButton value=\"4\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "selectedColor",
-					"snippet": "const selectedColor = () => (\n    <Example>\n        <Example.Item title=\"selectedColor: primary\">\n            <ToggleButtonGroup selectedColor=\"primary\" defaultValue={[\"2\"]}>\n                <ToggleButton value=\"1\">Button</ToggleButton>\n                <ToggleButton value=\"2\">Button</ToggleButton>\n                <ToggleButton value=\"3\">Button</ToggleButton>\n            </ToggleButtonGroup>\n        </Example.Item>\n        <Example.Item title=\"color: primary, selectedColor: critical\">\n            <ToggleButtonGroup color=\"primary\" selectedColor=\"critical\" defaultValue={[\"2\"]}>\n                <ToggleButton value=\"1\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n                <ToggleButton value=\"2\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n                <ToggleButton value=\"3\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n            </ToggleButtonGroup>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <ToggleButtonGroup className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <ToggleButton>Button 1</ToggleButton>\n            <ToggleButton>Button 1</ToggleButton>\n        </ToggleButtonGroup>\n    </div>\n);"
-				},
-				{
-					"name": "testIcon",
-					"snippet": "const testIcon = () => (\n    <Example>\n        <Example.Item title=\"icon only\">\n            <ToggleButtonGroup selectedColor=\"primary\">\n                <ToggleButton value=\"1\" icon={IconPlus} />\n                <ToggleButton value=\"2\" icon={IconMinus} />\n                <ToggleButton value=\"3\" icon={IconCheckmark} />\n            </ToggleButtonGroup>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport ToggleButton from \"components/ToggleButton\";\nimport ToggleButtonGroup from \"components/ToggleButtonGroup\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "ToggleButtonGroup",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx",
-				"actualName": "ToggleButtonGroup",
-				"exportName": "default"
-			}
-		},
-		"components-tooltip": {
-			"id": "components-tooltip",
-			"name": "Tooltip",
-			"path": "./src/components/Tooltip/tests/Tooltip.stories.tsx",
-			"stories": [
-				{
-					"name": "position",
-					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title=\"position: bottom-start\">\n            <View direction=\"row\" gap={2}>\n                <Demo position=\"bottom-start\" text=\"Tooltip 1\" />\n                <Demo position=\"bottom-start\" text=\"Tooltip 2\" />\n                <Demo position=\"bottom-start\" text=\"Tooltip 3\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: bottom\">\n            <Demo position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"position: bottom-end\">\n            <Demo position=\"bottom-end\" />\n        </Example.Item>\n        <Example.Item title=\"position: top-start\">\n            <Demo position=\"top-start\" />\n        </Example.Item>\n        <Example.Item title=\"position: top\">\n            <Demo position=\"top\" />\n        </Example.Item>\n        <Example.Item title=\"position: top-end\">\n            <Demo position=\"top-end\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: start\">\n            <View align=\"end\">\n                <Demo position=\"start\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: start-top\">\n            <View align=\"end\">\n                <Demo position=\"start-top\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: start-bottom\">\n            <View align=\"end\">\n                <Demo position=\"start-bottom\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <Demo position=\"end\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: end-top\">\n            <Demo position=\"end-top\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: end-bottom\">\n            <Demo position=\"end-bottom\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: inverted\">\n            <Demo color=\"inverted\" position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"color: dark\">\n            <Demo color=\"dark\" position=\"bottom\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "defaultActive",
-					"snippet": "const defaultActive = () => <Tooltip text=\"Content\" onOpen={fn()} onClose={fn()}>\n    {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n</Tooltip>;"
-				},
-				{
-					"name": "edgeCases",
-					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"responsive visibility\">\n            <DemoResponsive text=\"Responsive\" />\n        </Example.Item>\n\n        <Example.Item title=\"without text\">\n            <Tooltip>{() => <Button>Button</Button>}</Tooltip>\n        </Example.Item>\n\n        <Example.Item title=\"tooltip with popover\">\n            <Tooltip text=\"Tooltip\" position=\"top\">\n                {(attributes) => (\n                    <Popover position=\"bottom\">\n                        <Popover.Trigger>\n                            {(popoverAttributes) => (\n                                <Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>\n                            )}\n                        </Popover.Trigger>\n                        <Popover.Content>Popover</Popover.Content>\n                    </Popover>\n                )}\n            </Tooltip>\n        </Example.Item>\n\n        <Example.Item title=\"nested popovers inside a tooltip\">\n            <View direction=\"row\" gap={2}>\n                <Tooltip position=\"top\" text=\"Hello\">\n                    {(tooltipAttributes) => (\n                        <Popover position=\"bottom\" width=\"300px\">\n                            <Popover.Trigger>\n                                {(attributes) => (\n                                    <Button attributes={{ ...tooltipAttributes, ...attributes }}>\n                                        Tooltip with popover\n                                    </Button>\n                                )}\n                            </Popover.Trigger>\n                            <Popover.Content>\n                                <View gap={2} align=\"center\" direction=\"row\" justify=\"space-between\">\n                                    Popover content\n                                    <Popover position=\"bottom\" width=\"300px\">\n                                        <Popover.Trigger>\n                                            {(attributes) => <Button attributes={attributes}>Open</Button>}\n                                        </Popover.Trigger>\n                                        <Popover.Content>\n                                            <Popover.Dismissible align=\"center\" closeAriaLabel=\"Close\">\n                                                Another popover content\n                                            </Popover.Dismissible>\n                                        </Popover.Content>\n                                    </Popover>\n                                </View>\n                            </Popover.Content>\n                        </Popover>\n                    )}\n                </Tooltip>\n                <Tooltip position=\"top\" text=\"Hello\">\n                    {(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}\n                </Tooltip>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport Popover from \"components/Popover\";\nimport Tooltip from \"components/Tooltip\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Tooltip",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Tooltip/Tooltip.tsx",
-				"actualName": "Tooltip",
-				"exportName": "default"
-			}
-		},
-		"utility-components-accordion": {
-			"id": "utility-components-accordion",
-			"name": "Accordion",
-			"path": "./src/components/Accordion/tests/Accordion.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n    <Accordion defaultActive>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"
-				},
-				{
-					"name": "iconSize",
-					"snippet": "const iconSize = () => (\n    <Accordion iconSize={6}>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"
-				},
-				{
-					"name": "iconPosition",
-					"snippet": "const iconPosition = () => (\n    <Accordion iconPosition=\"start\">\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"
-				},
-				{
-					"name": "gap",
-					"snippet": "const gap = () => (\n    <Accordion defaultActive gap={4}>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <Placeholder />\n        </Accordion.Content>\n    </Accordion>\n);"
-				},
-				{
-					"name": "onToggle",
-					"snippet": "const onToggle = () => <Accordion onToggle={fn()}>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"
-				},
-				{
-					"name": "active",
-					"snippet": "const active = () => <Accordion onToggle={fn()} active>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"
-				},
-				{
-					"name": "defaultActive",
-					"snippet": "const defaultActive = () => <Accordion onToggle={fn()} defaultActive>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"
-				},
-				{
-					"name": "renderProps",
-					"snippet": "const renderProps = () => <Accordion onToggle={fn()}>\n    <Accordion.Trigger>\n        {(attributes, { active }) => (\n            <Button attributes={{ ...attributes, \"data-active\": active }}>Trigger</Button>\n        )}\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Accordion className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Accordion.Trigger>\n                <Placeholder>Trigger</Placeholder>\n            </Accordion.Trigger>\n            <Accordion.Content>\n                <View paddingTop={2}>\n                    <Placeholder />\n                </View>\n            </Accordion.Content>\n        </Accordion>\n    </div>\n);"
-				}
-			],
-			"import": "import Accordion from \"components/Accordion\";\nimport Button from \"components/Button\";\nimport { Placeholder } from \"utilities/storybook\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Accordion",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Accordion/Accordion.tsx",
-				"actualName": "Accordion",
-				"exportName": "default"
-			}
-		},
-		"utility-components-actionable": {
-			"id": "utility-components-actionable",
-			"name": "Actionable",
-			"path": "./src/components/Actionable/tests/Actionable.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => <Example>\n    <Example.Item title=\"span\">\n        <Actionable>Span</Actionable>\n    </Example.Item>\n    <Example.Item title=\"onClick\">\n        <Actionable onClick={fn()}>Button</Actionable>\n    </Example.Item>\n    <Example.Item title=\"href\">\n        <Actionable href=\"https://reshaped.so\" attributes={{ target: \"_blank\" }}>Link\n                            </Actionable>\n    </Example.Item>\n    <Example.Item title=\"attributes.href\">\n        <Actionable attributes={{ href: \"https://reshaped.so\" }}>Link with attributes</Actionable>\n    </Example.Item>\n    <Example.Item title=\"href, onClick\">\n        <Actionable\n            onClick={(e) => {\n                e.preventDefault();\n                args.handleSecondClick(e);\n            }}\n            href=\"https://reshaped.so\">Link with onClick\n                            </Actionable>\n    </Example.Item>\n</Example>;"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, button\">\n            <Actionable disabled onClick={() => {}}>\n                Button\n            </Actionable>\n        </Example.Item>\n        <Example.Item title=\"disabled, link\">\n            <Actionable disabled href=\"https://reshaped.so\">\n                Link\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "fullWidth",
-					"snippet": "const fullWidth = () => (\n    <Example>\n        <Example.Item title=\"fullWidth\">\n            <Actionable fullWidth href=\"https://reshaped.so\">\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "insetFocus",
-					"snippet": "const insetFocus = () => (\n    <Example>\n        <Example.Item title=\"insetFocus\">\n            <Actionable insetFocus onClick={() => {}}>\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "disableFocusRing",
-					"snippet": "const disableFocusRing = () => (\n    <Example>\n        <Example.Item title=\"disableFocusRing\">\n            <Actionable disableFocusRing onClick={() => {}}>\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "borderRadius",
-					"snippet": "const borderRadius = () => (\n    <Example>\n        <Example.Item title=\"borderRadius: inherit\">\n            <Actionable borderRadius=\"inherit\" onClick={() => {}}>\n                <View borderRadius=\"large\">Actionable</View>\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "type",
-					"snippet": "const type = (args) => (\n    <Example>\n        <Example.Item title=\"type: submit\">\n            <form\n                onSubmit={(e) => {\n                    e.preventDefault();\n                    args.handleSubmit();\n                }}\n            >\n                <Actionable onClick={() => {}} type=\"submit\">\n                    Submit\n                </Actionable>\n            </form>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "as",
-					"snippet": "const as = () => (\n    <Example>\n        <Example.Item title=\"as: span\">\n            <Actionable onClick={() => {}} as=\"span\">\n                Trigger\n            </Actionable>\n        </Example.Item>\n        <Example.Item title=\"render, disabled\">\n            <Actionable disabled onClick={() => {}} render={(props) => <section {...props} />}>\n                Trigger\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "stopPropagation",
-					"snippet": "const stopPropagation = () => <div onClick={fn()}>\n    <Actionable stopPropagation onClick={() => {}}>Trigger\n                    </Actionable>\n</div>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Actionable className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Actionable>\n    </div>\n);"
-				}
-			],
-			"import": "import Actionable from \"components/Actionable\";\nimport { Example } from \"utilities/storybook\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Actionable",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Actionable/Actionable.tsx",
-				"actualName": "Actionable",
-				"exportName": "default"
-			}
-		},
-		"utility-components-container": {
-			"id": "utility-components-container",
-			"name": "Container",
-			"path": "./src/components/Container/tests/Container.stories.tsx",
-			"stories": [
-				{
-					"name": "padding",
-					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: default\">\n            <Container>\n                <Placeholder />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"padding: 0\">\n            <Container padding={0}>\n                <Placeholder />\n            </Container>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"width: 200px, height: 200px\">\n            <Container width=\"200px\" height=\"200px\">\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width: 200px, height: 200px, maxHeight: 100px\">\n            <Container width=\"200px\" height=\"200px\" maxHeight=\"100px\">\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width, height: [s] 100px, [m+] 200px\">\n            <Container width={{ s: \"100px\", m: \"200px\" }} height={{ s: \"100px\", m: \"200px\" }}>\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width, height: [s] 100px, [m+] 200px, maxHeight: [s] 50px, [m+]: 100px\">\n            <Container\n                width={{ s: \"100px\", m: \"200px\" }}\n                height={{ s: \"100px\", m: \"200px\" }}\n                maxHeight={{ s: \"50px\", m: \"100px\" }}\n            >\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "flex",
-					"snippet": "const flex = () => (\n    <Example>\n        <Example.Item title=\"align: center, justify: center\">\n            <Container align=\"center\" justify=\"center\" height=\"200px\">\n                <Placeholder />\n            </Container>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Container className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </Container>\n    </div>\n);"
-				}
-			],
-			"import": "import Container from \"components/Container\";\nimport { Example, Placeholder } from \"utilities/storybook\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Container",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Container/Container.tsx",
-				"actualName": "Container",
-				"exportName": "default"
-			}
-		},
-		"utility-components-dismissible": {
-			"id": "utility-components-dismissible",
-			"name": "Dismissible",
-			"path": "./src/components/Dismissible/tests/Dismissible.stories.tsx",
-			"stories": [
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Dismissible closeAriaLabel=\"Close banner\" onClose={() => {}}>\n                <Placeholder />\n            </Dismissible>\n        </Example.Item>\n        <Example.Item title=\"variant: media\">\n            <View width=\"300px\">\n                <Dismissible variant=\"media\" closeAriaLabel=\"Close banner\" onClose={() => {}}>\n                    <View aspectRatio={16 / 9}>\n                        <Image\n                            height=\"100%\"\n                            src=\"https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)\"\n                        />\n                    </View>\n                </Dismissible>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "align",
-					"snippet": "const align = () => (\n    <Example>\n        <Example.Item title=\"align: center\">\n            <Dismissible align=\"center\" closeAriaLabel=\"Close\" onClose={() => {}}>\n                <Placeholder />\n            </Dismissible>\n        </Example.Item>\n\n        <Example.Item title=\"align: center, variant: media\">\n            <Dismissible align=\"center\" closeAriaLabel=\"Close\" variant=\"media\" onClose={() => {}}>\n                <View aspectRatio={16 / 9}>\n                    <Image\n                        height=\"100%\"\n                        src=\"https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)\"\n                    />\n                </View>\n            </Dismissible>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "hideCloseButton",
-					"snippet": "const hideCloseButton = () => (\n    <Example>\n        <Example.Item title=\"hide close button\">\n            <div id=\"root\">\n                <Dismissible hideCloseButton>\n                    <Placeholder />\n                </Dismissible>\n            </div>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "closeAriaLabel",
-					"snippet": "const closeAriaLabel = () => <Dismissible closeAriaLabel=\"Close\" onClose={fn()}>\n    <Placeholder />\n</Dismissible>;"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Dismissible\n            closeAriaLabel=\"Close\"\n            onClose={() => {}}\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n        >\n            <Placeholder />\n        </Dismissible>\n    </div>\n);"
-				}
-			],
-			"import": "import Dismissible from \"components/Dismissible\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport Image from \"components/Image\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Dismissible",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Dismissible/Dismissible.tsx",
-				"actualName": "Dismissible",
-				"exportName": "default"
-			}
-		},
-		"utility-components-flyout": {
-			"id": "utility-components-flyout",
-			"name": "Flyout",
-			"path": "./src/components/Flyout/tests/Flyout.stories.tsx",
-			"stories": [
-				{
-					"name": "position",
-					"snippet": "const position = () => {\n    return (\n        <View gap={4} padding={50} align=\"center\" justify=\"center\" height=\"100vh\" width=\"120%\">\n            <View gap={4} direction=\"row\">\n                <Demo position=\"top-start\" defaultActive />\n                <Demo position=\"top\" />\n                <Demo position=\"top-end\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"end-top\" />\n                <Demo position=\"end\" />\n                <Demo position=\"end-bottom\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"start-top\" />\n                <Demo position=\"start\" />\n                <Demo position=\"start-bottom\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"bottom-start\" />\n                <Demo position=\"bottom\" />\n                <Demo position=\"bottom-end\" />\n            </View>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "defaultActive",
-					"snippet": "const defaultActive = () => <Flyout onOpen={fn()} onClose={fn()} defaultActive>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"
-				},
-				{
-					"name": "active",
-					"snippet": "const active = () => <Flyout onOpen={fn()} onClose={fn()} active>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"
-				},
-				{
-					"name": "activeFalse",
-					"snippet": "const activeFalse = () => <Flyout onOpen={fn()} onClose={fn()} active={false}>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"
-				},
-				{
-					"name": "modes",
-					"snippet": "const modes = () => {\n    return (\n        <Example>\n            <Example.Item title=\"triggerType: click\">\n                <View direction=\"row\" gap={4}>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"dialog\" text=\"dialog\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"action-menu\" text=\"action-menu\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"action-bar\" text=\"action-bar\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"content-menu\" text=\"content-menu\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode={false} text=\"false\">\n                        {modeContent}\n                    </Demo>\n                </View>\n            </Example.Item>\n\n            <Example.Item title=\"triggerType: hover\">\n                <View direction=\"row\" gap={4}>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"dialog\" triggerType=\"hover\" text=\"dialog\">\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"action-menu\"\n                        triggerType=\"hover\"\n                        text=\"action-menu\"\n                    >\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"action-bar\"\n                        triggerType=\"hover\"\n                        text=\"action-bar\"\n                    >\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"content-menu\"\n                        triggerType=\"hover\"\n                        text=\"content-menu\"\n                    >\n                        {modeContent}\n                    </Demo>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "positionFallbacks",
-					"snippet": "const positionFallbacks = () => {\n    return (\n        <Example>\n            <Example.Item title=\"position: top, default fallbacks\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" />\n                </View>\n            </Example.Item>\n            <Example.Item title=\"position: top, fallbackPositions: [start]\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" fallbackPositions={[\"start\"]} contentHeight={200} defaultActive />\n                </View>\n            </Example.Item>\n            <Example.Item title=\"position: top, fallbackPositions: false\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" fallbackPositions={false} contentHeight={400} />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "fallbackAdjustLayout",
-					"snippet": "const fallbackAdjustLayout = () => {\n    return (\n        <Demo\n            contentHeight={false}\n            position=\"bottom-start\"\n            width=\"200px\"\n            fallbackAdjustLayout\n            defaultActive\n        >\n            <div style={{ height: \"600px\" }}>Content</div>\n        </Demo>\n    );\n};"
-				},
-				{
-					"name": "fallbackAdjustLayoutShift",
-					"snippet": "const fallbackAdjustLayoutShift = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={10}>\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    attributes={{ ref: containerRef }}\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls containerRef={containerRef} />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <FallbackAdjustLayoutControls />\n            <div style={{ height: \"100vh\", width: \"250%\" }} />\n        </View>\n    );\n};"
-				},
-				{
-					"name": "fallbackAdjustLayoutSize",
-					"snippet": "const fallbackAdjustLayoutSize = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={10}>\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls large />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    attributes={{ ref: containerRef }}\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls containerRef={containerRef} large />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <FallbackAdjustLayoutControls large />\n            <div style={{ height: \"100vh\", width: \"250%\" }} />\n        </View>\n    );\n};"
-				},
-				{
-					"name": "originCoordinates",
-					"snippet": "const originCoordinates = () => {\n    return (\n        <View gap={4} direction=\"row\">\n            <Demo position=\"bottom-start\" originCoordinates={{ x: 150, y: 150 }} defaultActive />\n        </View>\n    );\n};"
-				},
-				{
-					"name": "width",
-					"snippet": "const width = () => (\n    <Example>\n        <Example.Item title=\"width: 300px\">\n            <Demo width=\"300px\" position=\"bottom\" />\n        </Example.Item>\n\n        <Example.Item title=\"width: trigger\">\n            <Demo width=\"trigger\" contentWidth={false} defaultActive />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "contentGap",
-					"snippet": "const contentGap = () => <Demo contentGap={10} defaultActive />;"
-				},
-				{
-					"name": "contentShift",
-					"snippet": "const contentShift = () => <Demo contentShift={10} defaultActive />;"
-				},
-				{
-					"name": "disableContentHover",
-					"snippet": "const disableContentHover = () => <Demo triggerType=\"hover\" disableContentHover />;"
-				},
-				{
-					"name": "disableCloseOnOutsideClick",
-					"snippet": "const disableCloseOnOutsideClick = () => <Demo disableCloseOnOutsideClick />;"
-				},
-				{
-					"name": "disableHideAnimation",
-					"snippet": "const disableHideAnimation = () => <Demo disableHideAnimation defaultActive />;"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Flyout disabled>\n        <Flyout.Trigger>\n            {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n        </Flyout.Trigger>\n        <Flyout.Content>\n            <Content />\n        </Flyout.Content>\n    </Flyout>\n);"
-				},
-				{
-					"name": "containerRef",
-					"snippet": "const containerRef = () => {\n    const portalRef = React.useRef<HTMLDivElement>(null);\n    const portalRef2 = React.useRef<HTMLDivElement>(null);\n    const portalRef3 = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={4} direction=\"row\">\n            <View\n                grow\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef, \"data-testid\": \"container\" }}\n                justify=\"end\"\n                align=\"start\"\n                padding={4}\n            >\n                <Demo containerRef={portalRef} position=\"bottom-start\" defaultActive />\n            </View>\n            <View\n                grow\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef2 }}\n                justify=\"start\"\n                align=\"end\"\n                padding={4}\n            >\n                <Demo containerRef={portalRef2} position=\"top-end\" />\n            </View>\n            <View\n                width={50}\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef3 }}\n                padding={4}\n                overflow=\"auto\"\n            >\n                <View height={120} width=\"120%\" justify=\"center\" align=\"center\">\n                    <Demo containerRef={portalRef3} position=\"bottom-end\" />\n                </View>\n            </View>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "initialFocusRef",
-					"snippet": "const initialFocusRef = () => {\n    const initialFocusRef = React.useRef<HTMLInputElement>(null);\n\n    return (\n        <Demo initialFocusRef={initialFocusRef}>\n            <View gap={4}>\n                <Button onClick={() => {}}>Action 1</Button>\n                <TextField name=\"foo\" inputAttributes={{ ref: initialFocusRef }} />\n            </View>\n        </Demo>\n    );\n};"
-				},
-				{
-					"name": "instanceRef",
-					"snippet": "const instanceRef = () => {\n    const flyoutRef = React.useRef<FlyoutInstance>(null);\n\n    return (\n        <View direction=\"row\" gap={4}>\n            <Demo\n                instanceRef={flyoutRef}\n                disableCloseOnOutsideClick\n                onOpen={fn()}\n                onClose={fn()} />\n            <Button onClick={() => flyoutRef.current?.open()}>Open</Button>\n            <Button onClick={() => flyoutRef.current?.close()}>Close</Button>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "contentAttributes",
-					"snippet": "const contentAttributes = () => {\n    return (\n        <Flyout position=\"bottom\" defaultActive>\n            <Flyout.Trigger>\n                {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n            </Flyout.Trigger>\n            <Flyout.Content attributes={{ \"data-testid\": \"test-id\" }} className=\"test-classname\">\n                <Content />\n            </Flyout.Content>\n        </Flyout>\n    );\n};"
-				},
-				{
-					"name": "testShadowDom",
-					"snippet": "const testShadowDom = () => <custom-element-flyout />;"
-				},
-				{
-					"name": "testInsideFixed",
-					"snippet": "const testInsideFixed = () => (\n    <React.Fragment>\n        <View\n            position=\"fixed\"\n            insetBottom={2}\n            insetStart={2}\n            insetEnd={2}\n            backgroundColor=\"elevation-overlay\"\n            borderColor=\"neutral-faded\"\n            borderRadius=\"small\"\n            padding={4}\n            zIndex={10}\n            attributes={{ \"data-testid\": \"container\" }}\n            height={20}\n        >\n            <Demo defaultActive position=\"top-start\" />\n        </View>\n        <View paddingTop={18} gap={4}>\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n        </View>\n    </React.Fragment>\n);"
-				},
-				{
-					"name": "testInsideSticky",
-					"snippet": "const testInsideSticky = () => (\n    <React.Fragment>\n        <View\n            position=\"sticky\"\n            insetTop={4}\n            insetStart={0}\n            insetEnd={0}\n            backgroundColor=\"elevation-overlay\"\n            borderColor=\"neutral-faded\"\n            borderRadius=\"small\"\n            padding={4}\n            zIndex={10}\n            attributes={{ \"data-testid\": \"container\" }}\n        >\n            <Demo defaultActive />\n        </View>\n        <View gap={4} paddingTop={2}>\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n        </View>\n    </React.Fragment>\n);"
-				},
-				{
-					"name": "testInsideScrollable",
-					"snippet": "const testInsideScrollable = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View padding={20}>\n            <View height={30} overflow=\"auto\" backgroundColor=\"neutral-faded\" borderRadius=\"small\">\n                <View height={50} attributes={{ ref: containerRef }} padding={20} paddingBottom={30}>\n                    <Demo position=\"bottom\" />\n                </View>\n            </View>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "testInsideModal",
-					"snippet": "const testInsideModal = () => {\n    return (\n        <Modal active position=\"end\">\n            <View gap={4} align=\"start\">\n                <Modal.Title>Title</Modal.Title>\n                <Demo position=\"bottom-start\" />\n                <View height={300} width={25} backgroundColor=\"neutral-faded\" />\n                <Demo position=\"start\" />\n                <View height={300} width={25} backgroundColor=\"neutral-faded\" />\n                <Demo position=\"bottom-start\" />\n            </View>\n        </Modal>\n    );\n};"
-				},
-				{
-					"name": "testDynamicBounds",
-					"snippet": "const testDynamicBounds = () => {\n    const [left, setLeft] = React.useState(50);\n    const [top, setTop] = React.useState(50);\n    const [size, setSize] = React.useState<\"medium\" | \"large\">(\"medium\");\n    const flyoutRef = React.useRef<FlyoutInstance>(null);\n\n    React.useEffect(() => {\n        flyoutRef.current?.updatePosition();\n    }, [left, top]);\n\n    return (\n        <View gap={4}>\n            <View direction=\"row\" gap={2}>\n                <Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>\n                <Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>\n                <Button onClick={() => setTop((prev) => prev - 10)}>Up</Button>\n                <Button onClick={() => setTop((prev) => prev + 10)}>Down</Button>\n                <Button\n                    onClick={() => {\n                        setLeft(50);\n                        setTop(50);\n                    }}\n                >\n                    Center\n                </Button>\n                <Button onClick={() => setSize(\"large\")}>Large button</Button>\n                <Button onClick={() => setSize(\"medium\")}>Small button</Button>\n            </View>\n            <View height={100}>\n                <Flyout\n                    position=\"bottom\"\n                    instanceRef={flyoutRef}\n                    disableCloseOnOutsideClick\n                    defaultActive\n                >\n                    <Flyout.Trigger>\n                        {(attributes) => (\n                            <div style={{ position: \"absolute\", left: `${left}%`, top: `${top}%` }}>\n                                <Button color=\"primary\" attributes={attributes} size={size}>\n                                    Open\n                                </Button>\n                            </div>\n                        )}\n                    </Flyout.Trigger>\n                    <Flyout.Content>\n                        <Content />\n                    </Flyout.Content>\n                </Flyout>\n            </View>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "testScopedTheming",
-					"snippet": "const testScopedTheming = () => (\n    <View gap={3} align=\"start\">\n        <Button color=\"primary\">Slate button</Button>\n        <Theme name=\"reshaped\">\n            <Flyout triggerType=\"click\" active position=\"bottom-start\">\n                <Flyout.Trigger>\n                    {(attributes) => (\n                        <Button color=\"primary\" attributes={attributes}>\n                            Reshaped button\n                        </Button>\n                    )}\n                </Flyout.Trigger>\n                <Flyout.Content>\n                    <Content>\n                        <View gap={1}>\n                            <View.Item>Portal content, rendered in body</View.Item>\n                            <Button color=\"primary\">Reshaped button</Button>\n                        </View>\n                    </Content>\n                </Flyout.Content>\n            </Flyout>\n        </Theme>\n    </View>\n);"
-				},
-				{
-					"name": "testWithoutFocusable",
-					"snippet": "const testWithoutFocusable = () => <Demo position=\"bottom-start\" />;"
-				},
-				{
-					"name": "testChangeSize",
-					"snippet": "const testChangeSize = () => {\n    const [position, setPosition] = React.useState<FlyoutProps[\"position\"]>(\"bottom-start\");\n    const [updatedHeight, setUpdatedHeight] = React.useState(false);\n\n    return (\n        <>\n            <View direction=\"row\" gap={4} align=\"center\">\n                <Select\n                    name=\"position\"\n                    options={[\n                        \"bottom-start\",\n                        \"bottom\",\n                        \"bottom-end\",\n                        \"top-start\",\n                        \"top\",\n                        \"top-end\",\n                        \"start-top\",\n                        \"start\",\n                        \"start-bottom\",\n                        \"end-top\",\n                        \"end\",\n                        \"end-bottom\",\n                    ].map((p) => ({ label: p, value: p }))}\n                    onChange={(args) => setPosition(args.value as FlyoutProps[\"position\"])}\n                    value={position}\n                />\n                <Switch name=\"height\" onChange={(args) => setUpdatedHeight(args.checked)}>\n                    Change height\n                </Switch>\n            </View>\n            <div\n                style={{\n                    position: \"fixed\",\n                    top: \"50%\",\n                    left: \"50%\",\n                    transform: \"translate(-50%, -50%)\",\n                }}\n            >\n                <Demo position={position} disableCloseOnOutsideClick active contentHeight={false}>\n                    <View\n                        backgroundColor=\"neutral-faded\"\n                        borderRadius=\"small\"\n                        height={updatedHeight ? 50 : 25}\n                        attributes={{ style: { transition: \"0.2s ease-in-out\" } }}\n                    />\n                </Demo>\n            </div>\n        </>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport Flyout from \"components/Flyout\";\nimport Modal from \"components/Modal\";\nimport React from \"react\";\nimport Reshaped from \"components/Reshaped\";\nimport Select from \"components/Select\";\nimport Switch from \"components/Switch\";\nimport TextField from \"components/TextField\";\nimport Theme from \"components/Theme\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Flyout",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Flyout/Flyout.tsx",
-				"actualName": "Flyout",
-				"exportName": "default"
-			}
-		},
-		"utility-components-formcontrol": {
-			"id": "utility-components-formcontrol",
-			"name": "FormControl",
-			"path": "./src/components/FormControl/tests/FormControl.stories.tsx",
-			"stories": [
-				{
-					"name": "status",
-					"snippet": "const status = () => (\n    <Example>\n        <Example.Item title=\"status: default\">\n            <FormControl>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"status: error\">\n            <FormControl hasError>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: medium\">\n            <FormControl size=\"medium\">\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <FormControl size=\"large\">\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" size=\"large\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <FormControl disabled>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "required",
-					"snippet": "const required = () => (\n    <Example>\n        <Example.Item title=\"required\">\n            <FormControl required>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "composition",
-					"snippet": "const composition = () => (\n    <Example>\n        <Example.Item title=\"horizontal\">\n            <FormControl>\n                <View direction=\"row\" gap={10} align=\"center\">\n                    <View width=\"100px\">\n                        <FormControl.Label>Label</FormControl.Label>\n                    </View>\n                    <View.Item grow>\n                        <TextField name=\"name\" placeholder=\"Enter value\" />\n                    </View.Item>\n                </View>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <FormControl id=\"test-id\" hasError>\n        <FormControl.Label>Label</FormControl.Label>\n        <TextField name=\"name\" />\n        <FormControl.Helper>Caption</FormControl.Helper>\n        <FormControl.Error>Error</FormControl.Error>\n    </FormControl>\n);"
-				},
-				{
-					"name": "group",
-					"snippet": "const group = () => (\n    <FormControl group>\n        <FormControl.Label>Label</FormControl.Label>\n        <RadioGroup name=\"name\">\n            <View gap={2}>\n                <Radio value=\"1\">One</Radio>\n                <Radio value=\"2\">Two</Radio>\n            </View>\n        </RadioGroup>\n    </FormControl>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport FormControl from \"components/FormControl\";\nimport Radio from \"components/Radio\";\nimport RadioGroup from \"components/RadioGroup\";\nimport TextField from \"components/TextField\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "FormControl",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/FormControl/FormControl.tsx",
-				"actualName": "FormControl",
-				"exportName": "default"
-			}
-		},
-		"utility-components-grid": {
-			"id": "utility-components-grid",
-			"name": "Grid",
-			"path": "./src/components/Grid/tests/Grid.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"gap: 2\">\n            <Grid gap={2} columns={2}>\n                {[1, 2].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"columnGap: 2, rowGap: 4\">\n            <Grid columnGap={2} rowGap={4} columns={2}>\n                {[1, 2, 3, 4].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"align: center\">\n            <Grid gap={2} columns={2} align=\"center\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={8}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"justify: center\">\n            <Grid gap={2} columns=\"200px 200px\" justify=\"center\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"maxWidth: 400px\">\n            <Grid gap={2} columns=\"200px 200px\" maxWidth=\"400px\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"width: 400px, height: 200px\">\n            <Grid gap={2} columns={2} width=\"400px\" height=\"200px\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "layout",
-					"snippet": "const layout = () => (\n    <Example>\n        <Example.Item title=\"simple: 2 rows, 3 columns\">\n            <Grid gap={4} columns={3} rows={2}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"columns template, 1fr 2fr 1fr\">\n            <Grid gap={4} columns=\"1fr 2fr 1fr\" rows={2}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"rows template, 1fr 2fr\">\n            <Grid gap={4} columns={3} rows=\"1fr 2fr\">\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"responsive\">\n            <Grid gap={4} columns={{ s: 3, m: \"1fr 2fr 1fr\" }} rows={{ s: 2, m: \"1fr 2fr\" }}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "itemLayout",
-					"snippet": "const itemLayout = () => (\n    <Example>\n        <Example.Item title=\"column, start 1, end 3\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item colStart={1} colEnd={3}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"column, start 1, span 2\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item colStart={1} colSpan={2}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"row, start 1, end 3\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowEnd={3}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"row, start 1, span 2\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowSpan={2}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"responsive\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "areas",
-					"snippet": "const areas = () => (\n    <Example>\n        <Example.Item title=\"simple: 2 rows, 3 columns\">\n            <Grid gap={4} rows={2} areas={[\"a .\", \"a b\"]}>\n                {[\"a\", \"b\"].map((area) => (\n                    <Grid.Item area={area} key={area}>\n                        <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                            {area}\n                        </View>\n                    </Grid.Item>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "auto",
-					"snippet": "const auto = () => (\n    <Example>\n        <Example.Item title=\"auto flow: column\">\n            <Grid gap={4} autoFlow=\"column\" rows={2} columns={2}>\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"auto rows\">\n            <Grid gap={4} autoRows=\"100px\" columns={2}>\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"auto columns\">\n            <Grid gap={4} autoColumns=\"100px\" autoFlow=\"column\">\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "as",
-					"snippet": "const as = () => (\n    <Grid as=\"ul\">\n        <Grid.Item as=\"li\">Content</Grid.Item>\n    </Grid>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Grid className=\"test-class\" attributes={{ id: \"test-id\" }}>\n            <Grid.Item className=\"test-item-class\" attributes={{ id: \"test-item-id\" }}>\n                Content\n            </Grid.Item>\n        </Grid>\n    </div>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Grid from \"components/Grid\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Grid",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Grid/Grid.tsx",
-				"actualName": "Grid",
-				"exportName": "default"
-			}
-		},
-		"utility-components-hidden": {
-			"id": "utility-components-hidden",
-			"name": "Hidden",
-			"path": "./src/components/Hidden/tests/Hidden.stories.tsx",
-			"stories": [
-				{
-					"name": "visibility",
-					"snippet": "const visibility = () => (\n    <Example>\n        <Example.Item title=\"hide: always\">\n            <Hidden hide={true}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on s\">\n            <Hidden hide={{ s: false, m: true }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on l/xl\">\n            <Hidden hide={{ s: true, l: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on m/l/xl\">\n            <Hidden hide={{ s: true, m: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on m\">\n            <Hidden hide={{ s: true, m: false, l: true }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on s/xl\">\n            <Hidden hide={{ s: false, m: true, xl: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"hide: always, visibility\">\n            <Hidden hide visibility>\n                Content\n            </Hidden>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "as",
-					"snippet": "const as = () => <Hidden as=\"span\">Content</Hidden>;"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Hidden from \"components/Hidden\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Hidden",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Hidden/Hidden.tsx",
-				"actualName": "Hidden",
-				"exportName": "default"
-			}
-		},
-		"utility-components-hiddenvisually": {
-			"id": "utility-components-hiddenvisually",
-			"name": "HiddenVisually",
-			"path": "./src/components/HiddenVisually/tests/HiddenVisually.stories.tsx",
-			"stories": [
-				{
-					"name": "visibility",
-					"snippet": "const visibility = () => (\n    <Example>\n        <Example.Item title=\"pronounced by screen readers\">\n            <HiddenVisually>Screen-reader only</HiddenVisually>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "children",
-					"snippet": "const children = () => <HiddenVisually>Content</HiddenVisually>;"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport HiddenVisually from \"components/HiddenVisually\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "HiddenVisually",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/HiddenVisually/HiddenVisually.tsx",
-				"actualName": "HiddenVisually",
-				"exportName": "default"
-			}
-		},
-		"utility-components-icon": {
-			"id": "utility-components-icon",
-			"name": "Icon",
-			"path": "./src/components/Icon/tests/Icon.stories.tsx",
-			"stories": [
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: 4\">\n            <Icon svg={IconZap} size={4} />\n        </Example.Item>\n        <Example.Item title=\"size: 8\">\n            <Icon svg={IconZap} size={8} />\n        </Example.Item>\n        <Example.Item title=\"size: 100%\">\n            <View width={25} height={25}>\n                <Icon svg={IconZap} size=\"100%\" />\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive size\", \"[s] 5\", \"[m]: 10\"]}>\n            <Icon svg={IconZap} size={{ s: 5, m: 10 }} />\n        </Example.Item>\n        <Example.Item title=\"size: inherit from font\">\n            <Text variant=\"title-6\">\n                <View direction=\"row\" align=\"center\" gap={2}>\n                    <Icon svg={IconZap} />\n                    <View.Item>Reshaped</View.Item>\n                </View>\n            </Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <Icon svg={IconZap} color=\"neutral\" />\n        </Example.Item>\n        <Example.Item title=\"color: neutral-faded\">\n            <Icon svg={IconZap} color=\"neutral-faded\" />\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <Icon svg={IconZap} color=\"primary\" />\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Icon svg={IconZap} color=\"critical\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Icon svg={IconZap} color=\"positive\" />\n        </Example.Item>\n        <Example.Item title=\"color: disabled\">\n            <Icon svg={IconZap} color=\"disabled\" />\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <div style={{ color: \"tomato\" }}>\n                <Icon svg={IconZap} />\n            </div>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "autoWidth",
-					"snippet": "const autoWidth = () => (\n    <Example>\n        <Example.Item title=\"square boundaries\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={IconMic} size={10} />\n            </div>\n        </Example.Item>\n        <Example.Item title=\"auto width boundaries\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={IconMic} size={10} autoWidth />\n            </div>\n        </Example.Item>\n        <Example.Item title=\"blank\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={null} size={10} />\n            </div>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Icon svg={IconZap} className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
-				},
-				{
-					"name": "render",
-					"snippet": "const render = () => (\n    <div data-testid=\"root\">\n        <Icon svg={IconZap} />\n    </div>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Icon from \"components/Icon\";\nimport Text from \"components/Text\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Icon",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Icon/Icon.tsx",
-				"actualName": "Icon",
-				"exportName": "default"
-			}
-		},
-		"utility-components-image": {
-			"id": "utility-components-image",
-			"name": "Image",
-			"path": "./src/components/Image/tests/Image.stories.tsx",
-			"stories": [
-				{
-					"name": "src",
-					"snippet": "const src = () => (\n    <Example>\n        <Example.Item title=\"src, alt\">\n            <Image src={imgUrl} alt=\"Image alt\" />\n        </Example.Item>\n\n        <Example.Item title=\"src\">\n            <Image src={imgUrl} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"width: 200px\">\n            <Image src={imgUrl} width=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"height: 200px\">\n            <Image src={imgUrl} height=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"maxWidth: 200px\">\n            <Image src={imgUrl} maxWidth=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"aspectRatio: 1/1\">\n            <Image src={imgUrl} aspectRatio={1 / 1} width=\"300px\" />\n        </Example.Item>\n        <Example.Item title={[\"responsive width\", \"[s] 200px\", \"[m+] 300px\"]}>\n            <Image src={imgUrl} width={{ s: \"200px\", m: \"300px\" }} />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "radius",
-					"snippet": "const radius = () => (\n    <Example>\n        <Example.Item title=\"radius: small\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"small\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"radius: medium\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"medium\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"radius: large\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "displayMode",
-					"snippet": "const displayMode = () => (\n    <Example>\n        <Example.Item title=\"mode: cover\">\n            <Image src={imgUrl} height=\"200px\" width=\"100%\" displayMode=\"cover\" />\n        </Example.Item>\n        <Example.Item title=\"mode: contain\">\n            <Image src={imgUrl} height=\"200px\" width=\"100%\" displayMode=\"contain\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "onLoad",
-					"snippet": "const onLoad = () => <Image src={imgUrl} alt=\"photo\" onLoad={fn()} />;"
-				},
-				{
-					"name": "onError",
-					"snippet": "const onError = () => <Image src=\"/invalid.png\" alt=\"photo\" onError={fn()} />;"
-				},
-				{
-					"name": "fallback",
-					"snippet": "const fallback = () => (\n    <Example>\n        <Example.Item title=\"fallback, background, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"fallback, image, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback={imgUrl} />\n                </View>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"fallback, icon, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback={<Icon svg={IconZap} size={10} />} />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"fallback, icon, no url\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image fallback={<Icon svg={IconZap} size={10} />} />\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "renderImage",
-					"snippet": "const renderImage = () => (\n    <Example>\n        <Example.Item title=\"renderImage\">\n            <Image\n                src={imgUrl}\n                alt=\"Amsterdam canal\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image\" />}\n            />\n        </Example.Item>\n        <Example.Item title=\"renderImage, fallback\">\n            <Image\n                src=\"error\"\n                fallback={imgUrl}\n                alt=\"Amsterdam canal 2\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image-fallback\" />}\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "imageAttributes",
-					"snippet": "const imageAttributes = () => (\n    <div data-testid=\"root\">\n        <Image\n            src={imgUrl}\n            alt=\"photo\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            imageAttributes={{ \"data-testid\": \"test-img-id\" }}\n        />\n    </div>\n);"
-				},
-				{
-					"name": "ratio",
-					"snippet": "const ratio = () => (\n    <Example>\n        <Example.Item title=\"ratio: 16/9\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"ratio: 16/9, displayMode: contain\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} displayMode=\"contain\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Icon from \"components/Icon\";\nimport { Image } from \"reshaped\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Image",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Image/Image.tsx",
-				"actualName": "Image",
-				"exportName": "default"
-			}
-		},
-		"utility-components-overlay": {
-			"id": "utility-components-overlay",
-			"name": "Overlay",
-			"path": "./src/components/Overlay/tests/Overlay.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate}>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "transparent",
-					"snippet": "const transparent = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} transparent>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "blurred",
-					"snippet": "const blurred = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} blurred>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "renderProps",
-					"snippet": "const renderProps = () => (\n    <Overlay active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        {(args) => (args.active ? \"Opened\" : \"Closed\")}\n    </Overlay>\n);"
-				},
-				{
-					"name": "handlers",
-					"snippet": "const handlers = () => {\n    const overlayToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>\n            <Overlay\n                active={overlayToggle.active}\n                onClose={(closeArgs) => {\n                    overlayToggle.deactivate();\n                    args.handleClose(closeArgs);\n                }}\n                onOpen={fn()}\n                onAfterOpen={fn()}\n                onAfterClose={fn()}>Content\n                                </Overlay>\n        </>\n    );\n};"
-				},
-				{
-					"name": "disableCloseOnClick",
-					"snippet": "const disableCloseOnClick = (args) => (\n    <Overlay\n        active\n        disableCloseOnClick\n        onClose={(closeArgs) => {\n            args.handleClose(closeArgs);\n        }}\n    >\n        Content\n    </Overlay>\n);"
-				},
-				{
-					"name": "containerRef",
-					"snippet": "const containerRef = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <>\n            <div ref={containerRef} data-testid=\"test-id\" style={{ height: 200 }} />\n            <Overlay active containerRef={containerRef}>\n                Content\n            </Overlay>\n        </>\n    );\n};"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <Overlay active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        Content\n    </Overlay>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport Overlay from \"components/Overlay\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Overlay",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Overlay/Overlay.tsx",
-				"actualName": "Overlay",
-				"exportName": "default"
-			}
-		},
-		"utility-components-reshaped": {
-			"id": "utility-components-reshaped",
-			"name": "Reshaped",
-			"path": "./src/components/Reshaped/tests/Reshaped.stories.tsx",
-			"stories": [
-				{
-					"name": "rtl",
-					"snippet": "const rtl = () => (\n    <Reshaped defaultRTL theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"
-				},
-				{
-					"name": "controlledMode",
-					"snippet": "const controlledMode = () => {\n    const [mode, setMode] = useState<G.ColorMode>(\"dark\");\n\n    return (\n        <Reshaped theme=\"reshaped\" colorMode={mode}>\n            <Button\n                onClick={() => {\n                    setMode(mode === \"dark\" ? \"light\" : \"dark\");\n                }}\n            >\n                Toggle color mode\n            </Button>\n        </Reshaped>\n    );\n};"
-				},
-				{
-					"name": "lightMode",
-					"snippet": "const lightMode = () => <Reshaped theme=\"reshaped\">Hello</Reshaped>;"
-				},
-				{
-					"name": "darkMode",
-					"snippet": "const darkMode = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"
-				},
-				{
-					"name": "scoped",
-					"snippet": "const scoped = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\" scoped>\n        Hello\n    </Reshaped>\n);"
-				},
-				{
-					"name": "testScoped",
-					"snippet": "const testScoped = () => (\n    <Reshaped theme=\"reshaped\">\n        <Reshaped theme=\"slate\" scoped>\n            <ScopedComponent />\n        </Reshaped>\n    </Reshaped>\n);"
-				},
-				{
-					"name": "keyboardMode",
-					"snippet": "const keyboardMode = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Reshaped } from \"reshaped\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Reshaped",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Reshaped/Reshaped.tsx",
-				"actualName": "Reshaped",
-				"exportName": "default"
-			}
-		},
-		"utility-components-scrollarea": {
-			"id": "utility-components-scrollarea",
-			"name": "ScrollArea",
-			"path": "./src/components/ScrollArea/tests/ScrollArea.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"vertical scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"horizontal scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\" height=\"100px\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"horizontal and vertical scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "scrollbarDisplay",
-					"snippet": "const scrollbarDisplay = () => (\n    <Example>\n        <Example.Item title=\"scrollbarDisplay: hover\">\n            <ScrollArea height=\"100px\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"scrollbarDisplay: hidden\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"hidden\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"scrollbarDisplay: visible\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "height",
-					"snippet": "const height = () => (\n    <Example>\n        <Example.Item title=\"height: 80px\">\n            <ScrollArea height=\"80px\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"responsive height: s 80px, m: 120px\">\n            <ScrollArea height={{ s: \"80px\", m: \"120px\" }}>\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"maxHeight: 80px\">\n            <ScrollArea maxHeight=\"80px\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"responsive max height: s 80px, m: 200px\">\n            <ScrollArea maxHeight={{ s: \"80px\", m: \"200px\" }}>\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "onScroll",
-					"snippet": "const onScroll = () => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={4}>\n            <View.Item>\n                <Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>\n            </View.Item>\n            <ScrollArea height=\"100px\" ref={ref} scrollbarDisplay=\"visible\" onScroll={fn()}>\n                <View backgroundColor=\"neutral-faded\" padding={4} width=\"1000px\" height=\"200px\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                                            has been the industry's standard dummy text ever since the 1500s, when an unknown\n                                            printer took a galley of type and scrambled it to make a type specimen book. It has\n                                            survived not only five centuries, but also the leap into electronic typesetting,\n                                            remaining essentially unchanged. It was popularised in the 1960s with the release of\n                                            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                                            publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                                        </View>\n            </ScrollArea>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <ScrollArea className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </ScrollArea>\n    </div>\n);"
-				},
-				{
-					"name": "testNested",
-					"snippet": "const testNested = () => (\n    <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n        <View padding={4} paddingInline={16}>\n            <ScrollArea height=\"200px\" scrollbarDisplay=\"visible\">\n                {Array(20)\n                    .fill(\"\")\n                    .map((_, index) => {\n                        return <div key={index}>Item {index + 1}</div>;\n                    })}\n            </ScrollArea>\n        </View>\n    </ScrollArea>\n);"
-				},
-				{
-					"name": "testDynamicHeight",
-					"snippet": "const testDynamicHeight = () => {\n    const [count, setCount] = React.useState(10);\n\n    return (\n        <View gap={4}>\n            <View.Item>\n                <Button onClick={() => setCount((prev) => prev + 10)}>Add more items</Button>\n            </View.Item>\n\n            <ScrollArea height=\"200px\" scrollbarDisplay=\"visible\">\n                <View gap={2}>\n                    {new Array(count).fill(\"\").map((_, i) => (\n                        <View.Item key={i}>Item {i + 1}</View.Item>\n                    ))}\n                </View>\n            </ScrollArea>\n        </View>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport ScrollArea from \"components/ScrollArea\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "ScrollArea",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/ScrollArea/ScrollArea.tsx",
-				"actualName": "ScrollArea",
-				"exportName": "default"
-			}
-		},
-		"utility-components-text": {
-			"id": "utility-components-text",
-			"name": "Text",
-			"path": "./src/components/Text/tests/Text.stories.tsx",
-			"stories": [
-				{
-					"name": "variant",
-					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: title-1\">\n            <Text variant=\"title-1\">Title 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-2\">\n            <Text variant=\"title-2\">Title 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-3\">\n            <Text variant=\"title-3\">Title 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-4\">\n            <Text variant=\"title-4\">Title 4</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-5\">\n            <Text variant=\"title-5\">Title 5</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-6\">\n            <Text variant=\"title-6\">Title 6</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-1\">\n            <Text variant=\"featured-1\">Featured 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-2\">\n            <Text variant=\"featured-2\">Featured 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-3\">\n            <Text variant=\"featured-3\">Featured 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-1\">\n            <Text variant=\"body-1\">Body 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-2\">\n            <Text variant=\"body-2\">Body 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-3\">\n            <Text variant=\"body-3\">Body 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: caption-1\">\n            <Text variant=\"caption-1\">Caption 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: caption-2\">\n            <Text variant=\"caption-2\">Caption 2</Text>\n        </Example.Item>\n        <Example.Item title={[\"responsive variant\", \"[s] body-3\", \"[m+] title-4\"]}>\n            <Text variant={{ s: \"body-3\", m: \"title-4\" }}>Responsive</Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "weight",
-					"snippet": "const weight = () => (\n    <Example>\n        <Example.Item title=\"weight: regular\">\n            <Text weight=\"regular\">Regular</Text>\n        </Example.Item>\n        <Example.Item title=\"weight: medium\">\n            <Text weight=\"medium\">Medium</Text>\n        </Example.Item>\n        <Example.Item title=\"weight: bold\">\n            <Text weight=\"bold\">Bold</Text>\n        </Example.Item>\n        <Example.Item title={[\"responsive\", \"[s] weight: regular\", \"[m+] bold\"]}>\n            <Text weight={{ s: \"regular\", m: \"bold\" }}>Responsive</Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "color",
-					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: inherit\">\n            <Text>Neutral</Text>\n        </Example.Item>\n        <Example.Item title=\"color: neutral-faded\">\n            <Text color=\"neutral-faded\">Faded</Text>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Text color=\"positive\">Positive</Text>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <Text color=\"warning\">Warning</Text>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Text color=\"critical\">Critical</Text>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <Text color=\"primary\">Primary</Text>\n        </Example.Item>\n        <Example.Item title=\"color: disabled\">\n            <Text color=\"disabled\" attributes={{ \"aria-disabled\": true }}>\n                Disabled\n            </Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "decoration",
-					"snippet": "const decoration = () => (\n    <Example>\n        <Example.Item title=\"decoration: line-through\">\n            <Text decoration=\"line-through\">Line through</Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "wrap",
-					"snippet": "const wrap = () => (\n    <Example>\n        <Example.Item title=\"wrap: balance\">\n            <Text wrap=\"balance\" variant=\"title-3\">\n                The design system you want to build\n            </Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "mono",
-					"snippet": "const mono = () => (\n    <Example>\n        <Example.Item title=\"monospace\">\n            <Text monospace>Content</Text>\n        </Example.Item>\n        <Example.Item title=\"monospace, variant, weight\">\n            <Text monospace variant=\"title-1\" weight=\"regular\">\n                Content\n            </Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "maxLines",
-					"snippet": "const maxLines = () => (\n    <Example>\n        <Example.Item title=\"maxLines: 2\">\n            <Text maxLines={2}>\n                There are many variations of passages of Lorem Ipsum available, but the majority have\n                suffered alteration in some form, by injected humour, or randomised words which don't look\n                even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be\n                sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum\n                generators on the Internet tend to repeat predefined chunks as necessary, making this the\n                first true generator on the Internet. It uses a dictionary of over 200 Latin words,\n                combined with a handful of model sentence structures, to generate Lorem Ipsum which looks\n                reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected\n                humour, or non-characteristic words etc.\n            </Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "align",
-					"snippet": "const align = () => (\n    <Example>\n        <Example.Item title=\"align: start\">\n            <Text align=\"start\">Text content</Text>\n        </Example.Item>\n        <Example.Item title=\"align: center\">\n            <Text align=\"center\">Text content</Text>\n        </Example.Item>\n        <Example.Item title=\"align: end\">\n            <Text align=\"end\">Text content</Text>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive alignment\", \"[s]: center\", \"[m+] start\"]}>\n            <Text align={{ s: \"center\", m: \"start\" }}>Text content</Text>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "asProp",
-					"snippet": "const asProp = () => (\n    <>\n        <Text as=\"h1\">Content</Text>\n        <Text variant=\"title-3\">Content</Text>\n        <Text variant={{ s: \"title-3\", m: \"title-4\" }}>Content</Text>\n    </>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Text className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Text>\n    </div>\n);"
-				}
-			],
-			"import": "import { Example } from \"utilities/storybook\";\nimport Text from \"components/Text\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Text",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Text/Text.tsx",
-				"actualName": "Text",
-				"exportName": "default"
-			}
-		},
-		"utility-components-theme": {
-			"id": "utility-components-theme",
-			"name": "Theme",
-			"path": "./src/components/Theme/tests/Theme.stories.tsx",
-			"stories": [
-				{
-					"name": "scoped",
-					"snippet": "const scoped = () => (\n    <Example>\n        <Example.Item title=\"scoped, single\">\n            <Theme name=\"reshaped\">\n                <Card attributes={{ \"data-testid\": \"test-id\" }}>\n                    <Button color=\"primary\">Action</Button>\n                </Card>\n            </Theme>\n        </Example.Item>\n\n        <Example.Item title=\"scoped, multiple\">\n            <Theme name={[\"reshaped\", \"figma\"]}>\n                <Card attributes={{ \"data-testid\": \"test-id-multi\" }}>\n                    <View direction=\"row\" gap={4}>\n                        <Button color=\"primary\">Action</Button>\n\n                        <Popover>\n                            <Popover.Trigger>\n                                {(attributes) => <Button attributes={attributes}>Popover</Button>}\n                            </Popover.Trigger>\n                            <Popover.Content>Content</Popover.Content>\n                        </Popover>\n                    </View>\n                </Card>\n            </Theme>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "light",
-					"snippet": "const light = () => (\n    <Theme name=\"reshaped\" colorMode=\"light\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"
-				},
-				{
-					"name": "dark",
-					"snippet": "const dark = () => (\n    <Theme name=\"reshaped\" colorMode=\"dark\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"
-				},
-				{
-					"name": "inherited",
-					"snippet": "const inherited = () => (\n    <Theme name=\"reshaped\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"
-				},
-				{
-					"name": "inverted",
-					"snippet": "const inverted = () => (\n    <Theme name=\"reshaped\" colorMode=\"inverted\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"
-				},
-				{
-					"name": "controlled",
-					"snippet": "const controlled = () => {\n    const Internal = () => {\n        const { setTheme, theme } = useTheme();\n\n        return (\n            <Button color=\"primary\" onClick={() => setTheme(\"slate\")}>\n                Switch to slate\n            </Button>\n        );\n    };\n\n    return (\n        <div data-testid=\"root\">\n            <Theme name=\"reshaped\">\n                <Internal />\n            </Theme>\n        </div>\n    );\n};"
-				},
-				{
-					"name": "uncontrolled",
-					"snippet": "const uncontrolled = () => {\n    const Internal = () => {\n        const { setTheme } = useTheme();\n\n        return (\n            <Button color=\"primary\" onClick={() => setTheme(\"slate\")}>\n                Switch to slate\n            </Button>\n        );\n    };\n\n    return (\n        <div data-testid=\"root\">\n            <Theme defaultName=\"reshaped\">\n                <Internal />\n            </Theme>\n        </div>\n    );\n};"
-				},
-				{
-					"name": "disabledTransition",
-					"snippet": "const disabledTransition = () => {\n    const { invertColorMode } = useTheme();\n\n    return (\n        <Example>\n            <Example.Item title=\"should have no transitions while switching color mode\">\n                <View gap={3}>\n                    <Button onClick={invertColorMode}>Invert mode</Button>\n\n                    <MenuItem selected>Test transition</MenuItem>\n\n                    <Card>Default card</Card>\n\n                    <Theme colorMode=\"inverted\">\n                        <Card>Inverted card</Card>\n                    </Theme>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport Card from \"components/Card\";\nimport { Example } from \"utilities/storybook\";\nimport MenuItem from \"components/MenuItem\";\nimport Popover from \"components/Popover\";\nimport Theme from \"components/Theme\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Theme",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Theme/Theme.tsx",
-				"actualName": "Theme",
-				"exportName": "default"
-			}
-		},
-		"utility-components-view": {
-			"id": "utility-components-view",
-			"name": "View",
-			"path": "./src/components/View/tests/View.stories.tsx",
-			"stories": [
-				{
-					"name": "padding",
-					"snippet": "const padding = () => (\n    <Example title=\"Border is used to highlight the padding value\">\n        <Example.Item title=\"padding: 4\">\n            <View padding={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <View padding={6} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: 0\">\n            <View padding={0} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: vertical 2, horizontal 4\">\n            <View paddingInline={4} paddingBlock={2} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingTop: 4\">\n            <View paddingTop={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingBottom: 4\">\n            <View paddingBottom={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingStart: 4\">\n            <View paddingStart={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingEnd: 4\">\n            <View paddingEnd={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive padding:\",\n                \"[s] vertical 2, horizontal 4\",\n                \"[m+] vertical 4, horizontal 8\",\n            ]}\n        >\n            <View paddingInline={{ s: 4, m: 8 }} paddingBlock={{ s: 2, m: 4 }} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"responsive padding:\", \"[s] top 2, bottom 4\", \"[m+] top 4, bottom 0, start: 8\"]}\n        >\n            <View\n                paddingTop={{ s: 2, m: 4 }}\n                paddingBottom={{ s: 4, m: 0 }}\n                paddingStart={{ s: 0, m: 8 }}\n                borderColor=\"neutral\"\n            >\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"nested padding, child view should have no horizontal padding\">\n            <View paddingStart={4} borderColor=\"neutral\">\n                <View borderColor=\"primary\" paddingBlock={4}>\n                    <Placeholder />\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "direction",
-					"snippet": "const direction = () => (\n    <Example title=\"Item 1 is another component, Item 2 is View.Item, Item 3 is text\">\n        <Example.Item title=\"direction: column as default\">\n            <View gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <View gap={3} direction=\"column\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column-reverse\">\n            <View gap={3} direction=\"column-reverse\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row\">\n            <View gap={3} direction=\"row\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row-reverse\">\n            <View gap={3} direction=\"row-reverse\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"responsive direction\", \"[s] column-reverse\", \"[m] row-reverse\", \"[l+] row\"]}\n        >\n            <View direction={{ s: \"column-reverse\", m: \"row-reverse\", l: \"row\" }} gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "gap",
-					"snippet": "const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 4, direction: row\">\n            <View direction=\"row\" gap={4} divided>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n                <Placeholder>Item 3</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 0, direction: row\">\n            <View direction=\"row\" gap={0}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap, direction: row\", \"[s] 4\", \"[m+] 8\"]}>\n            <View direction=\"row\" gap={{ s: 4, m: 8 }}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 4, direction: column\">\n            <View gap={4}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 0, direction: column\">\n            <View gap={0}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap, direction: column\", \"[s] 4\", \"[m+] 8\"]}>\n            <View gap={{ s: 4, m: 8 }}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "divided",
-					"snippet": "const divided = () => (\n    <Example>\n        <Example.Item title=\"direction: row\">\n            <View divided direction=\"row\" gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <View divided gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive divided\", \"[s] direction: row\", \"[m+] direction: column\"]}>\n            <View divided direction={{ s: \"row\", m: \"column\" }} gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row, columns\">\n            <View divided gap={3} direction=\"row\">\n                <View.Item columns={2}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={8}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={2}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"with React.Fragment\">\n            <View direction=\"row\" gap={4} divided>\n                <Placeholder>Item 1</Placeholder>\n                <>\n                    <Placeholder>Item 2</Placeholder>\n                    <Placeholder>Item 3</Placeholder>\n                </>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "bleed",
-					"snippet": "const bleed = () => (\n    <Example title=\"Removes side borders and border radius when applied\">\n        <Example.Item title=\"bleed: 4\">\n            <View bleed={4} padding={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive bleed\", \"[s] 4\", \"[m+] 0\"]}>\n            <View bleed={{ s: 4, m: 0 }} padding={4} borderRadius=\"small\" borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "wrap",
-					"snippet": "const wrap = () => (\n    <Example>\n        <Example.Item title=\"wrap: false\">\n            <View direction=\"row\" wrap={false} gap={3}>\n                <Placeholder w={600} h={100} />\n                <Placeholder w={600} h={100} />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "align",
-					"snippet": "const align = () => (\n    <Example>\n        <Example.Item title=\"align: start, direction: row\">\n            <View align=\"start\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: center, direction: row\">\n            <View align=\"center\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: end, direction: row\">\n            <View align=\"end\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"align: stretch, direction: row\",\n                \"2nd item is stretched based on the 1st item height\",\n            ]}\n        >\n            <View align=\"stretch\" direction=\"row\" gap={3}>\n                <Placeholder h={100} />\n                <Placeholder h=\"auto\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: baseline, direction: row\">\n            <View align=\"baseline\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Text variant=\"title-6\">Content</Text>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"align: start, direction: column\">\n            <View align=\"start\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: center, direction: column\">\n            <View align=\"center\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: end, direction: row\">\n            <View align=\"end\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"align: stretch, direction: column\",\n                \"1st item uses its own width, 2nd item is stretched to full width\",\n            ]}\n        >\n            <View align=\"stretch\" direction=\"column\" gap={3}>\n                <Placeholder w={100} />\n                <Placeholder w=\"auto\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "justify",
-					"snippet": "const justify = () => (\n    <Example>\n        <Example.Item title=\"justify: start, direction: row\">\n            <View justify=\"start\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: center, direction: row\">\n            <View justify=\"center\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: end, direction: row\">\n            <View justify=\"end\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: space-between, direction: row\">\n            <View justify=\"space-between\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"justify: start, direction: column, height: 200px\">\n            <View height=\"200px\" justify=\"start\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: center, direction: column, height: 200px\">\n            <View height=\"200px\" justify=\"center\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: end, direction: column, height: 200px\">\n            <View justify=\"end\" height=\"200px\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: space-between, direction: column, height: 200px\">\n            <View justify=\"space-between\" height=\"200px\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "textAlign",
-					"snippet": "const textAlign = () => (\n    <Example>\n        <Example.Item title=\"textAlign: start\">\n            <View textAlign=\"start\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: center\">\n            <View textAlign=\"center\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: end\">\n            <View textAlign=\"end\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: [s] start, [m+] end\">\n            <View textAlign={{ s: \"start\", m: \"end\" }}>Content</View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "size",
-					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"height: 100px, width: 100px\">\n            <View backgroundColor=\"neutral-faded\" height=\"100px\" width=\"100px\" />\n        </Example.Item>\n        <Example.Item title=\"height: 25, width: 25\">\n            <View backgroundColor=\"neutral-faded\" height={25} width={25} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive height and width\",\n                \"[s] height: 25, width: 25\",\n                \"[m+] height: 200px, width: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                height={{ s: 25, m: \"200px\" }}\n                width={{ s: 25, m: \"200px\" }}\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "ratio",
-					"snippet": "const ratio = () => (\n    <Example>\n        <Example.Item title=\"ratio: 16 / 9\">\n            <View backgroundColor=\"neutral-faded\" aspectRatio={16 / 9} width=\"200px\" />\n        </Example.Item>\n        <Example.Item title={[\"responsive ratio\", \"[s] 1/1\", \"[m+] 16/9\"]}>\n            <View backgroundColor=\"neutral-faded\" aspectRatio={{ s: 1, m: 16 / 9 }} width=\"200px\" />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "maxSize",
-					"snippet": "const maxSize = () => (\n    <Example>\n        <Example.Item title=\"maxHeight: 150px, maxWidth: 150px, height: 300px\">\n            <View backgroundColor=\"neutral-faded\" maxHeight=\"150px\" maxWidth=\"150px\" height=\"300px\" />\n        </Example.Item>\n        <Example.Item title=\"maxHeight: 25, maxWidth: 25, height: 50\">\n            <View backgroundColor=\"neutral-faded\" maxHeight={25} maxWidth={25} height={50} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive maxHeight and maxWidth, height: 300\",\n                \"[s] maxHeight: 25, maxWidth: 25\",\n                \"[m+] maxHeight: 200px, maxWidth: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                maxHeight={{ s: 25, m: \"200px\" }}\n                maxWidth={{ s: 25, m: \"200px\" }}\n                height=\"300px\"\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "minSize",
-					"snippet": "const minSize = () => (\n    <Example>\n        <Example.Item title=\"minHeight: 150px, minWidth: 150px, height: 50px, width: 50px\">\n            <View\n                backgroundColor=\"neutral-faded\"\n                minHeight=\"150px\"\n                minWidth=\"150px\"\n                height=\"50px\"\n                width=\"50px\"\n            />\n        </Example.Item>\n        <Example.Item title=\"minHeight: 25, minWidth: 25, height: 5, width: 5\">\n            <View backgroundColor=\"neutral-faded\" minHeight={25} minWidth={25} height={5} width={5} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive minHeight and minWidth, height: 50px, width: 50px\",\n                \"[s] minHeight: 25, minWidth: 25\",\n                \"[m+] minHeight: 200px, minWidth: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                minHeight={{ s: 25, m: \"200px\" }}\n                minWidth={{ s: 25, m: \"200px\" }}\n                height=\"50px\"\n                width=\"50px\"\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "background",
-					"snippet": "const background = () => (\n    <Example title=\"border is used to highlight the backround value when it's similar to the page background, text color changes based on the background\">\n        <Example.Item title=\"bg: page\">\n            <View backgroundColor=\"page\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: page-faded\">\n            <View backgroundColor=\"page-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: disabled\">\n            <View backgroundColor=\"disabled\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: disabled-faded\">\n            <View backgroundColor=\"disabled-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-base\">\n            <View backgroundColor=\"elevation-base\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-raised\">\n            <View backgroundColor=\"elevation-raised\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-overlay\">\n            <View backgroundColor=\"elevation-overlay\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: neutral\">\n            <View backgroundColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: neutral-faded\">\n            <View backgroundColor=\"neutral-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: primary\">\n            <View backgroundColor=\"primary\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: primary-faded\">\n            <View backgroundColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: critical\">\n            <View backgroundColor=\"critical\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: critical-faded\">\n            <View backgroundColor=\"critical-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: warning\">\n            <View backgroundColor=\"warning\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: warning-faded\">\n            <View backgroundColor=\"warning-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: positive\">\n            <View backgroundColor=\"positive\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: positive-faded\">\n            <View backgroundColor=\"positive-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "borderColor",
-					"snippet": "const borderColor = () => (\n    <Example>\n        <Example.Item title=\"border: neutral\">\n            <View borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: neutral-faded\">\n            <View borderColor=\"neutral-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: primary\">\n            <View borderColor=\"primary\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: primary-faded\">\n            <View borderColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: critical\">\n            <View borderColor=\"critical\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: critical-faded\">\n            <View borderColor=\"critical-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: warning\">\n            <View borderColor=\"warning\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: warning-faded\">\n            <View borderColor=\"warning-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: positive\">\n            <View borderColor=\"positive\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: positive-faded\">\n            <View borderColor=\"positive-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: transparent, background: primary-faded\">\n            <View borderColor=\"transparent\" backgroundColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive\", \"[s] primary\", \"[m+] neutral\"]}>\n            <View borderColor={{ s: \"primary\", m: \"neutral\" }} padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "border",
-					"snippet": "const border = () => (\n    <Example>\n        <Example.Item title=\"border: true\">\n            <View border borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderTop: true\">\n            <View borderTop borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderBottom: true\">\n            <View borderBottom borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderStart: true\">\n            <View borderStart borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderEnd: true\">\n            <View borderEnd borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderInline: true\">\n            <View borderInline borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderBlock: true\">\n            <View borderBlock borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderTop: true, borderStart: true, \">\n            <View borderColor=\"neutral\" borderTop borderStart padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"responsive\",\n                \"[s] borderTop: true, borderStart: true\",\n                \"[m+] borderBottom: true, borderEnd: true\",\n            ]}\n        >\n            <View\n                borderColor=\"neutral\"\n                borderTop={{ s: true, m: false }}\n                borderStart={{ s: true, m: false }}\n                borderBottom={{ s: false, m: true }}\n                borderEnd={{ s: false, m: true }}\n                padding={4}\n            >\n                Content\n            </View>\n        </Example.Item>\n\n        <div style={{ height: 100 }} />\n    </Example>\n);"
-				},
-				{
-					"name": "radius",
-					"snippet": "const radius = () => (\n    <Example>\n        <Example.Item title=\"radius: small\">\n            <View borderRadius=\"small\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: medium\">\n            <View borderRadius=\"medium\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: large\">\n            <View borderRadius=\"large\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: circular\">\n            <View borderRadius=\"circular\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "shadow",
-					"snippet": "const shadow = () => (\n    <Example>\n        <Example.Item title=\"shadow: raised, radius: medium\">\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                shadow=\"raised\"\n                borderRadius=\"medium\"\n                backgroundColor=\"elevation-raised\"\n            />\n        </Example.Item>\n        <Example.Item title=\"shadow: overlay, radius: medium\">\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                shadow=\"overlay\"\n                borderRadius=\"medium\"\n                backgroundColor=\"elevation-overlay\"\n            />\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "overflow",
-					"snippet": "const overflow = () => (\n    <Example>\n        <Example.Item\n            title={[\"overflow: hidden, radius: medium\", \"child background should have radius\"]}\n        >\n            <View height=\"100px\" width=\"100px\" shadow=\"raised\" borderRadius=\"medium\" overflow=\"hidden\">\n                <View backgroundColor=\"primary\" height=\"100%\" width=\"100%\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "positioning",
-					"snippet": "const positioning = () => (\n    <Example>\n        <Example.Item title=\"position: relative + absolute\">\n            <View borderColor=\"neutral\" position=\"relative\">\n                <Placeholder />\n                <View\n                    position=\"absolute\"\n                    insetTop={0}\n                    insetEnd={0}\n                    backgroundColor=\"critical\"\n                    zIndex={5}\n                    height={10}\n                    width={10}\n                />\n                <View\n                    position=\"absolute\"\n                    insetTop={0}\n                    insetEnd={0}\n                    backgroundColor=\"primary\"\n                    height={15}\n                    width={15}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: sticky\">\n            <div style={{ overflow: \"auto\", height: 100 }} tabIndex={0}>\n                <View position=\"sticky\" borderColor=\"primary\" insetTop={0}>\n                    Content\n                </View>\n                <Placeholder h={1000} />\n            </div>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive\", \"[s] position: absolute\", \"[m+]: position: relative\"]}>\n            <div style={{ overflow: \"auto\", height: 100, position: \"relative\" }} tabIndex={0}>\n                <View position={{ s: \"absolute\", m: \"relative\" }} borderColor=\"primary\" insetTop={0}>\n                    Content\n                </View>\n                <Placeholder h={1000} />\n            </div>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "inset",
-					"snippet": "const inset = () => (\n    <Example>\n        <Example.Item title=\"inset: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" inset={4} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetTop: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" insetTop={4} height={10} width={10} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetStart: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetStart={4}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetEnd: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" insetEnd={4} height={10} width={10} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetBottom: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetBottom={4}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"responsive, [s] insetBottom: 4 [m+] insetEnd: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetBottom={{ s: 4, m: \"auto\" }}\n                    insetEnd={{ s: \"auto\", m: 4 }}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "animated",
-					"snippet": "const animated = () => {\n    const [background, setBackground] = React.useState<ViewProps[\"backgroundColor\"]>(\"neutral\");\n\n    return (\n        <View gap={3} align=\"start\">\n            <Button\n                onClick={() => setBackground((prev) => (prev === \"neutral\" ? \"primary\" : \"neutral\"))}\n            >\n                Change background\n            </Button>\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                backgroundColor={background}\n                align=\"center\"\n                justify=\"center\"\n                animated\n            >\n                Content\n            </View>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "itemGapBefore",
-					"snippet": "const itemGapBefore = () => (\n    <Example>\n        <Example.Item title={[\"gap: 4, 3rd item gapBefore: 10, direction: row\", \"increased gap\"]}>\n            <View direction=\"row\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={10}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 4, direction: row\", \"reduced gap\"]}>\n            <View direction=\"row\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={4}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 0, direction: row\", \"removed gap\"]}>\n            <View direction=\"row\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={0}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"gap: 4, direction: row, 2nd item gap: auto\">\n            <View direction=\"row\" gap={4}>\n                <Placeholder w={200} />\n                <View.Item gapBefore=\"auto\">\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"gap: 4, 3rd item gapBefore: 10, direction: column\", \"increased gap\"]}>\n            <View direction=\"column\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={10}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 4, direction: column\", \"reduced gap\"]}>\n            <View direction=\"column\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={4}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 0, direction: column\", \"removed gap\"]}>\n            <View direction=\"column\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={0}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"gap: 4, direction: column, height: 200px, 2nd item gap: auto\">\n            <View height=\"200px\" gap={4}>\n                <Placeholder />\n                <View.Item gapBefore=\"auto\">\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"responsive item gap\",\n                \"gap: 4, direction: row\",\n                \"[s] 3rd item gapBefore: 10\",\n                \"[m+] 3rd item gapBefore: 0\",\n            ]}\n        >\n            <View direction=\"row\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={{ s: 10, m: 0 }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "itemGrow",
-					"snippet": "const itemGrow = () => (\n    <Example>\n        <Example.Item title=\"direction: row, 2nd item grow\">\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column, height: 200px, 2nd item grow\">\n            <View direction=\"column\" gap={3} height=\"200px\">\n                <Placeholder />\n                <View.Item grow>\n                    <Placeholder h=\"100%\" />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row, 2nd item grow, applied to View\">\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View grow>\n                    <Placeholder />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive item grow, direction: row\",\n                \"[s] 2nd item grow\",\n                \"[m+] 2nd item doesn't grow\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View.Item grow={{ s: true, m: false }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive item grow, direction: column, height: 200px\",\n                \"[s] 2nd item grow\",\n                \"[m+] 2nd item doesn't grow\",\n            ]}\n        >\n            <View direction=\"column\" gap={3} height=\"200px\">\n                <Placeholder />\n                <View.Item grow={{ s: true, m: false }}>\n                    <Placeholder h=\"100%\" />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "itemColumns",
-					"snippet": "const itemColumns = () => (\n    <Example>\n        <Example.Item title=\"columns 6, 6, gap: 0\">\n            <View direction=\"row\">\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 3, 9, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={3}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, 9, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive columns\", \"[s] columns 6, 6, 12, gap: 4\", \"[m+]: 4, 4, 4\"]}>\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={{ s: 6, m: 4 }}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 6, m: 4 }}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 12, m: 4 }}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, 9, gap: 4, 2nd item gapBefore: 20\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6} gapBefore={20}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "itemOrder",
-					"snippet": "const itemOrder = () => (\n    <Example>\n        <Example.Item title=\"order: 1 3 2\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={4}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={4} order={1}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={4}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive order\", \"[s] 1 2 3\", \"[m+] 1 3 2\"]}>\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={4}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={4} order={{ s: 0, m: 1 }}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={4}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive order\",\n                \"[s]: 1 3 2, 2 is full width on second row\",\n                \"[m+]: 1 2 3, 2 has grow in the center of the first row\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <View.Item columns={{ s: 6, m: \"auto\" }}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item\n                    grow={{ s: false, m: true }}\n                    order={{ s: 1, m: 0 }}\n                    columns={{ s: 12, m: \"auto\" }}\n                >\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 6, m: \"auto\" }}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "hiddenItem",
-					"snippet": "const hiddenItem = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"[s] 2nd item: visible, grow, 3rd item: !grow\",\n                \"[m+] 2nd item: hidden, 2nd item divider: hidden, 3rd item: grow\",\n            ]}\n        >\n            <View direction=\"row\" divided gap={3}>\n                <Placeholder />\n                <Hidden hide={{ s: false, m: true }}>\n                    <View.Item grow key=\"3\">\n                        <Placeholder />\n                    </View.Item>\n                </Hidden>\n                <View.Item grow={{ s: false, m: true }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"[s] 2nd item: visible, grow, 3rd item: !grow\",\n                \"[m+] 2nd item: hidden, 2nd item: grow doesn't push 3rd item, 3rd item: grow\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Placeholder />\n                <Hidden hide={{ s: false, m: true }}>\n                    <View.Item grow>\n                        <Placeholder />\n                    </View.Item>\n                </Hidden>\n                <View.Item grow={{ s: false, m: true }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "keys",
-					"snippet": "const keys = () => {\n    const toggle = useToggle();\n\n    return (\n        <View gap={2}>\n            <Button onClick={() => toggle.toggle()}>Toggle</Button>\n            <View.Item>Item 1</View.Item>\n            {toggle.active && <KeyItem>Item 2</KeyItem>}\n            <KeyItem>Item 3</KeyItem>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "nestedGaps",
-					"snippet": "const nestedGaps = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"direction: column, gap: 10\",\n                \"Child 1: direction: column, gap: 2\",\n                \"Child 2: direction column, gap: 6\",\n                \"Child 3: gapBefore: 0\",\n                \"Child 3 view: direction: row, gap: 2\",\n            ]}\n        >\n            <View gap={10}>\n                <View gap={2}>\n                    <Placeholder>Child 1</Placeholder>\n                    <Placeholder>Child 1</Placeholder>\n                </View>\n\n                <View gap={6}>\n                    <Placeholder>Child 2</Placeholder>\n                    <Placeholder>Child 2</Placeholder>\n                </View>\n\n                <View.Item gapBefore={0}>\n                    <View direction=\"row\" gap={2}>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "testComposition",
-					"snippet": "const testComposition = () => (\n    <Example>\n        <Example.Item>\n            <View direction=\"row\" align=\"center\" gap={4} padding={4}>\n                <View width=\"80px\" height=\"60px\" backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n\n                <View direction=\"row\" align=\"center\" gap={1} grow>\n                    <View.Item shrink>\n                        <Text>Text (like Jeff's Puzzles)</Text>\n                    </View.Item>\n\n                    <View minWidth=\"auto\" grow>\n                        <Button size=\"small\" color=\"neutral\" icon={IconPlus} />\n                    </View>\n                </View>\n\n                <Button color=\"primary\" rounded>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"View.Item, MenuItem, Aspect ratio\",\n                \"ratio should increase height on viewport change\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <View.Item>\n                    <Placeholder />\n                </View.Item>\n                <MenuItem selected roundedCorners>\n                    Menu\n                </MenuItem>\n                <View.Item grow>\n                    <View aspectRatio={16 / 9}>\n                        <Placeholder h=\"100%\" />\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"Scrollable tabs inside View.Item with grow\">\n            <View direction=\"row\" align=\"center\" gap={3}>\n                <Placeholder />\n                <View.Item grow>\n                    <View padding={0} align=\"center\">\n                        <Tabs variant=\"pills\">\n                            <Tabs.List>\n                                <Tabs.Item value=\"1\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"2\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"3\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"4\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"5\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"6\">Very long item</Tabs.Item>\n                            </Tabs.List>\n                            {[1, 2, 3, 5, 6].map((i) => (\n                                <Tabs.Panel key={i} value={i.toString()} />\n                            ))}\n                        </Tabs>\n                    </View>\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"2nd item has grow, Avatar stays circle\">\n            <View direction=\"row\" gap={3}>\n                <Avatar initials=\"DB\" />\n                <View.Item grow>\n                    Veggies sunt bona vobis, proinde vos postulo esse magis grape pea sprouts horseradish\n                    courgette maize spinach prairie turnip jícama coriander quandong gourd broccoli seakale\n                    gumbo. Parsley corn lentil zucchini radicchio maize burdock avocado sea lettuce.\n                    Garbanzo tigernut earthnut pea fennel.\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"item gapBefore from parent doesn't affect the child view\",\n                \"columns should take full width\",\n            ]}\n        >\n            <View>\n                <View.Item gapBefore={20}>\n                    <View direction=\"row\" gap={4}>\n                        <View.Item columns={6}>\n                            <Placeholder />\n                        </View.Item>\n                        <View.Item columns={6}>\n                            <Placeholder />\n                        </View.Item>\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"View becomes flexbox if there is a child with grow\">\n            <View height=\"300px\" borderColor=\"neutral-faded\">\n                <View height=\"50px\" />\n                <View grow backgroundColor=\"neutral-faded\" padding={4}>\n                    Grow\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"
-				},
-				{
-					"name": "asProp",
-					"snippet": "const asProp = () => (\n    <View as=\"ul\">\n        <View.Item as=\"li\">Content</View.Item>\n    </View>\n);"
-				},
-				{
-					"name": "className",
-					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <View className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </View>\n    </div>\n);"
-				},
-				{
-					"name": "itemClassName",
-					"snippet": "const itemClassName = () => (\n    <div data-testid=\"root\">\n        <View.Item className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </View.Item>\n    </div>\n);"
-				}
-			],
-			"import": "import Avatar from \"components/Avatar\";\nimport Button from \"components/Button\";\nimport { Example, Placeholder } from \"utilities/storybook\";\nimport Hidden from \"components/Hidden\";\nimport MenuItem from \"components/MenuItem\";\nimport Tabs from \"components/Tabs\";\nimport Text from \"components/Text\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "View",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/View/View.tsx",
-				"actualName": "View",
-				"exportName": "default"
-			}
-		},
-		"hooks-useelementid": {
-			"id": "hooks-useelementid",
-			"name": "useElementId",
-			"path": "./src/hooks/tests/useElementId.stories.tsx",
-			"stories": [
-				{
-					"name": "id",
-					"snippet": "const id = () => {\n    return <Component id=\"hey\" />;\n};"
-				}
-			],
-			"import": "",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n  3 | import useElementId from \"hooks/useElementId\";\n  4 |\n> 5 | export default {\n    | ^\n  6 | \ttitle: \"Hooks/useElementId\",\n  7 | \tparameters: {\n  8 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"hooks-usehandlerref": {
-			"id": "hooks-usehandlerref",
-			"name": "useHandlerRef",
-			"path": "./src/hooks/tests/useHandlerRef.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = (args) => {\n    const [count, setCount] = React.useState(0);\n\n    // Creating a new handler on each render\n    const handleEffect = () => {\n        args.handleEffect(0);\n    };\n\n    return (\n        <View gap={4}>\n            <Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>\n            <Component onEffect={handleEffect} count={count} />\n        </View>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n   6 | import useHandlerRef from \"hooks/useHandlerRef\";\n   7 |\n>  8 | export default {\n     | ^\n   9 | \ttitle: \"Hooks/useHandlerRef\",\n  10 | \tparameters: {\n  11 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"hooks-usehotkeys": {
-			"id": "hooks-usehotkeys",
-			"name": "useHotkeys",
-			"path": "./src/hooks/tests/useHotkeys.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => {\n    const { checkHotkeyState } = useHotkeys({\n        \"shift + b + n\": () => console.log(\"pressed\"),\n        \"c + v\": () => console.log(\"c + v\"),\n        \"Meta + k\": () => console.log(\"meta + k\"),\n        \"Meta + f\": () => console.log(\"meta + f\"),\n        \"Meta + v\": () => console.log(\"meta + v\"),\n        \"Meta + b\": () => console.log(\"meta + b\"),\n        \"control + enter\": () => console.log(\"control + enter\"),\n        \"meta + enter\": () => console.log(\"meta + enter\"),\n        \"mod + enter\": () => console.log(\"mod + enter\"),\n        \"mod + ArrowRight\": () => console.log(\"right\"),\n        \"mod + ArrowUp\": () => console.log(\"top\"),\n        \"shift + ArrowRight\": () => console.log(\"right\"),\n        \"shift + ArrowUp\": () => console.log(\"top\"),\n        \"alt+shift+n\": () => console.log(\"alt+shift+n\"),\n        \"shift+alt+n\": () => console.log(\"shift+alt+n\"),\n        \"alt+shiftLeft+n\": () => console.log(\"alt+shiftLeft+n\"),\n    });\n    const active = checkHotkeyState(\"shift + b + n\");\n    const shiftActive = checkHotkeyState(\"shift\");\n    const bActive = checkHotkeyState(\"b\");\n    const nActive = checkHotkeyState(\"n\");\n\n    return (\n        <View\n            animated\n            gap={2}\n            direction=\"row\"\n            backgroundColor={active ? \"positive-faded\" : undefined}\n            padding={2}\n            borderRadius=\"small\"\n        >\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={shiftActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={shiftActive ? undefined : \"raised\"}\n            >\n                Shift\n            </View>\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={bActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={bActive ? undefined : \"raised\"}\n            >\n                b\n            </View>\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={nActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={nActive ? undefined : \"raised\"}\n            >\n                n\n            </View>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "singleKey",
-					"snippet": "const singleKey = (args) => <Component hotkeys={{ a: args.handleHotkey }} />;"
-				},
-				{
-					"name": "modKey",
-					"snippet": "const modKey = (args) => <Component hotkeys={{ mod: args.handleHotkey }} />;"
-				},
-				{
-					"name": "modKeyHold",
-					"snippet": "const modKeyHold = (args) => <Component hotkeys={{ \"Meta + b\": args.handleHotkey }} />;"
-				},
-				{
-					"name": "keyList",
-					"snippet": "const keyList = (args) => <Component hotkeys={{ \"a,b\": args.handleHotkey }} />;"
-				},
-				{
-					"name": "keyCombination",
-					"snippet": "const keyCombination = (args) => <Component hotkeys={{ \"a+b\": args.handleHotkey }} />;"
-				},
-				{
-					"name": "keyCombinationFormat",
-					"snippet": "const keyCombinationFormat = (args) => <Component hotkeys={{ \"A  + b\": args.handleHotkey }} />;"
-				},
-				{
-					"name": "keyCombinationOrder",
-					"snippet": "const keyCombinationOrder = (args) => <Component hotkeys={{ \"b+a\": args.handleHotkey }} />;"
-				},
-				{
-					"name": "keyCombinationMoreThanRequired",
-					"snippet": "const keyCombinationMoreThanRequired = (args) => <Component hotkeys={{ \"z + x\": args.handleHotkey }} />;"
-				},
-				{
-					"name": "optionModified",
-					"snippet": "const optionModified = (args) => (\n    <Component hotkeys={{ \"alt+n\": args.handleHotkeyModified, \"alt+shift\": args.handleHotkey }} />\n);"
-				}
-			],
-			"import": "import View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n  4 | import useHotkeys from \"hooks/useHotkeys\";\n  5 |\n> 6 | export default {\n    | ^\n  7 | \ttitle: \"Hooks/useHotkeys\",\n  8 | \tparameters: {\n  9 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"hooks-usekeyboardarrownavigation": {
-			"id": "hooks-usekeyboardarrownavigation",
-			"name": "useKeyboardArrowNavigation",
-			"path": "./src/hooks/tests/useKeyboardArrowNavigation.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "horizontal",
-					"snippet": "const horizontal = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, orientation: \"horizontal\" });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "vertical",
-					"snippet": "const vertical = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, orientation: \"vertical\" });\n\n    return (\n        <View gap={2} direction=\"column\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "circular",
-					"snippet": "const circular = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, circular: true });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, disabled: true });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n   7 | import useKeyboardArrowNavigation from \"hooks/useKeyboardArrowNavigation\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Hooks/useKeyboardArrowNavigation\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"hooks-usekeyboardmode": {
-			"id": "hooks-usekeyboardmode",
-			"name": "useKeyboardMode",
-			"path": "./src/hooks/tests/useKeyboardMode.stories.tsx",
-			"stories": [
-				{ "name": "base", "snippet": "const base = () => <Component />;" }
-			],
-			"import": "import Button from \"components/Button\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n   5 | import useKeyboardMode from \"hooks/useKeyboardMode\";\n   6 |\n>  7 | export default {\n     | ^\n   8 | \ttitle: \"Hooks/useKeyboardMode\",\n   9 | \tparameters: {\n  10 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"hooks-useonclickoutside": {
-			"id": "hooks-useonclickoutside",
-			"name": "useOnClickOutside",
-			"path": "./src/hooks/tests/useOnClickOutside.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = (args) => {\n    const ref = React.useRef(null);\n    const [target, setTarget] = React.useState<\"inside\" | \"outside\" | null>(null);\n\n    useOnClickOutside([ref], () => {\n        args.handleOutsideClick();\n        setTarget(\"outside\");\n    });\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }} onClick={() => setTarget(\"inside\")}>\n                Trigger\n            </Button>\n            {target && `Clicked ${target}`}\n        </View>\n    );\n};"
-				},
-				{
-					"name": "refs",
-					"snippet": "const refs = (args) => {\n    const ref = React.useRef(null);\n    const ref2 = React.useRef(null);\n\n    useOnClickOutside([ref, ref2], () => {\n        args.handleOutsideClick();\n    });\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }}>Trigger</Button>\n            <Button attributes={{ ref: ref2 }}>Trigger 2</Button>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = (args) => {\n    const ref = React.useRef(null);\n\n    useOnClickOutside(\n        [ref],\n        () => {\n            args.handleOutsideClick();\n        },\n        {\n            disabled: true,\n        }\n    );\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }}>Trigger</Button>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "deps",
-					"snippet": "const deps = (args) => {\n    const ref = React.useRef(null);\n    const [count, setCount] = React.useState(0);\n\n    useOnClickOutside([ref], () => {\n        args.handleOutsideClick({ count });\n    });\n\n    return (\n        <Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>\n            Trigger\n        </Button>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n   6 | import View from \"components/View\";\n   7 |\n>  8 | export default {\n     | ^\n   9 | \ttitle: \"Hooks/useOnClickOutside\",\n  10 | \tparameters: {\n  11 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"hooks-usertl": {
-			"id": "hooks-usertl",
-			"name": "useRTL",
-			"path": "./src/hooks/tests/useRTL.stories.tsx",
-			"stories": [
-				{ "name": "setRTL", "snippet": "const setRTL = () => <Component />;" }
-			],
-			"import": "",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n  4 | import useRTL from \"hooks/useRTL\";\n  5 |\n> 6 | export default {\n    | ^\n  7 | \ttitle: \"Hooks/useRTL\",\n  8 | \tparameters: {\n  9 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"hooks-useresponsiveclientvalue": {
-			"id": "hooks-useresponsiveclientvalue",
-			"name": "useResponsiveClientValue",
-			"path": "./src/hooks/tests/useResponsiveClientValue.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => {\n    const value = useResponsiveClientValue<ViewProps[\"backgroundColor\"]>({\n        s: \"neutral\",\n        m: \"critical\",\n        l: \"positive\",\n    });\n\n    return <View width={25} height={25} backgroundColor={value} />;\n};"
-				},
-				{
-					"name": "boolean",
-					"snippet": "const boolean = () => {\n    const value = useResponsiveClientValue<boolean>({\n        s: true,\n        l: false,\n    });\n\n    return <div>{value?.toString()}</div>;\n};"
-				}
-			],
-			"import": "import View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n  2 | import View, { type ViewProps } from \"components/View\";\n  3 |\n> 4 | export default {\n    | ^\n  5 | \ttitle: \"Hooks/useResponsiveClientValue\",\n  6 | \tparameters: {\n  7 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"hooks-usescrolllock": {
-			"id": "hooks-usescrolllock",
-			"name": "useScrollLock",
-			"path": "./src/hooks/tests/useScrollLock.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => {\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock();\n\n    return (\n        <React.Fragment>\n            <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n            <div style={{ height: \"150vh\" }} />\n        </React.Fragment>\n    );\n};"
-				},
-				{
-					"name": "origin",
-					"snippet": "const origin = () => {\n    const originRef = React.useRef<HTMLDivElement>(null);\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });\n\n    return (\n        <View overflow=\"auto\" height={25} attributes={{ ref: originRef, \"data-testid\": \"root\" }}>\n            <View height={50} padding={4} backgroundColor=\"neutral-faded\" borderRadius=\"medium\">\n                <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n            </View>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "container",
-					"snippet": "const container = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });\n\n    return (\n        <View height={25} attributes={{ ref: containerRef, \"data-testid\": \"root\" }}>\n            <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n        </View>\n    );\n};"
-				},
-				{
-					"name": "testContainerAsync",
-					"snippet": "const testContainerAsync = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const globalLock = useScrollLock();\n    const scopedLock = useScrollLock({ containerRef });\n\n    return (\n        <Example>\n            <Example.Item title=\"calling regular lock and lock with a container only requires a single unlock to remove overflow\">\n                <View attributes={{ ref: containerRef }} gap={4} direction=\"row\">\n                    <Button\n                        onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}\n                    >\n                        Toggle\n                    </Button>\n                    <Button\n                        onClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}\n                    >\n                        Toggle\n                    </Button>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport React from \"react\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n   7 | import View from \"components/View\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Hooks/useScrollLock\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"hooks-usetoggle": {
-			"id": "hooks-usetoggle",
-			"name": "useToggle",
-			"path": "./src/hooks/tests/useToggle.stories.tsx",
-			"stories": [
-				{
-					"name": "toggle",
-					"snippet": "const toggle = () => {\n    const { toggle, active } = useToggle();\n\n    return (\n        <Button onClick={() => toggle()} attributes={{ \"data-active\": active }}>\n            {active ? \"Deactivate\" : \"Activate\"}\n        </Button>\n    );\n};"
-				},
-				{
-					"name": "activate",
-					"snippet": "const activate = () => {\n    const { activate, active } = useToggle();\n\n    return (\n        <React.Fragment>\n            <Button onClick={activate} attributes={{ \"data-active\": active }}>\n                Activate\n            </Button>\n        </React.Fragment>\n    );\n};"
-				},
-				{
-					"name": "deactivate",
-					"snippet": "const deactivate = () => {\n    const { deactivate, active } = useToggle(true);\n\n    return (\n        <Button onClick={deactivate} attributes={{ \"data-active\": active }}>\n            Deactivate\n        </Button>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport React from \"react\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n   5 | import useToggle from \"hooks/useToggle\";\n   6 |\n>  7 | export default {\n     | ^\n   8 | \ttitle: \"Hooks/useToggle\",\n   9 | \tparameters: {\n  10 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"utilities-trapfocus": {
-			"id": "utilities-trapfocus",
-			"name": "TrapFocus",
-			"path": "./src/utilities/a11y/tests/TrapFocus.stories.tsx",
-			"stories": [
-				{
-					"name": "modeDialog",
-					"snippet": "const modeDialog = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, { mode: \"dialog\" });\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\"mode: dialog\", \"tab navigation, always stays inside until released\"]}\n            >\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View.Item>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "modeActionMenu",
-					"snippet": "const modeActionMenu = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"action-menu\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: action-menu\",\n                    \"up/down arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "modeActionBar",
-					"snippet": "const modeActionBar = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"action-bar\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: action-bar\",\n                    \"left/right arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "modeContentMenu",
-					"snippet": "const modeContentMenu = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"content-menu\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: content-menu\",\n                    \"tab navigation, tabbing outside the content will trigger the release\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "includeTrigger",
-					"snippet": "const includeTrigger = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n            includeTrigger: true,\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "initialFocusEl",
-					"snippet": "const initialFocusEl = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const initialFocusRef = React.useRef<HTMLButtonElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n            initialFocusEl: initialFocusRef.current,\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View\n                            gap={4}\n                            direction=\"row\"\n                            padding={4}\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            attributes={{ ref: rootRef }}\n                        >\n                            <Button onClick={() => {}}>Action 1</Button>\n                            <Button onClick={() => {}} attributes={{ ref: initialFocusRef }}>\n                                Action 2\n                            </Button>\n                            <Button onClick={() => {}}>Action 3</Button>\n                            <Button onClick={trapToggle.deactivate}>Release</Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "focusableElements",
-					"snippet": "const focusableElements = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current);\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title=\"test with all types of focusable elements\">\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={trapToggle.activate}>Activate</Button>\n                    </View.Item>\n\n                    {trapToggle.active && (\n                        <View\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            padding={4}\n                            gap={4}\n                            attributes={{ ref: rootRef }}\n                            align=\"start\"\n                        >\n                            <Link href=\"#\" attributes={{ \"data-testid\": \"test-link\" }}>\n                                Link\n                            </Link>\n\n                            <TextField\n                                name=\"input\"\n                                placeholder=\"Input\"\n                                inputAttributes={{ \"data-testid\": \"test-text-field\" }}\n                            />\n\n                            <TextArea name=\"textarea\" inputAttributes={{ \"data-testid\": \"test-text-area\" }} />\n\n                            <Select\n                                name=\"select\"\n                                options={[\n                                    { label: \"Option 1\", value: \"1\" },\n                                    { label: \"Option 2\", value: \"2\" },\n                                ]}\n                                inputAttributes={{ \"data-testid\": \"test-select\" }}\n                            />\n\n                            <RadioGroup name=\"radio\">\n                                <Radio value=\"1\" inputAttributes={{ \"data-testid\": \"test-radio-1\" }}>\n                                    Option 1\n                                </Radio>\n                                <Radio value=\"2\" inputAttributes={{ \"data-testid\": \"test-radio-2\" }}>\n                                    Option 2\n                                </Radio>\n                            </RadioGroup>\n\n                            <Editor />\n\n                            <div tabIndex={0} role=\"button\" data-testid=\"test-tabindex\">\n                                div with tabIndex\n                            </div>\n\n                            <div style={{ display: \"none\" }}>\n                                <Button onClick={() => {}} attributes={{ \"data-testid\": \"test-hidden-button\" }}>\n                                    Hidden\n                                </Button>\n                            </div>\n\n                            <Button\n                                onClick={() => {}}\n                                attributes={{ tabIndex: -1, \"data-testid\": \"test-button-negative-tabindex\" }}\n                            >\n                                Excluded\n                            </Button>\n\n                            <input type=\"hidden\" data-testid=\"test-input-hidden\" />\n\n                            <Button\n                                onClick={trapToggle.deactivate}\n                                attributes={{ \"data-testid\": \"test-button\" }}\n                            >\n                                Release button\n                            </Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "nested",
-					"snippet": "const nested = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const innerRootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n    const innerTrapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    React.useEffect(() => {\n        if (!innerTrapToggle.active) return;\n        if (!innerRootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(innerRootRef.current, {\n            mode: \"dialog\",\n        });\n\n        return () => trapFocus.release();\n    }, [innerTrapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"nested, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View gap={4}>\n                            <View\n                                gap={4}\n                                direction=\"row\"\n                                padding={4}\n                                backgroundColor=\"neutral-faded\"\n                                borderRadius=\"medium\"\n                                attributes={{ ref: rootRef }}\n                            >\n                                <Button onClick={() => {}}>Action</Button>\n                                <Button onClick={innerTrapToggle.activate}>Inner trap focus</Button>\n                                <Button onClick={trapToggle.deactivate}>Release</Button>\n                            </View>\n\n                            {innerTrapToggle.active && (\n                                <View\n                                    gap={4}\n                                    direction=\"row\"\n                                    padding={4}\n                                    backgroundColor=\"neutral-faded\"\n                                    borderRadius=\"medium\"\n                                    attributes={{ ref: innerRootRef }}\n                                >\n                                    <Button onClick={() => {}}>Action</Button>\n                                    <Button onClick={innerTrapToggle.deactivate}>Release</Button>\n                                </View>\n                            )}\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				},
-				{
-					"name": "mutationObserver",
-					"snippet": "const mutationObserver = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n    const [mutated, setMutated] = React.useState(false);\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n        });\n\n        setTimeout(() => {\n            setMutated(true);\n        }, 50);\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View\n                            gap={4}\n                            direction=\"row\"\n                            padding={4}\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            attributes={{ ref: rootRef }}\n                        >\n                            {!mutated && (\n                                <>\n                                    <Button onClick={() => {}}>Action 1</Button>\n                                    <Button onClick={() => {}}>Action 2</Button>\n                                </>\n                            )}\n                            <Button onClick={() => {}}>Action 3</Button>\n                            <Button onClick={trapToggle.deactivate}>Release</Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport { Example } from \"utilities/storybook\";\nimport Link from \"components/Link\";\nimport Radio from \"components/Radio\";\nimport RadioGroup from \"components/RadioGroup\";\nimport Select from \"components/Select\";\nimport TextArea from \"components/TextArea\";\nimport TextField from \"components/TextField\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n  16 | import { sleep } from \"utilities/helpers\";\n  17 |\n> 18 | export default {\n     | ^\n  19 | \ttitle: \"Utilities/TrapFocus\",\n  20 | };\n  21 |"
-			}
-		},
-		"internal-portal": {
-			"id": "internal-portal",
-			"name": "Portal",
-			"path": "./src/components/_private/Portal/tests/Portal.stories.tsx",
-			"stories": [
-				{
-					"name": "base",
-					"snippet": "const base = () => {\n\tconst ref = React.useRef<HTMLDivElement>(null);\n\tconst [mounted, setMounted] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tsetMounted(true);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<div style={{ border: \"2px solid #333\", padding: 16 }}>\n\t\t\t\tApp\n\t\t\t\t{mounted && <Portal targetRef={ref}>Ported to green</Portal>}\n\t\t\t</div>\n\t\t\t<div ref={ref} style={{ border: \"2px solid green\", padding: 16 }} />\n\t\t</>\n\t);\n};"
-				}
-			],
-			"import": "import Portal from \"components/_private/Portal\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No component definition found",
-				"message": "Could not find a component definition.\nPrefer relative imports if possible.\nAvoid pointing to transpiled files.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\n\nFile: /Users/jeppe/dev/temp/reshaped/src/components/_private/Portal/index.ts\nimport Portal, { PortalScope } from \"./Portal\";\n\nconst PortalRoot = Portal as typeof Portal & {\n\tScope: typeof PortalScope;\n};\n\nPortalRoot.Scope = PortalScope;\n\nexport default PortalRoot;\nexport type { Props as PortalProps } from \"./Portal.types\";\n\nFile: /Users/jeppe/dev/temp/reshaped/src/components/_private/Portal/Portal.types.ts\nimport React from \"react\";\n\nexport type Props = {\n\tchildren?: React.ReactNode;\n\ttargetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;\n};\n\nexport type ScopeProps<T extends HTMLElement> = {\n\tchildren: (ref: React.RefObject<T | null>) => React.ReactNode;\n};\n\nexport type Context = {\n\tscopeRef: React.RefObject<HTMLElement | null>;\n};\n"
-			}
-		},
-		"internal-usedrag": {
-			"id": "internal-usedrag",
-			"name": "useDrag",
-			"path": "./src/hooks/tests/useDrag.stories.tsx",
-			"stories": [
-				{ "name": "base", "snippet": "const base = () => <Example />;" },
-				{
-					"name": "mouseEvents",
-					"snippet": "const mouseEvents = () => {\n    return <Demo onDrag={fn()} />;\n};"
-				},
-				{
-					"name": "touchEvents",
-					"snippet": "const touchEvents = () => {\n    return <Demo onDrag={fn()} />;\n};"
-				},
-				{
-					"name": "orientationHorizontal",
-					"snippet": "const orientationHorizontal = () => {\n    return <Demo onDrag={fn()} orientation=\"horizontal\" />;\n};"
-				},
-				{
-					"name": "orientationVertical",
-					"snippet": "const orientationVertical = () => {\n    return <Demo onDrag={fn()} orientation=\"vertical\" />;\n};"
-				},
-				{
-					"name": "disabled",
-					"snippet": "const disabled = () => {\n    return <Demo onDrag={fn()} disabled />;\n};"
-				}
-			],
-			"import": "import Button from \"components/Button\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n   7 | import Button from \"components/Button\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Internal/useDrag\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },"
-			}
-		},
-		"internal-shadowdom": {
-			"id": "internal-shadowdom",
-			"name": "ShadowDOM",
-			"path": "./src/tests/ShadowDOM.stories.tsx",
-			"stories": [
-				{
-					"name": "behavior",
-					"snippet": "const behavior = () => (\n\t<Example>\n\t\t<Example.Item title=\"base\">\n\t\t\t<Component />\n\t\t</Example.Item>\n\t</Example>\n);"
-				}
-			],
-			"import": "import Autocomplete from \"components/Autocomplete\";\nimport Button from \"components/Button\";\nimport DropdownMenu from \"components/DropdownMenu\";\nimport { Example } from \"utilities/storybook\";\nimport Reshaped from \"components/Reshaped\";\nimport root from \"react-shadow\";\nimport Select from \"components/Select\";\nimport Tooltip from \"components/Tooltip\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n  10 | import Tooltip from \"components/Tooltip\";\n  11 |\n> 12 | export default {\n     | ^\n  13 | \ttitle: \"Internal/ShadowDOM\",\n  14 | };\n  15 |"
-			}
-		},
-		"internal-themes": {
-			"id": "internal-themes",
-			"name": "Themes",
-			"path": "./src/tests/themes.stories.tsx",
-			"stories": [
-				{
-					"name": "test",
-					"snippet": "const test = () => {\n\tconst { colorMode } = useTheme();\n\tconst [activeColor, setColor] = useState(colors[0]);\n\tconst [theme, setTheme] = useState(\"\");\n\tconst [algo, setAlgo] = useState<\"wcag\" | \"apca\">(\"wcag\");\n\n\tuseLayoutEffect(() => {\n\t\tsetTheme(\n\t\t\tgetThemeCSS(\n\t\t\t\t\"test\",\n\t\t\t\t{\n\t\t\t\t\tcolor: generateThemeColors({\n\t\t\t\t\t\tprimary: activeColor === colors[0] ? undefined : activeColor,\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcolorContrastAlgorithm: algo,\n\t\t\t\t}\n\t\t\t)\n\t\t);\n\t}, [activeColor, algo]);\n\n\treturn (\n\t\t<>\n\t\t\t<style>{theme}</style>\n\t\t\t<Theme name=\"test\">\n\t\t\t\t<View gap={4}>\n\t\t\t\t\t<View direction=\"row\" align=\"center\" gap={4}>\n\t\t\t\t\t\t{colors.map((color) => {\n\t\t\t\t\t\t\tconst hex = colorMode === \"dark\" && color === \"#000000\" ? \"#ffffff\" : color;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Actionable key={color} onClick={() => setColor(color)} borderRadius=\"inherit\">\n\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\twidth={5}\n\t\t\t\t\t\t\t\t\t\theight={5}\n\t\t\t\t\t\t\t\t\t\tborderRadius=\"circular\"\n\t\t\t\t\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t\t\ttransition: `box-shadow var(--rs-duration-fast) var(--rs-easing-standard)`,\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: hex,\n\t\t\t\t\t\t\t\t\t\t\t\tboxShadow:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor === activeColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? `0 0 0 3px var(--rs-color-background-elevation-base), 0 0 0 5px ${hex}`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Actionable>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t<View.Item gapBefore=\"auto\">\n\t\t\t\t\t\t\t<Switch name=\"algo\" onChange={(args) => setAlgo(args.checked ? \"apca\" : \"wcag\")}>\n\t\t\t\t\t\t\t\tUse APCA\n\t\t\t\t\t\t\t</Switch>\n\t\t\t\t\t\t</View.Item>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<ThemePlayground />\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</>\n\t);\n};"
-				},
-				{
-					"name": "base",
-					"snippet": "const base = () => (\n\t<Example>\n\t\t<Example.Item title=\"custom runtime theme\">\n\t\t\t<style>{css}</style>\n\t\t\t<Theme name=\"green\">\n\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"on colors generation\">\n\t\t\t<style>{css2}</style>\n\t\t\t<Theme name=\"peach\">\n\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t</Example>\n);"
-				},
-				{
-					"name": "generation",
-					"snippet": "const generation = () => (\n\t<div>\n\t\t<style>{cssGenerated}</style>\n\t\t<Theme name=\"generated\">{componentExamples}</Theme>\n\t</div>\n);"
-				},
-				{
-					"name": "onColors",
-					"snippet": "const onColors = () => (\n\t<Example>\n\t\t<Example.Item title=\"custom on color values\">\n\t\t\t<style>{onColorsCss}</style>\n\t\t\t<Theme name=\"on-color\">\n\t\t\t\t<View gap={2} direction=\"row\">\n\t\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t\t\t<Button color=\"critical\">Critical button</Button>\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"custom on color values, apca\">\n\t\t\t<style>{onColorsCssApca}</style>\n\t\t\t<Theme name=\"on-color-apca\">\n\t\t\t\t<View gap={2} direction=\"row\">\n\t\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t\t\t<Button color=\"critical\">Critical button</Button>\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t</Example>\n);"
-				}
-			],
-			"import": "import Actionable from \"components/Actionable\";\nimport Alert from \"components/Alert\";\nimport Avatar from \"components/Avatar\";\nimport Badge from \"components/Badge\";\nimport Button from \"components/Button\";\nimport Card from \"components/Card\";\nimport DropdownMenu from \"components/DropdownMenu\";\nimport { Example } from \"utilities/storybook\";\nimport Link from \"components/Link\";\nimport Switch from \"components/Switch\";\nimport Text from \"components/Text\";\nimport TextField from \"components/TextField\";\nimport Theme from \"components/Theme\";\nimport { ThemePlayground } from \"reshaped\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"reactDocgen": {
-				"description": "",
-				"methods": [],
-				"displayName": "Theme",
-				"definedInFile": "/Users/jeppe/dev/temp/reshaped/src/components/Theme/Theme.tsx",
-				"actualName": "Theme",
-				"exportName": "default"
-			}
-		},
-		"sandbox": {
-			"id": "sandbox",
-			"name": "Sandbox",
-			"path": "./src/Sandbox.stories.tsx",
-			"stories": [
-				{
-					"name": "preview",
-					"snippet": "const preview = () => {\n\treturn (\n\t\t<Preview>\n\t\t\t<Component />\n\t\t</Preview>\n\t);\n};"
-				}
-			],
-			"import": "import Image from \"components/Image\";\nimport MenuItem from \"components/MenuItem\";\nimport Modal from \"components/Modal\";\nimport Select from \"components/Select\";\nimport View from \"components/View\";",
-			"jsDocTags": {},
-			"error": {
-				"name": "No meta.component specified",
-				"message": "Specify meta.component for the component to be included in the manifest.\n   7 | import MenuItem from \"components/MenuItem\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Sandbox\",\n  11 | \tchromatic: { disableSnapshot: true },\n  12 | };"
-			}
-		}
-	}
-}
+{"v":0,"components":{"components-actionbar":{"id":"components-actionbar","name":"ActionBar","path":"./src/components/ActionBar/tests/ActionBar.stories.tsx","stories":[{"name":"positionRelative","snippet":"const positionRelative = () => (\n    <Example>\n        <Example.Item title=\"position: top\">\n            <ActionBar position=\"top\">\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <ActionBar position=\"bottom\">\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n    </Example>\n);"},{"name":"positionAbsolute","snippet":"const positionAbsolute = () => (\n    <Example>\n        <Example.Item title=\"position: top-start\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top-start\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: top\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: top-end\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top-end\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom-start\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom-start\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom-end\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"positionFixed","snippet":"const positionFixed = () => (\n    <>\n        <ActionBar padding={2} position=\"top-start\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"top\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"top-end\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom-start\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom-end\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <div style={{ height: 2000 }} />\n    </>\n);"},{"name":"elevated","snippet":"const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated, position: top\">\n            <ActionBar position=\"top\" elevated>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"elevated, position: bottom\">\n            <ActionBar elevated>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"auto elevated, position: bottom\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"offset","snippet":"const offset = () => (\n    <Example>\n        <Example.Item title=\"offset 2, position: top\">\n            <Fixtures.Container>\n                <ActionBar position=\"top\" positionType=\"absolute\" offset={2}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"offset 2, position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\" offset={2}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"offset s: 2, m: 4, position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\" offset={{ s: 2, m: 4 }}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"active","snippet":"const active = () => {\n    const barToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => barToggle.toggle()}>Toggle</Button>\n            <ActionBar active={barToggle.active} positionType=\"fixed\" position=\"top-end\">\n                <Fixtures.Actions />\n            </ActionBar>\n        </>\n    );\n};"},{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 6\">\n            <ActionBar padding={6}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"paddingBlock: 2, paddingInline: 4\">\n            <ActionBar paddingBlock={2} paddingInline={4}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"padding: [s] 4, [m+] 6\">\n            <ActionBar padding={{ s: 4, m: 6 }}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <ActionBar className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </ActionBar>\n    </div>\n);"}],"import":"import { ActionBar, Button, Example, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ActionBar","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ActionBar/ActionBar.tsx","actualName":"ActionBar","exportName":"default"}},"components-alert":{"id":"components-alert","name":"Alert","path":"./src/components/Alert/tests/Alert.stories.tsx","stories":[{"name":"color","snippet":"const color = () => (\n    <Example>\n        {([\"neutral\", \"primary\", \"critical\", \"positive\", \"warning\"] as const).map((color) => (\n            <Example.Item title={`color: ${color}`} key={color}>\n                <Alert\n                    color={color}\n                    title=\"Alert title goes here\"\n                    icon={IconZap}\n                    actionsSlot={\n                        <>\n                            <Link\n                                variant=\"plain\"\n                                color={color === \"neutral\" ? \"primary\" : color}\n                                onClick={() => {}}\n                            >\n                                View now\n                            </Link>\n                            <Link\n                                variant=\"plain\"\n                                color={color === \"neutral\" ? \"primary\" : color}\n                                onClick={() => {}}\n                            >\n                                Dismiss\n                            </Link>\n                        </>\n                    }\n                >\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard\n                </Alert>\n            </Example.Item>\n        ))}\n    </Example>\n);"},{"name":"inline","snippet":"const inline = () => (\n    <Example>\n        <Example.Item title=\"inline: true\">\n            <Alert\n                inline\n                title=\"Alert title goes here\"\n                icon={IconZap}\n                actionsSlot={\n                    <>\n                        <Link variant=\"plain\" onClick={() => {}}>\n                            View now\n                        </Link>\n                        <Link variant=\"plain\" onClick={() => {}}>\n                            Dismiss\n                        </Link>\n                    </>\n                }\n            >\n                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n                been the industry's standard\n            </Alert>\n        </Example.Item>\n    </Example>\n);"},{"name":"bleed","snippet":"const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4\">\n            <Alert bleed={4} icon={IconZap}>\n                Content\n            </Alert>\n        </Example.Item>\n        <Example.Item title=\"bleed: [s] 4, [m+] 0\">\n            <Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>\n                Content\n            </Alert>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Alert className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </Alert>\n    </div>\n);"}],"import":"import { Alert, Example, Link, Placeholder } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Alert","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Alert/Alert.tsx","actualName":"Alert","exportName":"default"}},"components-autocomplete":{"id":"components-autocomplete","name":"Autocomplete","path":"./src/components/Autocomplete/tests/Autocomplete.stories.tsx","stories":[{"name":"active","snippet":"const active = (args) => {\n    const toggle = useToggle(true);\n\n    return (\n        <Example>\n            <Example.Item title=\"active, onOpen, onClose\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete\n                        name=\"fruit\"\n                        placeholder=\"Pick your food\"\n                        active={toggle.active}\n                        onOpen={() => {\n                            args.handleOpen();\n                            toggle.activate();\n                        }}\n                        onClose={() => {\n                            args.handleClose();\n                            toggle.deactivate();\n                        }}\n                        onChange={(args) => console.log(args)}\n                    >\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"base","snippet":"const base = () => {\n    const [value, setValue] = React.useState(\"\");\n\n    return (\n        <Example>\n            <Example.Item title=\"Base\">\n                <FormControl>\n                    <FormControl.Label>Food</FormControl.Label>\n                    <Autocomplete\n                        name=\"fruit\"\n                        placeholder=\"Pick your food\"\n                        value={value}\n                        onChange={(args) => setValue(args.value)}\n                        onBackspace={fn()}\n                        onItemSelect={fn()}>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"itemData","snippet":"const itemData = () => {\n    return (\n        <Example>\n            <Example.Item title=\"item data\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete name=\"fruit\" placeholder=\"Pick your food\" onItemSelect={fn()} active>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v} data={i === 1 ? { foo: true } : undefined}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"itemDisabled","snippet":"const itemDisabled = () => {\n    return (\n        <Example>\n            <Example.Item title=\"item disabled\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete name=\"fruit\" placeholder=\"Pick your food\" active>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v} disabled={i === 1}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"multiselect","snippet":"const multiselect = () => {\n    const options = [\n        \"Pizza\",\n        \"Pie\",\n        \"Ice-cream\",\n        \"Fries\",\n        \"Salad\",\n        \"Option 4\",\n        \"Option 5\",\n        \"Option 6\",\n    ];\n\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const [values, setValues] = React.useState<string[]>([\n        \"Option 4\",\n        \"Option 5\",\n        \"Option 6\",\n        \"Pizza\",\n        \"Ice-cream\",\n    ]);\n    const [query, setQuery] = React.useState(\"\");\n\n    const handleDismiss = (dismissedValue: string) => {\n        const nextValues = values.filter((value) => value !== dismissedValue);\n        setValues(nextValues);\n        inputRef.current?.focus();\n    };\n\n    const valuesNode = values.map((value) => (\n        <Badge dismissAriaLabel=\"Dismiss value\" onDismiss={() => handleDismiss(value)} key={value}>\n            {value}\n        </Badge>\n    ));\n\n    return (\n        <FormControl>\n            <FormControl.Label>Food</FormControl.Label>\n            <Autocomplete\n                name=\"fruit\"\n                value={query}\n                placeholder=\"Pick your food\"\n                startSlot={valuesNode}\n                multiline\n                inputAttributes={{ ref: inputRef }}\n                onChange={(args) => setQuery(args.value)}\n                onBackspace={() => {\n                    if (query.length === 0) {\n                        setValues((prev) => prev.slice(0, -1));\n                    }\n                }}\n                onItemSelect={(args) => {\n                    setQuery(\"\");\n                    setValues((prev) => [...prev, args.value]);\n                }}\n            >\n                {options.map((v) => {\n                    if (!v.toLowerCase().includes(query.toLowerCase())) return;\n                    if (values.includes(v)) return;\n\n                    return (\n                        <Autocomplete.Item key={v} value={v}>\n                            {v}\n                        </Autocomplete.Item>\n                    );\n                })}\n            </Autocomplete>\n        </FormControl>\n    );\n};"}],"import":"import { Autocomplete, Badge, Example, FormControl } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Autocomplete","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Autocomplete/Autocomplete.tsx","actualName":"Autocomplete","exportName":"default"}},"components-avatar":{"id":"components-avatar","name":"Avatar","path":"./src/components/Avatar/tests/Avatar.stories.tsx","stories":[{"name":"src","snippet":"const src = () => (\n    <Example>\n        <Example.Item title=\"src, alt\">\n            <Avatar\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n                alt=\"Amsterdam canal\"\n                size={12}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"src\">\n            <Avatar src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"initials","snippet":"const initials = () => (\n    <Example>\n        <Example.Item title=\"initials\">\n            <Avatar initials=\"RS\" />\n        </Example.Item>\n\n        <Example.Item title=\"icon\">\n            <Avatar icon={IconZap} />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: 6\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={6} icon={IconZap} />\n                <Avatar size={6} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: 15\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={15} icon={IconZap} />\n                <Avatar size={15} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: 40\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={40} icon={IconZap} />\n                <Avatar size={40} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] 10\", \"[m+] 20\"]}>\n            <View direction=\"row\" gap={3}>\n                <Avatar size={{ s: 10, m: 20 }} icon={IconZap} />\n                <Avatar size={{ s: 10, m: 20 }} icon={IconZap} squared />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"squared","snippet":"const squared = () => (\n    <Example>\n        <Example.Item title=\"squared, with image\">\n            <Avatar\n                squared\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n            />\n        </Example.Item>\n        <Example.Item title=\"squared, with initials\">\n            <Avatar squared initials=\"RS\" />\n        </Example.Item>\n        <Example.Item title=\"squared, with initials\">\n            <Avatar squared icon={IconZap} />\n        </Example.Item>\n    </Example>\n);"},{"name":"colors","snippet":"const colors = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"neutral\" icon={IconZap} />\n                <Avatar color=\"neutral\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"primary\" icon={IconZap} />\n                <Avatar color=\"primary\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"positive\" icon={IconZap} />\n                <Avatar color=\"positive\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"warning\" icon={IconZap} />\n                <Avatar color=\"warning\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"critical\" icon={IconZap} />\n                <Avatar color=\"critical\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"fallback","snippet":"const fallback = (args) => {\n    const [error, setError] = useState(false);\n\n    return (\n        <Avatar\n            src={error ? undefined : \"/foo\"}\n            icon={IconZap}\n            imageAttributes={{\n                onError: () => {\n                    setError(true);\n                    args.handleError();\n                },\n            }}\n        />\n    );\n};"},{"name":"renderImage","snippet":"const renderImage = () => (\n    <Example>\n        <Example.Item title=\"renderImage\">\n            <Avatar\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n                alt=\"Amsterdam canal\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image\" />}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Avatar\n            src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            imageAttributes={{ id: \"test-image-id\", alt: \"test image\" }}\n        />\n    </div>\n);"}],"import":"import { Avatar, Example, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Avatar","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Avatar/Avatar.tsx","actualName":"Avatar","exportName":"default"}},"components-badge":{"id":"components-badge","name":"Badge","path":"./src/components/Badge/tests/Badge.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Badge>Badge</Badge>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <Badge variant=\"faded\">Badge</Badge>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <Badge variant=\"outline\">Badge</Badge>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"primary\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"primary\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"primary\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: positive, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"positive\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"positive\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"positive\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: critical, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"critical\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"critical\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"critical\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: warning, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"warning\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"warning\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"warning\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"small\">Badge</Badge>\n                <Badge rounded size=\"small\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge>Badge</Badge>\n                <Badge rounded>Badge</Badge>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"large\">Badge</Badge>\n                <Badge rounded size=\"large\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={3} direction=\"row\">\n                <Badge icon={IconCheckmark} endIcon={IconChevronRight} size=\"small\">\n                    Badge\n                </Badge>\n                <Badge icon={IconCheckmark} size=\"small\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={3} direction=\"row\">\n                <Badge icon={IconCheckmark} endIcon={IconChevronRight}>\n                    Badge\n                </Badge>\n                <Badge icon={IconCheckmark} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"large\" icon={IconCheckmark} endIcon={IconChevronRight}>\n                    Badge\n                </Badge>\n\n                <Badge icon={IconCheckmark} size=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"onDismiss","snippet":"const onDismiss = () => <Example>\n    <Example.Item title=\"onDismiss\">\n        <Badge onDismiss={fn()} dismissAriaLabel=\"Dismiss\">Badge\n                            </Badge>\n    </Example.Item>\n</Example>;"},{"name":"rounded","snippet":"const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded>Badge</Badge>\n                <Badge rounded variant=\"faded\">\n                    Badge\n                </Badge>\n                <Badge rounded variant=\"outline\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"rounded, all sizes, color: critical\", \"one character, renders as circle\"]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Badge rounded color=\"critical\" size=\"small\">\n                    2\n                </Badge>\n                <Badge rounded color=\"critical\">\n                    2\n                </Badge>\n                <Badge rounded color=\"critical\" size=\"large\">\n                    2\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"empty","snippet":"const empty = () => (\n    <Example>\n        <Example.Item title=\"empty, not rounded, all sizes, color: critical\">\n            <View direction=\"row\" gap={3}>\n                <Badge size=\"small\" color=\"critical\" />\n                <Badge color=\"critical\" />\n                <Badge size=\"large\" color=\"critical\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"empty, rounded, all sizes, color: critical\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded size=\"small\" color=\"critical\" />\n                <Badge rounded color=\"critical\" />\n                <Badge rounded size=\"large\" color=\"critical\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"empty, rounded, all sizes, color: neutral\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded size=\"small\" color=\"neutral\" />\n                <Badge rounded />\n                <Badge rounded size=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"highlighted","snippet":"const highlighted = () => (\n    <Example>\n        <Example.Item title=\"highlighted, color: neutral\">\n            <View gap={3} direction=\"row\">\n                <Badge highlighted>Badge</Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"container","snippet":"const container = () => {\n    const [hidden, setHidden] = React.useState(false);\n\n    return (\n        <Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>\n            <Example.Item title=\"position: top-end\">\n                <Badge.Container>\n                    <Badge color=\"primary\" hidden={hidden}>\n                        5\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: bottom-end\">\n                <Badge.Container position=\"bottom-end\">\n                    <Badge color=\"primary\" hidden={hidden}>\n                        5\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: top-end, rounded, multiple digits\">\n                <Badge.Container>\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        123\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: top-end, rounded, empty\">\n                <Badge.Container>\n                    <Badge color=\"primary\" rounded hidden={hidden} />\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: top-end, overlap\", \"should cover the circular avatar\"]}>\n                <Badge.Container overlap>\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        2\n                    </Badge>\n                    <Avatar initials=\"A\" />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: bottom-end, overlap\", \"should cover the circular avatar\"]}>\n                <Badge.Container overlap position=\"bottom-end\">\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        2\n                    </Badge>\n                    <Avatar initials=\"A\" />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: top-end, overlap\", \"should cover the icon\"]}>\n                <Badge.Container overlap position=\"top-end\">\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden} />\n                    <Icon svg={IconCheckmark} size={5} />\n                </Badge.Container>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"href","snippet":"const href = () => (\n    <Badge href=\"https://reshaped.so\" dismissAriaLabel=\"Dismiss\">\n        Badge\n    </Badge>\n);"},{"name":"onClick","snippet":"const onClick = () => <Badge onClick={fn()}>Badge</Badge>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Badge color=\"primary\" className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Avatar, Badge, Button, Example, Icon, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Badge","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Badge/Badge.tsx","actualName":"Badge","exportName":"default"}},"components-breadcrumbs":{"id":"components-breadcrumbs","name":"Breadcrumbs","path":"./src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx","stories":[{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <Breadcrumbs ariaLabel=\"breadcrumb neutral\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"color: primary\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb primary\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"item","snippet":"const item = () => (\n    <Example>\n        <Example.Item title=\"disabled item\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb disabled\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}} disabled>\n                    Disabled item 2\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"item with icon\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb with icon\">\n                <Breadcrumbs.Item icon={IconZap} onClick={() => {}}>\n                    Item 1\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"slots","snippet":"const slots = () => (\n    <Example>\n        <Example.Item title=\"slot: separator\">\n            <Breadcrumbs color=\"primary\" separator=\"/\" ariaLabel=\"breadcrumb with separator\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"custom child content\">\n            <Breadcrumbs ariaLabel=\"breadcrumb with custom children\">\n                <Breadcrumbs.Item onClick={() => {}}>\n                    <Badge>Item 1</Badge>\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>\n                    <Badge>Item 2</Badge>\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"collapsed","snippet":"const collapsed = () => (\n    <Example>\n        <Example.Item title=\"collapsed, 3 items shown by default\">\n            <Breadcrumbs\n                defaultVisibleItems={3}\n                ariaLabel=\"breadcrumbs one\"\n                expandAriaLabel=\"Expand items\"\n            >\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"collapsed, 4 items shown by default\">\n            <Breadcrumbs\n                defaultVisibleItems={4}\n                ariaLabel=\"breadcrumb two\"\n                expandAriaLabel=\"Expand items\"\n            >\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"collapsed, 3 items shown by default, not expandable\">\n            <Breadcrumbs defaultVisibleItems={3} ariaLabel=\"breadcrumb three\" disableExpand>\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"multiline","snippet":"const multiline = () => (\n    <Example>\n        <Example.Item title=\"wraps content when multiline\">\n            <Breadcrumbs ariaLabel=\"breadcrumb multiline\">\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (\n                    <Breadcrumbs.Item onClick={() => {}} key={i}>\n                        Item {i}\n                    </Breadcrumbs.Item>\n                ))}\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"onClick","snippet":"const onClick = () => <Breadcrumbs>\n    <Breadcrumbs.Item onClick={fn()}>Trigger</Breadcrumbs.Item>\n    <Breadcrumbs.Item onClick={fn()} disabled>Trigger\n                    </Breadcrumbs.Item>\n</Breadcrumbs>;"},{"name":"href","snippet":"const href = () => (\n    <Breadcrumbs>\n        <Breadcrumbs.Item href=\"https://reshaped.so\">Trigger</Breadcrumbs.Item>\n    </Breadcrumbs>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Breadcrumbs className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Breadcrumbs.Item>Trigger</Breadcrumbs.Item>\n        </Breadcrumbs>\n    </div>\n);"}],"import":"import { Badge, Breadcrumbs, Example } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Breadcrumbs","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx","actualName":"Breadcrumbs","exportName":"default"}},"components-button":{"id":"components-button","name":"Button","path":"./src/components/Button/tests/Button.stories.tsx","stories":[{"name":"variantAndColor","snippet":"const variantAndColor = () => (\n    <Example>\n        <Example.Item title=\"variant: solid\">\n            <View gap={4} direction=\"row\">\n                <Button onClick={() => {}}>Button</Button>\n                <Button onClick={() => {}} color=\"primary\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"faded\">\n                    Button\n                </Button>\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"outline\">\n                    Button\n                </Button>\n\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: ghost\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"ghost\">\n                    Button\n                </Button>\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: media\">\n            <View backgroundColor=\"primary\" borderRadius=\"medium\" padding={4} direction=\"row\" gap={4}>\n                <Button onClick={() => {}} color=\"media\">\n                    Button\n                </Button>\n\n                <Button onClick={() => {}} color=\"media\" variant=\"faded\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Button onClick={() => {}} icon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"endIcon\">\n            <Button onClick={() => {}} endIcon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"icon, endIcon\">\n            <Button onClick={() => {}} icon={IconZap} endIcon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"icon only\">\n            <Button onClick={() => {}} icon={IconZap} attributes={{ \"aria-label\": \"Action\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"small\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"small\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Button icon={IconZap}>Button</Button>\n                <Button variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"large\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"large\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"xlarge\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"xlarge\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"xlarge\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large, [m+] medium\">\n            <Button size={{ s: \"large\", m: \"medium\" }} icon={IconZap}>\n                Responsive\n            </Button>\n        </Example.Item>\n    </Example>\n);"},{"name":"elevated","snippet":"const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated, color: neutral\">\n            <View direction=\"row\" gap={4}>\n                <Button elevated onClick={() => {}}>\n                    Button\n                </Button>\n                <Button elevated variant=\"outline\" onClick={() => {}}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"elevated, color\">\n            <View direction=\"row\" gap={4}>\n                <Button elevated color=\"primary\">\n                    Button\n                </Button>\n                <Button elevated variant=\"outline\" color=\"primary\">\n                    Button\n                </Button>\n                <View backgroundColor=\"primary\" padding={4} borderRadius=\"medium\">\n                    <Button color=\"media\" elevated>\n                        Button\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"rounded","snippet":"const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded, size: small, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, size: medium, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, size: large, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, icon only, all sizes\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"small\" icon={IconZap} />\n                <Button rounded icon={IconZap} />\n                <Button rounded size=\"large\" icon={IconZap} />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"fullWidth","snippet":"const fullWidth = () => (\n    <Example>\n        <Example.Item title=\"fullWidth, all variants\">\n            <View gap={3}>\n                <Button fullWidth>Neutral</Button>\n                <Button fullWidth variant=\"faded\">\n                    Faded\n                </Button>\n                <Button fullWidth variant=\"outline\">\n                    Outline\n                </Button>\n                <Button fullWidth variant=\"ghost\">\n                    Ghost\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive fullWidth\", \"[s] true\", \"[m+] false\"]}>\n            <Button fullWidth={{ s: true, m: false }}>Button</Button>\n        </Example.Item>\n    </Example>\n);"},{"name":"loading","snippet":"const loading = () => (\n    <Example>\n        <Example.Item title=\"loading, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"loading, color critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"loading, color positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"loading, color: media\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n\n                <div style={{ position: \"absolute\", top: 16, left: 16 }}>\n                    <View gap={3} direction=\"row\">\n                        <Button color=\"media\" loading loadingAriaLabel=\"Loading\">\n                            Button\n                        </Button>\n                        <Button color=\"media\" variant=\"faded\" loading loadingAriaLabel=\"Loading\">\n                            Button\n                        </Button>\n                    </View>\n                </div>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"loading, long button text\", \"button size should stay the same\"]}>\n            <Button loading loadingAriaLabel=\"Loading\" color=\"primary\">\n                Long button text\n            </Button>\n        </Example.Item>\n\n        <Example.Item title={[\"loading, icon only\", \"button keep square 1/1 ratio\"]}>\n            <Button icon={IconZap} rounded loading loadingAriaLabel=\"Loading\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"highlighted","snippet":"const highlighted = () => (\n    <Example>\n        <Example.Item title=\"highlighted, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"highlighted, color: critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted color=\"critical\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"highlighted, color: positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted color=\"positive\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled icon={IconZap} onClick={() => {}}>\n                    Button\n                </Button>\n                <Button disabled variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"disabled, color: critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled color=\"critical\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"disabled, color: positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled color=\"positive\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"disabled, color: media\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n\n                <div style={{ position: \"absolute\", top: 16, left: 16 }}>\n                    <View gap={3} direction=\"row\">\n                        <Button color=\"media\" disabled>\n                            Button\n                        </Button>\n                        <Button color=\"media\" variant=\"faded\" disabled>\n                            Button\n                        </Button>\n                    </View>\n                </div>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"aligner","snippet":"const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner: all\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>Content</View.Item>\n                <Button.Aligner>\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: top\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"top\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: top and end\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side={[\"top\", \"end\"]}>\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: bottom\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2} align=\"end\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"bottom\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: start\">\n            <View padding={4} borderColor=\"neutral-faded\" gap={2} align=\"start\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"start\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: end\">\n            <View padding={4} borderColor=\"neutral-faded\" gap={2} align=\"end\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"end\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"composition","snippet":"const composition = () => (\n    <Example>\n        <Example.Item title=\"slot gap\">\n            <Button variant=\"outline\">\n                <Avatar size={6} initials=\"RS\" />\n                Label\n                <Hotkey>B</Hotkey>\n            </Button>\n        </Example.Item>\n    </Example>\n);"},{"name":"href","snippet":"const href = () => <Button href=\"https://reshaped.so\">Trigger</Button>;"},{"name":"onClick","snippet":"const onClick = () => <Button onClick={fn()}>Trigger</Button>;"},{"name":"hrefOnClick","snippet":"const hrefOnClick = (args) => (\n    <Button\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </Button>\n);"},{"name":"as","snippet":"const as = () => (\n    <Example>\n        <Example.Item title=\"as: span\">\n            <Button onClick={() => {}} as=\"span\">\n                Trigger\n            </Button>\n        </Example.Item>\n        <Example.Item title=\"render, disabled\">\n            <Button\n                disabled\n                onClick={() => {}}\n                render={(props) => <section {...props} />}\n                attributes={{ \"data-testid\": \"render-el\" }}\n            >\n                Trigger\n            </Button>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Button className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Button>\n    </div>\n);"},{"name":"group","snippet":"const group = () => (\n    <Example>\n        <Example.Item title=\"with icon\">\n            <Button.Group>\n                <Button rounded>Submit</Button>\n                <Button rounded icon={IconZap} />\n            </Button.Group>\n        </Example.Item>\n        <Example.Item title=\"variant: solid\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\", \"media\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color}>One</Button>\n                        <Button color={color}>Two</Button>\n                        <Button color={color}>Three</Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"outline\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"outline\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"outline\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\", \"media\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"faded\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"faded\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"faded\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"variant: ghost\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"ghost\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"ghost\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"ghost\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"groupClassName","snippet":"const groupClassName = () => (\n    <div data-testid=\"root\">\n        <Button.Group className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Button>Trigger</Button>\n        </Button.Group>\n    </div>\n);"}],"import":"import { Avatar, Button, Example, Hotkey, Image, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Button","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Button/Button.tsx","actualName":"Button","exportName":"default"}},"components-calendar":{"id":"components-calendar","name":"Calendar","path":"./src/components/Calendar/tests/Calendar.stories.tsx","stories":[{"name":"defaultMonth","snippet":"const defaultMonth = () => (\n    <Example>\n        <Example.Item title=\"defaultMonth: 2020 January\">\n            <Calendar defaultMonth={new Date(2020, 0)} range />\n        </Example.Item>\n    </Example>\n);"},{"name":"uncontrolled","snippet":"const uncontrolled = () => <Example>\n    <Example.Item title=\"defaultValue\">\n        <Calendar\n            defaultMonth={new Date(2020, 0)}\n            defaultValue={new Date(2020, 0, 10)}\n            onChange={fn()} />\n    </Example.Item>\n    <Example.Item title=\"defaultValue, range\">\n        <Calendar\n            range\n            defaultMonth={new Date(2020, 0)}\n            defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }}\n            onChange={fn()} />\n    </Example.Item>\n</Example>;"},{"name":"controlled","snippet":"const controlled = () => <Example>\n    <Example.Item title=\"value\">\n        <Calendar\n            defaultMonth={new Date(2020, 0)}\n            value={new Date(2020, 0, 10)}\n            onChange={fn()} />\n    </Example.Item>\n    <Example.Item title=\"defaultValue, range\">\n        <Calendar\n            range\n            defaultMonth={new Date(2020, 0)}\n            value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }}\n            onChange={fn()} />\n    </Example.Item>\n</Example>;"},{"name":"selectedDates","snippet":"const selectedDates = () => (\n    <Example>\n        <Example.Item title=\"selectedDates: [4,8]\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                value={null}\n                selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"minMax","snippet":"const minMax = () => (\n    <Example>\n        <Example.Item title=\"min: 4, max: 20\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                min={new Date(2020, 0, 4)}\n                max={new Date(2020, 0, 20)}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"firstWeekDay","snippet":"const firstWeekDay = () => (\n    <Example>\n        <Example.Item title=\"firstWeekDay: 3 (Wed)\">\n            <Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3} />\n        </Example.Item>\n    </Example>\n);"},{"name":"translation","snippet":"const translation = () => (\n    <Example>\n        <Example.Item title=\"translated to NL\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                renderMonthLabel={({ date }) => date.toLocaleDateString(\"nl\", { month: \"short\" })}\n                renderSelectedMonthLabel={({ date }) =>\n                    date.toLocaleDateString(\"nl\", { month: \"long\", year: \"numeric\" })\n                }\n                renderWeekDay={({ date }) => date.toLocaleDateString(\"nl\", { weekday: \"short\" })}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"ariaLabels","snippet":"const ariaLabels = () => (\n    <Example>\n        <Example.Item title=\"aria labels\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                nextYearAriaLabel=\"Test next year\"\n                nextMonthAriaLabel=\"Test next month\"\n                renderDateAriaLabel={() => \"Test date\"}\n                renderMonthAriaLabel={() => \"Test month\"}\n                previousYearAriaLabel=\"Test previous year\"\n                previousMonthAriaLabel=\"Test previous month\"\n                monthSelectionAriaLabel=\"Test month selection\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"monthSelection","snippet":"const monthSelection = () => (\n    <Example>\n        <Example.Item title=\"month selection\">\n            <Calendar defaultMonth={new Date(2020, 1)} />\n        </Example.Item>\n    </Example>\n);"},{"name":"keyboardNavigation","snippet":"const keyboardNavigation = () => (\n    <Example>\n        <Example.Item title=\"keyboard navigation\">\n            <Calendar defaultMonth={new Date(2020, 0)} />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Calendar, Example } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Calendar","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Calendar/Calendar.tsx","actualName":"Calendar","exportName":"default"}},"components-card":{"id":"components-card","name":"Card","path":"./src/components/Card/tests/Card.stories.tsx","stories":[{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: default\">\n            <Card>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title=\"padding: 2\">\n            <Card padding={2}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title=\"padding: 0\">\n            <Card padding={0}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive padding\", \"[s] 4\", \"[m+] 8\"]}>\n            <Card padding={{ s: 4, m: 8 }}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"},{"name":"selected","snippet":"const selected = () => (\n    <Example>\n        <Example.Item title=\"selected\">\n            <Card selected>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"},{"name":"elevated","snippet":"const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated\">\n            <Card elevated>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"},{"name":"bleed","snippet":"const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4\">\n            <Card bleed={4}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n        <Example.Item title={[\"responsive bleed\", \"[s] 4\", \"[m+] 0\"]}>\n            <Card bleed={{ s: 4, m: 0 }}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"},{"name":"height","snippet":"const height = () => (\n    <Example>\n        <Example.Item title=\"height: 200px\">\n            <Card height=\"200px\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"onClick","snippet":"const onClick = () => <Card onClick={fn()}>Trigger</Card>;"},{"name":"href","snippet":"const href = () => <Card href=\"https://reshaped.so\">Trigger</Card>;"},{"name":"as","snippet":"const as = () => <Card as=\"span\" attributes={{ \"data-testid\": \"root\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Card className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Card, Example, Placeholder } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Card","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Card/Card.tsx","actualName":"Card","exportName":"default"}},"components-carousel":{"id":"components-carousel","name":"Carousel","path":"./src/components/Carousel/tests/Carousel.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Carousel attributes={{ \"data-testid\": \"test-id\" }} visibleItems={3}>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n    </Carousel>\n);"},{"name":"visibleItems","snippet":"const visibleItems = () => (\n    <Example>\n        <Example.Item title=\"visibleItems: 3\">\n            <Carousel visibleItems={3}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive visibleItems\", \"s: 2, m+ 3\"]}>\n            <Carousel visibleItems={{ s: 2, m: 3 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title=\"visibleItems: auto\">\n            <Carousel>\n                <Placeholder h={100} />\n                <Placeholder h={100} w={200} />\n                <Placeholder h={100} w={300} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"},{"name":"gap","snippet":"const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 2, visibleItems 3\">\n            <Carousel visibleItems={3} gap={2}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"gap: responsive, visibleItems: 3\", \"s: 2, l: 8\"]}>\n            <Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"},{"name":"bleed","snippet":"const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4, visibleItems: 3\">\n            <Carousel visibleItems={3} bleed={4}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive bleed, visibleItems: 3\", \"[s] 4, [l+] 0\"]}>\n            <Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"},{"name":"navigationDisplay","snippet":"const navigationDisplay = () => (\n    <Example>\n        <Example.Item title=\"navigationDisplay: hidden\">\n            <Carousel\n                visibleItems={3}\n                navigationDisplay=\"hidden\"\n                attributes={{ \"data-testid\": \"test-id\" }}\n            >\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"},{"name":"instanceRef","snippet":"const instanceRef = (args) => {\n    const carouselRef = React.useRef<CarouselInstanceRef>(null);\n    const [index, setIndex] = React.useState(0);\n\n    return (\n        <Example>\n            <Example.Item title=\"instanceRef, onChange\">\n                <View gap={3}>\n                    <View gap={3} direction=\"row\" align=\"center\">\n                        <Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>\n                        <Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>\n                        <Button onClick={() => carouselRef.current?.navigateTo(3)}>To 3</Button>\n                        <View.Item>Index: {index}</View.Item>\n                    </View>\n                    <Carousel\n                        visibleItems={2}\n                        instanceRef={carouselRef}\n                        navigationDisplay=\"hidden\"\n                        onChange={(changeArgs) => {\n                            args.handleChange(changeArgs);\n                            setIndex(changeArgs.index);\n                        }}\n                    >\n                        <Placeholder h={100}>Item 0</Placeholder>\n                        <Placeholder h={100}>Item 1</Placeholder>\n                        <Placeholder h={100}>Item 2</Placeholder>\n                        <Placeholder h={100}>Item 3</Placeholder>\n                        <Placeholder h={100}>Item 4</Placeholder>\n                        <Placeholder h={100}>Item 5</Placeholder>\n                    </Carousel>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Carousel visibleItems={2} className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder h={100}>Item 0</Placeholder>\n            <Placeholder h={100}>Item 1</Placeholder>\n            <Placeholder h={100}>Item 2</Placeholder>\n            <Placeholder h={100}>Item 3</Placeholder>\n            <Placeholder h={100}>Item 4</Placeholder>\n            <Placeholder h={100}>Item 5</Placeholder>\n        </Carousel>\n    </div>\n);"}],"import":"import { Button, Carousel, Example, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[{"name":"navigateTo","docblock":null,"modifiers":[],"params":[{"name":"index","optional":false,"type":{"name":"number"}}],"returns":null}],"displayName":"Carousel","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Carousel/Carousel.tsx","actualName":"Carousel","exportName":"default"}},"components-checkbox":{"id":"components-checkbox","name":"Checkbox","path":"./src/components/Checkbox/tests/Checkbox.stories.tsx","stories":[{"name":"render","snippet":"const render = () => (\n    <Checkbox name=\"test-name\" value=\"test-value\">\n        Content\n    </Checkbox>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"small\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"small\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"medium\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"medium\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"large\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"large\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: responsive, s: small, m: large\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size={{ s: \"small\", m: \"large\" }} defaultChecked>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Checkbox name=\"animal\" value=\"dog\" hasError>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n        <Example.Item title=\"disabled, checked\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled checked>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n        <Example.Item title=\"disabled, indeterminate\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled indeterminate>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n    </Example>\n);"},{"name":"checked","snippet":"const checked = () => <Checkbox name=\"test-name\" value=\"test-value\" checked onChange={fn()}>Content\n            </Checkbox>;"},{"name":"defaultChecked","snippet":"const defaultChecked = () => <Checkbox name=\"test-name\" value=\"test-value\" defaultChecked onChange={fn()}>Content\n            </Checkbox>;"},{"name":"indeterminate","snippet":"const indeterminate = () => (\n    <Checkbox name=\"test-name\" value=\"test-value\" indeterminate>\n        Content\n    </Checkbox>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Checkbox className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Checkbox>\n    </div>\n);"}],"import":"import { Checkbox, Example, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Checkbox","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Checkbox/Checkbox.tsx","actualName":"Checkbox","exportName":"default"}},"components-checkboxgroup":{"id":"components-checkboxgroup","name":"CheckboxGroup","path":"./src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx","stories":[{"name":"value","snippet":"const value = () => <View gap={2}>\n    <CheckboxGroup name=\"test-name\" value={[\"1\"]} onChange={fn()}>\n        {/* checked should be ignored */}\n        <Checkbox value=\"1\" checked={false}>Content\n                            </Checkbox>\n        <Checkbox value=\"2\">Content 2</Checkbox>\n    </CheckboxGroup>\n</View>;"},{"name":"defaultValue","snippet":"const defaultValue = () => <View gap={2}>\n    <CheckboxGroup name=\"test-name\" defaultValue={[\"1\"]} onChange={fn()}>\n        {/* checked should be ignored */}\n        <Checkbox value=\"1\" checked={false}>Content\n                            </Checkbox>\n        <Checkbox value=\"2\">Content 2</Checkbox>\n    </CheckboxGroup>\n</View>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <CheckboxGroup name=\"test-name\" disabled>\n        <Checkbox value=\"test-value\">Item 1</Checkbox>\n        <Checkbox value=\"test-value-2\">Item 2</Checkbox>\n    </CheckboxGroup>\n);"}],"import":"import { Checkbox, CheckboxGroup, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"CheckboxGroup","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/CheckboxGroup/CheckboxGroup.tsx","actualName":"CheckboxGroup","exportName":"default"}},"components-contextmenu":{"id":"components-contextmenu","name":"ContextMenu","path":"./src/components/ContextMenu/tests/ContextMenu.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"base\">\n            <div style={{ height: 200, overflow: \"auto\" }}>\n                <ContextMenu>\n                    <View height=\"400px\" backgroundColor=\"neutral-faded\" borderRadius=\"medium\" />\n\n                    <ContextMenu.Content>\n                        <ContextMenu.Item>Item 1</ContextMenu.Item>\n                        <ContextMenu.Item>Item 2</ContextMenu.Item>\n                    </ContextMenu.Content>\n                </ContextMenu>\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"handlers","snippet":"const handlers = () => <div style={{ height: 200, overflow: \"auto\" }} data-testid=\"scroll\">\n    <ContextMenu onOpen={fn()} onClose={fn()}>\n        <View\n            height=\"400px\"\n            backgroundColor=\"neutral-faded\"\n            borderRadius=\"medium\"\n            attributes={{ \"data-testid\": \"root\" }} />\n        <ContextMenu.Content>\n            <ContextMenu.Item>Item</ContextMenu.Item>\n        </ContextMenu.Content>\n    </ContextMenu>\n</div>;"}],"import":"import { ContextMenu, Example, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ContextMenu","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ContextMenu/ContextMenu.tsx","actualName":"ContextMenu","exportName":"default"}},"components-divider":{"id":"components-divider","name":"Divider","path":"./src/components/Divider/tests/Divider.stories.tsx","stories":[{"name":"rendering","snippet":"const rendering = () => (\n    <Example>\n        <Example.Item title=\"default rendering\">\n            <Divider />\n        </Example.Item>\n\n        <Example.Item title={[\"blank rendering\", \"box should overlap with divider\"]}>\n            <View width=\"40px\" height=\"10px\" backgroundColor=\"primary\" />\n            <Divider blank />\n        </Example.Item>\n    </Example>\n);"},{"name":"vertical","snippet":"const vertical = () => (\n    <Example>\n        <Example.Item title=\"vertical\">\n            <View gap={3} direction=\"row\" align=\"stretch\">\n                <Placeholder />\n                <View.Item>\n                    <Divider vertical />\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive vertical\", \"[s] true\", \"[m+]: false\"]}>\n            <View gap={3} direction={{ s: \"row\", m: \"column\" }} align=\"stretch\">\n                <Placeholder />\n                <View.Item>\n                    <Divider vertical={{ s: true, m: false }} />\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"label","snippet":"const label = () => {\n    return (\n        <Example>\n            <Example.Item title=\"alignment\">\n                <View gap={4}>\n                    <Divider>Centered label</Divider>\n                    <Divider contentPosition=\"start\">Start label</Divider>\n                    <Divider contentPosition=\"end\">End label</Divider>\n                </View>\n            </Example.Item>\n\n            <Example.Item title=\"responsive\">\n                <View gap={3} direction={{ s: \"column\", m: \"row\" }} align=\"stretch\">\n                    <Placeholder />\n                    <View.Item>\n                        <Divider vertical={{ s: false, m: true }}>or pick second option</Divider>\n                    </View.Item>\n                    <Placeholder />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Divider className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Divider, Example, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Divider","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Divider/Divider.tsx","actualName":"Divider","exportName":"default"}},"components-dropdownmenu":{"id":"components-dropdownmenu","name":"DropdownMenu","path":"./src/components/DropdownMenu/tests/DropdownMenu.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title=\"position: default\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <DropdownMenu position=\"end\">\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n\n        <Example.Item title={[\"position: top-start\", \"should change to top-start to fit viewport\"]}>\n            <DropdownMenu position=\"top-end\">\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n        <div style={{ height: 2000 }} />\n    </Example>\n);"},{"name":"sections","snippet":"const sections = () => (\n    <Example>\n        <Example.Item title=\"2 sections\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Section>\n                        <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                    </DropdownMenu.Section>\n\n                    <DropdownMenu.Section>\n                        <DropdownMenu.Item>Item 3</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 4</DropdownMenu.Item>\n                    </DropdownMenu.Section>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"},{"name":"submenu","snippet":"const submenu = () => (\n    <Example>\n        <Example.Item title=\"submenu\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item onClick={() => {}}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger>Item 3</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2-1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2-2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger disabled>Item 4, disabled</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 3-1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 3-2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"},{"name":"defaultActive","snippet":"const defaultActive = () => <DropdownMenu onOpen={fn()} onClose={fn()} defaultActive>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"},{"name":"active","snippet":"const active = () => <DropdownMenu onOpen={fn()} onClose={fn()} active>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"},{"name":"activeFalse","snippet":"const activeFalse = () => <DropdownMenu onOpen={fn()} onClose={fn()} active={false}>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <DropdownMenu active>\n            <DropdownMenu.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n                <DropdownMenu.Item>Item</DropdownMenu.Item>\n            </DropdownMenu.Content>\n        </DropdownMenu>\n    </div>\n);"},{"name":"testScroll","snippet":"const testScroll = () => (\n    <Example>\n        <Example.Item title=\"Scrolls on page mount to the dropdown\">\n            <div style={{ height: 1000 }} />\n            <DropdownMenu position=\"end\" key=\"scroll\" defaultActive>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"},{"name":"testTheme","snippet":"const testTheme = () => (\n    <Example>\n        <Example.Item title=\"switch color mode while dropdown is active and check that it still works\">\n            <ThemeSwitching />\n        </Example.Item>\n        <Example.Item title=\"dropdown inherits multiple themes\">\n            <ThemeMultiple />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, DropdownMenu, Example, Theme, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"DropdownMenu","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/DropdownMenu/DropdownMenu.tsx","actualName":"DropdownMenu","exportName":"default"}},"components-fileupload":{"id":"components-fileupload","name":"FileUpload","path":"./src/components/FileUpload/tests/FileUpload.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"Base upload with previews\">\n            <Demo />\n        </Example.Item>\n        <Example.Item title=\"With trigger\">\n            <FileUpload name=\"file\">\n                <div>\n                    Drop files to attach, or{\" \"}\n                    <FileUpload.Trigger>\n                        <Link variant=\"plain\">browse</Link>\n                    </FileUpload.Trigger>\n                </div>\n            </FileUpload>\n        </Example.Item>\n    </Example>\n);"},{"name":"inline","snippet":"const inline = () => {\n    return (\n        <Example>\n            <Example.Item title=\"inline\">\n                <FileUpload name=\"file\" inline onChange={console.log}>\n                    <View padding={2} paddingInline={3}>\n                        Upload\n                    </View>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"variant headless\">\n                <FileUpload name=\"file2\" variant=\"headless\" onChange={console.log}>\n                    <Button variant=\"outline\" fullWidth>\n                        Upload\n                    </Button>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"variant headless, inline\">\n                <FileUpload name=\"file2\" variant=\"headless\" inline onChange={console.log}>\n                    <Button>Upload</Button>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"inline, render props\">\n                <FileUpload name=\"file3\" variant=\"headless\" inline onChange={console.log}>\n                    {(props) => <Button highlighted={props.highlighted}>Upload</Button>}\n                </FileUpload>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"height","snippet":"const height = () => (\n    <Example>\n        <Example.Item title=\"Custom height\">\n            <FileUpload name=\"file\" height=\"300px\">\n                <View gap={3}>\n                    <Icon svg={IconMic} size={8} />\n                    Drop files to attach\n                </View>\n            </FileUpload>\n        </Example.Item>\n    </Example>\n);"},{"name":"onChange","snippet":"const onChange = () => <div data-testid=\"root\">\n    <FileUpload name=\"test-name\" onChange={fn()}>Content\n                    </FileUpload>\n</div>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <FileUpload\n            name=\"name\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ id: \"test-input-id\" }}\n        >\n            Content\n        </FileUpload>\n    </div>\n);"}],"import":"import { Button, Example, FileUpload, Icon, Image, Link, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"FileUpload","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/FileUpload/FileUpload.tsx","actualName":"FileUpload","exportName":"default"}},"components-hotkey":{"id":"components-hotkey","name":"Hotkey","path":"./src/components/Hotkey/tests/Hotkey.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n\t<Example>\n\t\t<Example.Item title=\"Base\">\n\t\t\t<Demo />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"Active\">\n\t\t\t<Hotkey active>⌘K</Hotkey>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"Inside input slot\">\n\t\t\t<View width=\"300px\">\n\t\t\t\t<TextField\n\t\t\t\t\tname=\"hey\"\n\t\t\t\t\tendSlot={<Demo />}\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"hotkey test\" }}\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Example.Item>\n\t</Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Hotkey className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            ⌘K\n        </Hotkey>\n    </div>\n);"}],"import":"import { Example, Hotkey, TextField, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Hotkey","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Hotkey/Hotkey.tsx","actualName":"Hotkey","exportName":"default"}},"components-link":{"id":"components-link","name":"Link","path":"./src/components/Link/tests/Link.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: underline\">\n            <Link href=\"http://reshaped.so\" attributes={{ target: \"_blank\" }}>\n                Reshaped\n            </Link>\n        </Example.Item>\n        <Example.Item title=\"variant: plain\">\n            <Link onClick={() => {}} variant=\"plain\">\n                Link\n            </Link>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary\">\n            <Link color=\"primary\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Link color=\"critical\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Link color=\"positive\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <Link color=\"warning\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <Link color=\"inherit\">Link</Link>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"icon, variant: underline\">\n            <Link icon={IconZap}>Link</Link>\n        </Example.Item>\n        <Example.Item title=\"icon, variant: plain\">\n            <Link icon={IconZap} variant=\"plain\">\n                Link\n            </Link>\n        </Example.Item>\n        <Example.Item\n            title={[\"icon, variant: underline\", \"should inherit display-1 size from the parent\"]}\n        >\n            <Text variant=\"title-3\">\n                <Link icon={IconZap} variant=\"underline\">\n                    Instant delivery\n                </Link>\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"href","snippet":"const href = () => <Link href=\"https://reshaped.so\">Trigger</Link>;"},{"name":"onClick","snippet":"const onClick = () => <Link onClick={fn()}>Trigger</Link>;"},{"name":"hrefOnClick","snippet":"const hrefOnClick = (args) => (\n    <Link\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </Link>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Link disabled onClick={() => {}}>\n        Trigger\n    </Link>\n);"},{"name":"render","snippet":"const render = () => <Link render={(props) => <section {...props} />}>Trigger</Link>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Link className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Link>\n    </div>\n);"},{"name":"testMultilineInText","snippet":"const testMultilineInText = () => (\n    <Example>\n        <Example.Item title=\"should wrap inside the text\">\n            <div>\n                Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;\n                <Link href=\"/\">this very very long link</Link> to it.\n            </div>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, Link, Text } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Link","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Link/Link.tsx","actualName":"Link","exportName":"default"}},"components-loader":{"id":"components-loader","name":"Loader","path":"./src/components/Loader/tests/Loader.stories.tsx","stories":[{"name":"size","snippet":"const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: medium\">\n                <Loader size=\"medium\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title=\"size: small\">\n                <Loader size=\"small\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title=\"size: large\">\n                <Loader size=\"large\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title={[\"responsive size\", \"[s] small\", \"[m+] medium\"]}>\n                <Loader size={{ s: \"small\", m: \"medium\" }} ariaLabel=\"Loading\" />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary\">\n            <Loader ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Loader color=\"critical\" ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Loader color=\"positive\" ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <Loader color=\"inherit\" ariaLabel=\"Loading\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"ariaLabel","snippet":"const ariaLabel = () => <Loader ariaLabel=\"Loading\" attributes={{ \"data-testid\": \"root\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Loader className=\"test-classname\" attributes={{ id: \"test-id\" }} ariaLabel=\"Loading\" />\n    </div>\n);"}],"import":"import { Example, Loader } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Loader","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Loader/Loader.tsx","actualName":"Loader","exportName":"default"}},"components-menuitem":{"id":"components-menuitem","name":"MenuItem","path":"./src/components/MenuItem/tests/MenuItem.stories.tsx","stories":[{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <MenuItem size=\"small\" icon={IconZap} onClick={() => {}} endSlot={<Hotkey>⌘K</Hotkey>}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <MenuItem icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <MenuItem size=\"large\" icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title={[\"responsive size\", \"[s] small\", \"[m] medium\", \"[l+] large\"]}>\n            <MenuItem size={{ s: \"small\", m: \"medium\", l: \"large\" }} icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <MenuItem color=\"neutral\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <MenuItem color=\"primary\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <MenuItem color=\"critical\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"selected","snippet":"const selected = () => (\n    <Example>\n        <Example.Item title=\"selected, color: neutral\">\n            <MenuItem color=\"neutral\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"selected, color: primary\">\n            <MenuItem color=\"primary\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"selected, color: critical\">\n            <MenuItem color=\"critical\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"roundedCorners","snippet":"const roundedCorners = () => (\n    <Example>\n        <Example.Item title=\"roundedCorners\">\n            <MenuItem roundedCorners selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive roundedCorners\", \"[s]: false\", \"[m+]: true\"]}>\n            <MenuItem roundedCorners={{ s: false, m: true }} selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"slots","snippet":"const slots = () => (\n    <Example>\n        <Example.Item title=\"startSlot, endSlot, selected\">\n            <MenuItem startSlot={<Placeholder h={20} />} endSlot={<Placeholder h={20} />} selected>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"aligner","snippet":"const aligner = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem size=\"small\" selected onClick={() => {}}>\n                        Menu item\n                    </MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem selected>Menu item</MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem size=\"large\" selected>\n                        Menu item\n                    </MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"href","snippet":"const href = () => <MenuItem href=\"https://reshaped.so\">Trigger</MenuItem>;"},{"name":"onClick","snippet":"const onClick = () => <MenuItem onClick={fn()}>Trigger</MenuItem>;"},{"name":"hrefOnClick","snippet":"const hrefOnClick = (args) => (\n    <MenuItem\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </MenuItem>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <MenuItem disabled onClick={() => {}}>\n        Trigger\n    </MenuItem>\n);"},{"name":"as","snippet":"const as = () => (\n    <Example>\n        <Example.Item title=\"render, disabled\">\n            <MenuItem\n                disabled\n                onClick={() => {}}\n                render={(props) => <section {...props} />}\n                attributes={{ \"data-testid\": \"render-el\" }}\n            >\n                Trigger\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <MenuItem className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </MenuItem>\n    </div>\n);"},{"name":"alignerClassName","snippet":"const alignerClassName = () => (\n    <div data-testid=\"root\">\n        <MenuItem.Aligner className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <MenuItem>Trigger</MenuItem>\n        </MenuItem.Aligner>\n    </div>\n);"}],"import":"import { Example, Hotkey, MenuItem, Placeholder, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"MenuItem","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/MenuItem/MenuItem.tsx","actualName":"MenuItem","exportName":"default"}},"components-modal":{"id":"components-modal","name":"Modal","path":"./src/components/Modal/tests/Modal.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title={[\"responsive position\", \"[s] full-screen\", \"[m] center\", \"[l] end\"]}>\n            <Demo position={{ s: \"full-screen\", m: \"center\", l: \"end\" }} />\n        </Example.Item>\n        <Example.Item title=\"position: center\">\n            <Demo position=\"center\" />\n        </Example.Item>\n        <Example.Item title=\"position: bottom\">\n            <Demo position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"position: start\">\n            <Demo position=\"start\" />\n        </Example.Item>\n        <Example.Item title=\"position: end\">\n            <Demo position=\"end\" />\n        </Example.Item>\n        <Example.Item title=\"position: full-screen\">\n            <Demo position=\"full-screen\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: default\">\n                <Demo />\n            </Example.Item>\n            <Example.Item title=\"size: 300px\">\n                <Demo size=\"300px\" />\n            </Example.Item>\n            <Example.Item\n                title={[\"size: 800px\", \"should have max width of 100% minus gaps on the sides\"]}\n            >\n                <Demo size=\"800px\" />\n            </Example.Item>\n            <Example.Item\n                title={[\n                    \"responsive size, responsive position\",\n                    \"[s] auto\",\n                    \"[m+] 600px\",\n                    \"bottom position changes height instead of width\",\n                ]}\n            >\n                <Demo\n                    position={{ s: \"bottom\", m: \"center\", l: \"end\" }}\n                    size={{ s: \"auto\", m: \"600px\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 0\">\n            <Demo padding={0} />\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <Demo padding={6} />\n        </Example.Item>\n        <Example.Item title={[\"responsive padding\", \"[s] 2\", \"[m+]: 6\"]}>\n            <Demo padding={{ s: 2, m: 6 }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"overflow","snippet":"const overflow = () => (\n    <Example>\n        <Example.Item title=\"default overflow\">\n            <Demo>\n                <div\n                    style={{\n                        position: \"absolute\",\n                        top: -32,\n                        left: -32,\n                        height: 100,\n                        width: 100,\n                        background: \"tomato\",\n                    }}\n                />\n            </Demo>\n        </Example.Item>\n\n        <Example.Item title=\"overflow: visible\">\n            <Demo overflow=\"visible\">\n                <div\n                    style={{\n                        position: \"absolute\",\n                        top: -32,\n                        left: -32,\n                        height: 100,\n                        width: 100,\n                        background: \"tomato\",\n                    }}\n                />\n            </Demo>\n        </Example.Item>\n    </Example>\n);"},{"name":"composition","snippet":"const composition = () => (\n    <Example>\n        <Example.Item title=\"title, subtitle, dismissible\">\n            <Demo title=\"Modal title\" subtitle=\"Modal subtitle\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"overlay","snippet":"const overlay = () => (\n    <Example>\n        <Example.Item title=\"transparentOverlay, doesn't lock scroll\">\n            <Demo transparentOverlay />\n        </Example.Item>\n        <Example.Item title=\"blurredOverlay\">\n            <Demo blurredOverlay />\n        </Example.Item>\n        <View height=\"1000px\" />\n    </Example>\n);"},{"name":"flags","snippet":"const flags = () => {\n    return (\n        <Example>\n            <Example.Item title=\"disableCloseOnOutsideClick\">\n                <Demo disableCloseOnOutsideClick onClose={fn()} active />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"containerRef","snippet":"const containerRef = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const containerRef2 = React.useRef<HTMLDivElement>(null);\n    const toggle = useToggle();\n    const toggle2 = useToggle();\n\n    return (\n        <Example>\n            <Example.Item title={[\"in scrollable container\", \"scroll and then open\"]}>\n                <View\n                    attributes={{ ref: containerRef2 }}\n                    borderRadius=\"medium\"\n                    height=\"400px\"\n                    overflow=\"auto\"\n                    backgroundColor=\"neutral-faded\"\n                    padding={4}\n                >\n                    <View gap={4} align=\"start\">\n                        <Button onClick={toggle2.activate}>Open modal</Button>\n                        <View height=\"500px\" backgroundColor=\"primary\" width=\"500px\" borderRadius=\"medium\" />\n                    </View>\n                    <Modal\n                        containerRef={containerRef2}\n                        active={toggle2.active}\n                        onClose={toggle2.deactivate}\n                        position=\"end\"\n                    >\n                        <Placeholder />\n                    </Modal>\n                </View>\n            </Example.Item>\n            <Example.Item title=\"in static container\">\n                <View\n                    attributes={{ ref: containerRef }}\n                    borderRadius=\"medium\"\n                    height=\"400px\"\n                    overflow=\"hidden\"\n                    backgroundColor=\"neutral-faded\"\n                    padding={4}\n                >\n                    <Button onClick={toggle.activate}>Open modal</Button>\n                    <Modal\n                        containerRef={containerRef}\n                        active={toggle.active}\n                        onClose={toggle.deactivate}\n                        position=\"end\"\n                    >\n                        <Placeholder />\n                    </Modal>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"renderProps","snippet":"const renderProps = () => (\n    <Modal active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        <Modal.Title>Title</Modal.Title>\n        Content\n    </Modal>\n);"},{"name":"handlers","snippet":"const handlers = () => {\n    const overlayToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>\n            <Modal\n                active={overlayToggle.active}\n                onClose={(closeArgs) => {\n                    overlayToggle.deactivate();\n                    args.handleClose(closeArgs);\n                }}\n                onOpen={fn()}\n                onAfterOpen={fn()}\n                onAfterClose={fn()}>\n                <Modal.Title>Title</Modal.Title>Content\n                                </Modal>\n        </>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <Modal active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        <Modal.Title>Title</Modal.Title>\n        Content\n    </Modal>\n);"},{"name":"edgeCases","snippet":"const edgeCases = () => {\n    const menuModalToggle = useToggle();\n    const menuModalToggleInner = useToggle();\n    const scrollModalToggle = useToggle();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    return (\n        <Example>\n            <Example.Item title=\"Scrolls with long content on touch devices\">\n                <Demo position=\"center\">\n                    <Button onClick={() => {}}>Action</Button>\n                    <View height=\"2000px\" backgroundColor=\"primary-faded\" />\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"keyboard focus stays on the modal first\">\n                <Demo title=\"Modal title\" autoFocus={false} />\n            </Example.Item>\n            <Example.Item title=\"trap focus works with custom children components\">\n                <Demo title=\"Modal title\">\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <Switch name=\"switch\" />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"focus moves to the input\">\n                <Demo\n                    title=\"Modal title\"\n                    onOpen={() => {\n                        inputRef.current?.focus();\n                    }}\n                >\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <TextField name=\"name\" inputAttributes={{ ref: inputRef }} />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"Focus moves to the input with autoFocus\">\n                <Demo title=\"Modal title\">\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <TextField\n                            name=\"name\"\n                            placeholder=\"autofocus\"\n                            inputAttributes={{ autoFocus: true }}\n                        />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"scrollable area in modal ignores swipe-to-close\">\n                <View gap={3} direction=\"row\">\n                    <Button onClick={scrollModalToggle.activate}>Open</Button>\n                    <Modal\n                        active={scrollModalToggle.active}\n                        onClose={scrollModalToggle.deactivate}\n                        size=\"300px\"\n                        position=\"bottom\"\n                    >\n                        <View\n                            height=\"1000px\"\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            padding={4}\n                        >\n                            Content\n                        </View>\n                    </Modal>\n                </View>\n            </Example.Item>\n            <Example.Item\n                title={[\n                    \"trap focus works correctly when it was already trapped\",\n                    \"focus return back to the dropdown trigger on modal close\",\n                    \"closing dropdown inside the modal doesn't close the modal\",\n                ]}\n            >\n                <DropdownMenu>\n                    <DropdownMenu.Trigger>\n                        {(attributes) => <Button attributes={attributes}>Open menu</Button>}\n                    </DropdownMenu.Trigger>\n                    <DropdownMenu.Content>\n                        <DropdownMenu.Item onClick={menuModalToggle.activate}>Open dialog</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                </DropdownMenu>\n                <Modal active={menuModalToggle.active} onClose={menuModalToggle.deactivate}>\n                    <View gap={3}>\n                        <DropdownMenu>\n                            <DropdownMenu.Trigger>\n                                {(attributes) => <Button attributes={attributes}>Open menu</Button>}\n                            </DropdownMenu.Trigger>\n                            <DropdownMenu.Content>\n                                <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                                <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                            </DropdownMenu.Content>\n                        </DropdownMenu>\n                        <Button onClick={menuModalToggleInner.activate}>Open dialog</Button>\n                        <Button onClick={menuModalToggle.deactivate}>Close</Button>\n                        <Modal active={menuModalToggleInner.active} onClose={menuModalToggleInner.deactivate}>\n                            <Button onClick={menuModalToggleInner.deactivate}>Close</Button>\n                        </Modal>\n                    </View>\n                </Modal>\n            </Example.Item>\n\n            <Example.Item title=\"disableSwipeGesture\">\n                <Demo disableSwipeGesture position=\"start\" />\n            </Example.Item>\n\n            <Example.Item title=\"scroll locks on open\">\n                <Demo />\n                <View height=\"1000px\" />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"trapFocusEdgeCases","snippet":"const trapFocusEdgeCases = () => {\n    const toggle = useToggle();\n\n    return (\n        <Example>\n            <Example.Item title=\"Radio should be navigatable with arrow keys\">\n                <Button onClick={toggle.activate}>Open modal</Button>\n                <Modal active={toggle.active} onClose={toggle.deactivate}>\n                    <View gap={2}>\n                        <Button onClick={() => {}}>Action 1</Button>\n                        <Radio name=\"radio\" value=\"1\">\n                            Option 1\n                        </Radio>\n                        <Radio name=\"radio\" value=\"2\">\n                            Option 2\n                        </Radio>\n                        <Button onClick={() => {}}>Action 2</Button>\n                    </View>\n                </Modal>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import {\n    Button,\n    Dismissible,\n    DropdownMenu,\n    Example,\n    Modal,\n    Placeholder,\n    Radio,\n    Switch,\n    TextField,\n    View,\n} from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Modal","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Modal/Modal.tsx","actualName":"Modal","exportName":"default"}},"components-numberfield":{"id":"components-numberfield","name":"NumberField","path":"./src/components/NumberField/tests/NumberField.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => {\n    return (\n        <Example>\n            <Example.Item title=\"variant: outline\">\n                <NumberField\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"variant: faded\">\n                <NumberField\n                    variant=\"faded\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"variant: headless\">\n                <NumberField\n                    variant=\"headless\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"size","snippet":"const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: small\">\n                <NumberField\n                    size=\"small\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    suffix=\"m2\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: medium\">\n                <NumberField\n                    size=\"medium\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: large\">\n                <NumberField\n                    size=\"large\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: xlarge\">\n                <NumberField\n                    size=\"xlarge\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"disabled","snippet":"const disabled = () => <NumberField\n    name=\"test-name\"\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    disabled\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"defaultValue","snippet":"const defaultValue = () => <NumberField\n    name=\"test-name\"\n    defaultValue={2}\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"value","snippet":"const value = () => <NumberField\n    name=\"test-name\"\n    value={2}\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"minMax","snippet":"const minMax = () => (\n    <NumberField\n        name=\"test-name\"\n        defaultValue={6}\n        min={5}\n        max={10}\n        increaseAriaLabel=\"Increase\"\n        decreaseAriaLabel=\"Decrease\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"},{"name":"step","snippet":"const step = () => (\n    <NumberField\n        name=\"test-name\"\n        defaultValue={6}\n        step={0.5}\n        increaseAriaLabel=\"Increase\"\n        decreaseAriaLabel=\"Decrease\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <NumberField\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n            increaseAriaLabel=\"Increase\"\n            decreaseAriaLabel=\"Decrease\"\n        />\n    </div>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <Example>\n        <Example.Item title=\"FormControl\">\n            <FormControl>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"FormControl, disabled\">\n            <FormControl disabled>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"FormControl, error\">\n            <FormControl hasError>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"valueChanges","snippet":"const valueChanges = () => (\n    <Example>\n        <Example.Item title=\"keyboard\">\n            <NumberField\n                name=\"name\"\n                increaseAriaLabel=\"Increase\"\n                decreaseAriaLabel=\"Decrease\"\n                inputAttributes={{ \"aria-label\": \"Label\" }}\n            />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, FormControl, NumberField } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"NumberField","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/NumberField/NumberField.tsx","actualName":"NumberField","exportName":"default"}},"components-pagination":{"id":"components-pagination","name":"Pagination","path":"./src/components/Pagination/tests/Pagination.stories.tsx","stories":[{"name":"truncate","snippet":"const truncate = () => {\n    return (\n        <Example>\n            <Example.Item title=\"start\">\n                <Pagination\n                    total={10}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"middle\">\n                <Pagination\n                    total={10}\n                    defaultPage={5}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"end\">\n                <Pagination\n                    total={10}\n                    defaultPage={10}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"no truncation\">\n                <Pagination\n                    total={4}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"render","snippet":"const render = () => (\n    <div data-testid=\"root\">\n        <Pagination\n            total={10}\n            previousAriaLabel=\"Previous\"\n            nextAriaLabel=\"Next\"\n            pageAriaLabel={(args) => `Page ${args.page}`}\n        />\n    </div>\n);"},{"name":"defaultPage","snippet":"const defaultPage = () => <div data-testid=\"root\">\n    <Pagination\n        total={10}\n        defaultPage={2}\n        onChange={fn()}\n        previousAriaLabel=\"Previous\"\n        nextAriaLabel=\"Next\" />\n</div>;"},{"name":"page","snippet":"const page = () => <div data-testid=\"root\">\n    <Pagination\n        total={10}\n        page={2}\n        onChange={fn()}\n        previousAriaLabel=\"Previous\"\n        nextAriaLabel=\"Next\" />\n</div>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Pagination\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            total={10}\n            previousAriaLabel=\"Previous\"\n            nextAriaLabel=\"Next\"\n        />\n    </div>\n);"}],"import":"import { Example, Pagination } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Pagination","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Pagination/Pagination.tsx","actualName":"Pagination","exportName":"default"}},"components-pinfield":{"id":"components-pinfield","name":"PinField","path":"./src/components/PinField/tests/PinField.stories.tsx","stories":[{"name":"base","snippet":"const base = () => <PinField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <PinField name=\"pin\" variant=\"faded\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <PinField name=\"pin\" size=\"small\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <PinField name=\"pin\" size=\"medium\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <PinField name=\"pin\" size=\"large\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <PinField name=\"pin\" size=\"xlarge\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: responsive, s: medium, m+: xlarge\">\n            <PinField\n                name=\"pin\"\n                size={{ s: \"medium\", m: \"xlarge\" }}\n                inputAttributes={{ \"aria-label\": \"Pin\" }}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"valueLength","snippet":"const valueLength = () => (\n    <PinField name=\"test-name\" valueLength={6} inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"},{"name":"defaultValue","snippet":"const defaultValue = () => <PinField\n    name=\"test-name\"\n    onChange={fn()}\n    defaultValue=\"12\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"value","snippet":"const value = () => <PinField\n    name=\"test-name\"\n    onChange={fn()}\n    value=\"12\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"pattern","snippet":"const pattern = () => <PinField\n    name=\"test-name\"\n    pattern=\"alphabetic\"\n    defaultValue=\"ab\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <PinField\n            name=\"test-name\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ \"aria-label\": \"Label\", id: \"test-input-id\" }}\n        />\n    </div>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <FormControl>\n        <FormControl.Label>Label</FormControl.Label>\n        <PinField name=\"test-name\" />\n    </FormControl>\n);"},{"name":"keyboard","snippet":"const keyboard = () => <PinField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"}],"import":"import { Example, FormControl, PinField } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"PinField","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/PinField/PinField.tsx","actualName":"PinField","exportName":"default"}},"components-popover":{"id":"components-popover","name":"Popover","path":"./src/components/Popover/tests/Popover.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title=\"position: bottom\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"bottom-start\" />\n                <Demo position=\"bottom\" />\n                <Demo position=\"bottom-end\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: top\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"top-start\" />\n                <Demo position=\"top\" />\n                <Demo position=\"top-end\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: start\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"start-top\" />\n                <Demo position=\"start\" />\n                <Demo position=\"start-bottom\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: end\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"end-top\" />\n                <Demo position=\"end\" />\n                <Demo position=\"end-bottom\" defaultActive />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"widthNumber","snippet":"const widthNumber = () => <Demo width=\"400px\" defaultActive />;"},{"name":"widthFull","snippet":"const widthFull = () => <Demo width=\"100%\" defaultActive />;"},{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 0\">\n            <Demo padding={0} />\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <Demo padding={6} defaultActive />\n        </Example.Item>\n    </Example>\n);"},{"name":"elevation","snippet":"const elevation = () => (\n    <Example>\n        <Example.Item title=\"elevation: raised\">\n            <Demo elevation=\"raised\" defaultActive />\n        </Example.Item>\n    </Example>\n);"},{"name":"defaultActive","snippet":"const defaultActive = () => <Popover onOpen={fn()} onClose={fn()} defaultActive>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"},{"name":"active","snippet":"const active = () => <Popover onOpen={fn()} onClose={fn()} active>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"},{"name":"activeFalse","snippet":"const activeFalse = () => <Popover onOpen={fn()} onClose={fn()} active={false}>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"},{"name":"dismissible","snippet":"const dismissible = () => <Popover onClose={fn()} defaultActive>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>\n        <Popover.Dismissible\n            closeAriaLabel=\"Close\"\n            attributes={{ \"data-testid\": \"test-id\" }}\n            className=\"test-classname\">Content\n                            </Popover.Dismissible>\n    </Popover.Content>\n</Popover>;"},{"name":"autoFocus","snippet":"const autoFocus = () => (\n    <Example>\n        <Example.Item title=\"autoFocus=false\">\n            <Demo autoFocus={false} />\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Popover active>\n            <Popover.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </Popover.Trigger>\n            <Popover.Content className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n                Content\n            </Popover.Content>\n        </Popover>\n    </div>\n);"},{"name":"testNested","snippet":"const testNested = () => (\n    <Popover position=\"bottom\">\n        <Popover.Trigger>\n            {(attributes) => <Button attributes={attributes}>Open</Button>}\n        </Popover.Trigger>\n        <Popover.Content>\n            <View gap={2} align=\"start\">\n                Popover content\n                <Popover>\n                    <Popover.Trigger>\n                        {(attributes) => <Button attributes={attributes}>Open</Button>}\n                    </Popover.Trigger>\n                    <Popover.Content>Hello</Popover.Content>\n                </Popover>\n            </View>\n        </Popover.Content>\n    </Popover>\n);"},{"name":"testWithTooltip","snippet":"const testWithTooltip = () => (\n    <View paddingTop={10}>\n        <Tooltip position=\"top\" text=\"Hello\">\n            {(tooltipAttributes) => (\n                <Popover position=\"bottom\">\n                    <Popover.Trigger>\n                        {(attributes) => (\n                            <Button\n                                attributes={{\n                                    ...attributes,\n                                    ...tooltipAttributes,\n                                }}\n                            >\n                                Open\n                            </Button>\n                        )}\n                    </Popover.Trigger>\n                    <Popover.Content>\n                        <View gap={2} align=\"start\">\n                            Popover content\n                            <Button onClick={() => {}}>Button</Button>\n                        </View>\n                    </Popover.Content>\n                </Popover>\n            )}\n        </Tooltip>\n    </View>\n);"},{"name":"testContentEditable","snippet":"const testContentEditable = () => {\n    const [active, setActive] = useState(false);\n\n    return (\n        <Popover>\n            <Popover.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </Popover.Trigger>\n            <Popover.Content>\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={() => {}}>Hello</Button>\n                    </View.Item>\n\n                    <ScrollArea height=\"100px\">\n                        <div\n                            style={{ height: \"200px\" }}\n                            contentEditable\n                            tabIndex={0}\n                            onInput={(e) => {\n                                setActive(e.currentTarget.innerText.startsWith(\"@\"));\n                            }}\n                            onKeyDown={(e) => {\n                                console.log(e.key);\n                                if (e.key === \"Enter\" && active) {\n                                    e.preventDefault();\n                                    e.currentTarget.innerText = \"@hello\";\n                                    setActive(false);\n                                }\n                            }}\n                        />\n                    </ScrollArea>\n\n                    <Popover\n                        active={active}\n                        onClose={() => setActive(false)}\n                        originCoordinates={{ x: 300, y: 300 }}\n                        trapFocusMode=\"selection-menu\"\n                    >\n                        <Popover.Content>\n                            <View gap={4}>\n                                <MenuItem onClick={() => {}}>Action</MenuItem>\n                                <MenuItem onClick={() => {}}>Close</MenuItem>\n                            </View>\n                        </Popover.Content>\n                    </Popover>\n                </View>\n            </Popover.Content>\n        </Popover>\n    );\n};"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: headless\">\n            <Popover variant=\"headless\" defaultActive position=\"bottom-start\">\n                <Popover.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </Popover.Trigger>\n                <Popover.Content>\n                    <View\n                        height=\"100px\"\n                        width=\"100px\"\n                        borderColor=\"primary\"\n                        borderRadius=\"medium\"\n                        backgroundColor=\"primary-faded\"\n                    />\n                </Popover.Content>\n            </Popover>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Example, MenuItem, Popover, ScrollArea, Tooltip, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Popover","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Popover/Popover.tsx","actualName":"Popover","exportName":"default"}},"components-progress":{"id":"components-progress","name":"Progress","path":"./src/components/Progress/tests/Progress.stories.tsx","stories":[{"name":"value","snippet":"const value = () => (\n    <Example>\n        <Example.Item title=\"value: 50\">\n            <Progress value={50} ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"value: 20, min: 0, max: 40\">\n            <Progress value={20} min={0} max={40} ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"value: 50, min: 0, max: 40\">\n            <Progress value={50} min={0} max={40} ariaLabel=\"rating value\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small, value: 50\">\n            <Progress value={50} size=\"small\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"size: medium, value: 50\">\n            <Progress value={50} size=\"medium\" ariaLabel=\"rating value\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: critical, value: 50\">\n            <Progress value={50} color=\"critical\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: warning, value: 50\">\n            <Progress value={50} color=\"warning\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive, value: 50\">\n            <Progress value={50} color=\"positive\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: media, value: 50\">\n            <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                <Progress value={50} color=\"media\" ariaLabel=\"rating value\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"duration","snippet":"const duration = () => {\n    const [active, setActive] = React.useState(false);\n\n    const handleChange = () => {\n        setActive((state) => !state);\n    };\n\n    return (\n        <Example>\n            <Example.Item title=\"duration: 2000\">\n                <View gap={3}>\n                    <View.Item>\n                        <Button onClick={handleChange}>Change</Button>\n                    </View.Item>\n\n                    <Progress value={active ? 100 : 0} duration={2000} ariaLabel=\"rating value\" />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"render","snippet":"const render = () => <Progress value={75} min={50} max={100} ariaLabel=\"progress\" />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Progress className=\"test-classname\" attributes={{ id: \"test-id\" }} ariaLabel=\"progress\" />\n    </div>\n);"}],"import":"import { Button, Example, Progress, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Progress","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Progress/Progress.tsx","actualName":"Progress","exportName":"default"}},"components-progressindicator":{"id":"components-progressindicator","name":"ProgressIndicator","path":"./src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const [activeIndex, setActiveIndex] = React.useState(0);\n    const total = 10;\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <View gap={4}>\n                    <View direction=\"row\" gap={2} align=\"center\">\n                        <Button\n                            onClick={() => {\n                                setActiveIndex((prev) => Math.max(0, prev - 1));\n                            }}\n                        >\n                            Previous\n                        </Button>\n                        <Button\n                            onClick={() => {\n                                setActiveIndex((prev) => Math.min(total - 1, prev + 1));\n                            }}\n                        >\n                            Next\n                        </Button>\n                        <Text weight=\"medium\">Index: {activeIndex}</Text>\n                    </View>\n\n                    <View borderRadius=\"medium\" overflow=\"hidden\" width=\"300px\">\n                        <Scrim\n                            position=\"bottom\"\n                            backgroundSlot={<View aspectRatio={16 / 9} backgroundColor=\"neutral-faded\" />}\n                        >\n                            <View align=\"center\">\n                                <ProgressIndicator total={total} activeIndex={activeIndex} color=\"media\" />\n                            </View>\n                        </Scrim>\n                    </View>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"color","snippet":"const color = () => {\n    return (\n        <Example>\n            <Example.Item title=\"color: primary\">\n                <ProgressIndicator total={10} activeIndex={5} color=\"primary\" />\n            </Example.Item>\n            <Example.Item title=\"color: media\">\n                <View borderRadius=\"medium\" overflow=\"hidden\" width=\"300px\">\n                    <Scrim\n                        position=\"bottom\"\n                        backgroundSlot={<View aspectRatio={16 / 9} backgroundColor=\"neutral-faded\" />}\n                    >\n                        <View align=\"center\">\n                            <ProgressIndicator total={10} activeIndex={5} color=\"media\" />\n                        </View>\n                    </Scrim>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"ariaLabel","snippet":"const ariaLabel = () => <ProgressIndicator total={10} className=\"test-classname\" ariaLabel=\"Progress\" />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <ProgressIndicator total={10} className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Button, Example, ProgressIndicator, Scrim, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ProgressIndicator","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ProgressIndicator/ProgressIndicator.tsx","actualName":"ProgressIndicator","exportName":"default"}},"components-radio":{"id":"components-radio","name":"Radio","path":"./src/components/Radio/tests/Radio.stories.tsx","stories":[{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"small\" defaultChecked>\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"medium\">\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"large\">\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: responsive, s: small, m: large\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size={{ s: \"small\", m: \"large\" }}>\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Radio name=\"error\" value=\"dog\" hasError>\n                Radio\n            </Radio>\n        </Example.Item>\n    </Example>\n);"},{"name":"render","snippet":"const render = () => (\n    <Radio name=\"test-name\" value=\"test-value\">\n        Content\n    </Radio>\n);"},{"name":"checked","snippet":"const checked = () => <Radio name=\"test-name\" value=\"test-value\" checked onChange={fn()}>Content\n            </Radio>;"},{"name":"checkedFalse","snippet":"const checkedFalse = () => <Radio name=\"test-name\" value=\"test-value\" checked={false} onChange={fn()}>Content\n            </Radio>;"},{"name":"defaultChecked","snippet":"const defaultChecked = () => <Radio name=\"test-name\" value=\"test-value\" defaultChecked onChange={fn()}>Content\n            </Radio>;"},{"name":"defaultCheckedFalse","snippet":"const defaultCheckedFalse = () => <Radio name=\"test-name\" value=\"test-value\" onChange={fn()}>Content\n            </Radio>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <Radio name=\"test-name\" value=\"test-value\" disabled>\n        Content\n    </Radio>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Radio className=\"test-classname\" attributes={{ id: \"test-id\" }} value=\"value\">\n            Content\n        </Radio>\n    </div>\n);"}],"import":"import { Example, Radio, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Radio","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Radio/Radio.tsx","actualName":"Radio","exportName":"default"}},"components-radiogroup":{"id":"components-radiogroup","name":"RadioGroup","path":"./src/components/RadioGroup/tests/RadioGroup.stories.tsx","stories":[{"name":"value","snippet":"const value = () => <RadioGroup name=\"test-name\" value=\"1\" onChange={fn()}>\n    {/* checked should be ignored */}\n    <Radio value=\"1\" checked={false}>Content\n                    </Radio>\n    <Radio value=\"2\">Content 2</Radio>\n</RadioGroup>;"},{"name":"defaultValue","snippet":"const defaultValue = () => <RadioGroup name=\"test-name\" defaultValue=\"1\" onChange={fn()}>\n    {/* checked should be ignored */}\n    <Radio value=\"1\" checked={false}>Content\n                    </Radio>\n    <Radio value=\"2\">Content 2</Radio>\n</RadioGroup>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <RadioGroup name=\"test-name\" disabled>\n        <Radio value=\"test-value\">Content</Radio>\n    </RadioGroup>\n);"}],"import":"import { Radio, RadioGroup } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"RadioGroup","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/RadioGroup/RadioGroup.tsx","actualName":"RadioGroup","exportName":"default"}},"components-resizable":{"id":"components-resizable","name":"Resizable","path":"./src/components/Resizable/tests/Resizable.stories.tsx","stories":[{"name":"direction","snippet":"const direction = () => {\n    return (\n        <Example>\n            <Example.Item title=\"row\">\n                <Resizable height=\"200px\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n            <Example.Item title=\"column\">\n                <Resizable height=\"400px\" direction=\"column\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n\n            {/* Test that page doesn't scroll on dragging */}\n            <div style={{ height: 2000 }} />\n        </Example>\n    );\n};"},{"name":"children","snippet":"const children = () => {\n    return (\n        <Example>\n            <Example.Item title=\"render props, row\">\n                <Resizable height=\"200px\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n            <Example.Item title=\"render props, column\">\n                <Resizable height=\"400px\" direction=\"column\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"bordered, row\">\n            <Resizable height=\"200px\" variant=\"bordered\">\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n            </Resizable>\n        </Example.Item>\n        <Example.Item title=\"bordered, column\">\n            <Resizable height=\"400px\" direction=\"column\" variant=\"bordered\">\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n            </Resizable>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Resizable className=\"test-classname\" attributes={{ id: \"test-id\" }} height=\"200px\">\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n        <Resizable.Handle />\n        <Resizable.Item minSize=\"200px\" maxSize=\"500px\" defaultSize=\"300px\">\n            <Panel />\n        </Resizable.Item>\n    </Resizable>\n);"},{"name":"layout","snippet":"const layout = () => (\n    <Resizable height=\"100px\" gap={8}>\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n        <Resizable.Handle />\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n    </Resizable>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Resizable className=\"test-classname\" attributes={{ id: \"test-id\" }} height=\"200px\">\n            <Resizable.Item>\n                <Panel />\n            </Resizable.Item>\n            <Resizable.Handle />\n            <Resizable.Item>\n                <Panel />\n            </Resizable.Item>\n        </Resizable>\n    </div>\n);"}],"import":"import { Button, Example, Resizable, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Resizable","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Resizable/Resizable.tsx","actualName":"Resizable","exportName":"default"}},"components-scrim":{"id":"components-scrim","name":"Scrim","path":"./src/components/Scrim/tests/Scrim.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title=\"position: center\">\n            <Scrim backgroundSlot={<Placeholder h={200} />}>Scrim</Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <Scrim position=\"bottom\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: top\">\n            <Scrim position=\"top\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: start\">\n            <Scrim position=\"start\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <Scrim position=\"end\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Scrim className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Scrim>\n    </div>\n);"},{"name":"composition","snippet":"const composition = () => (\n    <Example>\n        <Example.Item title=\"without backgroundSlot, size is based on the parent component\">\n            <div style={{ height: 300, position: \"relative\" }}>\n                <Scrim>Text</Scrim>\n            </div>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, Placeholder, Scrim } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Scrim","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Scrim/Scrim.tsx","actualName":"Scrim","exportName":"default"}},"components-select":{"id":"components-select","name":"Select","path":"./src/components/Select/tests/Select.stories.tsx","stories":[{"name":"nativeRender","snippet":"const nativeRender = () => (\n    <Example>\n        <Example.Item title=\"native with options prop\">\n            <Select\n                name=\"animal\"\n                id=\"animal-1\"\n                placeholder=\"Select an animal\"\n                options={[\n                    { label: \"Dog\", value: \"dog\" },\n                    { label: \"Turtle\", value: \"turtle\" },\n                ]}\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            />\n        </Example.Item>\n        <Example.Item title=\"native with option tags\">\n            <Select\n                name=\"animal\"\n                id=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n    </Example>\n);"},{"name":"customRender","snippet":"const customRender = () => (\n    <Example>\n        <Example.Item title=\"custom with options\">\n            <Select.Custom\n                name=\"animal\"\n                id=\"animal-1\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"native with option tags\">\n            <Select.Custom\n                name=\"animal-2\"\n                id=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Group label=\"Birds\">\n                    <Select.Option value=\"pigeon\">Pigeon</Select.Option>\n                    <Select.Option value=\"parrot\">Parrot</Select.Option>\n                </Select.Group>\n                <Select.Group label=\"Sea Mammals\">\n                    <Select.Option value=\"whale\">Whale</Select.Option>\n                    <Select.Option value=\"dolphin\">Dolphin</Select.Option>\n                </Select.Group>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"nativeHandlers","snippet":"const nativeHandlers = () => <Example>\n    <Example.Item title=\"native, uncontrolled, onChange\">\n        <Select\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n    <Example.Item title=\"native, controlled, onChange\">\n        <Select\n            name=\"animal-2\"\n            placeholder=\"Select an animal\"\n            value=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n    <Example.Item title=\"native, onFocus, onBlur, onClick\">\n        <Select\n            name=\"animal-3\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onFocus={fn()}\n            onBlur={fn()}\n            onClick={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n</Example>;"},{"name":"customHandlers","snippet":"const customHandlers = () => <Example>\n    <Example.Item title=\"custom, uncontrolled, onChange\">\n        <Select.Custom\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n    <Example.Item title=\"custom, controlled, onChange\">\n        <Select.Custom\n            name=\"animal-2\"\n            placeholder=\"Select an animal\"\n            value=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n    <Example.Item title=\"native, onFocus, onBlur, onClick\">\n        <Select.Custom\n            name=\"animal-3\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onFocus={fn()}\n            onBlur={fn()}\n            onClick={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n</Example>;"},{"name":"triggerOnly","snippet":"const triggerOnly = (args) => {\n    const toggle = useToggle();\n    const [value, setValue] = React.useState(\"Dog\");\n\n    const handleClick: SelectProps[\"onClick\"] = (e) => {\n        args.handleClick(e);\n        toggle.toggle();\n    };\n\n    return (\n        <Example>\n            <Example.Item title=\"trigger only, onClick\">\n                <Select\n                    name=\"animal\"\n                    placeholder=\"Select an animal\"\n                    onClick={handleClick}\n                    value=\"dog\"\n                    inputAttributes={{\n                        \"aria-label\": \"Select an animal\",\n                    }}\n                >\n                    {value}\n                </Select>\n                <Modal\n                    active={toggle.active}\n                    onClose={toggle.deactivate}\n                    position=\"bottom\"\n                    padding={2}\n                    attributes={{ \"aria-label\": \"Select an animal\" }}\n                >\n                    <div role=\"listbox\" aria-label=\"Select an animal\">\n                        <MenuItem\n                            roundedCorners\n                            onClick={() => {\n                                setValue(\"Dog\");\n                                toggle.deactivate();\n                            }}\n                            attributes={{\n                                role: \"option\",\n                            }}\n                        >\n                            Dog\n                        </MenuItem>\n                        <MenuItem\n                            roundedCorners\n                            attributes={{\n                                role: \"option\",\n                            }}\n                            onClick={() => {\n                                setValue(\"Turtle\");\n                                toggle.deactivate();\n                            }}\n                        >\n                            Turtle\n                        </MenuItem>\n                    </div>\n                </Modal>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"multiple","snippet":"const multiple = () => <Example>\n    <Example.Item title=\"multiple\">\n        <Select.Custom\n            multiple\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue={[\"dog\"]}\n            onChange={fn()}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n</Example>;"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded, native\">\n            <Select\n                variant=\"faded\"\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n\n        <Example.Item title=\"variant: faded, custom\">\n            <Select.Custom\n                variant=\"faded\"\n                name=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless, native\">\n            <Select\n                variant=\"headless\"\n                name=\"animal-3\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless, custom\">\n            <Select.Custom\n                variant=\"headless\"\n                name=\"animal-4\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <Select.Custom size=\"small\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <Select.Custom size=\"medium\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <Select.Custom size=\"large\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: xlarge\">\n            <Select.Custom size=\"xlarge\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"startSlot","snippet":"const startSlot = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Select.Custom name=\"animal\" placeholder=\"Select an animal\" icon={IconZap}>\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n\n        <Example.Item title=\"startSlot\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                startSlot={<Placeholder h={20} />}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"renderValue","snippet":"const renderValue = () => {\n    const options = [\n        {\n            value: \"1\",\n            label: \"Title 1\",\n            subtitle: \"Subtitle 1\",\n        },\n        {\n            value: \"2\",\n            label: \"Title 2\",\n            subtitle: \"Subtitle 2\",\n        },\n    ];\n\n    return (\n        <Example>\n            <Example.Item title=\"default renderer, single\">\n                <Select.Custom name=\"animal\" defaultValue=\"1\" placeholder=\"Nothing selected\">\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"default renderer, multiple\">\n                <Select.Custom name=\"animal\" defaultValue={[\"1\"]} multiple placeholder=\"Nothing selected\">\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"renderValue, single\">\n                <Select.Custom\n                    name=\"animal\"\n                    defaultValue=\"1\"\n                    placeholder=\"Nothing selected\"\n                    renderValue={(args) => <Badge>Title {args.value}</Badge>}\n                >\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"renderValue, multiple\">\n                <Select.Custom\n                    name=\"animal\"\n                    defaultValue={[\"1\"]}\n                    multiple\n                    placeholder=\"Nothing selected\"\n                    renderValue={(args) => <Badge>Titles {args.value.join(\", \")}</Badge>}\n                >\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Select.Custom name=\"animal\" placeholder=\"Select an animal\" hasError>\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, native\">\n            <Select\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                disabled\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n        <Example.Item title=\"disabled, custom\">\n            <Select.Custom\n                name=\"animal-2\"\n                placeholder=\"Select an animal\"\n                disabled\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <Example>\n        <Example.Item title=\"native, className, attributes, inputAttributes\">\n            <Select\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                className=\"native-class\"\n                attributes={{ id: \"test-id\" }}\n                inputAttributes={{ \"aria-label\": \"test-label\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n        <Example.Item title=\"custom, className, attributes, inputAttributes\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                className=\"custom-class\"\n                attributes={{ id: \"test-id\" }}\n                inputAttributes={{ \"aria-label\": \"test-label\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"fallback","snippet":"const fallback = () => (\n    <Example>\n        <Example.Item title=\"fallback\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                {[...Array(100)].map((_, index) => (\n                    <Select.Option key={index} value={`item-${index}`}>\n                        Item {index + 1}\n                    </Select.Option>\n                ))}\n            </Select.Custom>\n            <div style={{ height: \"1000px\" }}></div>\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                {[...Array(100)].map((_, index) => (\n                    <Select.Option key={index} value={`item-${index}`}>\n                        Item {index + 1}\n                    </Select.Option>\n                ))}\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <Example>\n        <Example.Item title=\"FormControl\">\n            <FormControl hasError>\n                <FormControl.Label>Animal</FormControl.Label>\n                <Select.Custom name=\"animal\" placeholder=\"Select an animal\">\n                    <Select.Option value=\"dog\">Dog</Select.Option>\n                    <Select.Option value=\"turtle\">Turtle</Select.Option>\n                </Select.Custom>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"testComposition","snippet":"const testComposition = () => (\n    <Example>\n        <Example.Item title=\"custom with options\">\n            <Select.Custom\n                name=\"animal\"\n                id=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Group>\n                    <Select.Option value=\"dog\">Dog</Select.Option>\n                    <Select.Option value=\"turtle\">Turtle</Select.Option>\n                </Select.Group>\n                <Select.Group>Hello</Select.Group>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Badge, Example, FormControl, MenuItem, Modal, Placeholder, Select, Text } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Select","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Select/Select.tsx","actualName":"Select","exportName":"default"}},"components-skeleton":{"id":"components-skeleton","name":"Skeleton","path":"./src/components/Skeleton/tests/Skeleton.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"text\">\n            <Skeleton />\n        </Example.Item>\n\n        <Example.Item title=\"view, rectangle\">\n            <Skeleton width=\"100px\" height=\"100px\" />\n        </Example.Item>\n\n        <Example.Item title=\"view, circle\">\n            <Skeleton width=\"100px\" height=\"100px\" borderRadius=\"circular\" />\n        </Example.Item>\n\n        <Example.Item title=\"view, rectangle, responsive\">\n            <Skeleton width={{ s: \"100px\", m: \"200px\" }} height={{ s: \"100px\", m: \"200px\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"radius","snippet":"const radius = () => (\n    <Example>\n        <Example.Item title=\"radius=small\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"small\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=medium\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"medium\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=large\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"large\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=circular\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"circular\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Skeleton className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Example, Skeleton } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Skeleton","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Skeleton/Skeleton.tsx","actualName":"Skeleton","exportName":"default"}},"components-slider":{"id":"components-slider","name":"Slider","path":"./src/components/Slider/tests/Slider.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"single, name\">\n            <Slider name=\"slider-single\" defaultValue={30} />\n        </Example.Item>\n        <Example.Item title=\"range, name\">\n            <Slider range name=\"slider-range\" defaultMinValue={30} defaultMaxValue={85} />\n        </Example.Item>\n        <Example.Item title=\"range, minName, maxName\">\n            <Slider\n                range\n                minName=\"slider-min\"\n                maxName=\"slider-max\"\n                defaultMinValue={30}\n                defaultMaxValue={85}\n            />\n        </Example.Item>\n        <div style={{ height: 2000 }} />\n    </Example>\n);"},{"name":"orientation","snippet":"const orientation = () => (\n    <Example>\n        <Example.Item title=\"orientation: vertical\">\n            <View height=\"200px\">\n                <Slider\n                    range\n                    name=\"slider\"\n                    defaultMinValue={30}\n                    defaultMaxValue={85}\n                    orientation=\"vertical\"\n                />\n            </View>\n        </Example.Item>\n        <View height=\"2000px\" />\n    </Example>\n);"},{"name":"minMax","snippet":"const minMax = () => (\n    <Example>\n        <Example.Item title=\"min, max\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={60} />\n        </Example.Item>\n        <Example.Item title=\"min, max, value < min\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={30} />\n        </Example.Item>\n        <Example.Item title=\"min, max, value > max\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={80} />\n        </Example.Item>\n    </Example>\n);"},{"name":"step","snippet":"const step = () => (\n    <Example>\n        <Example.Item title=\"step: 5\">\n            <Slider name=\"slider\" defaultValue={30} step={5} />\n        </Example.Item>\n\n        <Example.Item title=\"step: 5, defaultValue: 31, rounded down to 30\">\n            <Slider name=\"slider\" defaultValue={31} step={5} />\n        </Example.Item>\n\n        <Example.Item title=\"step: 0.01, float\">\n            <Slider name=\"slider\" defaultValue={30} step={0.01} />\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <Slider name=\"slider\" defaultValue={30} disabled />\n        </Example.Item>\n\n        <Example.Item title=\"disabled, range\">\n            <Slider name=\"slider\" range defaultMinValue={30} defaultMaxValue={80} disabled />\n        </Example.Item>\n    </Example>\n);"},{"name":"renderValue","snippet":"const renderValue = () => (\n    <Example>\n        <Example.Item title=\"renderValue: $\">\n            <Slider name=\"name\" defaultValue={50} renderValue={(args) => `$${args.value}`} />\n        </Example.Item>\n        <Example.Item title=\"renderValue: false\">\n            <Slider name=\"name\" defaultValue={50} renderValue={false} />\n        </Example.Item>\n    </Example>\n);"},{"name":"defaultValue","snippet":"const defaultValue = () => <View paddingTop={10}>\n    <Slider name=\"test-name\" defaultValue={50} onChange={fn()} onChangeCommit={fn()} />\n</View>;"},{"name":"value","snippet":"const value = () => <View paddingTop={10}>\n    <Slider name=\"test-name\" value={50} onChange={fn()} onChangeCommit={fn()} />\n</View>;"},{"name":"rangeDefaultValue","snippet":"const rangeDefaultValue = () => <View paddingTop={10}>\n    <Slider\n        range\n        name=\"test-name\"\n        defaultMinValue={50}\n        defaultMaxValue={70}\n        onChange={fn()}\n        onChangeCommit={fn()} />\n</View>;"},{"name":"rangeValue","snippet":"const rangeValue = () => <View paddingTop={10}>\n    <Slider\n        range\n        minName=\"test-name-min\"\n        maxName=\"test-name-max\"\n        minValue={50}\n        maxValue={70}\n        onChange={fn()}\n        onChangeCommit={fn()} />\n</View>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Slider name=\"name\" className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"},{"name":"testForm","snippet":"const testForm = (args) => {\n    const formRef = React.useRef<HTMLFormElement>(null);\n    const [data, setData] = React.useState<[string, FormDataEntryValue][]>([]);\n\n    const handleChange = (e: React.FormEvent<HTMLFormElement>) => {\n        const formData = new FormData(e.currentTarget);\n        const nextState = [...formData.entries()];\n\n        args.handleFormChange({ formData: nextState });\n        setData(nextState);\n    };\n\n    return (\n        <View paddingTop={10} gap={4}>\n            <form onChange={handleChange} ref={formRef}>\n                <Slider\n                    range\n                    minName=\"slider-min\"\n                    maxName=\"slider-max\"\n                    defaultMinValue={30}\n                    defaultMaxValue={50}\n                />\n            </form>\n\n            {data.map((v) => v.join(\": \")).join(\", \")}\n        </View>\n    );\n};"},{"name":"testSwipe","snippet":"const testSwipe = () => {\n    const toggle = useToggle(true);\n\n    return (\n        <Modal active={toggle.active} onClose={toggle.deactivate} position=\"end\">\n            <View gap={4}>\n                <Modal.Title>Modal</Modal.Title>\n                <Slider name=\"slider\" defaultValue={30} />\n            </View>\n        </Modal>\n    );\n};"}],"import":"import { Example, Modal, Slider, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Slider","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Slider/Slider.tsx","actualName":"Slider","exportName":"default"}},"components-stepper":{"id":"components-stepper","name":"Stepper","path":"./src/components/Stepper/tests/Stepper.stories.tsx","stories":[{"name":"direction","snippet":"const direction = () => (\n    <Example>\n        <Example.Item title=\"direction: row\">\n            <Stepper activeId=\"1\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <Stepper activeId=\"1\" direction=\"column\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"},{"name":"labelDisplay","snippet":"const labelDisplay = () => (\n    <Example>\n        <Example.Item title=\"direction: row, labels hidden\">\n            <Stepper activeId=\"1\" labelDisplay=\"hidden\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: column, labels hiden\">\n            <Stepper activeId=\"1\" direction=\"column\" labelDisplay=\"hidden\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: row, labels hidden on s\">\n            <Stepper activeId=\"1\" labelDisplay={{ s: \"hidden\", m: \"inline\" }}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"},{"name":"gap","snippet":"const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 6, direction: row\">\n            <Stepper activeId=\"1\" gap={6}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"gap: 6, direction: column\">\n            <Stepper activeId=\"1\" direction=\"column\" gap={6}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap\", \"[s] 2\", \"[m+] 5\"]}>\n            <Stepper activeId=\"1\" gap={{ s: 2, m: 5 }}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Stepper className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Stepper.Item attributes={{ id: \"test-item-id\" }} className=\"test-item-classname\" />\n        </Stepper>\n    </div>\n);"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"multiline subtitle\",\n                \"should wrap the text correctly\",\n                \"should display the connector correctly\",\n            ]}\n        >\n            <Demo\n                activeId={0}\n                subtitle=\"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy\"\n            />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Example, Placeholder, Stepper, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Stepper","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Stepper/Stepper.tsx","actualName":"Stepper","exportName":"default"}},"components-switch":{"id":"components-switch","name":"Switch","path":"./src/components/Switch/tests/Switch.stories.tsx","stories":[{"name":"size","snippet":"const size = () => (\n\t<Example>\n\t\t<Example.Item title=\"size: medium\">\n\t\t\t<Switch name=\"active\" size=\"medium\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: small\">\n\t\t\t<Switch name=\"active\" size=\"small\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: large\">\n\t\t\t<Switch name=\"active\" size=\"large\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: responsive, s: small, m: large\">\n\t\t\t<Switch\n\t\t\t\tname=\"active\"\n\t\t\t\tsize={{ s: \"small\", m: \"large\" }}\n\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t/>\n\t\t</Example.Item>\n\t</Example>\n);"},{"name":"label","snippet":"const label = () => (\n\t<Example>\n\t\t<Example.Item title=\"size: medium\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch reversed name=\"active\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: small\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" size=\"small\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch\n\t\t\t\t\treversed\n\t\t\t\t\tname=\"active\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t\t>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\n\t\t<Example.Item title=\"size: large\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" size=\"large\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch\n\t\t\t\t\treversed\n\t\t\t\t\tname=\"active\"\n\t\t\t\t\tsize=\"large\"\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t\t>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\t</Example>\n);"},{"name":"defaultChecked","snippet":"const defaultChecked = () => <Switch name=\"test-name\" defaultChecked onChange={fn()}>Label\n            </Switch>;"},{"name":"checked","snippet":"const checked = () => <Switch name=\"test-name\" checked onChange={fn()}>Label\n            </Switch>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, unselected\">\n            <Switch name=\"active\" disabled inputAttributes={{ \"aria-label\": \"test switch\" }} />\n        </Example.Item>\n        <Example.Item title=\"disabled, selected\">\n            <Switch\n                name=\"active\"\n                disabled\n                defaultChecked\n                inputAttributes={{ \"aria-label\": \"test switch\" }}\n            />\n        </Example.Item>\n        <Example.Item title=\"disabled, with label\">\n            <Switch name=\"active\" disabled>\n                Switch\n            </Switch>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Switch\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ \"aria-label\": \"test select\", id: \"test-input-id\" }}\n            name=\"name\"\n        >\n            Label\n        </Switch>\n    </div>\n);"}],"import":"import { Example, Switch, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Switch","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Switch/Switch.tsx","actualName":"Switch","exportName":"default"}},"components-table":{"id":"components-table","name":"Table","path":"./src/components/Table/tests/Table.stories.tsx","stories":[{"name":"layout","snippet":"const layout = () => (\n    <Example>\n        <Example.Item title=\"base\">\n            <Table>\n                <Table.Head>\n                    <Table.Row>\n                        <Table.Heading>Column 1</Table.Heading>\n                        <Table.Heading>Column 2</Table.Heading>\n                    </Table.Row>\n                </Table.Head>\n                <Table.Body>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell>Cell 2</Table.Cell>\n                    </Table.Row>\n                </Table.Body>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"colspan: 2 for col 2, rowspan: 2 for cell 3\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading colSpan={2}>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                    <Table.Cell rowSpan={2}>Cell 3</Table.Cell>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"align: center for heading 1, align: end for heading 2\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading align=\"center\">Column 1</Table.Heading>\n                    <Table.Heading align=\"end\">Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"valign: center for cell 2, valign: end for cell 3\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>\n                        <View height={15} backgroundColor=\"neutral-faded\" />\n                    </Table.Cell>\n                    <Table.Cell verticalAlign=\"center\">Cell 2</Table.Cell>\n                    <Table.Cell verticalAlign=\"end\">Cell 3</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"width: 40%, minWidth: 200px for col 1\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"40%\" minWidth=\"200px\">\n                        Column 1\n                    </Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"},{"name":"border","snippet":"const border = () => (\n    <Example>\n        <Example.Item title=\"border: true\">\n            <Table border>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"columnBorder: true\">\n            <Table columnBorder>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"columnBorder: true, border: true\">\n            <Table columnBorder border>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"},{"name":"rows","snippet":"const rows = () => (\n    <Example>\n        <Example.Item title=\"highlighted for row 2\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row highlighted>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"clickable row 2, focus ring\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row onClick={() => {}}>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"},{"name":"render","snippet":"const render = () => (\n    <Table>\n        <Table.Head>\n            <Table.Row>\n                <Table.Heading>Heading</Table.Heading>\n                <Table.Heading>Heading</Table.Heading>\n            </Table.Row>\n        </Table.Head>\n        <Table.Body>\n            <Table.Row>\n                <Table.Cell>Content</Table.Cell>\n                <Table.Cell>Content</Table.Cell>\n            </Table.Row>\n        </Table.Body>\n    </Table>\n);"},{"name":"tbody","snippet":"const tbody = () => (\n    <Table>\n        <Table.Row>\n            <Table.Heading>Heading</Table.Heading>\n            <Table.Heading>Heading</Table.Heading>\n        </Table.Row>\n    </Table>\n);"},{"name":"tabIndex","snippet":"const tabIndex = () => (\n    <Table>\n        <Table.Row>\n            <Table.Cell />\n        </Table.Row>\n        <Table.Row onClick={() => {}}>\n            <Table.Cell />\n        </Table.Row>\n        <Table.Row attributes={{ onClick: () => {} }}>\n            <Table.Cell />\n        </Table.Row>\n    </Table>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Table className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Table.Row attributes={{ id: \"test-row-id\" }}>\n                <Table.Cell attributes={{ id: \"test-cell-id\" }}></Table.Cell>\n            </Table.Row>\n        </Table>\n    </div>\n);"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"scroll fade\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"500px\">Column 1</Table.Heading>\n                    <Table.Heading width=\"500px\">Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"card with highlighted heading\">\n            <Card elevated padding={0}>\n                <Table>\n                    <Table.Row highlighted>\n                        <Table.Heading width=\"50%\" minWidth=\"200px\">\n                            Column 1\n                        </Table.Heading>\n                        <Table.Heading colSpan={2} align=\"end\">\n                            Column 2\n                        </Table.Heading>\n                    </Table.Row>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell align=\"center\">Cell 2</Table.Cell>\n                        <Table.Cell align=\"end\">Cell 3</Table.Cell>\n                    </Table.Row>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell align=\"center\">Cell 2</Table.Cell>\n                        <Table.Cell align=\"end\">Cell 3</Table.Cell>\n                    </Table.Row>\n                </Table>\n            </Card>\n        </Example.Item>\n        <Example.Item title=\"width: auto, nowrap\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"50%\">Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                    <Table.Heading>Column 3</Table.Heading>\n                    <Table.Heading width=\"auto\">Long heading title</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                    <Table.Cell>Cell 3</Table.Cell>\n                    <Table.Cell>Cell 4</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"},{"name":"examples","snippet":"const examples = () => (\n    <Example>\n        <Example.Item title=\"selectable\">\n            <SelectionDemo />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Card, Checkbox, Example, Table, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Table","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Table/Table.tsx","actualName":"Table","exportName":"default"}},"components-tabs":{"id":"components-tabs","name":"Tabs","path":"./src/components/Tabs/tests/Tabs.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Tabs>\n        <Tabs.List>\n            <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n            <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n        </Tabs.List>\n\n        <Tabs.Panel value=\"1\">\n            <View padding={4}>Content 1</View>\n        </Tabs.Panel>\n        <Tabs.Panel value=\"2\">\n            <View padding={4}>Content 2</View>\n        </Tabs.Panel>\n    </Tabs>\n);"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Tabs defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills\">\n            <Tabs variant=\"pills\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills-elevated\">\n            <Tabs variant=\"pills-elevated\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: borderless\">\n            <Tabs variant=\"borderless\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"variant: default, size: large\">\n            <Tabs size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills, size: large\">\n            <Tabs variant=\"pills\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills-elevated, size: large\">\n            <Tabs variant=\"pills-elevated\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: borderless, size: large\">\n            <Tabs variant=\"borderless\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"direction","snippet":"const direction = () => (\n    <Example>\n        <Example.Item title=\"direction: column, variant: underline\">\n            <Tabs direction=\"column\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: pills\">\n            <Tabs direction=\"column\" variant=\"pills\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: pills-elevated\">\n            <Tabs direction=\"column\" variant=\"pills-elevated\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: borderless\">\n            <Tabs direction=\"column\" variant=\"borderless\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Tabs>\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"1\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"icon only\">\n            <Tabs variant=\"pills-elevated\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap} attributes={{ \"aria-label\": \"Tab 1\" }} />\n                    <Tabs.Item value=\"1\" icon={IconZap} attributes={{ \"aria-label\": \"Tab 2\" }} />\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"equalWidth","snippet":"const equalWidth = () => (\n    <Example>\n        <Example.Item title=\"equal width items\">\n            <Tabs onChange={console.log} itemWidth=\"equal\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"1\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                    <Tabs.Item value=\"2\" icon={IconZap}>\n                        Very long item 3\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"href","snippet":"const href = () => (\n    <Example>\n        <Example.Item title=\"href, no onChange\">\n            <Tabs value=\"2\">\n                <Tabs.List>\n                    <Tabs.Item value=\"1\" href=\"#item-1\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"2\" href=\"#item-2\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                    <Tabs.Item value=\"3\" href=\"#item-3\" icon={IconZap}>\n                        Very long item 3\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => {\n    return (\n        <Example>\n            <Example.Item title=\"disabled\">\n                <Tabs defaultValue=\"1\">\n                    <Tabs.List>\n                        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"2\" disabled icon={IconZap}>\n                            Item 2\n                        </Tabs.Item>\n                        <Tabs.Item value=\"3\">Item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"1\">\n                        <View padding={4}>Content 1</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <View padding={4}>Content 2</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"3\">\n                        <View padding={4}>Content 3</View>\n                    </Tabs.Panel>\n                </Tabs>\n            </Example.Item>\n\n            <Example.Item title=\"disabled, href\">\n                <Tabs defaultValue=\"1\">\n                    <Tabs.List>\n                        <Tabs.Item href=\"#item1\" value=\"1\">\n                            Item 1\n                        </Tabs.Item>\n                        <Tabs.Item href=\"#item2\" value=\"2\" disabled icon={IconZap}>\n                            Item 2\n                        </Tabs.Item>\n                        <Tabs.Item href=\"#item3\" value=\"3\">\n                            Item 3\n                        </Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"1\">\n                        <View padding={4}>Content 1</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <View padding={4}>Content 2</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"3\">\n                        <View padding={4}>Content 3</View>\n                    </Tabs.Panel>\n                </Tabs>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"defaultValue","snippet":"const defaultValue = () => <Tabs defaultValue=\"2\" onChange={fn()}>\n    <Tabs.List>\n        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n        <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n    </Tabs.List>\n    <Tabs.Panel value=\"1\">Content 1</Tabs.Panel>\n    <Tabs.Panel value=\"2\">Content 2</Tabs.Panel>\n</Tabs>;"},{"name":"value","snippet":"const value = () => <Tabs value=\"2\" onChange={fn()}>\n    <Tabs.List>\n        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n        <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n    </Tabs.List>\n    <Tabs.Panel value=\"1\">Content 1</Tabs.Panel>\n    <Tabs.Panel value=\"2\">Content 2</Tabs.Panel>\n</Tabs>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Tabs>\n            <Tabs.List attributes={{ id: \"test-list-id\" }} className=\"test-list-classname\">\n                <Tabs.Item attributes={{ id: \"test-item-id\" }} value=\"1\">\n                    Item\n                </Tabs.Item>\n            </Tabs.List>\n\n            <Tabs.Panel\n                attributes={{ \"data-testid\": \"test-panel-id\" }}\n                className=\"test-panel-classname\"\n                value=\"1\"\n            />\n        </Tabs>\n    </div>\n);"},{"name":"testFocusableContent","snippet":"const testFocusableContent = () => (\n    <Example>\n        <Example.Item title=\"panels without focusable content\">\n            <Tabs>\n                <View gap={4}>\n                    <Tabs.List>\n                        <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                        <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"0\">Tab 1</Tabs.Panel>\n                    <Tabs.Panel value=\"1\">Tab 2</Tabs.Panel>\n                    <Tabs.Panel value=\"2\">Tab 3</Tabs.Panel>\n                </View>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"panels with focusable content\">\n            <Tabs>\n                <View gap={4}>\n                    <Tabs.List>\n                        <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                        <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"0\">\n                        <Button onClick={() => {}}>Tab 1 action</Button>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"1\">\n                        <Button onClick={() => {}}>Tab 2 action</Button>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <Button onClick={() => {}}>Tab 3 action</Button>\n                    </Tabs.Panel>\n                </View>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"testComposition","snippet":"const testComposition = () => (\n    <Example>\n        <Example.Item title=\"Viewport overflow\">\n            <Tabs>\n                <Tabs.List>\n                    {[...Array(8)].map((_, i) => (\n                        <Tabs.Item value={`${i}`} key={i} icon={IconZap}>\n                            Very long item {i}\n                        </Tabs.Item>\n                    ))}\n                </Tabs.List>\n\n                {[...Array(8)].map((_, i) => (\n                    <Tabs.Panel value={`${i}`} key={i}>\n                        Tab {i}\n                    </Tabs.Panel>\n                ))}\n            </Tabs>\n        </Example.Item>\n        <Example.Item>\n            <Tabs onChange={console.log} variant=\"pills-elevated\" name=\"hey\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">\n                        <View borderColor=\"neutral-faded\" padding={5}>\n                            Item 3\n                        </View>\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"Custom non-interactive list children\">\n            <Tabs direction=\"column\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <View height={6} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"testEdgeCaseDom","snippet":"const testEdgeCaseDom = () => {\n    const [activeItem, setActiveItem] = React.useState(\"1\");\n    const sectionsRef = React.useRef(null);\n\n    return (\n        <Example>\n            <Example.Item title=\"active item changes on scroll\">\n                <View justify=\"center\" align=\"center\" padding={10}>\n                    <View width={60} gap={2}>\n                        <Tabs value={activeItem} onChange={(args) => setActiveItem(args.value)}>\n                            <Tabs.List>\n                                <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                                <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n                                <Tabs.Item value=\"3\">Item 3</Tabs.Item>\n                                <Tabs.Item value=\"4\">Item 4</Tabs.Item>\n                            </Tabs.List>\n                        </Tabs>\n\n                        <ScrollArea\n                            attributes={{ ref: sectionsRef }}\n                            height={70}\n                            onScroll={(args) => {\n                                setActiveItem(Math.min(4, Math.floor(args.y * 10) + 1).toString());\n                            }}\n                        >\n                            <View gap={4}>\n                                <View gap={2}>\n                                    <Text>Section 1</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View grow height=\"100px\" backgroundColor=\"neutral-faded\" key={i} />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 2</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 3</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 4</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n                            </View>\n                        </ScrollArea>\n                    </View>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import { Button, Example, ScrollArea, Tabs, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Tabs","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Tabs/Tabs.tsx","actualName":"Tabs","exportName":"default"}},"components-textarea":{"id":"components-textarea","name":"TextArea","path":"./src/components/TextArea/tests/TextArea.stories.tsx","stories":[{"name":"variants","snippet":"const variants = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <TextArea variant=\"faded\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless\">\n            <TextArea variant=\"headless\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: medium\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"medium\" />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"large\" />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"xlarge\" />\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] large\", \"[m+] medium\"]}>\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size={{ s: \"xlarge\", m: \"medium\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"resize","snippet":"const resize = () => (\n    <Example>\n        <Example.Item title=\"resize: none\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" resize=\"none\" />\n        </Example.Item>\n        <Example.Item title=\"resize: auto\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" resize=\"auto\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" hasError />\n        </Example.Item>\n    </Example>\n);"},{"name":"aligner","snippet":"const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner\">\n            <View gap={2}>\n                <Text variant=\"featured-2\">What problem are you trying to solve?</Text>\n                <TextArea.Aligner>\n                    <TextArea\n                        variant=\"headless\"\n                        placeholder=\"Try something like 'I have a job'\"\n                        name=\"description\"\n                    />\n                </TextArea.Aligner>\n                <View.Item>\n                    <Button>Next</Button>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"long value without breaks\">\n            <TextArea\n                name=\"hey\"\n                defaultValue={`<div style=\"position:relative;width:100%;padding-top:calc(150% + 72px)\">\n<iframe src=\"nskjdfdsdkjfsjkdfhbsjlhdfbsjlhfbs;jhbsdljfhsbljhfsbljhfbsjlfdhbsljhfbsdljhfbsljhfbslufbhsdlfds\" />\n</div>`}\n                resize=\"auto\"\n                placeholder=\"Placeholder\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"render","snippet":"const render = () => <TextArea name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"placeholder","snippet":"const placeholder = () => (\n    <TextArea\n        name=\"test-name\"\n        placeholder=\"Placeholder\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"},{"name":"id","snippet":"const id = () => (\n    <TextArea name=\"test-name\" id=\"test-id\" inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"},{"name":"disabled","snippet":"const disabled = () => <TextArea name=\"test-name\" disabled inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"defaultValue","snippet":"const defaultValue = () => <TextArea\n    name=\"test-name\"\n    defaultValue=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"value","snippet":"const value = () => <TextArea\n    name=\"test-name\"\n    value=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <TextArea\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n        />\n    </div>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <Example>\n        <Example.Item title=\"with helper\">\n            <FormControl>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextArea name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n        <Example.Item title=\"with error\">\n            <FormControl hasError>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextArea name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Example, FormControl, Text, TextArea, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"TextArea","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/TextArea/TextArea.tsx","actualName":"TextArea","exportName":"default"}},"components-textfield":{"id":"components-textfield","name":"TextField","path":"./src/components/TextField/tests/TextField.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <TextField variant=\"faded\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless\">\n            <TextField variant=\"headless\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"rounded","snippet":"const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded\">\n            <TextField\n                rounded\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                icon={IconZap}\n                prefix=\"+31\"\n                endSlot={<Button rounded size=\"small\" icon={IconZap} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"rounded, variant: faded\">\n            <View direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <TextField\n                        rounded\n                        variant=\"faded\"\n                        name=\"Name\"\n                        placeholder=\"Enter your name\"\n                        startSlot={\n                            <Badge rounded size=\"small\">\n                                Hello\n                            </Badge>\n                        }\n                    />\n                </View.Item>\n                <Button rounded>Submit</Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" hasError />\n        </Example.Item>\n    </Example>\n);"},{"name":"attachments","snippet":"const attachments = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" value=\"Reshaped\" icon={IconZap} />\n        </Example.Item>\n        <Example.Item title=\"endIcon\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" value=\"Reshaped\" endIcon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title={[\"startSlot\", \"vertical and horizontal padding aligned\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title={[\"endSlot\", \"vertical and horizontal padding aligned\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                endSlot={\n                    <Button\n                        icon={IconZap}\n                        size=\"small\"\n                        onClick={() => {}}\n                        attributes={{ \"aria-label\": \"Action\" }}\n                    />\n                }\n            />\n        </Example.Item>\n\n        <Example.Item title=\"paddingSlotStart=4, paddingSlotEnd=2\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlotPadding={4}\n                endSlotPadding={2}\n                startSlot={<Placeholder h={20} />}\n                endSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"with all affixes\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                endIcon={IconZap}\n                icon={IconZap}\n                prefix=\"Estimated value\"\n                suffix=\"m2\"\n                startSlot={<Placeholder h={20} />}\n                endSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"multiline wrap\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlot={[...Array(10).keys()].map((i) => (\n                    <Badge size=\"small\" key={i}>\n                        Item {i + 1}\n                    </Badge>\n                ))}\n                multiline\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"small\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"medium\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"large\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"xlarge\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] xlarge\", \"[m+] medium\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                size={{ s: \"xlarge\", m: \"medium\" }}\n                icon={IconZap}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"aligner","snippet":"const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner\">\n            <View gap={2}>\n                <Text variant=\"featured-2\">What problem are you trying to solve?</Text>\n                <TextField.Aligner>\n                    <TextField\n                        variant=\"headless\"\n                        placeholder=\"Try something like 'I have a job'\"\n                        name=\"description\"\n                    />\n                </TextField.Aligner>\n                <View.Item>\n                    <Button>Next</Button>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"render","snippet":"const render = () => <TextField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"placeholder","snippet":"const placeholder = () => (\n    <TextField\n        name=\"test-name\"\n        placeholder=\"Placeholder\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"},{"name":"id","snippet":"const id = () => (\n    <TextField name=\"test-name\" id=\"test-id\" inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"},{"name":"disabled","snippet":"const disabled = () => <TextField name=\"test-name\" disabled inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"defaultValue","snippet":"const defaultValue = () => <TextField\n    name=\"test-name\"\n    defaultValue=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"value","snippet":"const value = () => <TextField\n    name=\"test-name\"\n    value=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <TextField\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n        />\n    </div>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <Example>\n        <Example.Item title=\"with helper\">\n            <FormControl>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextField name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n        <Example.Item title=\"with error\">\n            <FormControl hasError>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextField name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Badge, Button, Example, FormControl, Placeholder, Text, TextField, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"TextField","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/TextField/TextField.tsx","actualName":"TextField","exportName":"default"}},"components-timeline":{"id":"components-timeline","name":"Timeline","path":"./src/components/Timeline/tests/Timeline.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"children passed directly\">\n            <Timeline>\n                <Placeholder />\n                <Placeholder />\n                <Placeholder />\n            </Timeline>\n        </Example.Item>\n        <Example.Item title=\"children wrapped with Timeline.Item\">\n            <Timeline>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n    </Example>\n);"},{"name":"marker","snippet":"const marker = () => (\n    <Example>\n        <Example.Item title=\"slot\">\n            <Timeline>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n\n        <Example.Item title=\"null marker\">\n            <Timeline>\n                <Timeline.Item markerSlot={null}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={null}>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Timeline className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Timeline.Item className=\"test-item-classname\" attributes={{ id: \"test-item-id\" }}>\n                Content\n            </Timeline.Item>\n            <Timeline.Item>Content</Timeline.Item>\n        </Timeline>\n    </div>\n);"}],"import":"import { Example, Placeholder, Timeline } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Timeline","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Timeline/Timeline.tsx","actualName":"Timeline","exportName":"default"}},"components-toast":{"id":"components-toast","name":"Toast","path":"./src/components/Toast/tests/Toast.stories.tsx","stories":[{"name":"size","snippet":"const size = () => <Size />;"},{"name":"position","snippet":"const position = () => <Position />;"},{"name":"color","snippet":"const color = () => <Color />;"},{"name":"timeout","snippet":"const timeout = () => <Timeout />;"},{"name":"regionOptions","snippet":"const regionOptions = () => <Expanded />;"},{"name":"slots","snippet":"const slots = () => <Slots />;"},{"name":"base","snippet":"const base = () => {\n    const toast = useToast();\n\n    return (\n        <Button\n            onClick={() => {\n                const id = toast.show({\n                    title: \"Title\",\n                    text: \"Text\",\n                    children: \"Children\",\n                    startSlot: \"Slot\",\n                    actionsSlot: (\n                        <Button attributes={{ \"data-testid\": \"trigger-id\" }} onClick={() => toast.hide(id)}>\n                            Trigger\n                        </Button>\n                    ),\n                });\n            }}\n        >\n            Show toast\n        </Button>\n    );\n};"},{"name":"nested","snippet":"const nested = () => {\n    return (\n        <div data-testid=\"test-container-id\">\n            <ToastProvider>\n                <NestedDemo />\n            </ToastProvider>\n        </div>\n    );\n};"},{"name":"className","snippet":"const className = () => {\n    const toast = useToast();\n\n    return (\n        <Button\n            onClick={() => {\n                const id = toast.show({\n                    text: \"Content\",\n                    attributes: { \"data-testid\": \"test-id\" },\n                    className: \"test-classname\",\n                });\n            }}\n        >\n            Show toast\n        </Button>\n    );\n};"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"Multiline, should support dynamic height\">\n            <Multiline />\n        </Example.Item>\n        <Example.Item title=\"Nested ToastProvider\">\n            <ToastProvider>\n                <Nested />\n            </ToastProvider>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Dismissible, Example, Image, Text, ToastProvider, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  11 | import { sleep } from \"utilities/helpers\";\n  12 |\n> 13 | export default {\n     | ^\n  14 | \ttitle: \"Components/Toast\",\n  15 | \tparameters: {\n  16 | \t\tiframe: {\n\n./src/components/Toast/tests/Toast.stories.tsx:\nimport { Example } from \"utilities/storybook\";\nimport { useToast, ToastProvider } from \"components/Toast\";\nimport Button from \"components/Button\";\nimport View from \"components/View\";\nimport Image from \"components/Image\";\nimport Text from \"components/Text\";\nimport Dismissible from \"components/Dismissible\";\nimport IconZap from \"icons/Zap\";\nimport { expect, userEvent, waitFor, within } from \"storybook/test\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { sleep } from \"utilities/helpers\";\n\nexport default {\n\ttitle: \"Components/Toast\",\n\tparameters: {\n\t\tiframe: {\n\t\t\turl: \"https://reshaped.so/docs/components/toast\",\n\t\t},\n\t},\n};\n\nconst Size = () => {\n\tconst toast = useToast();\n\tconst props = {\n\t\ticon: IconZap,\n\t\ttitle: \"Hey!\",\n\t\ttext: \"Event completed\",\n\t\tactionsSlot: [<Button>Action</Button>],\n\t};\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"size: small\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({ ...props });\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"size: medium\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({ ...props, size: \"medium\" });\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"large\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({ ...props, size: \"large\" });\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const size = { name: \"size\", render: () => <Size /> };\n\nconst Position = () => {\n\tconst toast = useToast();\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"position: bottom-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom-start\",\n\t\t\t\t\t\t\tactionsSlot: <Button onClick={() => toast.hide(id)}>Close</Button>,\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: bottom\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: bottom-end\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom-end\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: top-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"top-start\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: top\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"top\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: top-end\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"top-end\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const position = { name: \"position\", render: () => <Position /> };\n\nconst Color = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"color: inverted\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"inverted\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: neutral\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"neutral\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: primary\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"primary\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: positive\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"positive\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: critical\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"critical\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: warning\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"warning\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\n\nexport const color = { name: \"color\", render: () => <Color /> };\n\nconst Timeout = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"timeout: short\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\ttimeout: \"short\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"timeout: long\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\ttimeout: \"long\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"timeout: 0\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\ttimeout: 0,\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const timeout = { name: \"timeout\", render: () => <Timeout /> };\n\nconst Expanded = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"Custom width coming from Reshaped provider for bottom-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom-start\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const regionOptions = { name: \"expanded\", render: () => <Expanded /> };\n\nconst Slots = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"always expanded, promotion banner\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\tchildren: (\n\t\t\t\t\t\t\t\t<View gap={3} direction=\"row\">\n\t\t\t\t\t\t\t\t\t<View aspectRatio={1}>\n\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\theight=\"100px\"\n\t\t\t\t\t\t\t\t\t\t\tsrc=\"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80\"\n\t\t\t\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t<View.Item grow>\n\t\t\t\t\t\t\t\t\t\t<View gap={1}>\n\t\t\t\t\t\t\t\t\t\t\t<Dismissible\n\t\t\t\t\t\t\t\t\t\t\t\tcloseAriaLabel=\"Close notification\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClose={() => toast.hide(id)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Text variant=\"body-2\" weight=\"bold\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tLook at this gradient!\n\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t</Dismissible>\n\t\t\t\t\t\t\t\t\t\t\t<Text variant=\"body-3\">\n\t\t\t\t\t\t\t\t\t\t\t\tIf you start using more gradients, your product will become even more\n\t\t\t\t\t\t\t\t\t\t\t\tsuccesful.\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t</View.Item>\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tcolor: \"neutral\",\n\t\t\t\t\t\t\tposition: \"bottom-start\",\n\t\t\t\t\t\t\ttimeout: 0,\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const slots = { name: \"slots\", render: () => <Slots /> };\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst toast = useToast();\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\ttitle: \"Title\",\n\t\t\t\t\t\ttext: \"Text\",\n\t\t\t\t\t\tchildren: \"Children\",\n\t\t\t\t\t\tstartSlot: \"Slot\",\n\t\t\t\t\t\tactionsSlot: (\n\t\t\t\t\t\t\t<Button attributes={{ \"data-testid\": \"trigger-id\" }} onClick={() => toast.hide(id)}>\n\t\t\t\t\t\t\t\tTrigger\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t),\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tShow toast\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvasElement }) => {\n\t\tconst canvas = within(canvasElement.ownerDocument.body);\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\tconst title = canvas.getByText(\"Title\");\n\t\tconst text = canvas.getByText(\"Text\");\n\t\tconst children = canvas.getByText(\"Children\");\n\t\tconst slot = canvas.getByText(\"Slot\");\n\t\tconst action = canvas.getByTestId(\"trigger-id\");\n\n\t\texpect(title).toBeInTheDocument();\n\t\texpect(text).toBeInTheDocument();\n\t\texpect(children).toBeInTheDocument();\n\t\texpect(slot).toBeInTheDocument();\n\t\texpect(action).toBeInTheDocument();\n\n\t\tawait userEvent.click(action);\n\n\t\tawait sleep(600);\n\n\t\tawait waitFor(() => {\n\t\t\texpect(title).not.toBeInTheDocument();\n\t\t});\n\t},\n};\n\nconst NestedDemo = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={() => {\n\t\t\t\ttoast.show({\n\t\t\t\t\ttext: \"Content\",\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\tShow toast\n\t\t</Button>\n\t);\n};\n\nexport const nested: StoryObj = {\n\tname: \"ToastProvider\",\n\trender: () => {\n\t\treturn (\n\t\t\t<div data-testid=\"test-container-id\">\n\t\t\t\t<ToastProvider>\n\t\t\t\t\t<NestedDemo />\n\t\t\t\t</ToastProvider>\n\t\t\t</div>\n\t\t);\n\t},\n\tplay: async ({ canvasElement }) => {\n\t\tconst canvas = within(canvasElement.ownerDocument.body);\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\tconst container = canvas.getByTestId(\"test-container-id\");\n\t\tconst toast = within(container).getByText(\"Content\");\n\n\t\texpect(toast).toBeInTheDocument();\n\t},\n};\n\nexport const className: StoryObj = {\n\tname: \"className, attributes\",\n\trender: () => {\n\t\tconst toast = useToast();\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\ttext: \"Content\",\n\t\t\t\t\t\tattributes: { \"data-testid\": \"test-id\" },\n\t\t\t\t\t\tclassName: \"test-classname\",\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tShow toast\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvasElement }) => {\n\t\tconst canvas = within(canvasElement.ownerDocument.body);\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\tconst toast = canvas.getByTestId(\"test-id\");\n\n\t\texpect(toast).toBeInTheDocument();\n\t\texpect(toast).toHaveClass(\"test-classname\");\n\t},\n};\n\nconst Multiline = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={() => {\n\t\t\t\ttoast.show({\n\t\t\t\t\ttext: \"Very long event completed notification message\",\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\tShow toast\n\t\t</Button>\n\t);\n};\n\nconst Nested = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<View height=\"300px\">\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\ttoast.show({\n\t\t\t\t\t\ttext: \"Notification sent\",\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tShow toast\n\t\t\t</Button>\n\t\t</View>\n\t);\n};\nexport const edgeCases = {\n\tname: \"test: edge cases\",\n\trender: () => (\n\t\t<Example>\n\t\t\t<Example.Item title=\"Multiline, should support dynamic height\">\n\t\t\t\t<Multiline />\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"Nested ToastProvider\">\n\t\t\t\t<ToastProvider>\n\t\t\t\t\t<Nested />\n\t\t\t\t</ToastProvider>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t),\n};\n"}},"components-togglebutton":{"id":"components-togglebutton","name":"ToggleButton","path":"./src/components/ToggleButton/tests/ToggleButton.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"outline\">\n            <ToggleButton>Button</ToggleButton>\n        </Example.Item>\n        <Example.Item title=\"ghost\">\n            <ToggleButton variant=\"ghost\">Button</ToggleButton>\n        </Example.Item>\n    </Example>\n);"},{"name":"selectedColor","snippet":"const selectedColor = () => (\n    <Example>\n        <Example.Item title=\"selectedColor: primary\">\n            <ToggleButton selectedColor=\"primary\" defaultChecked>\n                Button\n            </ToggleButton>\n        </Example.Item>\n    </Example>\n);"},{"name":"onChange","snippet":"const onChange = () => <Example>\n    <Example.Item title=\"defaultChecked, onChange\">\n        <ToggleButton defaultChecked onChange={fn()} value=\"1\">Button\n                                </ToggleButton>\n    </Example.Item>\n    <Example.Item title=\"checked, onChange\">\n        <ToggleButton checked onChange={fn()} value=\"2\">Button\n                                </ToggleButton>\n    </Example.Item>\n</Example>;"},{"name":"onClick","snippet":"const onClick = () => <ToggleButton onClick={fn()}>Button</ToggleButton>;"}],"import":"import { Example, ToggleButton } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ToggleButton","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ToggleButton/ToggleButton.tsx","actualName":"ToggleButton","exportName":"default"}},"components-togglebuttongroup":{"id":"components-togglebuttongroup","name":"ToggleButtonGroup","path":"./src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx","stories":[{"name":"single","snippet":"const single = () => <Example>\n    <Example.Item title=\"single, uncontrolled, onChange\">\n        <ToggleButtonGroup onChange={fn()}>\n            <ToggleButton value=\"1\" onChange={fn()}>Button\n                                    </ToggleButton>\n            <ToggleButton value=\"2\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n    <Example.Item title=\"single, controlled, onChange\">\n        <ToggleButtonGroup onChange={fn()} value={[]}>\n            <ToggleButton value=\"3\" onChange={fn()}>Button\n                                    </ToggleButton>\n            <ToggleButton value=\"4\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n</Example>;"},{"name":"multiple","snippet":"const multiple = () => <Example>\n    <Example.Item title=\"multiple, uncontrolled, onChange\">\n        <ToggleButtonGroup onChange={fn()} selectionMode=\"multiple\">\n            <ToggleButton value=\"1\">Button</ToggleButton>\n            <ToggleButton value=\"2\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n    <Example.Item title=\"multiple, controlled, onChange\">\n        <ToggleButtonGroup onChange={fn()} value={[]} selectionMode=\"multiple\">\n            <ToggleButton value=\"3\">Button</ToggleButton>\n            <ToggleButton value=\"4\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n</Example>;"},{"name":"selectedColor","snippet":"const selectedColor = () => (\n    <Example>\n        <Example.Item title=\"selectedColor: primary\">\n            <ToggleButtonGroup selectedColor=\"primary\" defaultValue={[\"2\"]}>\n                <ToggleButton value=\"1\">Button</ToggleButton>\n                <ToggleButton value=\"2\">Button</ToggleButton>\n                <ToggleButton value=\"3\">Button</ToggleButton>\n            </ToggleButtonGroup>\n        </Example.Item>\n        <Example.Item title=\"color: primary, selectedColor: critical\">\n            <ToggleButtonGroup color=\"primary\" selectedColor=\"critical\" defaultValue={[\"2\"]}>\n                <ToggleButton value=\"1\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n                <ToggleButton value=\"2\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n                <ToggleButton value=\"3\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n            </ToggleButtonGroup>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <ToggleButtonGroup className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <ToggleButton>Button 1</ToggleButton>\n            <ToggleButton>Button 1</ToggleButton>\n        </ToggleButtonGroup>\n    </div>\n);"},{"name":"testIcon","snippet":"const testIcon = () => (\n    <Example>\n        <Example.Item title=\"icon only\">\n            <ToggleButtonGroup selectedColor=\"primary\">\n                <ToggleButton value=\"1\" icon={IconPlus} />\n                <ToggleButton value=\"2\" icon={IconMinus} />\n                <ToggleButton value=\"3\" icon={IconCheckmark} />\n            </ToggleButtonGroup>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, ToggleButton, ToggleButtonGroup } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ToggleButtonGroup","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx","actualName":"ToggleButtonGroup","exportName":"default"}},"components-tooltip":{"id":"components-tooltip","name":"Tooltip","path":"./src/components/Tooltip/tests/Tooltip.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title=\"position: bottom-start\">\n            <View direction=\"row\" gap={2}>\n                <Demo position=\"bottom-start\" text=\"Tooltip 1\" />\n                <Demo position=\"bottom-start\" text=\"Tooltip 2\" />\n                <Demo position=\"bottom-start\" text=\"Tooltip 3\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: bottom\">\n            <Demo position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"position: bottom-end\">\n            <Demo position=\"bottom-end\" />\n        </Example.Item>\n        <Example.Item title=\"position: top-start\">\n            <Demo position=\"top-start\" />\n        </Example.Item>\n        <Example.Item title=\"position: top\">\n            <Demo position=\"top\" />\n        </Example.Item>\n        <Example.Item title=\"position: top-end\">\n            <Demo position=\"top-end\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: start\">\n            <View align=\"end\">\n                <Demo position=\"start\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: start-top\">\n            <View align=\"end\">\n                <Demo position=\"start-top\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: start-bottom\">\n            <View align=\"end\">\n                <Demo position=\"start-bottom\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <Demo position=\"end\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: end-top\">\n            <Demo position=\"end-top\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: end-bottom\">\n            <Demo position=\"end-bottom\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: inverted\">\n            <Demo color=\"inverted\" position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"color: dark\">\n            <Demo color=\"dark\" position=\"bottom\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"defaultActive","snippet":"const defaultActive = () => <Tooltip text=\"Content\" onOpen={fn()} onClose={fn()}>\n    {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n</Tooltip>;"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"responsive visibility\">\n            <DemoResponsive text=\"Responsive\" />\n        </Example.Item>\n\n        <Example.Item title=\"without text\">\n            <Tooltip>{() => <Button>Button</Button>}</Tooltip>\n        </Example.Item>\n\n        <Example.Item title=\"tooltip with popover\">\n            <Tooltip text=\"Tooltip\" position=\"top\">\n                {(attributes) => (\n                    <Popover position=\"bottom\">\n                        <Popover.Trigger>\n                            {(popoverAttributes) => (\n                                <Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>\n                            )}\n                        </Popover.Trigger>\n                        <Popover.Content>Popover</Popover.Content>\n                    </Popover>\n                )}\n            </Tooltip>\n        </Example.Item>\n\n        <Example.Item title=\"nested popovers inside a tooltip\">\n            <View direction=\"row\" gap={2}>\n                <Tooltip position=\"top\" text=\"Hello\">\n                    {(tooltipAttributes) => (\n                        <Popover position=\"bottom\" width=\"300px\">\n                            <Popover.Trigger>\n                                {(attributes) => (\n                                    <Button attributes={{ ...tooltipAttributes, ...attributes }}>\n                                        Tooltip with popover\n                                    </Button>\n                                )}\n                            </Popover.Trigger>\n                            <Popover.Content>\n                                <View gap={2} align=\"center\" direction=\"row\" justify=\"space-between\">\n                                    Popover content\n                                    <Popover position=\"bottom\" width=\"300px\">\n                                        <Popover.Trigger>\n                                            {(attributes) => <Button attributes={attributes}>Open</Button>}\n                                        </Popover.Trigger>\n                                        <Popover.Content>\n                                            <Popover.Dismissible align=\"center\" closeAriaLabel=\"Close\">\n                                                Another popover content\n                                            </Popover.Dismissible>\n                                        </Popover.Content>\n                                    </Popover>\n                                </View>\n                            </Popover.Content>\n                        </Popover>\n                    )}\n                </Tooltip>\n                <Tooltip position=\"top\" text=\"Hello\">\n                    {(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}\n                </Tooltip>\n            </View>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Example, Popover, Tooltip, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Tooltip","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Tooltip/Tooltip.tsx","actualName":"Tooltip","exportName":"default"}},"utility-components-accordion":{"id":"utility-components-accordion","name":"Accordion","path":"./src/components/Accordion/tests/Accordion.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Accordion defaultActive>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"},{"name":"iconSize","snippet":"const iconSize = () => (\n    <Accordion iconSize={6}>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"},{"name":"iconPosition","snippet":"const iconPosition = () => (\n    <Accordion iconPosition=\"start\">\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"},{"name":"gap","snippet":"const gap = () => (\n    <Accordion defaultActive gap={4}>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <Placeholder />\n        </Accordion.Content>\n    </Accordion>\n);"},{"name":"onToggle","snippet":"const onToggle = () => <Accordion onToggle={fn()}>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"},{"name":"active","snippet":"const active = () => <Accordion onToggle={fn()} active>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"},{"name":"defaultActive","snippet":"const defaultActive = () => <Accordion onToggle={fn()} defaultActive>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"},{"name":"renderProps","snippet":"const renderProps = () => <Accordion onToggle={fn()}>\n    <Accordion.Trigger>\n        {(attributes, { active }) => (\n            <Button attributes={{ ...attributes, \"data-active\": active }}>Trigger</Button>\n        )}\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Accordion className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Accordion.Trigger>\n                <Placeholder>Trigger</Placeholder>\n            </Accordion.Trigger>\n            <Accordion.Content>\n                <View paddingTop={2}>\n                    <Placeholder />\n                </View>\n            </Accordion.Content>\n        </Accordion>\n    </div>\n);"}],"import":"import { Accordion, Button, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Accordion","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Accordion/Accordion.tsx","actualName":"Accordion","exportName":"default"}},"utility-components-actionable":{"id":"utility-components-actionable","name":"Actionable","path":"./src/components/Actionable/tests/Actionable.stories.tsx","stories":[{"name":"base","snippet":"const base = () => <Example>\n    <Example.Item title=\"span\">\n        <Actionable>Span</Actionable>\n    </Example.Item>\n    <Example.Item title=\"onClick\">\n        <Actionable onClick={fn()}>Button</Actionable>\n    </Example.Item>\n    <Example.Item title=\"href\">\n        <Actionable href=\"https://reshaped.so\" attributes={{ target: \"_blank\" }}>Link\n                            </Actionable>\n    </Example.Item>\n    <Example.Item title=\"attributes.href\">\n        <Actionable attributes={{ href: \"https://reshaped.so\" }}>Link with attributes</Actionable>\n    </Example.Item>\n    <Example.Item title=\"href, onClick\">\n        <Actionable\n            onClick={(e) => {\n                e.preventDefault();\n                args.handleSecondClick(e);\n            }}\n            href=\"https://reshaped.so\">Link with onClick\n                            </Actionable>\n    </Example.Item>\n</Example>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, button\">\n            <Actionable disabled onClick={() => {}}>\n                Button\n            </Actionable>\n        </Example.Item>\n        <Example.Item title=\"disabled, link\">\n            <Actionable disabled href=\"https://reshaped.so\">\n                Link\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"fullWidth","snippet":"const fullWidth = () => (\n    <Example>\n        <Example.Item title=\"fullWidth\">\n            <Actionable fullWidth href=\"https://reshaped.so\">\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"insetFocus","snippet":"const insetFocus = () => (\n    <Example>\n        <Example.Item title=\"insetFocus\">\n            <Actionable insetFocus onClick={() => {}}>\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"disableFocusRing","snippet":"const disableFocusRing = () => (\n    <Example>\n        <Example.Item title=\"disableFocusRing\">\n            <Actionable disableFocusRing onClick={() => {}}>\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"borderRadius","snippet":"const borderRadius = () => (\n    <Example>\n        <Example.Item title=\"borderRadius: inherit\">\n            <Actionable borderRadius=\"inherit\" onClick={() => {}}>\n                <View borderRadius=\"large\">Actionable</View>\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"type","snippet":"const type = (args) => (\n    <Example>\n        <Example.Item title=\"type: submit\">\n            <form\n                onSubmit={(e) => {\n                    e.preventDefault();\n                    args.handleSubmit();\n                }}\n            >\n                <Actionable onClick={() => {}} type=\"submit\">\n                    Submit\n                </Actionable>\n            </form>\n        </Example.Item>\n    </Example>\n);"},{"name":"as","snippet":"const as = () => (\n    <Example>\n        <Example.Item title=\"as: span\">\n            <Actionable onClick={() => {}} as=\"span\">\n                Trigger\n            </Actionable>\n        </Example.Item>\n        <Example.Item title=\"render, disabled\">\n            <Actionable disabled onClick={() => {}} render={(props) => <section {...props} />}>\n                Trigger\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"stopPropagation","snippet":"const stopPropagation = () => <div onClick={fn()}>\n    <Actionable stopPropagation onClick={() => {}}>Trigger\n                    </Actionable>\n</div>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Actionable className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Actionable>\n    </div>\n);"}],"import":"import { Actionable, Example, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Actionable","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Actionable/Actionable.tsx","actualName":"Actionable","exportName":"default"}},"utility-components-container":{"id":"utility-components-container","name":"Container","path":"./src/components/Container/tests/Container.stories.tsx","stories":[{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: default\">\n            <Container>\n                <Placeholder />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"padding: 0\">\n            <Container padding={0}>\n                <Placeholder />\n            </Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"width: 200px, height: 200px\">\n            <Container width=\"200px\" height=\"200px\">\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width: 200px, height: 200px, maxHeight: 100px\">\n            <Container width=\"200px\" height=\"200px\" maxHeight=\"100px\">\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width, height: [s] 100px, [m+] 200px\">\n            <Container width={{ s: \"100px\", m: \"200px\" }} height={{ s: \"100px\", m: \"200px\" }}>\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width, height: [s] 100px, [m+] 200px, maxHeight: [s] 50px, [m+]: 100px\">\n            <Container\n                width={{ s: \"100px\", m: \"200px\" }}\n                height={{ s: \"100px\", m: \"200px\" }}\n                maxHeight={{ s: \"50px\", m: \"100px\" }}\n            >\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"flex","snippet":"const flex = () => (\n    <Example>\n        <Example.Item title=\"align: center, justify: center\">\n            <Container align=\"center\" justify=\"center\" height=\"200px\">\n                <Placeholder />\n            </Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Container className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </Container>\n    </div>\n);"}],"import":"import { Container, Example, Placeholder } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Container","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Container/Container.tsx","actualName":"Container","exportName":"default"}},"utility-components-dismissible":{"id":"utility-components-dismissible","name":"Dismissible","path":"./src/components/Dismissible/tests/Dismissible.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Dismissible closeAriaLabel=\"Close banner\" onClose={() => {}}>\n                <Placeholder />\n            </Dismissible>\n        </Example.Item>\n        <Example.Item title=\"variant: media\">\n            <View width=\"300px\">\n                <Dismissible variant=\"media\" closeAriaLabel=\"Close banner\" onClose={() => {}}>\n                    <View aspectRatio={16 / 9}>\n                        <Image\n                            height=\"100%\"\n                            src=\"https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)\"\n                        />\n                    </View>\n                </Dismissible>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"align","snippet":"const align = () => (\n    <Example>\n        <Example.Item title=\"align: center\">\n            <Dismissible align=\"center\" closeAriaLabel=\"Close\" onClose={() => {}}>\n                <Placeholder />\n            </Dismissible>\n        </Example.Item>\n\n        <Example.Item title=\"align: center, variant: media\">\n            <Dismissible align=\"center\" closeAriaLabel=\"Close\" variant=\"media\" onClose={() => {}}>\n                <View aspectRatio={16 / 9}>\n                    <Image\n                        height=\"100%\"\n                        src=\"https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)\"\n                    />\n                </View>\n            </Dismissible>\n        </Example.Item>\n    </Example>\n);"},{"name":"hideCloseButton","snippet":"const hideCloseButton = () => (\n    <Example>\n        <Example.Item title=\"hide close button\">\n            <div id=\"root\">\n                <Dismissible hideCloseButton>\n                    <Placeholder />\n                </Dismissible>\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"closeAriaLabel","snippet":"const closeAriaLabel = () => <Dismissible closeAriaLabel=\"Close\" onClose={fn()}>\n    <Placeholder />\n</Dismissible>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Dismissible\n            closeAriaLabel=\"Close\"\n            onClose={() => {}}\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n        >\n            <Placeholder />\n        </Dismissible>\n    </div>\n);"}],"import":"import { Dismissible, Example, Image, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Dismissible","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Dismissible/Dismissible.tsx","actualName":"Dismissible","exportName":"default"}},"utility-components-flyout":{"id":"utility-components-flyout","name":"Flyout","path":"./src/components/Flyout/tests/Flyout.stories.tsx","stories":[{"name":"position","snippet":"const position = () => {\n    return (\n        <View gap={4} padding={50} align=\"center\" justify=\"center\" height=\"100vh\" width=\"120%\">\n            <View gap={4} direction=\"row\">\n                <Demo position=\"top-start\" defaultActive />\n                <Demo position=\"top\" />\n                <Demo position=\"top-end\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"end-top\" />\n                <Demo position=\"end\" />\n                <Demo position=\"end-bottom\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"start-top\" />\n                <Demo position=\"start\" />\n                <Demo position=\"start-bottom\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"bottom-start\" />\n                <Demo position=\"bottom\" />\n                <Demo position=\"bottom-end\" />\n            </View>\n        </View>\n    );\n};"},{"name":"defaultActive","snippet":"const defaultActive = () => <Flyout onOpen={fn()} onClose={fn()} defaultActive>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"},{"name":"active","snippet":"const active = () => <Flyout onOpen={fn()} onClose={fn()} active>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"},{"name":"activeFalse","snippet":"const activeFalse = () => <Flyout onOpen={fn()} onClose={fn()} active={false}>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"},{"name":"modes","snippet":"const modes = () => {\n    return (\n        <Example>\n            <Example.Item title=\"triggerType: click\">\n                <View direction=\"row\" gap={4}>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"dialog\" text=\"dialog\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"action-menu\" text=\"action-menu\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"action-bar\" text=\"action-bar\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"content-menu\" text=\"content-menu\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode={false} text=\"false\">\n                        {modeContent}\n                    </Demo>\n                </View>\n            </Example.Item>\n\n            <Example.Item title=\"triggerType: hover\">\n                <View direction=\"row\" gap={4}>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"dialog\" triggerType=\"hover\" text=\"dialog\">\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"action-menu\"\n                        triggerType=\"hover\"\n                        text=\"action-menu\"\n                    >\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"action-bar\"\n                        triggerType=\"hover\"\n                        text=\"action-bar\"\n                    >\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"content-menu\"\n                        triggerType=\"hover\"\n                        text=\"content-menu\"\n                    >\n                        {modeContent}\n                    </Demo>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"positionFallbacks","snippet":"const positionFallbacks = () => {\n    return (\n        <Example>\n            <Example.Item title=\"position: top, default fallbacks\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" />\n                </View>\n            </Example.Item>\n            <Example.Item title=\"position: top, fallbackPositions: [start]\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" fallbackPositions={[\"start\"]} contentHeight={200} defaultActive />\n                </View>\n            </Example.Item>\n            <Example.Item title=\"position: top, fallbackPositions: false\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" fallbackPositions={false} contentHeight={400} />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"fallbackAdjustLayout","snippet":"const fallbackAdjustLayout = () => {\n    return (\n        <Demo\n            contentHeight={false}\n            position=\"bottom-start\"\n            width=\"200px\"\n            fallbackAdjustLayout\n            defaultActive\n        >\n            <div style={{ height: \"600px\" }}>Content</div>\n        </Demo>\n    );\n};"},{"name":"fallbackAdjustLayoutShift","snippet":"const fallbackAdjustLayoutShift = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={10}>\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    attributes={{ ref: containerRef }}\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls containerRef={containerRef} />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <FallbackAdjustLayoutControls />\n            <div style={{ height: \"100vh\", width: \"250%\" }} />\n        </View>\n    );\n};"},{"name":"fallbackAdjustLayoutSize","snippet":"const fallbackAdjustLayoutSize = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={10}>\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls large />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    attributes={{ ref: containerRef }}\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls containerRef={containerRef} large />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <FallbackAdjustLayoutControls large />\n            <div style={{ height: \"100vh\", width: \"250%\" }} />\n        </View>\n    );\n};"},{"name":"originCoordinates","snippet":"const originCoordinates = () => {\n    return (\n        <View gap={4} direction=\"row\">\n            <Demo position=\"bottom-start\" originCoordinates={{ x: 150, y: 150 }} defaultActive />\n        </View>\n    );\n};"},{"name":"width","snippet":"const width = () => (\n    <Example>\n        <Example.Item title=\"width: 300px\">\n            <Demo width=\"300px\" position=\"bottom\" />\n        </Example.Item>\n\n        <Example.Item title=\"width: trigger\">\n            <Demo width=\"trigger\" contentWidth={false} defaultActive />\n        </Example.Item>\n    </Example>\n);"},{"name":"contentGap","snippet":"const contentGap = () => <Demo contentGap={10} defaultActive />;"},{"name":"contentShift","snippet":"const contentShift = () => <Demo contentShift={10} defaultActive />;"},{"name":"disableContentHover","snippet":"const disableContentHover = () => <Demo triggerType=\"hover\" disableContentHover />;"},{"name":"disableCloseOnOutsideClick","snippet":"const disableCloseOnOutsideClick = () => <Demo disableCloseOnOutsideClick />;"},{"name":"disableHideAnimation","snippet":"const disableHideAnimation = () => <Demo disableHideAnimation defaultActive />;"},{"name":"disabled","snippet":"const disabled = () => (\n    <Flyout disabled>\n        <Flyout.Trigger>\n            {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n        </Flyout.Trigger>\n        <Flyout.Content>\n            <Content />\n        </Flyout.Content>\n    </Flyout>\n);"},{"name":"containerRef","snippet":"const containerRef = () => {\n    const portalRef = React.useRef<HTMLDivElement>(null);\n    const portalRef2 = React.useRef<HTMLDivElement>(null);\n    const portalRef3 = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={4} direction=\"row\">\n            <View\n                grow\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef, \"data-testid\": \"container\" }}\n                justify=\"end\"\n                align=\"start\"\n                padding={4}\n            >\n                <Demo containerRef={portalRef} position=\"bottom-start\" defaultActive />\n            </View>\n            <View\n                grow\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef2 }}\n                justify=\"start\"\n                align=\"end\"\n                padding={4}\n            >\n                <Demo containerRef={portalRef2} position=\"top-end\" />\n            </View>\n            <View\n                width={50}\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef3 }}\n                padding={4}\n                overflow=\"auto\"\n            >\n                <View height={120} width=\"120%\" justify=\"center\" align=\"center\">\n                    <Demo containerRef={portalRef3} position=\"bottom-end\" />\n                </View>\n            </View>\n        </View>\n    );\n};"},{"name":"initialFocusRef","snippet":"const initialFocusRef = () => {\n    const initialFocusRef = React.useRef<HTMLInputElement>(null);\n\n    return (\n        <Demo initialFocusRef={initialFocusRef}>\n            <View gap={4}>\n                <Button onClick={() => {}}>Action 1</Button>\n                <TextField name=\"foo\" inputAttributes={{ ref: initialFocusRef }} />\n            </View>\n        </Demo>\n    );\n};"},{"name":"instanceRef","snippet":"const instanceRef = () => {\n    const flyoutRef = React.useRef<FlyoutInstance>(null);\n\n    return (\n        <View direction=\"row\" gap={4}>\n            <Demo\n                instanceRef={flyoutRef}\n                disableCloseOnOutsideClick\n                onOpen={fn()}\n                onClose={fn()} />\n            <Button onClick={() => flyoutRef.current?.open()}>Open</Button>\n            <Button onClick={() => flyoutRef.current?.close()}>Close</Button>\n        </View>\n    );\n};"},{"name":"contentAttributes","snippet":"const contentAttributes = () => {\n    return (\n        <Flyout position=\"bottom\" defaultActive>\n            <Flyout.Trigger>\n                {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n            </Flyout.Trigger>\n            <Flyout.Content attributes={{ \"data-testid\": \"test-id\" }} className=\"test-classname\">\n                <Content />\n            </Flyout.Content>\n        </Flyout>\n    );\n};"},{"name":"testShadowDom","snippet":"const testShadowDom = () => <custom-element-flyout />;"},{"name":"testInsideFixed","snippet":"const testInsideFixed = () => (\n    <React.Fragment>\n        <View\n            position=\"fixed\"\n            insetBottom={2}\n            insetStart={2}\n            insetEnd={2}\n            backgroundColor=\"elevation-overlay\"\n            borderColor=\"neutral-faded\"\n            borderRadius=\"small\"\n            padding={4}\n            zIndex={10}\n            attributes={{ \"data-testid\": \"container\" }}\n            height={20}\n        >\n            <Demo defaultActive position=\"top-start\" />\n        </View>\n        <View paddingTop={18} gap={4}>\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n        </View>\n    </React.Fragment>\n);"},{"name":"testInsideSticky","snippet":"const testInsideSticky = () => (\n    <React.Fragment>\n        <View\n            position=\"sticky\"\n            insetTop={4}\n            insetStart={0}\n            insetEnd={0}\n            backgroundColor=\"elevation-overlay\"\n            borderColor=\"neutral-faded\"\n            borderRadius=\"small\"\n            padding={4}\n            zIndex={10}\n            attributes={{ \"data-testid\": \"container\" }}\n        >\n            <Demo defaultActive />\n        </View>\n        <View gap={4} paddingTop={2}>\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n        </View>\n    </React.Fragment>\n);"},{"name":"testInsideScrollable","snippet":"const testInsideScrollable = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View padding={20}>\n            <View height={30} overflow=\"auto\" backgroundColor=\"neutral-faded\" borderRadius=\"small\">\n                <View height={50} attributes={{ ref: containerRef }} padding={20} paddingBottom={30}>\n                    <Demo position=\"bottom\" />\n                </View>\n            </View>\n        </View>\n    );\n};"},{"name":"testInsideModal","snippet":"const testInsideModal = () => {\n    return (\n        <Modal active position=\"end\">\n            <View gap={4} align=\"start\">\n                <Modal.Title>Title</Modal.Title>\n                <Demo position=\"bottom-start\" />\n                <View height={300} width={25} backgroundColor=\"neutral-faded\" />\n                <Demo position=\"start\" />\n                <View height={300} width={25} backgroundColor=\"neutral-faded\" />\n                <Demo position=\"bottom-start\" />\n            </View>\n        </Modal>\n    );\n};"},{"name":"testDynamicBounds","snippet":"const testDynamicBounds = () => {\n    const [left, setLeft] = React.useState(50);\n    const [top, setTop] = React.useState(50);\n    const [size, setSize] = React.useState<\"medium\" | \"large\">(\"medium\");\n    const flyoutRef = React.useRef<FlyoutInstance>(null);\n\n    React.useEffect(() => {\n        flyoutRef.current?.updatePosition();\n    }, [left, top]);\n\n    return (\n        <View gap={4}>\n            <View direction=\"row\" gap={2}>\n                <Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>\n                <Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>\n                <Button onClick={() => setTop((prev) => prev - 10)}>Up</Button>\n                <Button onClick={() => setTop((prev) => prev + 10)}>Down</Button>\n                <Button\n                    onClick={() => {\n                        setLeft(50);\n                        setTop(50);\n                    }}\n                >\n                    Center\n                </Button>\n                <Button onClick={() => setSize(\"large\")}>Large button</Button>\n                <Button onClick={() => setSize(\"medium\")}>Small button</Button>\n            </View>\n            <View height={100}>\n                <Flyout\n                    position=\"bottom\"\n                    instanceRef={flyoutRef}\n                    disableCloseOnOutsideClick\n                    defaultActive\n                >\n                    <Flyout.Trigger>\n                        {(attributes) => (\n                            <div style={{ position: \"absolute\", left: `${left}%`, top: `${top}%` }}>\n                                <Button color=\"primary\" attributes={attributes} size={size}>\n                                    Open\n                                </Button>\n                            </div>\n                        )}\n                    </Flyout.Trigger>\n                    <Flyout.Content>\n                        <Content />\n                    </Flyout.Content>\n                </Flyout>\n            </View>\n        </View>\n    );\n};"},{"name":"testScopedTheming","snippet":"const testScopedTheming = () => (\n    <View gap={3} align=\"start\">\n        <Button color=\"primary\">Slate button</Button>\n        <Theme name=\"reshaped\">\n            <Flyout triggerType=\"click\" active position=\"bottom-start\">\n                <Flyout.Trigger>\n                    {(attributes) => (\n                        <Button color=\"primary\" attributes={attributes}>\n                            Reshaped button\n                        </Button>\n                    )}\n                </Flyout.Trigger>\n                <Flyout.Content>\n                    <Content>\n                        <View gap={1}>\n                            <View.Item>Portal content, rendered in body</View.Item>\n                            <Button color=\"primary\">Reshaped button</Button>\n                        </View>\n                    </Content>\n                </Flyout.Content>\n            </Flyout>\n        </Theme>\n    </View>\n);"},{"name":"testWithoutFocusable","snippet":"const testWithoutFocusable = () => <Demo position=\"bottom-start\" />;"},{"name":"testChangeSize","snippet":"const testChangeSize = () => {\n    const [position, setPosition] = React.useState<FlyoutProps[\"position\"]>(\"bottom-start\");\n    const [updatedHeight, setUpdatedHeight] = React.useState(false);\n\n    return (\n        <>\n            <View direction=\"row\" gap={4} align=\"center\">\n                <Select\n                    name=\"position\"\n                    options={[\n                        \"bottom-start\",\n                        \"bottom\",\n                        \"bottom-end\",\n                        \"top-start\",\n                        \"top\",\n                        \"top-end\",\n                        \"start-top\",\n                        \"start\",\n                        \"start-bottom\",\n                        \"end-top\",\n                        \"end\",\n                        \"end-bottom\",\n                    ].map((p) => ({ label: p, value: p }))}\n                    onChange={(args) => setPosition(args.value as FlyoutProps[\"position\"])}\n                    value={position}\n                />\n                <Switch name=\"height\" onChange={(args) => setUpdatedHeight(args.checked)}>\n                    Change height\n                </Switch>\n            </View>\n            <div\n                style={{\n                    position: \"fixed\",\n                    top: \"50%\",\n                    left: \"50%\",\n                    transform: \"translate(-50%, -50%)\",\n                }}\n            >\n                <Demo position={position} disableCloseOnOutsideClick active contentHeight={false}>\n                    <View\n                        backgroundColor=\"neutral-faded\"\n                        borderRadius=\"small\"\n                        height={updatedHeight ? 50 : 25}\n                        attributes={{ style: { transition: \"0.2s ease-in-out\" } }}\n                    />\n                </Demo>\n            </div>\n        </>\n    );\n};"}],"import":"import {\n    Button,\n    Example,\n    Flyout,\n    Modal,\n    Reshaped,\n    Select,\n    Switch,\n    TextField,\n    Theme,\n    View,\n} from \"reshaped\";\nimport React from \"react\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Flyout","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Flyout/Flyout.tsx","actualName":"Flyout","exportName":"default"}},"utility-components-formcontrol":{"id":"utility-components-formcontrol","name":"FormControl","path":"./src/components/FormControl/tests/FormControl.stories.tsx","stories":[{"name":"status","snippet":"const status = () => (\n    <Example>\n        <Example.Item title=\"status: default\">\n            <FormControl>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"status: error\">\n            <FormControl hasError>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: medium\">\n            <FormControl size=\"medium\">\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <FormControl size=\"large\">\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" size=\"large\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <FormControl disabled>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"required","snippet":"const required = () => (\n    <Example>\n        <Example.Item title=\"required\">\n            <FormControl required>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"composition","snippet":"const composition = () => (\n    <Example>\n        <Example.Item title=\"horizontal\">\n            <FormControl>\n                <View direction=\"row\" gap={10} align=\"center\">\n                    <View width=\"100px\">\n                        <FormControl.Label>Label</FormControl.Label>\n                    </View>\n                    <View.Item grow>\n                        <TextField name=\"name\" placeholder=\"Enter value\" />\n                    </View.Item>\n                </View>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <FormControl id=\"test-id\" hasError>\n        <FormControl.Label>Label</FormControl.Label>\n        <TextField name=\"name\" />\n        <FormControl.Helper>Caption</FormControl.Helper>\n        <FormControl.Error>Error</FormControl.Error>\n    </FormControl>\n);"},{"name":"group","snippet":"const group = () => (\n    <FormControl group>\n        <FormControl.Label>Label</FormControl.Label>\n        <RadioGroup name=\"name\">\n            <View gap={2}>\n                <Radio value=\"1\">One</Radio>\n                <Radio value=\"2\">Two</Radio>\n            </View>\n        </RadioGroup>\n    </FormControl>\n);"}],"import":"import { Example, FormControl, Radio, RadioGroup, TextField, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"FormControl","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/FormControl/FormControl.tsx","actualName":"FormControl","exportName":"default"}},"utility-components-grid":{"id":"utility-components-grid","name":"Grid","path":"./src/components/Grid/tests/Grid.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"gap: 2\">\n            <Grid gap={2} columns={2}>\n                {[1, 2].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"columnGap: 2, rowGap: 4\">\n            <Grid columnGap={2} rowGap={4} columns={2}>\n                {[1, 2, 3, 4].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"align: center\">\n            <Grid gap={2} columns={2} align=\"center\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={8}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"justify: center\">\n            <Grid gap={2} columns=\"200px 200px\" justify=\"center\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"maxWidth: 400px\">\n            <Grid gap={2} columns=\"200px 200px\" maxWidth=\"400px\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"width: 400px, height: 200px\">\n            <Grid gap={2} columns={2} width=\"400px\" height=\"200px\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"layout","snippet":"const layout = () => (\n    <Example>\n        <Example.Item title=\"simple: 2 rows, 3 columns\">\n            <Grid gap={4} columns={3} rows={2}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"columns template, 1fr 2fr 1fr\">\n            <Grid gap={4} columns=\"1fr 2fr 1fr\" rows={2}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"rows template, 1fr 2fr\">\n            <Grid gap={4} columns={3} rows=\"1fr 2fr\">\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"responsive\">\n            <Grid gap={4} columns={{ s: 3, m: \"1fr 2fr 1fr\" }} rows={{ s: 2, m: \"1fr 2fr\" }}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"itemLayout","snippet":"const itemLayout = () => (\n    <Example>\n        <Example.Item title=\"column, start 1, end 3\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item colStart={1} colEnd={3}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"column, start 1, span 2\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item colStart={1} colSpan={2}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"row, start 1, end 3\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowEnd={3}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"row, start 1, span 2\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowSpan={2}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"responsive\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"areas","snippet":"const areas = () => (\n    <Example>\n        <Example.Item title=\"simple: 2 rows, 3 columns\">\n            <Grid gap={4} rows={2} areas={[\"a .\", \"a b\"]}>\n                {[\"a\", \"b\"].map((area) => (\n                    <Grid.Item area={area} key={area}>\n                        <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                            {area}\n                        </View>\n                    </Grid.Item>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"auto","snippet":"const auto = () => (\n    <Example>\n        <Example.Item title=\"auto flow: column\">\n            <Grid gap={4} autoFlow=\"column\" rows={2} columns={2}>\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"auto rows\">\n            <Grid gap={4} autoRows=\"100px\" columns={2}>\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"auto columns\">\n            <Grid gap={4} autoColumns=\"100px\" autoFlow=\"column\">\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"as","snippet":"const as = () => (\n    <Grid as=\"ul\">\n        <Grid.Item as=\"li\">Content</Grid.Item>\n    </Grid>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Grid className=\"test-class\" attributes={{ id: \"test-id\" }}>\n            <Grid.Item className=\"test-item-class\" attributes={{ id: \"test-item-id\" }}>\n                Content\n            </Grid.Item>\n        </Grid>\n    </div>\n);"}],"import":"import { Example, Grid, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Grid","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Grid/Grid.tsx","actualName":"Grid","exportName":"default"}},"utility-components-hidden":{"id":"utility-components-hidden","name":"Hidden","path":"./src/components/Hidden/tests/Hidden.stories.tsx","stories":[{"name":"visibility","snippet":"const visibility = () => (\n    <Example>\n        <Example.Item title=\"hide: always\">\n            <Hidden hide={true}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on s\">\n            <Hidden hide={{ s: false, m: true }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on l/xl\">\n            <Hidden hide={{ s: true, l: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on m/l/xl\">\n            <Hidden hide={{ s: true, m: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on m\">\n            <Hidden hide={{ s: true, m: false, l: true }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on s/xl\">\n            <Hidden hide={{ s: false, m: true, xl: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"hide: always, visibility\">\n            <Hidden hide visibility>\n                Content\n            </Hidden>\n        </Example.Item>\n    </Example>\n);"},{"name":"as","snippet":"const as = () => <Hidden as=\"span\">Content</Hidden>;"}],"import":"import { Example, Hidden } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Hidden","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Hidden/Hidden.tsx","actualName":"Hidden","exportName":"default"}},"utility-components-hiddenvisually":{"id":"utility-components-hiddenvisually","name":"HiddenVisually","path":"./src/components/HiddenVisually/tests/HiddenVisually.stories.tsx","stories":[{"name":"visibility","snippet":"const visibility = () => (\n    <Example>\n        <Example.Item title=\"pronounced by screen readers\">\n            <HiddenVisually>Screen-reader only</HiddenVisually>\n        </Example.Item>\n    </Example>\n);"},{"name":"children","snippet":"const children = () => <HiddenVisually>Content</HiddenVisually>;"}],"import":"import { Example, HiddenVisually } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"HiddenVisually","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/HiddenVisually/HiddenVisually.tsx","actualName":"HiddenVisually","exportName":"default"}},"utility-components-icon":{"id":"utility-components-icon","name":"Icon","path":"./src/components/Icon/tests/Icon.stories.tsx","stories":[{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: 4\">\n            <Icon svg={IconZap} size={4} />\n        </Example.Item>\n        <Example.Item title=\"size: 8\">\n            <Icon svg={IconZap} size={8} />\n        </Example.Item>\n        <Example.Item title=\"size: 100%\">\n            <View width={25} height={25}>\n                <Icon svg={IconZap} size=\"100%\" />\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive size\", \"[s] 5\", \"[m]: 10\"]}>\n            <Icon svg={IconZap} size={{ s: 5, m: 10 }} />\n        </Example.Item>\n        <Example.Item title=\"size: inherit from font\">\n            <Text variant=\"title-6\">\n                <View direction=\"row\" align=\"center\" gap={2}>\n                    <Icon svg={IconZap} />\n                    <View.Item>Reshaped</View.Item>\n                </View>\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <Icon svg={IconZap} color=\"neutral\" />\n        </Example.Item>\n        <Example.Item title=\"color: neutral-faded\">\n            <Icon svg={IconZap} color=\"neutral-faded\" />\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <Icon svg={IconZap} color=\"primary\" />\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Icon svg={IconZap} color=\"critical\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Icon svg={IconZap} color=\"positive\" />\n        </Example.Item>\n        <Example.Item title=\"color: disabled\">\n            <Icon svg={IconZap} color=\"disabled\" />\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <div style={{ color: \"tomato\" }}>\n                <Icon svg={IconZap} />\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"autoWidth","snippet":"const autoWidth = () => (\n    <Example>\n        <Example.Item title=\"square boundaries\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={IconMic} size={10} />\n            </div>\n        </Example.Item>\n        <Example.Item title=\"auto width boundaries\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={IconMic} size={10} autoWidth />\n            </div>\n        </Example.Item>\n        <Example.Item title=\"blank\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={null} size={10} />\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Icon svg={IconZap} className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"},{"name":"render","snippet":"const render = () => (\n    <div data-testid=\"root\">\n        <Icon svg={IconZap} />\n    </div>\n);"}],"import":"import { Example, Icon, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Icon","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Icon/Icon.tsx","actualName":"Icon","exportName":"default"}},"utility-components-image":{"id":"utility-components-image","name":"Image","path":"./src/components/Image/tests/Image.stories.tsx","stories":[{"name":"src","snippet":"const src = () => (\n    <Example>\n        <Example.Item title=\"src, alt\">\n            <Image src={imgUrl} alt=\"Image alt\" />\n        </Example.Item>\n\n        <Example.Item title=\"src\">\n            <Image src={imgUrl} />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"width: 200px\">\n            <Image src={imgUrl} width=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"height: 200px\">\n            <Image src={imgUrl} height=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"maxWidth: 200px\">\n            <Image src={imgUrl} maxWidth=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"aspectRatio: 1/1\">\n            <Image src={imgUrl} aspectRatio={1 / 1} width=\"300px\" />\n        </Example.Item>\n        <Example.Item title={[\"responsive width\", \"[s] 200px\", \"[m+] 300px\"]}>\n            <Image src={imgUrl} width={{ s: \"200px\", m: \"300px\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"radius","snippet":"const radius = () => (\n    <Example>\n        <Example.Item title=\"radius: small\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"small\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"radius: medium\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"medium\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"radius: large\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"displayMode","snippet":"const displayMode = () => (\n    <Example>\n        <Example.Item title=\"mode: cover\">\n            <Image src={imgUrl} height=\"200px\" width=\"100%\" displayMode=\"cover\" />\n        </Example.Item>\n        <Example.Item title=\"mode: contain\">\n            <Image src={imgUrl} height=\"200px\" width=\"100%\" displayMode=\"contain\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"onLoad","snippet":"const onLoad = () => <Image src={imgUrl} alt=\"photo\" onLoad={fn()} />;"},{"name":"onError","snippet":"const onError = () => <Image src=\"/invalid.png\" alt=\"photo\" onError={fn()} />;"},{"name":"fallback","snippet":"const fallback = () => (\n    <Example>\n        <Example.Item title=\"fallback, background, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"fallback, image, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback={imgUrl} />\n                </View>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"fallback, icon, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback={<Icon svg={IconZap} size={10} />} />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"fallback, icon, no url\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image fallback={<Icon svg={IconZap} size={10} />} />\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"renderImage","snippet":"const renderImage = () => (\n    <Example>\n        <Example.Item title=\"renderImage\">\n            <Image\n                src={imgUrl}\n                alt=\"Amsterdam canal\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image\" />}\n            />\n        </Example.Item>\n        <Example.Item title=\"renderImage, fallback\">\n            <Image\n                src=\"error\"\n                fallback={imgUrl}\n                alt=\"Amsterdam canal 2\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image-fallback\" />}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"imageAttributes","snippet":"const imageAttributes = () => (\n    <div data-testid=\"root\">\n        <Image\n            src={imgUrl}\n            alt=\"photo\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            imageAttributes={{ \"data-testid\": \"test-img-id\" }}\n        />\n    </div>\n);"},{"name":"ratio","snippet":"const ratio = () => (\n    <Example>\n        <Example.Item title=\"ratio: 16/9\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"ratio: 16/9, displayMode: contain\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} displayMode=\"contain\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, Icon, Image, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Image","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Image/Image.tsx","actualName":"Image","exportName":"default"}},"utility-components-overlay":{"id":"utility-components-overlay","name":"Overlay","path":"./src/components/Overlay/tests/Overlay.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate}>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"transparent","snippet":"const transparent = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} transparent>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"blurred","snippet":"const blurred = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} blurred>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"renderProps","snippet":"const renderProps = () => (\n    <Overlay active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        {(args) => (args.active ? \"Opened\" : \"Closed\")}\n    </Overlay>\n);"},{"name":"handlers","snippet":"const handlers = () => {\n    const overlayToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>\n            <Overlay\n                active={overlayToggle.active}\n                onClose={(closeArgs) => {\n                    overlayToggle.deactivate();\n                    args.handleClose(closeArgs);\n                }}\n                onOpen={fn()}\n                onAfterOpen={fn()}\n                onAfterClose={fn()}>Content\n                                </Overlay>\n        </>\n    );\n};"},{"name":"disableCloseOnClick","snippet":"const disableCloseOnClick = (args) => (\n    <Overlay\n        active\n        disableCloseOnClick\n        onClose={(closeArgs) => {\n            args.handleClose(closeArgs);\n        }}\n    >\n        Content\n    </Overlay>\n);"},{"name":"containerRef","snippet":"const containerRef = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <>\n            <div ref={containerRef} data-testid=\"test-id\" style={{ height: 200 }} />\n            <Overlay active containerRef={containerRef}>\n                Content\n            </Overlay>\n        </>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <Overlay active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        Content\n    </Overlay>\n);"}],"import":"import { Button, Example, Overlay } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Overlay","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Overlay/Overlay.tsx","actualName":"Overlay","exportName":"default"}},"utility-components-reshaped":{"id":"utility-components-reshaped","name":"Reshaped","path":"./src/components/Reshaped/tests/Reshaped.stories.tsx","stories":[{"name":"rtl","snippet":"const rtl = () => (\n    <Reshaped defaultRTL theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"},{"name":"controlledMode","snippet":"const controlledMode = () => {\n    const [mode, setMode] = useState<G.ColorMode>(\"dark\");\n\n    return (\n        <Reshaped theme=\"reshaped\" colorMode={mode}>\n            <Button\n                onClick={() => {\n                    setMode(mode === \"dark\" ? \"light\" : \"dark\");\n                }}\n            >\n                Toggle color mode\n            </Button>\n        </Reshaped>\n    );\n};"},{"name":"lightMode","snippet":"const lightMode = () => <Reshaped theme=\"reshaped\">Hello</Reshaped>;"},{"name":"darkMode","snippet":"const darkMode = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"},{"name":"scoped","snippet":"const scoped = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\" scoped>\n        Hello\n    </Reshaped>\n);"},{"name":"testScoped","snippet":"const testScoped = () => (\n    <Reshaped theme=\"reshaped\">\n        <Reshaped theme=\"slate\" scoped>\n            <ScopedComponent />\n        </Reshaped>\n    </Reshaped>\n);"},{"name":"keyboardMode","snippet":"const keyboardMode = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"}],"import":"import { Button, Reshaped } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Reshaped","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Reshaped/Reshaped.tsx","actualName":"Reshaped","exportName":"default"}},"utility-components-scrollarea":{"id":"utility-components-scrollarea","name":"ScrollArea","path":"./src/components/ScrollArea/tests/ScrollArea.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"vertical scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"horizontal scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\" height=\"100px\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"horizontal and vertical scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"},{"name":"scrollbarDisplay","snippet":"const scrollbarDisplay = () => (\n    <Example>\n        <Example.Item title=\"scrollbarDisplay: hover\">\n            <ScrollArea height=\"100px\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"scrollbarDisplay: hidden\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"hidden\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"scrollbarDisplay: visible\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"},{"name":"height","snippet":"const height = () => (\n    <Example>\n        <Example.Item title=\"height: 80px\">\n            <ScrollArea height=\"80px\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"responsive height: s 80px, m: 120px\">\n            <ScrollArea height={{ s: \"80px\", m: \"120px\" }}>\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"maxHeight: 80px\">\n            <ScrollArea maxHeight=\"80px\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"responsive max height: s 80px, m: 200px\">\n            <ScrollArea maxHeight={{ s: \"80px\", m: \"200px\" }}>\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"},{"name":"onScroll","snippet":"const onScroll = () => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={4}>\n            <View.Item>\n                <Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>\n            </View.Item>\n            <ScrollArea height=\"100px\" ref={ref} scrollbarDisplay=\"visible\" onScroll={fn()}>\n                <View backgroundColor=\"neutral-faded\" padding={4} width=\"1000px\" height=\"200px\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                                            has been the industry's standard dummy text ever since the 1500s, when an unknown\n                                            printer took a galley of type and scrambled it to make a type specimen book. It has\n                                            survived not only five centuries, but also the leap into electronic typesetting,\n                                            remaining essentially unchanged. It was popularised in the 1960s with the release of\n                                            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                                            publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                                        </View>\n            </ScrollArea>\n        </View>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <ScrollArea className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </ScrollArea>\n    </div>\n);"},{"name":"testNested","snippet":"const testNested = () => (\n    <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n        <View padding={4} paddingInline={16}>\n            <ScrollArea height=\"200px\" scrollbarDisplay=\"visible\">\n                {Array(20)\n                    .fill(\"\")\n                    .map((_, index) => {\n                        return <div key={index}>Item {index + 1}</div>;\n                    })}\n            </ScrollArea>\n        </View>\n    </ScrollArea>\n);"},{"name":"testDynamicHeight","snippet":"const testDynamicHeight = () => {\n    const [count, setCount] = React.useState(10);\n\n    return (\n        <View gap={4}>\n            <View.Item>\n                <Button onClick={() => setCount((prev) => prev + 10)}>Add more items</Button>\n            </View.Item>\n\n            <ScrollArea height=\"200px\" scrollbarDisplay=\"visible\">\n                <View gap={2}>\n                    {new Array(count).fill(\"\").map((_, i) => (\n                        <View.Item key={i}>Item {i + 1}</View.Item>\n                    ))}\n                </View>\n            </ScrollArea>\n        </View>\n    );\n};"}],"import":"import { Button, Example, ScrollArea, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ScrollArea","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ScrollArea/ScrollArea.tsx","actualName":"ScrollArea","exportName":"default"}},"utility-components-text":{"id":"utility-components-text","name":"Text","path":"./src/components/Text/tests/Text.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: title-1\">\n            <Text variant=\"title-1\">Title 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-2\">\n            <Text variant=\"title-2\">Title 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-3\">\n            <Text variant=\"title-3\">Title 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-4\">\n            <Text variant=\"title-4\">Title 4</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-5\">\n            <Text variant=\"title-5\">Title 5</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-6\">\n            <Text variant=\"title-6\">Title 6</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-1\">\n            <Text variant=\"featured-1\">Featured 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-2\">\n            <Text variant=\"featured-2\">Featured 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-3\">\n            <Text variant=\"featured-3\">Featured 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-1\">\n            <Text variant=\"body-1\">Body 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-2\">\n            <Text variant=\"body-2\">Body 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-3\">\n            <Text variant=\"body-3\">Body 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: caption-1\">\n            <Text variant=\"caption-1\">Caption 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: caption-2\">\n            <Text variant=\"caption-2\">Caption 2</Text>\n        </Example.Item>\n        <Example.Item title={[\"responsive variant\", \"[s] body-3\", \"[m+] title-4\"]}>\n            <Text variant={{ s: \"body-3\", m: \"title-4\" }}>Responsive</Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"weight","snippet":"const weight = () => (\n    <Example>\n        <Example.Item title=\"weight: regular\">\n            <Text weight=\"regular\">Regular</Text>\n        </Example.Item>\n        <Example.Item title=\"weight: medium\">\n            <Text weight=\"medium\">Medium</Text>\n        </Example.Item>\n        <Example.Item title=\"weight: bold\">\n            <Text weight=\"bold\">Bold</Text>\n        </Example.Item>\n        <Example.Item title={[\"responsive\", \"[s] weight: regular\", \"[m+] bold\"]}>\n            <Text weight={{ s: \"regular\", m: \"bold\" }}>Responsive</Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: inherit\">\n            <Text>Neutral</Text>\n        </Example.Item>\n        <Example.Item title=\"color: neutral-faded\">\n            <Text color=\"neutral-faded\">Faded</Text>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Text color=\"positive\">Positive</Text>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <Text color=\"warning\">Warning</Text>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Text color=\"critical\">Critical</Text>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <Text color=\"primary\">Primary</Text>\n        </Example.Item>\n        <Example.Item title=\"color: disabled\">\n            <Text color=\"disabled\" attributes={{ \"aria-disabled\": true }}>\n                Disabled\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"decoration","snippet":"const decoration = () => (\n    <Example>\n        <Example.Item title=\"decoration: line-through\">\n            <Text decoration=\"line-through\">Line through</Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"wrap","snippet":"const wrap = () => (\n    <Example>\n        <Example.Item title=\"wrap: balance\">\n            <Text wrap=\"balance\" variant=\"title-3\">\n                The design system you want to build\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"mono","snippet":"const mono = () => (\n    <Example>\n        <Example.Item title=\"monospace\">\n            <Text monospace>Content</Text>\n        </Example.Item>\n        <Example.Item title=\"monospace, variant, weight\">\n            <Text monospace variant=\"title-1\" weight=\"regular\">\n                Content\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"maxLines","snippet":"const maxLines = () => (\n    <Example>\n        <Example.Item title=\"maxLines: 2\">\n            <Text maxLines={2}>\n                There are many variations of passages of Lorem Ipsum available, but the majority have\n                suffered alteration in some form, by injected humour, or randomised words which don't look\n                even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be\n                sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum\n                generators on the Internet tend to repeat predefined chunks as necessary, making this the\n                first true generator on the Internet. It uses a dictionary of over 200 Latin words,\n                combined with a handful of model sentence structures, to generate Lorem Ipsum which looks\n                reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected\n                humour, or non-characteristic words etc.\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"align","snippet":"const align = () => (\n    <Example>\n        <Example.Item title=\"align: start\">\n            <Text align=\"start\">Text content</Text>\n        </Example.Item>\n        <Example.Item title=\"align: center\">\n            <Text align=\"center\">Text content</Text>\n        </Example.Item>\n        <Example.Item title=\"align: end\">\n            <Text align=\"end\">Text content</Text>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive alignment\", \"[s]: center\", \"[m+] start\"]}>\n            <Text align={{ s: \"center\", m: \"start\" }}>Text content</Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"asProp","snippet":"const asProp = () => (\n    <>\n        <Text as=\"h1\">Content</Text>\n        <Text variant=\"title-3\">Content</Text>\n        <Text variant={{ s: \"title-3\", m: \"title-4\" }}>Content</Text>\n    </>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Text className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Text>\n    </div>\n);"}],"import":"import { Example, Text } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Text","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Text/Text.tsx","actualName":"Text","exportName":"default"}},"utility-components-theme":{"id":"utility-components-theme","name":"Theme","path":"./src/components/Theme/tests/Theme.stories.tsx","stories":[{"name":"scoped","snippet":"const scoped = () => (\n    <Example>\n        <Example.Item title=\"scoped, single\">\n            <Theme name=\"reshaped\">\n                <Card attributes={{ \"data-testid\": \"test-id\" }}>\n                    <Button color=\"primary\">Action</Button>\n                </Card>\n            </Theme>\n        </Example.Item>\n\n        <Example.Item title=\"scoped, multiple\">\n            <Theme name={[\"reshaped\", \"figma\"]}>\n                <Card attributes={{ \"data-testid\": \"test-id-multi\" }}>\n                    <View direction=\"row\" gap={4}>\n                        <Button color=\"primary\">Action</Button>\n\n                        <Popover>\n                            <Popover.Trigger>\n                                {(attributes) => <Button attributes={attributes}>Popover</Button>}\n                            </Popover.Trigger>\n                            <Popover.Content>Content</Popover.Content>\n                        </Popover>\n                    </View>\n                </Card>\n            </Theme>\n        </Example.Item>\n    </Example>\n);"},{"name":"light","snippet":"const light = () => (\n    <Theme name=\"reshaped\" colorMode=\"light\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"},{"name":"dark","snippet":"const dark = () => (\n    <Theme name=\"reshaped\" colorMode=\"dark\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"},{"name":"inherited","snippet":"const inherited = () => (\n    <Theme name=\"reshaped\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"},{"name":"inverted","snippet":"const inverted = () => (\n    <Theme name=\"reshaped\" colorMode=\"inverted\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"},{"name":"controlled","snippet":"const controlled = () => {\n    const Internal = () => {\n        const { setTheme, theme } = useTheme();\n\n        return (\n            <Button color=\"primary\" onClick={() => setTheme(\"slate\")}>\n                Switch to slate\n            </Button>\n        );\n    };\n\n    return (\n        <div data-testid=\"root\">\n            <Theme name=\"reshaped\">\n                <Internal />\n            </Theme>\n        </div>\n    );\n};"},{"name":"uncontrolled","snippet":"const uncontrolled = () => {\n    const Internal = () => {\n        const { setTheme } = useTheme();\n\n        return (\n            <Button color=\"primary\" onClick={() => setTheme(\"slate\")}>\n                Switch to slate\n            </Button>\n        );\n    };\n\n    return (\n        <div data-testid=\"root\">\n            <Theme defaultName=\"reshaped\">\n                <Internal />\n            </Theme>\n        </div>\n    );\n};"},{"name":"disabledTransition","snippet":"const disabledTransition = () => {\n    const { invertColorMode } = useTheme();\n\n    return (\n        <Example>\n            <Example.Item title=\"should have no transitions while switching color mode\">\n                <View gap={3}>\n                    <Button onClick={invertColorMode}>Invert mode</Button>\n\n                    <MenuItem selected>Test transition</MenuItem>\n\n                    <Card>Default card</Card>\n\n                    <Theme colorMode=\"inverted\">\n                        <Card>Inverted card</Card>\n                    </Theme>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import { Button, Card, Example, MenuItem, Popover, Theme, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Theme","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Theme/Theme.tsx","actualName":"Theme","exportName":"default"}},"utility-components-view":{"id":"utility-components-view","name":"View","path":"./src/components/View/tests/View.stories.tsx","stories":[{"name":"padding","snippet":"const padding = () => (\n    <Example title=\"Border is used to highlight the padding value\">\n        <Example.Item title=\"padding: 4\">\n            <View padding={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <View padding={6} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: 0\">\n            <View padding={0} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: vertical 2, horizontal 4\">\n            <View paddingInline={4} paddingBlock={2} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingTop: 4\">\n            <View paddingTop={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingBottom: 4\">\n            <View paddingBottom={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingStart: 4\">\n            <View paddingStart={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingEnd: 4\">\n            <View paddingEnd={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive padding:\",\n                \"[s] vertical 2, horizontal 4\",\n                \"[m+] vertical 4, horizontal 8\",\n            ]}\n        >\n            <View paddingInline={{ s: 4, m: 8 }} paddingBlock={{ s: 2, m: 4 }} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"responsive padding:\", \"[s] top 2, bottom 4\", \"[m+] top 4, bottom 0, start: 8\"]}\n        >\n            <View\n                paddingTop={{ s: 2, m: 4 }}\n                paddingBottom={{ s: 4, m: 0 }}\n                paddingStart={{ s: 0, m: 8 }}\n                borderColor=\"neutral\"\n            >\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"nested padding, child view should have no horizontal padding\">\n            <View paddingStart={4} borderColor=\"neutral\">\n                <View borderColor=\"primary\" paddingBlock={4}>\n                    <Placeholder />\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"direction","snippet":"const direction = () => (\n    <Example title=\"Item 1 is another component, Item 2 is View.Item, Item 3 is text\">\n        <Example.Item title=\"direction: column as default\">\n            <View gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <View gap={3} direction=\"column\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column-reverse\">\n            <View gap={3} direction=\"column-reverse\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row\">\n            <View gap={3} direction=\"row\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row-reverse\">\n            <View gap={3} direction=\"row-reverse\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"responsive direction\", \"[s] column-reverse\", \"[m] row-reverse\", \"[l+] row\"]}\n        >\n            <View direction={{ s: \"column-reverse\", m: \"row-reverse\", l: \"row\" }} gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"gap","snippet":"const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 4, direction: row\">\n            <View direction=\"row\" gap={4} divided>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n                <Placeholder>Item 3</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 0, direction: row\">\n            <View direction=\"row\" gap={0}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap, direction: row\", \"[s] 4\", \"[m+] 8\"]}>\n            <View direction=\"row\" gap={{ s: 4, m: 8 }}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 4, direction: column\">\n            <View gap={4}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 0, direction: column\">\n            <View gap={0}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap, direction: column\", \"[s] 4\", \"[m+] 8\"]}>\n            <View gap={{ s: 4, m: 8 }}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"divided","snippet":"const divided = () => (\n    <Example>\n        <Example.Item title=\"direction: row\">\n            <View divided direction=\"row\" gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <View divided gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive divided\", \"[s] direction: row\", \"[m+] direction: column\"]}>\n            <View divided direction={{ s: \"row\", m: \"column\" }} gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row, columns\">\n            <View divided gap={3} direction=\"row\">\n                <View.Item columns={2}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={8}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={2}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"with React.Fragment\">\n            <View direction=\"row\" gap={4} divided>\n                <Placeholder>Item 1</Placeholder>\n                <>\n                    <Placeholder>Item 2</Placeholder>\n                    <Placeholder>Item 3</Placeholder>\n                </>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"bleed","snippet":"const bleed = () => (\n    <Example title=\"Removes side borders and border radius when applied\">\n        <Example.Item title=\"bleed: 4\">\n            <View bleed={4} padding={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive bleed\", \"[s] 4\", \"[m+] 0\"]}>\n            <View bleed={{ s: 4, m: 0 }} padding={4} borderRadius=\"small\" borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"wrap","snippet":"const wrap = () => (\n    <Example>\n        <Example.Item title=\"wrap: false\">\n            <View direction=\"row\" wrap={false} gap={3}>\n                <Placeholder w={600} h={100} />\n                <Placeholder w={600} h={100} />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"align","snippet":"const align = () => (\n    <Example>\n        <Example.Item title=\"align: start, direction: row\">\n            <View align=\"start\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: center, direction: row\">\n            <View align=\"center\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: end, direction: row\">\n            <View align=\"end\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"align: stretch, direction: row\",\n                \"2nd item is stretched based on the 1st item height\",\n            ]}\n        >\n            <View align=\"stretch\" direction=\"row\" gap={3}>\n                <Placeholder h={100} />\n                <Placeholder h=\"auto\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: baseline, direction: row\">\n            <View align=\"baseline\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Text variant=\"title-6\">Content</Text>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"align: start, direction: column\">\n            <View align=\"start\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: center, direction: column\">\n            <View align=\"center\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: end, direction: row\">\n            <View align=\"end\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"align: stretch, direction: column\",\n                \"1st item uses its own width, 2nd item is stretched to full width\",\n            ]}\n        >\n            <View align=\"stretch\" direction=\"column\" gap={3}>\n                <Placeholder w={100} />\n                <Placeholder w=\"auto\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"justify","snippet":"const justify = () => (\n    <Example>\n        <Example.Item title=\"justify: start, direction: row\">\n            <View justify=\"start\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: center, direction: row\">\n            <View justify=\"center\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: end, direction: row\">\n            <View justify=\"end\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: space-between, direction: row\">\n            <View justify=\"space-between\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"justify: start, direction: column, height: 200px\">\n            <View height=\"200px\" justify=\"start\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: center, direction: column, height: 200px\">\n            <View height=\"200px\" justify=\"center\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: end, direction: column, height: 200px\">\n            <View justify=\"end\" height=\"200px\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: space-between, direction: column, height: 200px\">\n            <View justify=\"space-between\" height=\"200px\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"textAlign","snippet":"const textAlign = () => (\n    <Example>\n        <Example.Item title=\"textAlign: start\">\n            <View textAlign=\"start\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: center\">\n            <View textAlign=\"center\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: end\">\n            <View textAlign=\"end\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: [s] start, [m+] end\">\n            <View textAlign={{ s: \"start\", m: \"end\" }}>Content</View>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"height: 100px, width: 100px\">\n            <View backgroundColor=\"neutral-faded\" height=\"100px\" width=\"100px\" />\n        </Example.Item>\n        <Example.Item title=\"height: 25, width: 25\">\n            <View backgroundColor=\"neutral-faded\" height={25} width={25} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive height and width\",\n                \"[s] height: 25, width: 25\",\n                \"[m+] height: 200px, width: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                height={{ s: 25, m: \"200px\" }}\n                width={{ s: 25, m: \"200px\" }}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"ratio","snippet":"const ratio = () => (\n    <Example>\n        <Example.Item title=\"ratio: 16 / 9\">\n            <View backgroundColor=\"neutral-faded\" aspectRatio={16 / 9} width=\"200px\" />\n        </Example.Item>\n        <Example.Item title={[\"responsive ratio\", \"[s] 1/1\", \"[m+] 16/9\"]}>\n            <View backgroundColor=\"neutral-faded\" aspectRatio={{ s: 1, m: 16 / 9 }} width=\"200px\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"maxSize","snippet":"const maxSize = () => (\n    <Example>\n        <Example.Item title=\"maxHeight: 150px, maxWidth: 150px, height: 300px\">\n            <View backgroundColor=\"neutral-faded\" maxHeight=\"150px\" maxWidth=\"150px\" height=\"300px\" />\n        </Example.Item>\n        <Example.Item title=\"maxHeight: 25, maxWidth: 25, height: 50\">\n            <View backgroundColor=\"neutral-faded\" maxHeight={25} maxWidth={25} height={50} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive maxHeight and maxWidth, height: 300\",\n                \"[s] maxHeight: 25, maxWidth: 25\",\n                \"[m+] maxHeight: 200px, maxWidth: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                maxHeight={{ s: 25, m: \"200px\" }}\n                maxWidth={{ s: 25, m: \"200px\" }}\n                height=\"300px\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"minSize","snippet":"const minSize = () => (\n    <Example>\n        <Example.Item title=\"minHeight: 150px, minWidth: 150px, height: 50px, width: 50px\">\n            <View\n                backgroundColor=\"neutral-faded\"\n                minHeight=\"150px\"\n                minWidth=\"150px\"\n                height=\"50px\"\n                width=\"50px\"\n            />\n        </Example.Item>\n        <Example.Item title=\"minHeight: 25, minWidth: 25, height: 5, width: 5\">\n            <View backgroundColor=\"neutral-faded\" minHeight={25} minWidth={25} height={5} width={5} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive minHeight and minWidth, height: 50px, width: 50px\",\n                \"[s] minHeight: 25, minWidth: 25\",\n                \"[m+] minHeight: 200px, minWidth: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                minHeight={{ s: 25, m: \"200px\" }}\n                minWidth={{ s: 25, m: \"200px\" }}\n                height=\"50px\"\n                width=\"50px\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"background","snippet":"const background = () => (\n    <Example title=\"border is used to highlight the backround value when it's similar to the page background, text color changes based on the background\">\n        <Example.Item title=\"bg: page\">\n            <View backgroundColor=\"page\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: page-faded\">\n            <View backgroundColor=\"page-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: disabled\">\n            <View backgroundColor=\"disabled\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: disabled-faded\">\n            <View backgroundColor=\"disabled-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-base\">\n            <View backgroundColor=\"elevation-base\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-raised\">\n            <View backgroundColor=\"elevation-raised\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-overlay\">\n            <View backgroundColor=\"elevation-overlay\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: neutral\">\n            <View backgroundColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: neutral-faded\">\n            <View backgroundColor=\"neutral-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: primary\">\n            <View backgroundColor=\"primary\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: primary-faded\">\n            <View backgroundColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: critical\">\n            <View backgroundColor=\"critical\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: critical-faded\">\n            <View backgroundColor=\"critical-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: warning\">\n            <View backgroundColor=\"warning\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: warning-faded\">\n            <View backgroundColor=\"warning-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: positive\">\n            <View backgroundColor=\"positive\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: positive-faded\">\n            <View backgroundColor=\"positive-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"borderColor","snippet":"const borderColor = () => (\n    <Example>\n        <Example.Item title=\"border: neutral\">\n            <View borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: neutral-faded\">\n            <View borderColor=\"neutral-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: primary\">\n            <View borderColor=\"primary\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: primary-faded\">\n            <View borderColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: critical\">\n            <View borderColor=\"critical\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: critical-faded\">\n            <View borderColor=\"critical-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: warning\">\n            <View borderColor=\"warning\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: warning-faded\">\n            <View borderColor=\"warning-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: positive\">\n            <View borderColor=\"positive\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: positive-faded\">\n            <View borderColor=\"positive-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: transparent, background: primary-faded\">\n            <View borderColor=\"transparent\" backgroundColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive\", \"[s] primary\", \"[m+] neutral\"]}>\n            <View borderColor={{ s: \"primary\", m: \"neutral\" }} padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"border","snippet":"const border = () => (\n    <Example>\n        <Example.Item title=\"border: true\">\n            <View border borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderTop: true\">\n            <View borderTop borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderBottom: true\">\n            <View borderBottom borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderStart: true\">\n            <View borderStart borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderEnd: true\">\n            <View borderEnd borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderInline: true\">\n            <View borderInline borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderBlock: true\">\n            <View borderBlock borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderTop: true, borderStart: true, \">\n            <View borderColor=\"neutral\" borderTop borderStart padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"responsive\",\n                \"[s] borderTop: true, borderStart: true\",\n                \"[m+] borderBottom: true, borderEnd: true\",\n            ]}\n        >\n            <View\n                borderColor=\"neutral\"\n                borderTop={{ s: true, m: false }}\n                borderStart={{ s: true, m: false }}\n                borderBottom={{ s: false, m: true }}\n                borderEnd={{ s: false, m: true }}\n                padding={4}\n            >\n                Content\n            </View>\n        </Example.Item>\n\n        <div style={{ height: 100 }} />\n    </Example>\n);"},{"name":"radius","snippet":"const radius = () => (\n    <Example>\n        <Example.Item title=\"radius: small\">\n            <View borderRadius=\"small\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: medium\">\n            <View borderRadius=\"medium\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: large\">\n            <View borderRadius=\"large\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: circular\">\n            <View borderRadius=\"circular\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"shadow","snippet":"const shadow = () => (\n    <Example>\n        <Example.Item title=\"shadow: raised, radius: medium\">\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                shadow=\"raised\"\n                borderRadius=\"medium\"\n                backgroundColor=\"elevation-raised\"\n            />\n        </Example.Item>\n        <Example.Item title=\"shadow: overlay, radius: medium\">\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                shadow=\"overlay\"\n                borderRadius=\"medium\"\n                backgroundColor=\"elevation-overlay\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"overflow","snippet":"const overflow = () => (\n    <Example>\n        <Example.Item\n            title={[\"overflow: hidden, radius: medium\", \"child background should have radius\"]}\n        >\n            <View height=\"100px\" width=\"100px\" shadow=\"raised\" borderRadius=\"medium\" overflow=\"hidden\">\n                <View backgroundColor=\"primary\" height=\"100%\" width=\"100%\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"positioning","snippet":"const positioning = () => (\n    <Example>\n        <Example.Item title=\"position: relative + absolute\">\n            <View borderColor=\"neutral\" position=\"relative\">\n                <Placeholder />\n                <View\n                    position=\"absolute\"\n                    insetTop={0}\n                    insetEnd={0}\n                    backgroundColor=\"critical\"\n                    zIndex={5}\n                    height={10}\n                    width={10}\n                />\n                <View\n                    position=\"absolute\"\n                    insetTop={0}\n                    insetEnd={0}\n                    backgroundColor=\"primary\"\n                    height={15}\n                    width={15}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: sticky\">\n            <div style={{ overflow: \"auto\", height: 100 }} tabIndex={0}>\n                <View position=\"sticky\" borderColor=\"primary\" insetTop={0}>\n                    Content\n                </View>\n                <Placeholder h={1000} />\n            </div>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive\", \"[s] position: absolute\", \"[m+]: position: relative\"]}>\n            <div style={{ overflow: \"auto\", height: 100, position: \"relative\" }} tabIndex={0}>\n                <View position={{ s: \"absolute\", m: \"relative\" }} borderColor=\"primary\" insetTop={0}>\n                    Content\n                </View>\n                <Placeholder h={1000} />\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"inset","snippet":"const inset = () => (\n    <Example>\n        <Example.Item title=\"inset: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" inset={4} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetTop: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" insetTop={4} height={10} width={10} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetStart: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetStart={4}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetEnd: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" insetEnd={4} height={10} width={10} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetBottom: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetBottom={4}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"responsive, [s] insetBottom: 4 [m+] insetEnd: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetBottom={{ s: 4, m: \"auto\" }}\n                    insetEnd={{ s: \"auto\", m: 4 }}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"animated","snippet":"const animated = () => {\n    const [background, setBackground] = React.useState<ViewProps[\"backgroundColor\"]>(\"neutral\");\n\n    return (\n        <View gap={3} align=\"start\">\n            <Button\n                onClick={() => setBackground((prev) => (prev === \"neutral\" ? \"primary\" : \"neutral\"))}\n            >\n                Change background\n            </Button>\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                backgroundColor={background}\n                align=\"center\"\n                justify=\"center\"\n                animated\n            >\n                Content\n            </View>\n        </View>\n    );\n};"},{"name":"itemGapBefore","snippet":"const itemGapBefore = () => (\n    <Example>\n        <Example.Item title={[\"gap: 4, 3rd item gapBefore: 10, direction: row\", \"increased gap\"]}>\n            <View direction=\"row\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={10}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 4, direction: row\", \"reduced gap\"]}>\n            <View direction=\"row\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={4}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 0, direction: row\", \"removed gap\"]}>\n            <View direction=\"row\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={0}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"gap: 4, direction: row, 2nd item gap: auto\">\n            <View direction=\"row\" gap={4}>\n                <Placeholder w={200} />\n                <View.Item gapBefore=\"auto\">\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"gap: 4, 3rd item gapBefore: 10, direction: column\", \"increased gap\"]}>\n            <View direction=\"column\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={10}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 4, direction: column\", \"reduced gap\"]}>\n            <View direction=\"column\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={4}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 0, direction: column\", \"removed gap\"]}>\n            <View direction=\"column\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={0}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"gap: 4, direction: column, height: 200px, 2nd item gap: auto\">\n            <View height=\"200px\" gap={4}>\n                <Placeholder />\n                <View.Item gapBefore=\"auto\">\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"responsive item gap\",\n                \"gap: 4, direction: row\",\n                \"[s] 3rd item gapBefore: 10\",\n                \"[m+] 3rd item gapBefore: 0\",\n            ]}\n        >\n            <View direction=\"row\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={{ s: 10, m: 0 }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"itemGrow","snippet":"const itemGrow = () => (\n    <Example>\n        <Example.Item title=\"direction: row, 2nd item grow\">\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column, height: 200px, 2nd item grow\">\n            <View direction=\"column\" gap={3} height=\"200px\">\n                <Placeholder />\n                <View.Item grow>\n                    <Placeholder h=\"100%\" />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row, 2nd item grow, applied to View\">\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View grow>\n                    <Placeholder />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive item grow, direction: row\",\n                \"[s] 2nd item grow\",\n                \"[m+] 2nd item doesn't grow\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View.Item grow={{ s: true, m: false }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive item grow, direction: column, height: 200px\",\n                \"[s] 2nd item grow\",\n                \"[m+] 2nd item doesn't grow\",\n            ]}\n        >\n            <View direction=\"column\" gap={3} height=\"200px\">\n                <Placeholder />\n                <View.Item grow={{ s: true, m: false }}>\n                    <Placeholder h=\"100%\" />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"itemColumns","snippet":"const itemColumns = () => (\n    <Example>\n        <Example.Item title=\"columns 6, 6, gap: 0\">\n            <View direction=\"row\">\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 3, 9, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={3}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, 9, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive columns\", \"[s] columns 6, 6, 12, gap: 4\", \"[m+]: 4, 4, 4\"]}>\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={{ s: 6, m: 4 }}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 6, m: 4 }}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 12, m: 4 }}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, 9, gap: 4, 2nd item gapBefore: 20\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6} gapBefore={20}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"itemOrder","snippet":"const itemOrder = () => (\n    <Example>\n        <Example.Item title=\"order: 1 3 2\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={4}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={4} order={1}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={4}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive order\", \"[s] 1 2 3\", \"[m+] 1 3 2\"]}>\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={4}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={4} order={{ s: 0, m: 1 }}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={4}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive order\",\n                \"[s]: 1 3 2, 2 is full width on second row\",\n                \"[m+]: 1 2 3, 2 has grow in the center of the first row\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <View.Item columns={{ s: 6, m: \"auto\" }}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item\n                    grow={{ s: false, m: true }}\n                    order={{ s: 1, m: 0 }}\n                    columns={{ s: 12, m: \"auto\" }}\n                >\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 6, m: \"auto\" }}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"hiddenItem","snippet":"const hiddenItem = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"[s] 2nd item: visible, grow, 3rd item: !grow\",\n                \"[m+] 2nd item: hidden, 2nd item divider: hidden, 3rd item: grow\",\n            ]}\n        >\n            <View direction=\"row\" divided gap={3}>\n                <Placeholder />\n                <Hidden hide={{ s: false, m: true }}>\n                    <View.Item grow key=\"3\">\n                        <Placeholder />\n                    </View.Item>\n                </Hidden>\n                <View.Item grow={{ s: false, m: true }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"[s] 2nd item: visible, grow, 3rd item: !grow\",\n                \"[m+] 2nd item: hidden, 2nd item: grow doesn't push 3rd item, 3rd item: grow\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Placeholder />\n                <Hidden hide={{ s: false, m: true }}>\n                    <View.Item grow>\n                        <Placeholder />\n                    </View.Item>\n                </Hidden>\n                <View.Item grow={{ s: false, m: true }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"keys","snippet":"const keys = () => {\n    const toggle = useToggle();\n\n    return (\n        <View gap={2}>\n            <Button onClick={() => toggle.toggle()}>Toggle</Button>\n            <View.Item>Item 1</View.Item>\n            {toggle.active && <KeyItem>Item 2</KeyItem>}\n            <KeyItem>Item 3</KeyItem>\n        </View>\n    );\n};"},{"name":"nestedGaps","snippet":"const nestedGaps = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"direction: column, gap: 10\",\n                \"Child 1: direction: column, gap: 2\",\n                \"Child 2: direction column, gap: 6\",\n                \"Child 3: gapBefore: 0\",\n                \"Child 3 view: direction: row, gap: 2\",\n            ]}\n        >\n            <View gap={10}>\n                <View gap={2}>\n                    <Placeholder>Child 1</Placeholder>\n                    <Placeholder>Child 1</Placeholder>\n                </View>\n\n                <View gap={6}>\n                    <Placeholder>Child 2</Placeholder>\n                    <Placeholder>Child 2</Placeholder>\n                </View>\n\n                <View.Item gapBefore={0}>\n                    <View direction=\"row\" gap={2}>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"testComposition","snippet":"const testComposition = () => (\n    <Example>\n        <Example.Item>\n            <View direction=\"row\" align=\"center\" gap={4} padding={4}>\n                <View width=\"80px\" height=\"60px\" backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n\n                <View direction=\"row\" align=\"center\" gap={1} grow>\n                    <View.Item shrink>\n                        <Text>Text (like Jeff's Puzzles)</Text>\n                    </View.Item>\n\n                    <View minWidth=\"auto\" grow>\n                        <Button size=\"small\" color=\"neutral\" icon={IconPlus} />\n                    </View>\n                </View>\n\n                <Button color=\"primary\" rounded>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"View.Item, MenuItem, Aspect ratio\",\n                \"ratio should increase height on viewport change\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <View.Item>\n                    <Placeholder />\n                </View.Item>\n                <MenuItem selected roundedCorners>\n                    Menu\n                </MenuItem>\n                <View.Item grow>\n                    <View aspectRatio={16 / 9}>\n                        <Placeholder h=\"100%\" />\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"Scrollable tabs inside View.Item with grow\">\n            <View direction=\"row\" align=\"center\" gap={3}>\n                <Placeholder />\n                <View.Item grow>\n                    <View padding={0} align=\"center\">\n                        <Tabs variant=\"pills\">\n                            <Tabs.List>\n                                <Tabs.Item value=\"1\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"2\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"3\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"4\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"5\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"6\">Very long item</Tabs.Item>\n                            </Tabs.List>\n                            {[1, 2, 3, 5, 6].map((i) => (\n                                <Tabs.Panel key={i} value={i.toString()} />\n                            ))}\n                        </Tabs>\n                    </View>\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"2nd item has grow, Avatar stays circle\">\n            <View direction=\"row\" gap={3}>\n                <Avatar initials=\"DB\" />\n                <View.Item grow>\n                    Veggies sunt bona vobis, proinde vos postulo esse magis grape pea sprouts horseradish\n                    courgette maize spinach prairie turnip jícama coriander quandong gourd broccoli seakale\n                    gumbo. Parsley corn lentil zucchini radicchio maize burdock avocado sea lettuce.\n                    Garbanzo tigernut earthnut pea fennel.\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"item gapBefore from parent doesn't affect the child view\",\n                \"columns should take full width\",\n            ]}\n        >\n            <View>\n                <View.Item gapBefore={20}>\n                    <View direction=\"row\" gap={4}>\n                        <View.Item columns={6}>\n                            <Placeholder />\n                        </View.Item>\n                        <View.Item columns={6}>\n                            <Placeholder />\n                        </View.Item>\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"View becomes flexbox if there is a child with grow\">\n            <View height=\"300px\" borderColor=\"neutral-faded\">\n                <View height=\"50px\" />\n                <View grow backgroundColor=\"neutral-faded\" padding={4}>\n                    Grow\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"asProp","snippet":"const asProp = () => (\n    <View as=\"ul\">\n        <View.Item as=\"li\">Content</View.Item>\n    </View>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <View className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </View>\n    </div>\n);"},{"name":"itemClassName","snippet":"const itemClassName = () => (\n    <div data-testid=\"root\">\n        <View.Item className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </View.Item>\n    </div>\n);"}],"import":"import { Avatar, Button, Example, Hidden, MenuItem, Placeholder, Tabs, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"View","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/View/View.tsx","actualName":"View","exportName":"default"}},"hooks-useelementid":{"id":"hooks-useelementid","name":"useElementId","path":"./src/hooks/tests/useElementId.stories.tsx","stories":[{"name":"id","snippet":"const id = () => {\n    return <Component id=\"hey\" />;\n};"}],"import":"","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  3 | import useElementId from \"hooks/useElementId\";\n  4 |\n> 5 | export default {\n    | ^\n  6 | \ttitle: \"Hooks/useElementId\",\n  7 | \tparameters: {\n  8 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useElementId.stories.tsx:\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, waitFor } from \"storybook/test\";\nimport useElementId from \"hooks/useElementId\";\n\nexport default {\n\ttitle: \"Hooks/useElementId\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component: React.FC<{ id?: string }> = (props) => {\n\tconst id = useElementId(props.id);\n\n\treturn <div id={id}>{id}</div>;\n};\n\nexport const id: StoryObj = {\n\tname: \"passed id\",\n\trender: () => {\n\t\treturn <Component id=\"hey\" />;\n\t},\n\tplay: async () => {\n\t\twaitFor(() => {\n\t\t\texpect(document.querySelector(\"#hey\")).toBeTruthy();\n\t\t});\n\t},\n};\n"}},"hooks-usehandlerref":{"id":"hooks-usehandlerref","name":"useHandlerRef","path":"./src/hooks/tests/useHandlerRef.stories.tsx","stories":[{"name":"base","snippet":"const base = (args) => {\n    const [count, setCount] = React.useState(0);\n\n    // Creating a new handler on each render\n    const handleEffect = () => {\n        args.handleEffect(0);\n    };\n\n    return (\n        <View gap={4}>\n            <Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>\n            <Component onEffect={handleEffect} count={count} />\n        </View>\n    );\n};"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   6 | import useHandlerRef from \"hooks/useHandlerRef\";\n   7 |\n>  8 | export default {\n     | ^\n   9 | \ttitle: \"Hooks/useHandlerRef\",\n  10 | \tparameters: {\n  11 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useHandlerRef.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, fn, Mock, userEvent } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport View from \"components/View\";\nimport useHandlerRef from \"hooks/useHandlerRef\";\n\nexport default {\n\ttitle: \"Hooks/useHandlerRef\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component: React.FC<{ onEffect: () => void; count: number }> = (props) => {\n\tconst { onEffect, count } = props;\n\tconst onEffectRef = useHandlerRef(onEffect);\n\n\tReact.useEffect(() => {\n\t\tonEffectRef.current();\n\t}, [onEffectRef]);\n\n\treturn <>Counter: {count}</>;\n};\n\nexport const base: StoryObj<{ handleEffect: Mock }> = {\n\tname: \"base\",\n\targs: {\n\t\thandleEffect: fn(),\n\t},\n\trender: (args) => {\n\t\tconst [count, setCount] = React.useState(0);\n\n\t\t// Creating a new handler on each render\n\t\tconst handleEffect = () => {\n\t\t\targs.handleEffect(0);\n\t\t};\n\n\t\treturn (\n\t\t\t<View gap={4}>\n\t\t\t\t<Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>\n\t\t\t\t<Component onEffect={handleEffect} count={count} />\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\t// mount, triggerred twice in dev mode\n\t\texpect(args.handleEffect).toHaveBeenCalledTimes(2);\n\n\t\tawait userEvent.click(button);\n\n\t\t// Rerendering the component doesn't re-trigger the effect\n\t\texpect(args.handleEffect).toHaveBeenCalledTimes(2);\n\t},\n};\n"}},"hooks-usehotkeys":{"id":"hooks-usehotkeys","name":"useHotkeys","path":"./src/hooks/tests/useHotkeys.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const { checkHotkeyState } = useHotkeys({\n        \"shift + b + n\": () => console.log(\"pressed\"),\n        \"c + v\": () => console.log(\"c + v\"),\n        \"Meta + k\": () => console.log(\"meta + k\"),\n        \"Meta + f\": () => console.log(\"meta + f\"),\n        \"Meta + v\": () => console.log(\"meta + v\"),\n        \"Meta + b\": () => console.log(\"meta + b\"),\n        \"control + enter\": () => console.log(\"control + enter\"),\n        \"meta + enter\": () => console.log(\"meta + enter\"),\n        \"mod + enter\": () => console.log(\"mod + enter\"),\n        \"mod + ArrowRight\": () => console.log(\"right\"),\n        \"mod + ArrowUp\": () => console.log(\"top\"),\n        \"shift + ArrowRight\": () => console.log(\"right\"),\n        \"shift + ArrowUp\": () => console.log(\"top\"),\n        \"alt+shift+n\": () => console.log(\"alt+shift+n\"),\n        \"shift+alt+n\": () => console.log(\"shift+alt+n\"),\n        \"alt+shiftLeft+n\": () => console.log(\"alt+shiftLeft+n\"),\n    });\n    const active = checkHotkeyState(\"shift + b + n\");\n    const shiftActive = checkHotkeyState(\"shift\");\n    const bActive = checkHotkeyState(\"b\");\n    const nActive = checkHotkeyState(\"n\");\n\n    return (\n        <View\n            animated\n            gap={2}\n            direction=\"row\"\n            backgroundColor={active ? \"positive-faded\" : undefined}\n            padding={2}\n            borderRadius=\"small\"\n        >\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={shiftActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={shiftActive ? undefined : \"raised\"}\n            >\n                Shift\n            </View>\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={bActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={bActive ? undefined : \"raised\"}\n            >\n                b\n            </View>\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={nActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={nActive ? undefined : \"raised\"}\n            >\n                n\n            </View>\n        </View>\n    );\n};"},{"name":"singleKey","snippet":"const singleKey = (args) => <Component hotkeys={{ a: args.handleHotkey }} />;"},{"name":"modKey","snippet":"const modKey = (args) => <Component hotkeys={{ mod: args.handleHotkey }} />;"},{"name":"modKeyHold","snippet":"const modKeyHold = (args) => <Component hotkeys={{ \"Meta + b\": args.handleHotkey }} />;"},{"name":"keyList","snippet":"const keyList = (args) => <Component hotkeys={{ \"a,b\": args.handleHotkey }} />;"},{"name":"keyCombination","snippet":"const keyCombination = (args) => <Component hotkeys={{ \"a+b\": args.handleHotkey }} />;"},{"name":"keyCombinationFormat","snippet":"const keyCombinationFormat = (args) => <Component hotkeys={{ \"A  + b\": args.handleHotkey }} />;"},{"name":"keyCombinationOrder","snippet":"const keyCombinationOrder = (args) => <Component hotkeys={{ \"b+a\": args.handleHotkey }} />;"},{"name":"keyCombinationMoreThanRequired","snippet":"const keyCombinationMoreThanRequired = (args) => <Component hotkeys={{ \"z + x\": args.handleHotkey }} />;"},{"name":"optionModified","snippet":"const optionModified = (args) => (\n    <Component hotkeys={{ \"alt+n\": args.handleHotkeyModified, \"alt+shift\": args.handleHotkey }} />\n);"}],"import":"import { View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  4 | import useHotkeys from \"hooks/useHotkeys\";\n  5 |\n> 6 | export default {\n    | ^\n  7 | \ttitle: \"Hooks/useHotkeys\",\n  8 | \tparameters: {\n  9 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useHotkeys.stories.tsx:\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, fn, userEvent } from \"storybook/test\";\nimport View from \"components/View\";\nimport useHotkeys from \"hooks/useHotkeys\";\n\nexport default {\n\ttitle: \"Hooks/useHotkeys\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst { checkHotkeyState } = useHotkeys({\n\t\t\t\"shift + b + n\": () => console.log(\"pressed\"),\n\t\t\t\"c + v\": () => console.log(\"c + v\"),\n\t\t\t\"Meta + k\": () => console.log(\"meta + k\"),\n\t\t\t\"Meta + f\": () => console.log(\"meta + f\"),\n\t\t\t\"Meta + v\": () => console.log(\"meta + v\"),\n\t\t\t\"Meta + b\": () => console.log(\"meta + b\"),\n\t\t\t\"control + enter\": () => console.log(\"control + enter\"),\n\t\t\t\"meta + enter\": () => console.log(\"meta + enter\"),\n\t\t\t\"mod + enter\": () => console.log(\"mod + enter\"),\n\t\t\t\"mod + ArrowRight\": () => console.log(\"right\"),\n\t\t\t\"mod + ArrowUp\": () => console.log(\"top\"),\n\t\t\t\"shift + ArrowRight\": () => console.log(\"right\"),\n\t\t\t\"shift + ArrowUp\": () => console.log(\"top\"),\n\t\t\t\"alt+shift+n\": () => console.log(\"alt+shift+n\"),\n\t\t\t\"shift+alt+n\": () => console.log(\"shift+alt+n\"),\n\t\t\t\"alt+shiftLeft+n\": () => console.log(\"alt+shiftLeft+n\"),\n\t\t});\n\t\tconst active = checkHotkeyState(\"shift + b + n\");\n\t\tconst shiftActive = checkHotkeyState(\"shift\");\n\t\tconst bActive = checkHotkeyState(\"b\");\n\t\tconst nActive = checkHotkeyState(\"n\");\n\n\t\treturn (\n\t\t\t<View\n\t\t\t\tanimated\n\t\t\t\tgap={2}\n\t\t\t\tdirection=\"row\"\n\t\t\t\tbackgroundColor={active ? \"positive-faded\" : undefined}\n\t\t\t\tpadding={2}\n\t\t\t\tborderRadius=\"small\"\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\tpaddingInline={4}\n\t\t\t\t\tpaddingBlock={2}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tborderColor=\"neutral-faded\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={shiftActive ? \"neutral-faded\" : \"elevation-raised\"}\n\t\t\t\t\tshadow={shiftActive ? undefined : \"raised\"}\n\t\t\t\t>\n\t\t\t\t\tShift\n\t\t\t\t</View>\n\t\t\t\t<View\n\t\t\t\t\tpaddingInline={4}\n\t\t\t\t\tpaddingBlock={2}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tborderColor=\"neutral-faded\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={bActive ? \"neutral-faded\" : \"elevation-raised\"}\n\t\t\t\t\tshadow={bActive ? undefined : \"raised\"}\n\t\t\t\t>\n\t\t\t\t\tb\n\t\t\t\t</View>\n\t\t\t\t<View\n\t\t\t\t\tpaddingInline={4}\n\t\t\t\t\tpaddingBlock={2}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tborderColor=\"neutral-faded\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={nActive ? \"neutral-faded\" : \"elevation-raised\"}\n\t\t\t\t\tshadow={nActive ? undefined : \"raised\"}\n\t\t\t\t>\n\t\t\t\t\tn\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t},\n};\n\nconst Component: React.FC<{ hotkeys: Record<string, (() => void) | null> }> = (props) => {\n\tconst { hotkeys } = props;\n\tuseHotkeys(hotkeys);\n\n\treturn <div />;\n};\n\nexport const singleKey: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"single key\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ a: args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"a\");\n\t\tawait userEvent.keyboard(\"b\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const modKey: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"mod key\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ mod: args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{Meta/}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const modKeyHold: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"mod key on hold\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"Meta + b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{Meta>}bb{/Meta}\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(2);\n\t},\n};\n\nexport const keyList: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key list\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"a,b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"a\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\n\t\tawait userEvent.keyboard(\"b\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(2);\n\t},\n};\n\nexport const keyCombination: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"a+b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{a>}b{/a}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const keyCombinationFormat: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination without formatting\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"A  + b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{a>}b{/a}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const keyCombinationOrder: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination without order\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"b+a\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{a>}b{/a}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const keyCombinationMoreThanRequired: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination, more keys pressed\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"z + x\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{z>}{x>}c{/x}{/z}\");\n\t\t// When c is pressed, it doesn't trigger a+b for the second time\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const optionModified: StoryObj<{\n\thandleHotkey: ReturnType<typeof fn>;\n\thandleHotkeyModified: ReturnType<typeof fn>;\n}> = {\n\tname: \"modified with alt/option\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t\thandleHotkeyModified: fn(),\n\t},\n\trender: (args) => (\n\t\t<Component hotkeys={{ \"alt+n\": args.handleHotkeyModified, \"alt+shift\": args.handleHotkey }} />\n\t),\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{Alt>}n{/Alt}\");\n\t\texpect(args.handleHotkeyModified).toHaveBeenCalledTimes(1);\n\n\t\tawait userEvent.keyboard(\"{Alt>}{Shift}{/Alt}\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n"}},"hooks-usekeyboardarrownavigation":{"id":"hooks-usekeyboardarrownavigation","name":"useKeyboardArrowNavigation","path":"./src/hooks/tests/useKeyboardArrowNavigation.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"},{"name":"horizontal","snippet":"const horizontal = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, orientation: \"horizontal\" });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"},{"name":"vertical","snippet":"const vertical = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, orientation: \"vertical\" });\n\n    return (\n        <View gap={2} direction=\"column\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"},{"name":"circular","snippet":"const circular = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, circular: true });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"},{"name":"disabled","snippet":"const disabled = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, disabled: true });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   7 | import useKeyboardArrowNavigation from \"hooks/useKeyboardArrowNavigation\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Hooks/useKeyboardArrowNavigation\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useKeyboardArrowNavigation.stories.tsx:\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport useRTL from \"hooks/useRTL\";\nimport View from \"components/View\";\nimport Button from \"components/Button\";\nimport useKeyboardArrowNavigation from \"hooks/useKeyboardArrowNavigation\";\n\nexport default {\n\ttitle: \"Hooks/useKeyboardArrowNavigation\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(buttons[2]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t},\n};\n\nexport const horizontal: StoryObj = {\n\tname: \"orientation: horizontal\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, orientation: \"horizontal\" });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\texpect(buttons[0]).toHaveAttribute(\"tabindex\", \"0\");\n\t\texpect(buttons[1]).toHaveAttribute(\"tabindex\", \"-1\");\n\t\texpect(buttons[2]).toHaveAttribute(\"tabindex\", \"-1\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t},\n};\n\nexport const vertical: StoryObj = {\n\tname: \"orientation: vertical\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, orientation: \"vertical\" });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"column\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t},\n};\n\nexport const circular: StoryObj = {\n\tname: \"circular\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, circular: true });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[2]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[2]);\n\t},\n};\n\nexport const disabled: StoryObj = {\n\tname: \"disabled\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, disabled: true });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t\texpect(buttons[0]).not.toHaveAttribute(\"tabindex\");\n\t},\n};\n"}},"hooks-usekeyboardmode":{"id":"hooks-usekeyboardmode","name":"useKeyboardMode","path":"./src/hooks/tests/useKeyboardMode.stories.tsx","stories":[{"name":"base","snippet":"const base = () => <Component />;"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   5 | import useKeyboardMode from \"hooks/useKeyboardMode\";\n   6 |\n>  7 | export default {\n     | ^\n   8 | \ttitle: \"Hooks/useKeyboardMode\",\n   9 | \tparameters: {\n  10 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useKeyboardMode.stories.tsx:\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport View from \"components/View\";\nimport useKeyboardMode from \"hooks/useKeyboardMode\";\n\nexport default {\n\ttitle: \"Hooks/useKeyboardMode\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component = () => {\n\tconst { activate, deactivate, disable, enable } = useKeyboardMode();\n\n\treturn (\n\t\t<View direction=\"row\" gap={2}>\n\t\t\t<Button onClick={activate}>Activate</Button>\n\t\t\t<Button onClick={deactivate}>Deactivate</Button>\n\t\t\t<Button onClick={disable}>Disable</Button>\n\t\t\t<Button onClick={enable}>Enable</Button>\n\t\t</View>\n\t);\n};\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => <Component />,\n\tplay: async ({ canvas }) => {\n\t\tconst attribute = \"data-rs-keyboard\";\n\t\tconst root = document.documentElement;\n\t\tconst activateTrigger = canvas.getAllByRole(\"button\")[0];\n\t\tconst deactivateTrigger = canvas.getAllByRole(\"button\")[1];\n\t\tconst disableTrigger = canvas.getAllByRole(\"button\")[2];\n\t\tconst enableTrigger = canvas.getAllByRole(\"button\")[3];\n\n\t\texpect(root).not.toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(activateTrigger);\n\t\texpect(root).toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(deactivateTrigger);\n\t\texpect(root).not.toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(disableTrigger);\n\t\tawait userEvent.click(activateTrigger);\n\t\texpect(root).not.toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(enableTrigger);\n\t\tawait userEvent.click(activateTrigger);\n\t\texpect(root).toHaveAttribute(attribute);\n\t},\n};\n"}},"hooks-useonclickoutside":{"id":"hooks-useonclickoutside","name":"useOnClickOutside","path":"./src/hooks/tests/useOnClickOutside.stories.tsx","stories":[{"name":"base","snippet":"const base = (args) => {\n    const ref = React.useRef(null);\n    const [target, setTarget] = React.useState<\"inside\" | \"outside\" | null>(null);\n\n    useOnClickOutside([ref], () => {\n        args.handleOutsideClick();\n        setTarget(\"outside\");\n    });\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }} onClick={() => setTarget(\"inside\")}>\n                Trigger\n            </Button>\n            {target && `Clicked ${target}`}\n        </View>\n    );\n};"},{"name":"refs","snippet":"const refs = (args) => {\n    const ref = React.useRef(null);\n    const ref2 = React.useRef(null);\n\n    useOnClickOutside([ref, ref2], () => {\n        args.handleOutsideClick();\n    });\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }}>Trigger</Button>\n            <Button attributes={{ ref: ref2 }}>Trigger 2</Button>\n        </View>\n    );\n};"},{"name":"disabled","snippet":"const disabled = (args) => {\n    const ref = React.useRef(null);\n\n    useOnClickOutside(\n        [ref],\n        () => {\n            args.handleOutsideClick();\n        },\n        {\n            disabled: true,\n        }\n    );\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }}>Trigger</Button>\n        </View>\n    );\n};"},{"name":"deps","snippet":"const deps = (args) => {\n    const ref = React.useRef(null);\n    const [count, setCount] = React.useState(0);\n\n    useOnClickOutside([ref], () => {\n        args.handleOutsideClick({ count });\n    });\n\n    return (\n        <Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>\n            Trigger\n        </Button>\n    );\n};"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   6 | import View from \"components/View\";\n   7 |\n>  8 | export default {\n     | ^\n   9 | \ttitle: \"Hooks/useOnClickOutside\",\n  10 | \tparameters: {\n  11 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useOnClickOutside.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, fn, userEvent, type Mock } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport useOnClickOutside from \"hooks/useOnClickOutside\";\nimport View from \"components/View\";\n\nexport default {\n\ttitle: \"Hooks/useOnClickOutside\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"base\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\t\tconst [target, setTarget] = React.useState<\"inside\" | \"outside\" | null>(null);\n\n\t\tuseOnClickOutside([ref], () => {\n\t\t\targs.handleOutsideClick();\n\t\t\tsetTarget(\"outside\");\n\t\t});\n\n\t\treturn (\n\t\t\t<View gap={4} align=\"start\">\n\t\t\t\t<Button attributes={{ ref }} onClick={() => setTarget(\"inside\")}>\n\t\t\t\t\tTrigger\n\t\t\t\t</Button>\n\t\t\t\t{target && `Clicked ${target}`}\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledWith();\n\t},\n};\n\nexport const refs: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"multiple refs\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\t\tconst ref2 = React.useRef(null);\n\n\t\tuseOnClickOutside([ref, ref2], () => {\n\t\t\targs.handleOutsideClick();\n\t\t});\n\n\t\treturn (\n\t\t\t<View gap={4} align=\"start\">\n\t\t\t\t<Button attributes={{ ref }}>Trigger</Button>\n\t\t\t\t<Button attributes={{ ref: ref2 }}>Trigger 2</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst [button, button2] = canvas.getAllByRole(\"button\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\n\t\tawait userEvent.click(button2);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledWith();\n\t},\n};\n\nexport const disabled: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"disabled\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\n\t\tuseOnClickOutside(\n\t\t\t[ref],\n\t\t\t() => {\n\t\t\t\targs.handleOutsideClick();\n\t\t\t},\n\t\t\t{\n\t\t\t\tdisabled: true,\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<View gap={4} align=\"start\">\n\t\t\t\t<Button attributes={{ ref }}>Trigger</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ args }) => {\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\t},\n};\n\nexport const deps: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"test: handler uses latest state\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\t\tconst [count, setCount] = React.useState(0);\n\n\t\tuseOnClickOutside([ref], () => {\n\t\t\targs.handleOutsideClick({ count });\n\t\t});\n\n\t\treturn (\n\t\t\t<Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>\n\t\t\t\tTrigger\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 0 });\n\n\t\tawait userEvent.click(button);\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 1 });\n\t},\n};\n"}},"hooks-usertl":{"id":"hooks-usertl","name":"useRTL","path":"./src/hooks/tests/useRTL.stories.tsx","stories":[{"name":"setRTL","snippet":"const setRTL = () => <Component />;"}],"import":"","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  4 | import useRTL from \"hooks/useRTL\";\n  5 |\n> 6 | export default {\n    | ^\n  7 | \ttitle: \"Hooks/useRTL\",\n  8 | \tparameters: {\n  9 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useRTL.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect } from \"storybook/test\";\nimport useRTL from \"hooks/useRTL\";\n\nexport default {\n\ttitle: \"Hooks/useRTL\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component = () => {\n\tconst [rtl, setRTL] = useRTL();\n\n\tReact.useEffect(() => {\n\t\tsetRTL(true);\n\t}, [setRTL]);\n\n\treturn <div>{rtl ? \"RTL\" : \"LTR\"}</div>;\n};\n\nexport const setRTL: StoryObj = {\n\tname: \"setRTL\",\n\trender: () => <Component />,\n\tplay: async () => {\n\t\texpect(document.documentElement).toHaveAttribute(\"dir\", \"rtl\");\n\t},\n};\n"}},"hooks-useresponsiveclientvalue":{"id":"hooks-useresponsiveclientvalue","name":"useResponsiveClientValue","path":"./src/hooks/tests/useResponsiveClientValue.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const value = useResponsiveClientValue<ViewProps[\"backgroundColor\"]>({\n        s: \"neutral\",\n        m: \"critical\",\n        l: \"positive\",\n    });\n\n    return <View width={25} height={25} backgroundColor={value} />;\n};"},{"name":"boolean","snippet":"const boolean = () => {\n    const value = useResponsiveClientValue<boolean>({\n        s: true,\n        l: false,\n    });\n\n    return <div>{value?.toString()}</div>;\n};"}],"import":"import { View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  2 | import View, { type ViewProps } from \"components/View\";\n  3 |\n> 4 | export default {\n    | ^\n  5 | \ttitle: \"Hooks/useResponsiveClientValue\",\n  6 | \tparameters: {\n  7 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useResponsiveClientValue.stories.tsx:\nimport useResponsiveClientValue from \"hooks/useResponsiveClientValue\";\nimport View, { type ViewProps } from \"components/View\";\n\nexport default {\n\ttitle: \"Hooks/useResponsiveClientValue\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst value = useResponsiveClientValue<ViewProps[\"backgroundColor\"]>({\n\t\t\ts: \"neutral\",\n\t\t\tm: \"critical\",\n\t\t\tl: \"positive\",\n\t\t});\n\n\t\treturn <View width={25} height={25} backgroundColor={value} />;\n\t},\n};\n\nexport const boolean = {\n\tname: \"boolean\",\n\tdescribe: \"works with boolean properties\",\n\trender: () => {\n\t\tconst value = useResponsiveClientValue<boolean>({\n\t\t\ts: true,\n\t\t\tl: false,\n\t\t});\n\n\t\treturn <div>{value?.toString()}</div>;\n\t},\n};\n"}},"hooks-usescrolllock":{"id":"hooks-usescrolllock","name":"useScrollLock","path":"./src/hooks/tests/useScrollLock.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock();\n\n    return (\n        <React.Fragment>\n            <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n            <div style={{ height: \"150vh\" }} />\n        </React.Fragment>\n    );\n};"},{"name":"origin","snippet":"const origin = () => {\n    const originRef = React.useRef<HTMLDivElement>(null);\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });\n\n    return (\n        <View overflow=\"auto\" height={25} attributes={{ ref: originRef, \"data-testid\": \"root\" }}>\n            <View height={50} padding={4} backgroundColor=\"neutral-faded\" borderRadius=\"medium\">\n                <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n            </View>\n        </View>\n    );\n};"},{"name":"container","snippet":"const container = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });\n\n    return (\n        <View height={25} attributes={{ ref: containerRef, \"data-testid\": \"root\" }}>\n            <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n        </View>\n    );\n};"},{"name":"testContainerAsync","snippet":"const testContainerAsync = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const globalLock = useScrollLock();\n    const scopedLock = useScrollLock({ containerRef });\n\n    return (\n        <Example>\n            <Example.Item title=\"calling regular lock and lock with a container only requires a single unlock to remove overflow\">\n                <View attributes={{ ref: containerRef }} gap={4} direction=\"row\">\n                    <Button\n                        onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}\n                    >\n                        Toggle\n                    </Button>\n                    <Button\n                        onClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}\n                    >\n                        Toggle\n                    </Button>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import { Button, Example, View } from \"reshaped\";\nimport React from \"react\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   7 | import View from \"components/View\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Hooks/useScrollLock\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useScrollLock.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport { Example } from \"utilities/storybook\";\nimport Button from \"components/Button\";\nimport useScrollLock from \"hooks/useScrollLock\";\nimport View from \"components/View\";\n\nexport default {\n\ttitle: \"Hooks/useScrollLock\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst { lockScroll, unlockScroll, scrollLocked } = useScrollLock();\n\n\t\treturn (\n\t\t\t<React.Fragment>\n\t\t\t\t<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n\t\t\t\t<div style={{ height: \"150vh\" }} />\n\t\t\t</React.Fragment>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n\nexport const origin: StoryObj = {\n\tname: \"originRef\",\n\trender: () => {\n\t\tconst originRef = React.useRef<HTMLDivElement>(null);\n\t\tconst { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });\n\n\t\treturn (\n\t\t\t<View overflow=\"auto\" height={25} attributes={{ ref: originRef, \"data-testid\": \"root\" }}>\n\t\t\t\t<View height={50} padding={4} backgroundColor=\"neutral-faded\" borderRadius=\"medium\">\n\t\t\t\t\t<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\t\tconst root = canvas.getByTestId(\"root\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t\texpect(root).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(root).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n\nexport const container: StoryObj = {\n\tname: \"containerRef\",\n\trender: () => {\n\t\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\t\tconst { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });\n\n\t\treturn (\n\t\t\t<View height={25} attributes={{ ref: containerRef, \"data-testid\": \"root\" }}>\n\t\t\t\t<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\t\tconst root = canvas.getByTestId(\"root\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t\texpect(root).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(root).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n\nexport const testContainerAsync: StoryObj = {\n\tname: \"test: containerRef locked count\",\n\trender: () => {\n\t\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\t\tconst globalLock = useScrollLock();\n\t\tconst scopedLock = useScrollLock({ containerRef });\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title=\"calling regular lock and lock with a container only requires a single unlock to remove overflow\">\n\t\t\t\t\t<View attributes={{ ref: containerRef }} gap={4} direction=\"row\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tToggle\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tToggle\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst [buttonGlobal, buttonScoped] = canvas.getAllByRole(\"button\");\n\n\t\tawait userEvent.click(buttonGlobal);\n\t\texpect(document.body).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(buttonScoped);\n\t\tawait userEvent.click(buttonGlobal);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n"}},"hooks-usetoggle":{"id":"hooks-usetoggle","name":"useToggle","path":"./src/hooks/tests/useToggle.stories.tsx","stories":[{"name":"toggle","snippet":"const toggle = () => {\n    const { toggle, active } = useToggle();\n\n    return (\n        <Button onClick={() => toggle()} attributes={{ \"data-active\": active }}>\n            {active ? \"Deactivate\" : \"Activate\"}\n        </Button>\n    );\n};"},{"name":"activate","snippet":"const activate = () => {\n    const { activate, active } = useToggle();\n\n    return (\n        <React.Fragment>\n            <Button onClick={activate} attributes={{ \"data-active\": active }}>\n                Activate\n            </Button>\n        </React.Fragment>\n    );\n};"},{"name":"deactivate","snippet":"const deactivate = () => {\n    const { deactivate, active } = useToggle(true);\n\n    return (\n        <Button onClick={deactivate} attributes={{ \"data-active\": active }}>\n            Deactivate\n        </Button>\n    );\n};"}],"import":"import { Button } from \"reshaped\";\nimport React from \"react\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   5 | import useToggle from \"hooks/useToggle\";\n   6 |\n>  7 | export default {\n     | ^\n   8 | \ttitle: \"Hooks/useToggle\",\n   9 | \tparameters: {\n  10 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useToggle.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport useToggle from \"hooks/useToggle\";\n\nexport default {\n\ttitle: \"Hooks/useToggle\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const toggle: StoryObj = {\n\tname: \"toggle\",\n\trender: () => {\n\t\tconst { toggle, active } = useToggle();\n\n\t\treturn (\n\t\t\t<Button onClick={() => toggle()} attributes={{ \"data-active\": active }}>\n\t\t\t\t{active ? \"Deactivate\" : \"Activate\"}\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"true\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\t},\n};\n\nexport const activate: StoryObj = {\n\tname: \"activate\",\n\trender: () => {\n\t\tconst { activate, active } = useToggle();\n\n\t\treturn (\n\t\t\t<React.Fragment>\n\t\t\t\t<Button onClick={activate} attributes={{ \"data-active\": active }}>\n\t\t\t\t\tActivate\n\t\t\t\t</Button>\n\t\t\t</React.Fragment>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"true\");\n\t},\n};\n\nexport const deactivate: StoryObj = {\n\tname: \"deactivate\",\n\trender: () => {\n\t\tconst { deactivate, active } = useToggle(true);\n\n\t\treturn (\n\t\t\t<Button onClick={deactivate} attributes={{ \"data-active\": active }}>\n\t\t\t\tDeactivate\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"true\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\t},\n};\n"}},"utilities-trapfocus":{"id":"utilities-trapfocus","name":"TrapFocus","path":"./src/utilities/a11y/tests/TrapFocus.stories.tsx","stories":[{"name":"modeDialog","snippet":"const modeDialog = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, { mode: \"dialog\" });\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\"mode: dialog\", \"tab navigation, always stays inside until released\"]}\n            >\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View.Item>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"modeActionMenu","snippet":"const modeActionMenu = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"action-menu\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: action-menu\",\n                    \"up/down arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"modeActionBar","snippet":"const modeActionBar = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"action-bar\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: action-bar\",\n                    \"left/right arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"modeContentMenu","snippet":"const modeContentMenu = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"content-menu\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: content-menu\",\n                    \"tab navigation, tabbing outside the content will trigger the release\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"includeTrigger","snippet":"const includeTrigger = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n            includeTrigger: true,\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"initialFocusEl","snippet":"const initialFocusEl = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const initialFocusRef = React.useRef<HTMLButtonElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n            initialFocusEl: initialFocusRef.current,\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View\n                            gap={4}\n                            direction=\"row\"\n                            padding={4}\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            attributes={{ ref: rootRef }}\n                        >\n                            <Button onClick={() => {}}>Action 1</Button>\n                            <Button onClick={() => {}} attributes={{ ref: initialFocusRef }}>\n                                Action 2\n                            </Button>\n                            <Button onClick={() => {}}>Action 3</Button>\n                            <Button onClick={trapToggle.deactivate}>Release</Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"focusableElements","snippet":"const focusableElements = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current);\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title=\"test with all types of focusable elements\">\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={trapToggle.activate}>Activate</Button>\n                    </View.Item>\n\n                    {trapToggle.active && (\n                        <View\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            padding={4}\n                            gap={4}\n                            attributes={{ ref: rootRef }}\n                            align=\"start\"\n                        >\n                            <Link href=\"#\" attributes={{ \"data-testid\": \"test-link\" }}>\n                                Link\n                            </Link>\n\n                            <TextField\n                                name=\"input\"\n                                placeholder=\"Input\"\n                                inputAttributes={{ \"data-testid\": \"test-text-field\" }}\n                            />\n\n                            <TextArea name=\"textarea\" inputAttributes={{ \"data-testid\": \"test-text-area\" }} />\n\n                            <Select\n                                name=\"select\"\n                                options={[\n                                    { label: \"Option 1\", value: \"1\" },\n                                    { label: \"Option 2\", value: \"2\" },\n                                ]}\n                                inputAttributes={{ \"data-testid\": \"test-select\" }}\n                            />\n\n                            <RadioGroup name=\"radio\">\n                                <Radio value=\"1\" inputAttributes={{ \"data-testid\": \"test-radio-1\" }}>\n                                    Option 1\n                                </Radio>\n                                <Radio value=\"2\" inputAttributes={{ \"data-testid\": \"test-radio-2\" }}>\n                                    Option 2\n                                </Radio>\n                            </RadioGroup>\n\n                            <Editor />\n\n                            <div tabIndex={0} role=\"button\" data-testid=\"test-tabindex\">\n                                div with tabIndex\n                            </div>\n\n                            <div style={{ display: \"none\" }}>\n                                <Button onClick={() => {}} attributes={{ \"data-testid\": \"test-hidden-button\" }}>\n                                    Hidden\n                                </Button>\n                            </div>\n\n                            <Button\n                                onClick={() => {}}\n                                attributes={{ tabIndex: -1, \"data-testid\": \"test-button-negative-tabindex\" }}\n                            >\n                                Excluded\n                            </Button>\n\n                            <input type=\"hidden\" data-testid=\"test-input-hidden\" />\n\n                            <Button\n                                onClick={trapToggle.deactivate}\n                                attributes={{ \"data-testid\": \"test-button\" }}\n                            >\n                                Release button\n                            </Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"nested","snippet":"const nested = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const innerRootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n    const innerTrapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    React.useEffect(() => {\n        if (!innerTrapToggle.active) return;\n        if (!innerRootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(innerRootRef.current, {\n            mode: \"dialog\",\n        });\n\n        return () => trapFocus.release();\n    }, [innerTrapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"nested, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View gap={4}>\n                            <View\n                                gap={4}\n                                direction=\"row\"\n                                padding={4}\n                                backgroundColor=\"neutral-faded\"\n                                borderRadius=\"medium\"\n                                attributes={{ ref: rootRef }}\n                            >\n                                <Button onClick={() => {}}>Action</Button>\n                                <Button onClick={innerTrapToggle.activate}>Inner trap focus</Button>\n                                <Button onClick={trapToggle.deactivate}>Release</Button>\n                            </View>\n\n                            {innerTrapToggle.active && (\n                                <View\n                                    gap={4}\n                                    direction=\"row\"\n                                    padding={4}\n                                    backgroundColor=\"neutral-faded\"\n                                    borderRadius=\"medium\"\n                                    attributes={{ ref: innerRootRef }}\n                                >\n                                    <Button onClick={() => {}}>Action</Button>\n                                    <Button onClick={innerTrapToggle.deactivate}>Release</Button>\n                                </View>\n                            )}\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"mutationObserver","snippet":"const mutationObserver = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n    const [mutated, setMutated] = React.useState(false);\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n        });\n\n        setTimeout(() => {\n            setMutated(true);\n        }, 50);\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View\n                            gap={4}\n                            direction=\"row\"\n                            padding={4}\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            attributes={{ ref: rootRef }}\n                        >\n                            {!mutated && (\n                                <>\n                                    <Button onClick={() => {}}>Action 1</Button>\n                                    <Button onClick={() => {}}>Action 2</Button>\n                                </>\n                            )}\n                            <Button onClick={() => {}}>Action 3</Button>\n                            <Button onClick={trapToggle.deactivate}>Release</Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import {\n    Button,\n    Example,\n    Link,\n    Radio,\n    RadioGroup,\n    Select,\n    TextArea,\n    TextField,\n    View,\n} from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  16 | import { sleep } from \"utilities/helpers\";\n  17 |\n> 18 | export default {\n     | ^\n  19 | \ttitle: \"Utilities/TrapFocus\",\n  20 | };\n  21 |\n\n./src/utilities/a11y/tests/TrapFocus.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport { Example } from \"utilities/storybook\";\nimport Button from \"components/Button\";\nimport useToggle from \"hooks/useToggle\";\nimport View from \"components/View\";\nimport TextField from \"components/TextField\";\nimport RadioGroup from \"components/RadioGroup\";\nimport Radio from \"components/Radio\";\nimport * as keys from \"constants/keys\";\nimport TrapFocus from \"../TrapFocus\";\nimport Link from \"components/Link\";\nimport TextArea from \"components/TextArea\";\nimport Select from \"components/Select\";\nimport { sleep } from \"utilities/helpers\";\n\nexport default {\n\ttitle: \"Utilities/TrapFocus\",\n};\n\nconst TrapContent: React.FC<{\n\trootRef: React.RefObject<HTMLDivElement | null>;\n\tonRelease: () => void;\n}> = (props) => {\n\treturn (\n\t\t<View\n\t\t\tgap={4}\n\t\t\tdirection=\"row\"\n\t\t\tpadding={4}\n\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\tborderRadius=\"medium\"\n\t\t\tattributes={{ ref: props.rootRef }}\n\t\t>\n\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t<Button onClick={props.onRelease}>Release</Button>\n\t\t</View>\n\t);\n};\n\nexport const modeDialog: StoryObj = {\n\tname: \"mode: dialog\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, { mode: \"dialog\" });\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\"mode: dialog\", \"tab navigation, always stays inside until released\"]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View.Item>\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View.Item>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\t\tconst releaseTrigger = canvas.getAllByRole(\"button\")[3];\n\n\t\t// Test screen reader trap\n\t\t// All elements outside have aria-hidden so they're ignored\n\t\texpect(trapContentActions.includes(trigger)).toBeFalsy();\n\t\texpect(trapContentActions[0].parentNode?.previousSibling).toHaveAttribute(\"aria-hidden\");\n\n\t\texpect(releaseTrigger).toBeInTheDocument();\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\t// Doesn't use arrow keys\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Enter/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n\nexport const modeActionMenu: StoryObj = {\n\tname: \"mode: action-menu\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"action-menu\",\n\t\t\t\tonRelease: () => {\n\t\t\t\t\ttrapToggle.deactivate();\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\n\t\t\t\t\t\t\"mode: action-menu\",\n\t\t\t\t\t\t\"up/down arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t\t<Button onClick={() => {}}>Next trigger</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\t\t// const nextTrigger = canvas.getAllByRole(\"button\")[1];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\").slice(2);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.click(trigger);\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\n\t\tconsole.log(document.activeElement);\n\n\t\t// FIXME: Storybook moves focus to body\n\t\t// expect(document.activeElement).toBe(nextTrigger);\n\t},\n};\n\nexport const modeActionBar: StoryObj = {\n\tname: \"mode: action-bar\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"action-bar\",\n\t\t\t\tonRelease: () => {\n\t\t\t\t\ttrapToggle.deactivate();\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\n\t\t\t\t\t\t\"mode: action-bar\",\n\t\t\t\t\t\t\"left/right arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t\t<Button onClick={() => {}}>Next trigger</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\t\t// const nextTrigger = canvas.getAllByRole(\"button\")[1];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\").slice(2);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.click(trigger);\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\n\t\tconsole.log(document.activeElement);\n\n\t\t// FIXME: Storybook moves focus to body\n\t\t// expect(document.activeElement).toBe(nextTrigger);\n\t},\n};\n\nexport const modeContentMenu: StoryObj = {\n\tname: \"mode: content-menu\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"content-menu\",\n\t\t\t\tonRelease: () => {\n\t\t\t\t\ttrapToggle.deactivate();\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\n\t\t\t\t\t\t\"mode: content-menu\",\n\t\t\t\t\t\t\"tab navigation, tabbing outside the content will trigger the release\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t\t<Button onClick={() => {}}>Next trigger</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\t\t// const nextTrigger = canvas.getAllByRole(\"button\")[1];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\").slice(2);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\t// await userEvent.keyboard(\"{Tab/}\");\n\t\t// await userEvent.keyboard(\"{Tab/}\");\n\n\t\t// FIXME: Storybook moves focus to body\n\t\t// expect(document.activeElement).toBe(nextTrigger);\n\t},\n};\n\nexport const includeTrigger: StoryObj = {\n\tname: \"includeTrigger\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t\tincludeTrigger: true,\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n\nexport const initialFocusEl: StoryObj = {\n\tname: \"initialFocusEl\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst initialFocusRef = React.useRef<HTMLButtonElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t\tinitialFocusEl: initialFocusRef.current,\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t\t\t\t\t<Button onClick={() => {}} attributes={{ ref: initialFocusRef }}>\n\t\t\t\t\t\t\t\t\tAction 2\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t\t\t\t\t\t<Button onClick={trapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\t},\n};\n\n/**\n * Testing edge cases\n */\n\nconst Editor = () => {\n\tconst pressedCountRef = React.useRef(0);\n\n\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tif (e.key !== keys.TAB) return;\n\n\t\tpressedCountRef.current += 1;\n\t\tif (pressedCountRef.current % 2) e.preventDefault();\n\t};\n\n\treturn (\n\t\t<View\n\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\tborderColor=\"neutral-faded\"\n\t\t\tborderRadius=\"medium\"\n\t\t\tpadding={4}\n\t\t\tattributes={{\n\t\t\t\tcontentEditable: true,\n\t\t\t\tonKeyDown: handleKeyDown,\n\t\t\t\t\"data-testid\": \"test-contenteditable\",\n\t\t\t}}\n\t\t/>\n\t);\n};\n\nexport const focusableElements: StoryObj = {\n\tname: \"test: focusable elements\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current);\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title=\"test with all types of focusable elements\">\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View.Item>\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Activate</Button>\n\t\t\t\t\t\t</View.Item>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t\talign=\"start\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Link href=\"#\" attributes={{ \"data-testid\": \"test-link\" }}>\n\t\t\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\t</Link>\n\n\t\t\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\t\t\tname=\"input\"\n\t\t\t\t\t\t\t\t\tplaceholder=\"Input\"\n\t\t\t\t\t\t\t\t\tinputAttributes={{ \"data-testid\": \"test-text-field\" }}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<TextArea name=\"textarea\" inputAttributes={{ \"data-testid\": \"test-text-area\" }} />\n\n\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\tname=\"select\"\n\t\t\t\t\t\t\t\t\toptions={[\n\t\t\t\t\t\t\t\t\t\t{ label: \"Option 1\", value: \"1\" },\n\t\t\t\t\t\t\t\t\t\t{ label: \"Option 2\", value: \"2\" },\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\tinputAttributes={{ \"data-testid\": \"test-select\" }}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<RadioGroup name=\"radio\">\n\t\t\t\t\t\t\t\t\t<Radio value=\"1\" inputAttributes={{ \"data-testid\": \"test-radio-1\" }}>\n\t\t\t\t\t\t\t\t\t\tOption 1\n\t\t\t\t\t\t\t\t\t</Radio>\n\t\t\t\t\t\t\t\t\t<Radio value=\"2\" inputAttributes={{ \"data-testid\": \"test-radio-2\" }}>\n\t\t\t\t\t\t\t\t\t\tOption 2\n\t\t\t\t\t\t\t\t\t</Radio>\n\t\t\t\t\t\t\t\t</RadioGroup>\n\n\t\t\t\t\t\t\t\t<Editor />\n\n\t\t\t\t\t\t\t\t<div tabIndex={0} role=\"button\" data-testid=\"test-tabindex\">\n\t\t\t\t\t\t\t\t\tdiv with tabIndex\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div style={{ display: \"none\" }}>\n\t\t\t\t\t\t\t\t\t<Button onClick={() => {}} attributes={{ \"data-testid\": \"test-hidden-button\" }}>\n\t\t\t\t\t\t\t\t\t\tHidden\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={() => {}}\n\t\t\t\t\t\t\t\t\tattributes={{ tabIndex: -1, \"data-testid\": \"test-button-negative-tabindex\" }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tExcluded\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<input type=\"hidden\" data-testid=\"test-input-hidden\" />\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={trapToggle.deactivate}\n\t\t\t\t\t\t\t\t\tattributes={{ \"data-testid\": \"test-button\" }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tRelease button\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst link = canvas.getByTestId(\"test-link\");\n\t\tconst textField = canvas.getByTestId(\"test-text-field\");\n\t\tconst textArea = canvas.getByTestId(\"test-text-area\");\n\t\tconst select = canvas.getByTestId(\"test-select\");\n\t\tconst radio1 = canvas.getByTestId(\"test-radio-1\");\n\t\tconst radio2 = canvas.getByTestId(\"test-radio-2\");\n\t\tconst contentEditable = canvas.getByTestId(\"test-contenteditable\");\n\t\tconst tabIndex = canvas.getByTestId(\"test-tabindex\");\n\t\tconst negativeTabIndex = canvas.getByTestId(\"test-button-negative-tabindex\");\n\t\tconst hiddenButton = canvas.getByTestId(\"test-hidden-button\");\n\t\tconst button = canvas.getByTestId(\"test-button\");\n\n\t\texpect(document.activeElement).toBe(link);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(textField);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(textArea);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(select);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(radio1);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(radio2);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(contentEditable);\n\n\t\t// Stays for the first tab press\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(contentEditable);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(tabIndex);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).not.toBe(negativeTabIndex);\n\t\texpect(document.activeElement).not.toBe(hiddenButton);\n\t\texpect(document.activeElement).toBe(button);\n\t},\n};\n\nexport const nested: StoryObj = {\n\tname: \"test: nested\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst innerRootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\t\tconst innerTrapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!innerTrapToggle.active) return;\n\t\t\tif (!innerRootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(innerRootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [innerTrapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"nested, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action</Button>\n\t\t\t\t\t\t\t\t\t<Button onClick={innerTrapToggle.activate}>Inner trap focus</Button>\n\t\t\t\t\t\t\t\t\t<Button onClick={trapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t\t\t{innerTrapToggle.active && (\n\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\t\t\tattributes={{ ref: innerRootRef }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action</Button>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={innerTrapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\n\t\tawait userEvent.click(trapContentActions[1]);\n\n\t\tconst innerTrapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(innerTrapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.click(innerTrapContentActions[1]);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.click(trapContentActions[2]);\n\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n\nexport const mutationObserver: StoryObj = {\n\tname: \"test: mutation observer\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\t\tconst [mutated, setMutated] = React.useState(false);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t});\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetMutated(true);\n\t\t\t}, 50);\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{!mutated && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t\t\t\t\t\t<Button onClick={trapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tlet trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait sleep(100);\n\n\t\ttrapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\t// Check that trap still works after mutation\n\t\tawait userEvent.keyboard(\"{Tab}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\n\t\tawait userEvent.keyboard(\"{Tab}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\t// Check that it still knows about the original trigger\n\t\tawait userEvent.click(trapContentActions[1]);\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n"}},"internal-portal":{"id":"internal-portal","name":"Portal","path":"./src/components/_private/Portal/tests/Portal.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n\tconst ref = React.useRef<HTMLDivElement>(null);\n\tconst [mounted, setMounted] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tsetMounted(true);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<div style={{ border: \"2px solid #333\", padding: 16 }}>\n\t\t\t\tApp\n\t\t\t\t{mounted && <Portal targetRef={ref}>Ported to green</Portal>}\n\t\t\t</div>\n\t\t\t<div ref={ref} style={{ border: \"2px solid green\", padding: 16 }} />\n\t\t</>\n\t);\n};"}],"import":"import { Portal } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /Users/shilman/projects/design-systems/reshaped/src/components/_private/Portal/index.ts\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport Portal, { PortalScope } from \"./Portal\";\n\nconst PortalRoot = Portal as typeof Portal & {\n\tScope: typeof PortalScope;\n};\n\nPortalRoot.Scope = PortalScope;\n\nexport default PortalRoot;\nexport type { Props as PortalProps } from \"./Portal.types\";\n\n\nFile: /Users/shilman/projects/design-systems/reshaped/src/components/_private/Portal/Portal.types.ts\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport React from \"react\";\n\nexport type Props = {\n\tchildren?: React.ReactNode;\n\ttargetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;\n};\n\nexport type ScopeProps<T extends HTMLElement> = {\n\tchildren: (ref: React.RefObject<T | null>) => React.ReactNode;\n};\n\nexport type Context = {\n\tscopeRef: React.RefObject<HTMLElement | null>;\n};\n"}},"internal-usedrag":{"id":"internal-usedrag","name":"useDrag","path":"./src/hooks/tests/useDrag.stories.tsx","stories":[{"name":"base","snippet":"const base = () => <Example />;"},{"name":"mouseEvents","snippet":"const mouseEvents = () => {\n    return <Demo onDrag={fn()} />;\n};"},{"name":"touchEvents","snippet":"const touchEvents = () => {\n    return <Demo onDrag={fn()} />;\n};"},{"name":"orientationHorizontal","snippet":"const orientationHorizontal = () => {\n    return <Demo onDrag={fn()} orientation=\"horizontal\" />;\n};"},{"name":"orientationVertical","snippet":"const orientationVertical = () => {\n    return <Demo onDrag={fn()} orientation=\"vertical\" />;\n};"},{"name":"disabled","snippet":"const disabled = () => {\n    return <Demo onDrag={fn()} disabled />;\n};"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   7 | import Button from \"components/Button\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Internal/useDrag\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useDrag.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { fireEvent, fn, expect } from \"storybook/test\";\nimport View from \"components/View\";\nimport useDrag from \"hooks/_private/useDrag\";\nimport useToggle from \"hooks/useToggle\";\nimport Button from \"components/Button\";\n\nexport default {\n\ttitle: \"Internal/useDrag\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nfunction Example() {\n\tconst [state, setState] = React.useState({ x: 0, y: 0 });\n\tconst disabledToggle = useToggle();\n\n\tconst { ref, containerRef, active } = useDrag<HTMLDivElement>(\n\t\t(args) => {\n\t\t\tsetState(args);\n\t\t},\n\t\t{\n\t\t\tdisabled: disabledToggle.active,\n\t\t}\n\t);\n\n\treturn (\n\t\t<View direction=\"row\" gap={4}>\n\t\t\t<View\n\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\tborderRadius=\"medium\"\n\t\t\t\twidth=\"200px\"\n\t\t\t\theight=\"200px\"\n\t\t\t\tattributes={{ ref: containerRef }}\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\theight={8}\n\t\t\t\t\twidth={8}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={active ? \"primary\" : \"neutral\"}\n\t\t\t\t\tattributes={{\n\t\t\t\t\t\trole: \"button\",\n\t\t\t\t\t\ttabIndex: 0,\n\t\t\t\t\t\t\"aria-label\": \"Drag\",\n\t\t\t\t\t\tref,\n\t\t\t\t\t\tstyle: { translate: `${state.x}px ${state.y}px`, cursor: active ? \"grabbing\" : \"grab\" },\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</View>\n\t\t\t<Button onClick={() => disabledToggle.toggle()}>\n\t\t\t\t{disabledToggle.active ? \"Enable\" : \"Disable\"}\n\t\t\t</Button>\n\t\t</View>\n\t);\n}\n\nexport const base = { name: \"base\", render: () => <Example /> };\n\nconst Demo: React.FC<{\n\tonDrag: ReturnType<typeof fn>;\n\tdisabled?: boolean;\n\torientation?: \"horizontal\" | \"vertical\";\n}> = (props) => {\n\tconst { ref, containerRef } = useDrag<HTMLDivElement>(\n\t\t(options) => {\n\t\t\tprops.onDrag(options);\n\t\t},\n\t\t{\n\t\t\torientation: props.orientation,\n\t\t\tdisabled: props.disabled,\n\t\t}\n\t);\n\n\treturn (\n\t\t<View\n\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\twidth=\"200px\"\n\t\t\theight=\"200px\"\n\t\t\tattributes={{ ref: containerRef, \"data-testid\": \"test-id\" }}\n\t\t>\n\t\t\t<View\n\t\t\t\theight={8}\n\t\t\t\twidth={8}\n\t\t\t\tbackgroundColor=\"primary\"\n\t\t\t\tattributes={{\n\t\t\t\t\t\"data-testid\": \"test-handle-id\",\n\t\t\t\t\tref,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport const mouseEvents: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"onDrag, mouse events\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));\n\n\t\tfireEvent.mouseUp(trigger);\n\t\tfireEvent.mouseUp(document.body, { clientX: 50, clientY: 100 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const touchEvents: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"onDrag, touch events\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst createTouch = (target: HTMLElement, x: number, y: number) => {\n\t\t\treturn new Touch({\n\t\t\t\tidentifier: Date.now(),\n\t\t\t\ttarget,\n\t\t\t\tclientX: x,\n\t\t\t\tclientY: y,\n\t\t\t\tscreenX: x,\n\t\t\t\tscreenY: y,\n\t\t\t\tpageX: x,\n\t\t\t\tpageY: y,\n\t\t\t});\n\t\t};\n\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.touchStart(trigger, { changedTouches: [createTouch(trigger, 0, 0)] });\n\t\tfireEvent.touchMove(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));\n\n\t\tfireEvent.touchEnd(trigger);\n\t\tfireEvent.touchEnd(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const orientationHorizontal: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"orientation horizontal\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} orientation=\"horizontal\" />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 0 }));\n\t},\n};\n\nexport const orientationVertical: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"orientation vertical\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} orientation=\"vertical\" />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 0, y: 50 }));\n\t},\n};\n\nexport const disabled: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"disabled\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} disabled />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(0);\n\t},\n};\n"}},"internal-shadowdom":{"id":"internal-shadowdom","name":"ShadowDOM","path":"./src/tests/ShadowDOM.stories.tsx","stories":[{"name":"behavior","snippet":"const behavior = () => (\n\t<Example>\n\t\t<Example.Item title=\"base\">\n\t\t\t<Component />\n\t\t</Example.Item>\n\t</Example>\n);"}],"import":"import {\n    Autocomplete,\n    Button,\n    DropdownMenu,\n    Example,\n    Reshaped,\n    Select,\n    Tooltip,\n    View,\n} from \"reshaped\";\nimport root from \"react-shadow\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  10 | import Tooltip from \"components/Tooltip\";\n  11 |\n> 12 | export default {\n     | ^\n  13 | \ttitle: \"Internal/ShadowDOM\",\n  14 | };\n  15 |\n\n./src/tests/ShadowDOM.stories.tsx:\nimport React, { useEffect, useState, useRef, forwardRef } from \"react\";\nimport root from \"react-shadow\";\nimport { Example } from \"utilities/storybook\";\nimport Autocomplete, { type AutocompleteProps } from \"components/Autocomplete\";\nimport View from \"components/View\";\nimport DropdownMenu from \"components/DropdownMenu\";\nimport Reshaped from \"components/Reshaped\";\nimport Select from \"components/Select\";\nimport Button from \"components/Button\";\nimport Tooltip from \"components/Tooltip\";\n\nexport default {\n\ttitle: \"Internal/ShadowDOM\",\n};\n\nconst getStylesData = () => {\n\tconst sourceStylesContainer = document.head;\n\n\treturn Array.from(sourceStylesContainer.children).filter((x) => x instanceof HTMLStyleElement);\n};\n\n// Create a component to render inside the Shadow DOM\nconst ShadowDiv = forwardRef<HTMLDivElement, React.PropsWithChildren>((props, ref) => {\n\tconst shadowRef = useRef<HTMLDivElement>(null);\n\n\t// Load styles\n\tuseEffect(() => {\n\t\tif (!shadowRef?.current) return;\n\n\t\t// Add styles to the shadow DOM\n\t\t// const shadowEl = shadowRef?.current.shadowRoot;\n\t\tconst shadowEl = shadowRef?.current.shadowRoot;\n\n\t\tif (!shadowEl) return;\n\n\t\tconst sourceStylesContainer = document.head;\n\n\t\tconst observer = new MutationObserver(getStylesData);\n\t\tobserver.observe(sourceStylesContainer, {\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\n\t\tlet styleBlock = shadowEl.getElementById(\"custom-outer-style\");\n\n\t\tif (!styleBlock) {\n\t\t\tstyleBlock = document.createElement(\"span\");\n\t\t\tstyleBlock.id = \"custom-outer-style\";\n\t\t\tshadowEl.appendChild(styleBlock);\n\t\t} else {\n\t\t\tstyleBlock.innerHTML = \"\";\n\t\t}\n\n\t\tstyleBlock.append(\n\t\t\t...getStylesData() // finds all <style> tags containing your web component ID\n\t\t\t\t.map((x) => x.cloneNode(true)) // copies styles into the current instance of your web component. You might need to have multiple instances, so all of them need to track the styles.\n\t\t);\n\n\t\treturn () => observer.disconnect();\n\t}, []);\n\n\treturn (\n\t\t<Reshaped>\n\t\t\t<root.div className=\"quote\" ref={shadowRef}>\n\t\t\t\t<div ref={ref}>\n\t\t\t\t\t{/* \n\t\t\t\t\t\tAdding padding here since otherwise mouseenter won't trigger on contents \n\t\t\t\t\t\twhen mouse is switching from outside the shadow dom\n\t\t\t\t\t*/}\n\t\t\t\t\t<View padding={4}>{props.children}</View>\n\t\t\t\t</div>\n\t\t\t</root.div>\n\t\t</Reshaped>\n\t);\n});\n\n// Main Component\nconst Component: React.FC = () => {\n\tconst [valueAutoShadow, setValueAutoShadow] = useState(\"\");\n\tconst [valueDropdownShadow, setValueDropdownShadow] = useState(\"\");\n\n\tconst optionsAuto = [\"Pizza\", \"Pie\", \"Ice-cream\"];\n\tconst optionsDropdown = [\"Turtle\", \"Cat\", \"Long-necked giraffe\"];\n\n\tconst handleChangeAutoShadow: AutocompleteProps[\"onChange\"] = (args) => {\n\t\tconsole.log(\"Autocomlete shadow value=\", args);\n\t\tsetValueAutoShadow(args.value);\n\t};\n\n\tconst handleChangeDropdownShadow = (val: string) => {\n\t\tconsole.log(\"Dropdown shadow value=\", val);\n\t\tsetValueDropdownShadow(val);\n\t};\n\n\treturn (\n\t\t<View paddingBottom={50}>\n\t\t\t<ShadowDiv>\n\t\t\t\t<View gap={4} direction=\"row\" wrap={false}>\n\t\t\t\t\t<Autocomplete\n\t\t\t\t\t\tname=\"fruit-shadow\"\n\t\t\t\t\t\tplaceholder=\"Pick your food\"\n\t\t\t\t\t\tvalue={valueAutoShadow}\n\t\t\t\t\t\tonChange={handleChangeAutoShadow}\n\t\t\t\t\t\tinputAttributes={{ \"aria-label\": \"Label\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{optionsAuto.map((option) => (\n\t\t\t\t\t\t\t<Autocomplete.Item\n\t\t\t\t\t\t\t\tkey={option}\n\t\t\t\t\t\t\t\tvalue={option}\n\t\t\t\t\t\t\t\tonClick={() => handleChangeAutoShadow({ value: option, name: \"fruit-auto\" })}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t</Autocomplete.Item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Autocomplete>\n\n\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t<DropdownMenu.Trigger>\n\t\t\t\t\t\t\t{(attributes) => (\n\t\t\t\t\t\t\t\t<Select placeholder=\"Pick your animal\" name=\"font\" inputAttributes={attributes}>\n\t\t\t\t\t\t\t\t\t{valueDropdownShadow}\n\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</DropdownMenu.Trigger>\n\t\t\t\t\t\t<DropdownMenu.Content>\n\t\t\t\t\t\t\t{optionsDropdown.map((option) => (\n\t\t\t\t\t\t\t\t<DropdownMenu.Item onClick={() => handleChangeDropdownShadow(option)} key={option}>\n\t\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t\t</DropdownMenu.Item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</DropdownMenu.Content>\n\t\t\t\t\t</DropdownMenu>\n\n\t\t\t\t\t<Tooltip text=\"Tooltip for button\">\n\t\t\t\t\t\t{(attributes) => <Button attributes={attributes}>Hover me</Button>}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</View>\n\t\t\t</ShadowDiv>\n\t\t</View>\n\t);\n};\n\nexport const behavior = () => (\n\t<Example>\n\t\t<Example.Item title=\"base\">\n\t\t\t<Component />\n\t\t</Example.Item>\n\t</Example>\n);\n"}},"internal-themes":{"id":"internal-themes","name":"Themes","path":"./src/tests/themes.stories.tsx","stories":[{"name":"test","snippet":"const test = () => {\n\tconst { colorMode } = useTheme();\n\tconst [activeColor, setColor] = useState(colors[0]);\n\tconst [theme, setTheme] = useState(\"\");\n\tconst [algo, setAlgo] = useState<\"wcag\" | \"apca\">(\"wcag\");\n\n\tuseLayoutEffect(() => {\n\t\tsetTheme(\n\t\t\tgetThemeCSS(\n\t\t\t\t\"test\",\n\t\t\t\t{\n\t\t\t\t\tcolor: generateThemeColors({\n\t\t\t\t\t\tprimary: activeColor === colors[0] ? undefined : activeColor,\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcolorContrastAlgorithm: algo,\n\t\t\t\t}\n\t\t\t)\n\t\t);\n\t}, [activeColor, algo]);\n\n\treturn (\n\t\t<>\n\t\t\t<style>{theme}</style>\n\t\t\t<Theme name=\"test\">\n\t\t\t\t<View gap={4}>\n\t\t\t\t\t<View direction=\"row\" align=\"center\" gap={4}>\n\t\t\t\t\t\t{colors.map((color) => {\n\t\t\t\t\t\t\tconst hex = colorMode === \"dark\" && color === \"#000000\" ? \"#ffffff\" : color;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Actionable key={color} onClick={() => setColor(color)} borderRadius=\"inherit\">\n\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\twidth={5}\n\t\t\t\t\t\t\t\t\t\theight={5}\n\t\t\t\t\t\t\t\t\t\tborderRadius=\"circular\"\n\t\t\t\t\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t\t\ttransition: `box-shadow var(--rs-duration-fast) var(--rs-easing-standard)`,\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: hex,\n\t\t\t\t\t\t\t\t\t\t\t\tboxShadow:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor === activeColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? `0 0 0 3px var(--rs-color-background-elevation-base), 0 0 0 5px ${hex}`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Actionable>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t<View.Item gapBefore=\"auto\">\n\t\t\t\t\t\t\t<Switch name=\"algo\" onChange={(args) => setAlgo(args.checked ? \"apca\" : \"wcag\")}>\n\t\t\t\t\t\t\t\tUse APCA\n\t\t\t\t\t\t\t</Switch>\n\t\t\t\t\t\t</View.Item>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<ThemePlayground />\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</>\n\t);\n};"},{"name":"base","snippet":"const base = () => (\n\t<Example>\n\t\t<Example.Item title=\"custom runtime theme\">\n\t\t\t<style>{css}</style>\n\t\t\t<Theme name=\"green\">\n\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"on colors generation\">\n\t\t\t<style>{css2}</style>\n\t\t\t<Theme name=\"peach\">\n\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t</Example>\n);"},{"name":"generation","snippet":"const generation = () => (\n\t<div>\n\t\t<style>{cssGenerated}</style>\n\t\t<Theme name=\"generated\">{componentExamples}</Theme>\n\t</div>\n);"},{"name":"onColors","snippet":"const onColors = () => (\n\t<Example>\n\t\t<Example.Item title=\"custom on color values\">\n\t\t\t<style>{onColorsCss}</style>\n\t\t\t<Theme name=\"on-color\">\n\t\t\t\t<View gap={2} direction=\"row\">\n\t\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t\t\t<Button color=\"critical\">Critical button</Button>\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"custom on color values, apca\">\n\t\t\t<style>{onColorsCssApca}</style>\n\t\t\t<Theme name=\"on-color-apca\">\n\t\t\t\t<View gap={2} direction=\"row\">\n\t\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t\t\t<Button color=\"critical\">Critical button</Button>\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t</Example>\n);"}],"import":"import {\n    Actionable,\n    Alert,\n    Avatar,\n    Badge,\n    Button,\n    Card,\n    DropdownMenu,\n    Example,\n    Link,\n    Switch,\n    Text,\n    TextField,\n    Theme,\n    ThemePlayground,\n    View,\n} from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Theme","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Theme/Theme.tsx","actualName":"Theme","exportName":"default"}},"sandbox":{"id":"sandbox","name":"Sandbox","path":"./src/Sandbox.stories.tsx","stories":[{"name":"preview","snippet":"const preview = () => {\n\treturn (\n\t\t<Preview>\n\t\t\t<Component />\n\t\t</Preview>\n\t);\n};"}],"import":"import { Image, MenuItem, Modal, Select, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   7 | import MenuItem from \"components/MenuItem\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Sandbox\",\n  11 | \tchromatic: { disableSnapshot: true },\n  12 | };\n\n./src/Sandbox.stories.tsx:\nimport View from \"components/View\";\nimport Image from \"components/Image\";\nimport React from \"react\";\nimport Select from \"components/Select\";\nimport useToggle from \"hooks/useToggle\";\nimport Modal from \"components/Modal\";\nimport MenuItem from \"components/MenuItem\";\n\nexport default {\n\ttitle: \"Sandbox\",\n\tchromatic: { disableSnapshot: true },\n};\n\nconst Preview: React.FC<{ children: React.ReactNode }> = (props) => {\n\treturn (\n\t\t<View padding={20} gap={6}>\n\t\t\t<View position=\"absolute\" insetTop={0} insetStart={0}>\n\t\t\t\t<Image src=\"./logo.svg\" />\n\t\t\t</View>\n\n\t\t\t{props.children}\n\t\t</View>\n\t);\n};\n\nexport const preview = () => {\n\treturn (\n\t\t<Preview>\n\t\t\t<Component />\n\t\t</Preview>\n\t);\n};\n\nconst Component = () => {\n\tconst toggle = useToggle();\n\tconst [value, setValue] = React.useState(\"Dog\");\n\n\tconst handleClick = () => {\n\t\ttoggle.toggle();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Select name=\"animal\" placeholder=\"Select an animal\" onClick={handleClick}>\n\t\t\t\t{value}\n\t\t\t</Select>\n\t\t\t<Modal active={toggle.active} onClose={toggle.deactivate} position=\"bottom\" padding={2}>\n\t\t\t\t<MenuItem\n\t\t\t\t\troundedCorners\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetValue(\"Dog\");\n\t\t\t\t\t\ttoggle.deactivate();\n\t\t\t\t\t}}\n\t\t\t\t\tattributes={{\n\t\t\t\t\t\trole: \"option\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tDog\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem\n\t\t\t\t\troundedCorners\n\t\t\t\t\tattributes={{\n\t\t\t\t\t\trole: \"option\",\n\t\t\t\t\t}}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetValue(\"Turtle\");\n\t\t\t\t\t\ttoggle.deactivate();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tTurtle\n\t\t\t\t</MenuItem>\n\t\t\t</Modal>\n\t\t</>\n\t);\n};\n"}}}}
\ No newline at end of file
diff --git a/eval/evals/110-flight-booking-reshaped/expected/stories/FlightBooking.stories.tsx b/eval/evals/110-flight-booking-reshaped/expected/stories/FlightBooking.stories.tsx
index e8baccfc..5c23b77b 100644
--- a/eval/evals/110-flight-booking-reshaped/expected/stories/FlightBooking.stories.tsx
+++ b/eval/evals/110-flight-booking-reshaped/expected/stories/FlightBooking.stories.tsx
@@ -1,10 +1,12 @@
 import FlightBookingComponent from '../src/components/FlightBooking.tsx';
-import { userEvent, fn, expect, screen } from 'storybook/test';
+import { userEvent, fn, expect, screen, waitFor } from 'storybook/test';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { StepFunction } from 'storybook/internal/csf';
 import React from 'react';
 import { Reshaped } from 'reshaped';
 import 'reshaped/themes/slate/theme.css';
 
-export default {
+const meta = {
 	component: FlightBookingComponent,
 	args: {
 		onSubmit: fn(),
@@ -16,70 +18,267 @@ export default {
 			</Reshaped>
 		),
 	],
-};
+} satisfies Meta<typeof FlightBookingComponent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+async function looseGetInteractiveElements(
+	testId: string,
+	label: string,
+	step: StepFunction,
+) {
+	let elements: HTMLElement[] = [];
+	await step(
+		`Get element by test ID '${testId}' or label '${label}'`,
+		async () => {
+			elements = await waitFor(function getElement() {
+				const byTestId = screen.queryAllByTestId(testId);
+				if (byTestId.length > 0) {
+					return byTestId;
+				}
+				const candidates = [
+					...screen.queryAllByTestId(testId),
+					...screen.queryAllByLabelText(label, { exact: false }),
+					...screen.queryAllByPlaceholderText(label, { exact: false }),
+					...screen.queryAllByText(label, { exact: false }),
+				];
 
-export const Initial = {};
+				// Return all interactive elements
+				const interactive = candidates.filter((el) => {
+					if (!el) {
+						return false;
+					}
+					if (
+						el.getAttribute('disabled') === '' ||
+						el.getAttribute('aria-disabled') === 'true'
+					) {
+						return false;
+					}
+					const tagName = el.tagName.toLowerCase();
+					// Check for naturally interactive HTML elements
+					if (
+						[
+							'button',
+							'a',
+							'input',
+							'select',
+							'textarea',
+							'details',
+							'summary',
+							'audio',
+							'video',
+						].includes(tagName)
+					) {
+						return true;
+					}
+					// Check for elements with interactive ARIA roles
+					const role = el.getAttribute('role');
+					if (
+						!!role &&
+						[
+							'button',
+							'link',
+							'textbox',
+							'checkbox',
+							'radio',
+							'combobox',
+							'listbox',
+							'option',
+							'menuitem',
+							'menuitemcheckbox',
+							'menuitemradio',
+							'tab',
+							'switch',
+							'slider',
+							'spinbutton',
+							'searchbox',
+							'progressbar',
+							'scrollbar',
+						].includes(role)
+					) {
+						return true;
+					}
+					// Check for cursor: pointer style
+					const computedStyle = window.getComputedStyle(el);
+					if (computedStyle.cursor === 'pointer') {
+						return true;
+					}
+					return false;
+				});
+				interactive.push(null as any);
+
+				return interactive;
+			});
+		},
+	);
+	return elements!;
+}
+
+export const Initial: Story = {};
+
+export const FlightPicker: Story = {
+	play: async ({ step }) => {
+		const fromFlightTrigger = (
+			await looseGetInteractiveElements('flight-trigger-from', 'From', step)
+		)[0];
+		await expect(fromFlightTrigger).toBeInTheDocument();
+
+		if (
+			fromFlightTrigger.tagName.toLowerCase() === 'input' &&
+			(fromFlightTrigger as HTMLInputElement).type === 'text'
+		) {
+			await userEvent.type(fromFlightTrigger, 'M');
+		} else {
+			await userEvent.click(fromFlightTrigger);
+		}
 
-export const FlightPicker = {
-	play: async ({ canvas }) => {
-		await userEvent.click(await canvas.findByText('From'));
 		await expect(
-			await screen.findByText('MEL', { exact: false }),
+			(await looseGetInteractiveElements('airport-MEL', 'MEL', step))[0],
 		).toBeInTheDocument();
 	},
 };
 
-export const DatePicker = {
-	play: async ({ canvas }) => {
+export const DatePicker: Story = {
+	play: async ({ step }) => {
 		await userEvent.click(
-			await canvas.findByRole('button', { name: 'Departure Date' }),
+			(
+				await looseGetInteractiveElements(
+					'date-trigger-departure',
+					'Departure Date',
+					step,
+				)
+			)[0],
 		);
-		await expect(await screen.findByText('27')).toBeInTheDocument();
+		await expect(
+			(await looseGetInteractiveElements('date-27', '27', step))[0],
+		).toBeInTheDocument();
 	},
 };
 
-export const ReturnDatePickerIsUnavailableWhenOneWaySelected = {
-	play: async ({ canvas }) => {
-		await userEvent.click(await canvas.findByText('One Way'));
+export const ReturnDatePickerIsUnavailableWhenOneWaySelected: Story = {
+	play: async ({ step }) => {
+		await userEvent.click(
+			(await looseGetInteractiveElements('one-way', 'One Way', step))[0],
+		);
 
-		const returnDatepicker = await canvas.queryByRole('button', {
-			name: 'Return Date',
-		});
+		const returnDatePicker = (
+			await looseGetInteractiveElements(
+				'date-trigger-return',
+				'Return Date',
+				step,
+			)
+		)[0];
 
 		// If the return datepicker exists, ensure it's disabled by trying to open it
-		if (returnDatepicker) {
-			await userEvent.click(returnDatepicker);
-			await expect(await canvas.queryByText('28')).not.toBeInTheDocument();
+		if (returnDatePicker) {
+			await userEvent.click(returnDatePicker);
+			const date15 = (
+				await looseGetInteractiveElements('date-15', '15', step)
+			)[0];
+			await expect(date15).toBeNull();
 		} else {
-			await expect(returnDatepicker).toBeNull();
+			await expect(returnDatePicker).toBeNull();
 		}
 	},
 };
 
-export const Submitted = {
-	play: async ({ canvas, canvasElement, args }) => {
-		await userEvent.click(
-			await canvas.findByRole('button', { name: 'Return' }),
-		);
-		await userEvent.click(await canvas.findByText('From'));
-		await userEvent.click(await screen.findByText('MEL', { exact: false }));
+export const Submitted: Story = {
+	play: async ({ canvasElement, args, step }) => {
+		await step('Enable return flight', async () => {
+			const returnToggle = (
+				await looseGetInteractiveElements('return', 'Return', step)
+			)[0];
+			await userEvent.click(returnToggle);
+		});
 
-		await userEvent.click(await canvas.findByText('To'));
-		await userEvent.click(await screen.findByText('LAX', { exact: false }));
+		await step('Select from flight', async () => {
+			const fromFlightTrigger = (
+				await looseGetInteractiveElements('flight-trigger-from', 'From', step)
+			)[0];
+			await expect(fromFlightTrigger).toBeInTheDocument();
 
-		await userEvent.click(
-			await canvas.findByRole('button', { name: 'Departure Date' }),
-		);
-		await userEvent.click(await screen.findByText('27'));
-		await userEvent.click(canvasElement); // dismiss datepicker popover
+			if (
+				fromFlightTrigger.tagName.toLowerCase() === 'input' &&
+				(fromFlightTrigger as HTMLInputElement).type === 'text'
+			) {
+				await userEvent.type(fromFlightTrigger, 'M');
+			} else {
+				await userEvent.click(fromFlightTrigger);
+			}
+
+			const melbourneAirport = (
+				await looseGetInteractiveElements('airport-MEL', 'MEL', step)
+			)[0];
+			await userEvent.click(melbourneAirport);
+		});
+
+		await step('Select to flight', async () => {
+			const toFlightTrigger = (
+				await looseGetInteractiveElements('flight-trigger-to', 'To', step)
+			)[0];
+			await expect(toFlightTrigger).toBeInTheDocument();
+
+			if (
+				toFlightTrigger.tagName.toLowerCase() === 'input' &&
+				(toFlightTrigger as HTMLInputElement).type === 'text'
+			) {
+				await userEvent.type(toFlightTrigger, 'L');
+			} else {
+				await userEvent.click(toFlightTrigger);
+			}
+			const laxAirport = (
+				await looseGetInteractiveElements('airport-LAX', 'LAX', step)
+			)[0];
+			await userEvent.click(laxAirport);
+		});
+
+		await step('Select departure date', async () => {
+			await userEvent.click(
+				(
+					await looseGetInteractiveElements(
+						'date-trigger-departure',
+						'Departure Date',
+						step,
+					)
+				)[0],
+			);
+			const date = (
+				await looseGetInteractiveElements('date-27', '27', step)
+			).at(-1)!;
+			await expect(date).toBeInTheDocument();
+			await userEvent.click(date);
+			await userEvent.click(canvasElement); // dismiss datepicker popover
+		});
+
+		await step('Select return date', async () => {
+			await userEvent.click(
+				(
+					await looseGetInteractiveElements(
+						'date-trigger-return',
+						'Return Date',
+						step,
+					)
+				)[0],
+			);
+			const date = (
+				await looseGetInteractiveElements('date-28', '28', step)
+			).at(-1)!;
+			await expect(date).toBeInTheDocument();
+			await userEvent.click(date);
+			await userEvent.click(canvasElement); // dismiss datepicker popover
+		});
 
 		await userEvent.click(
-			await canvas.findByRole('button', { name: 'Return Date' }),
+			(
+				await looseGetInteractiveElements(
+					'search-flights',
+					'Search Flights',
+					step,
+				)
+			)[0],
 		);
-		await userEvent.click(await screen.findByText('28'));
-		await userEvent.click(canvasElement); // dismiss datepicker popover
-
-		await userEvent.click(await canvas.findByText('Search Flights'));
 		await expect(args.onSubmit).toHaveBeenCalledOnce();
 	},
 };
diff --git a/eval/evals/110-flight-booking-reshaped/prompt.md b/eval/evals/110-flight-booking-reshaped/prompt.md
index 897879d6..3be2bc5f 100644
--- a/eval/evals/110-flight-booking-reshaped/prompt.md
+++ b/eval/evals/110-flight-booking-reshaped/prompt.md
@@ -24,13 +24,13 @@ The calendar widget shouldn't allow selecting dates in the past and the return f
 1. The <FlightBooking /> component MUST be a default export in src/components/FlightBooking.tsx
 2. The <FlightBooking /> component MUST be added to the main.tsx file as the ONLY component being rendered
 3. The <FlightBooking /> component MUST take an optional onSubmit() prop that is called when the submit button is clicked
-4. The element for the "One Way"-toggle SHOULD have "One Way" as its only content
-5. The element for the "Return"-toggle SHOULD have a "Return" as its only content
-6. The autocomplete to open the From airport picker SHOULD have "From" as its placeholder
-7. The autocomplete to open the To airport picker SHOULD have "To" as its placeholder
-8. Each element to select an airport in the pickers SHOULD have include both the shortcode and full airport name in its content
-9. The element to open the Departure Date date select SHOULD have "Departure Date" as its initial content
-10. The (optional) element to open the Return Date date select SHOULD have "Return Date" as its initial content
-11. Each date in the date selects SHOULD the day of month as its only content
-12. The submit button SHOULD have "Search Flights" as its only content
+4. The element for the "One Way"-toggle SHOULD have "One Way" as its only content and SHOULD have data-testid="one-way"
+5. The element for the "Return"-toggle SHOULD have a "Return" as its only content and SHOULD have data-testid="return"
+6. The autocomplete to open the From airport picker SHOULD have "From" as its placeholder and SHOULD have data-testid="flight-trigger-from"
+7. The autocomplete to open the To airport picker SHOULD have "To" as its placeholder and SHOULD have data-testid="flight-trigger-to"
+8. Each element to select an airport in the pickers SHOULD have include both the shortcode and full airport name in its content and SHOULD have data-testid="airport-{SHORTCODE}" (e.g., "airport-MEL", "airport-LAX")
+9. The element to open the Departure Date date select SHOULD have "Departure Date" as its initial content and SHOULD have data-testid="date-trigger-departure"
+10. The (optional) element to open the Return Date date select SHOULD have "Return Date" as its initial content and SHOULD have data-testid="date-trigger-return"
+11. Each date in the date selects SHOULD the day of month as its only content and SHOULD have data-testid="date-{DAY}" (e.g., "date-27", "date-15")
+12. The submit button SHOULD have "Search Flights" as its only content and SHOULD have data-testid="search-flights"
     </technical_requirements>

From 46b995f74db865d9ed3eafe21147bcb5ea523977 Mon Sep 17 00:00:00 2001
From: Jeppe Reinhold <jeppe@reinhold.is>
Date: Thu, 20 Nov 2025 21:27:14 +0100
Subject: [PATCH 2/2] format

---
 .../components.json                           | 3549 ++++++++++++++++-
 1 file changed, 3548 insertions(+), 1 deletion(-)

diff --git a/eval/evals/110-flight-booking-reshaped/components.json b/eval/evals/110-flight-booking-reshaped/components.json
index 85e34449..0d5e0253 100644
--- a/eval/evals/110-flight-booking-reshaped/components.json
+++ b/eval/evals/110-flight-booking-reshaped/components.json
@@ -1 +1,3548 @@
-{"v":0,"components":{"components-actionbar":{"id":"components-actionbar","name":"ActionBar","path":"./src/components/ActionBar/tests/ActionBar.stories.tsx","stories":[{"name":"positionRelative","snippet":"const positionRelative = () => (\n    <Example>\n        <Example.Item title=\"position: top\">\n            <ActionBar position=\"top\">\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <ActionBar position=\"bottom\">\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n    </Example>\n);"},{"name":"positionAbsolute","snippet":"const positionAbsolute = () => (\n    <Example>\n        <Example.Item title=\"position: top-start\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top-start\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: top\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: top-end\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top-end\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom-start\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom-start\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom-end\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"positionFixed","snippet":"const positionFixed = () => (\n    <>\n        <ActionBar padding={2} position=\"top-start\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"top\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"top-end\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom-start\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom-end\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <div style={{ height: 2000 }} />\n    </>\n);"},{"name":"elevated","snippet":"const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated, position: top\">\n            <ActionBar position=\"top\" elevated>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"elevated, position: bottom\">\n            <ActionBar elevated>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"auto elevated, position: bottom\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"offset","snippet":"const offset = () => (\n    <Example>\n        <Example.Item title=\"offset 2, position: top\">\n            <Fixtures.Container>\n                <ActionBar position=\"top\" positionType=\"absolute\" offset={2}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"offset 2, position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\" offset={2}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"offset s: 2, m: 4, position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\" offset={{ s: 2, m: 4 }}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"active","snippet":"const active = () => {\n    const barToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => barToggle.toggle()}>Toggle</Button>\n            <ActionBar active={barToggle.active} positionType=\"fixed\" position=\"top-end\">\n                <Fixtures.Actions />\n            </ActionBar>\n        </>\n    );\n};"},{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 6\">\n            <ActionBar padding={6}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"paddingBlock: 2, paddingInline: 4\">\n            <ActionBar paddingBlock={2} paddingInline={4}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"padding: [s] 4, [m+] 6\">\n            <ActionBar padding={{ s: 4, m: 6 }}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <ActionBar className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </ActionBar>\n    </div>\n);"}],"import":"import { ActionBar, Button, Example, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ActionBar","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ActionBar/ActionBar.tsx","actualName":"ActionBar","exportName":"default"}},"components-alert":{"id":"components-alert","name":"Alert","path":"./src/components/Alert/tests/Alert.stories.tsx","stories":[{"name":"color","snippet":"const color = () => (\n    <Example>\n        {([\"neutral\", \"primary\", \"critical\", \"positive\", \"warning\"] as const).map((color) => (\n            <Example.Item title={`color: ${color}`} key={color}>\n                <Alert\n                    color={color}\n                    title=\"Alert title goes here\"\n                    icon={IconZap}\n                    actionsSlot={\n                        <>\n                            <Link\n                                variant=\"plain\"\n                                color={color === \"neutral\" ? \"primary\" : color}\n                                onClick={() => {}}\n                            >\n                                View now\n                            </Link>\n                            <Link\n                                variant=\"plain\"\n                                color={color === \"neutral\" ? \"primary\" : color}\n                                onClick={() => {}}\n                            >\n                                Dismiss\n                            </Link>\n                        </>\n                    }\n                >\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard\n                </Alert>\n            </Example.Item>\n        ))}\n    </Example>\n);"},{"name":"inline","snippet":"const inline = () => (\n    <Example>\n        <Example.Item title=\"inline: true\">\n            <Alert\n                inline\n                title=\"Alert title goes here\"\n                icon={IconZap}\n                actionsSlot={\n                    <>\n                        <Link variant=\"plain\" onClick={() => {}}>\n                            View now\n                        </Link>\n                        <Link variant=\"plain\" onClick={() => {}}>\n                            Dismiss\n                        </Link>\n                    </>\n                }\n            >\n                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n                been the industry's standard\n            </Alert>\n        </Example.Item>\n    </Example>\n);"},{"name":"bleed","snippet":"const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4\">\n            <Alert bleed={4} icon={IconZap}>\n                Content\n            </Alert>\n        </Example.Item>\n        <Example.Item title=\"bleed: [s] 4, [m+] 0\">\n            <Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>\n                Content\n            </Alert>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Alert className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </Alert>\n    </div>\n);"}],"import":"import { Alert, Example, Link, Placeholder } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Alert","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Alert/Alert.tsx","actualName":"Alert","exportName":"default"}},"components-autocomplete":{"id":"components-autocomplete","name":"Autocomplete","path":"./src/components/Autocomplete/tests/Autocomplete.stories.tsx","stories":[{"name":"active","snippet":"const active = (args) => {\n    const toggle = useToggle(true);\n\n    return (\n        <Example>\n            <Example.Item title=\"active, onOpen, onClose\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete\n                        name=\"fruit\"\n                        placeholder=\"Pick your food\"\n                        active={toggle.active}\n                        onOpen={() => {\n                            args.handleOpen();\n                            toggle.activate();\n                        }}\n                        onClose={() => {\n                            args.handleClose();\n                            toggle.deactivate();\n                        }}\n                        onChange={(args) => console.log(args)}\n                    >\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"base","snippet":"const base = () => {\n    const [value, setValue] = React.useState(\"\");\n\n    return (\n        <Example>\n            <Example.Item title=\"Base\">\n                <FormControl>\n                    <FormControl.Label>Food</FormControl.Label>\n                    <Autocomplete\n                        name=\"fruit\"\n                        placeholder=\"Pick your food\"\n                        value={value}\n                        onChange={(args) => setValue(args.value)}\n                        onBackspace={fn()}\n                        onItemSelect={fn()}>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"itemData","snippet":"const itemData = () => {\n    return (\n        <Example>\n            <Example.Item title=\"item data\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete name=\"fruit\" placeholder=\"Pick your food\" onItemSelect={fn()} active>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v} data={i === 1 ? { foo: true } : undefined}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"itemDisabled","snippet":"const itemDisabled = () => {\n    return (\n        <Example>\n            <Example.Item title=\"item disabled\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete name=\"fruit\" placeholder=\"Pick your food\" active>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v} disabled={i === 1}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"multiselect","snippet":"const multiselect = () => {\n    const options = [\n        \"Pizza\",\n        \"Pie\",\n        \"Ice-cream\",\n        \"Fries\",\n        \"Salad\",\n        \"Option 4\",\n        \"Option 5\",\n        \"Option 6\",\n    ];\n\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const [values, setValues] = React.useState<string[]>([\n        \"Option 4\",\n        \"Option 5\",\n        \"Option 6\",\n        \"Pizza\",\n        \"Ice-cream\",\n    ]);\n    const [query, setQuery] = React.useState(\"\");\n\n    const handleDismiss = (dismissedValue: string) => {\n        const nextValues = values.filter((value) => value !== dismissedValue);\n        setValues(nextValues);\n        inputRef.current?.focus();\n    };\n\n    const valuesNode = values.map((value) => (\n        <Badge dismissAriaLabel=\"Dismiss value\" onDismiss={() => handleDismiss(value)} key={value}>\n            {value}\n        </Badge>\n    ));\n\n    return (\n        <FormControl>\n            <FormControl.Label>Food</FormControl.Label>\n            <Autocomplete\n                name=\"fruit\"\n                value={query}\n                placeholder=\"Pick your food\"\n                startSlot={valuesNode}\n                multiline\n                inputAttributes={{ ref: inputRef }}\n                onChange={(args) => setQuery(args.value)}\n                onBackspace={() => {\n                    if (query.length === 0) {\n                        setValues((prev) => prev.slice(0, -1));\n                    }\n                }}\n                onItemSelect={(args) => {\n                    setQuery(\"\");\n                    setValues((prev) => [...prev, args.value]);\n                }}\n            >\n                {options.map((v) => {\n                    if (!v.toLowerCase().includes(query.toLowerCase())) return;\n                    if (values.includes(v)) return;\n\n                    return (\n                        <Autocomplete.Item key={v} value={v}>\n                            {v}\n                        </Autocomplete.Item>\n                    );\n                })}\n            </Autocomplete>\n        </FormControl>\n    );\n};"}],"import":"import { Autocomplete, Badge, Example, FormControl } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Autocomplete","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Autocomplete/Autocomplete.tsx","actualName":"Autocomplete","exportName":"default"}},"components-avatar":{"id":"components-avatar","name":"Avatar","path":"./src/components/Avatar/tests/Avatar.stories.tsx","stories":[{"name":"src","snippet":"const src = () => (\n    <Example>\n        <Example.Item title=\"src, alt\">\n            <Avatar\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n                alt=\"Amsterdam canal\"\n                size={12}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"src\">\n            <Avatar src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"initials","snippet":"const initials = () => (\n    <Example>\n        <Example.Item title=\"initials\">\n            <Avatar initials=\"RS\" />\n        </Example.Item>\n\n        <Example.Item title=\"icon\">\n            <Avatar icon={IconZap} />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: 6\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={6} icon={IconZap} />\n                <Avatar size={6} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: 15\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={15} icon={IconZap} />\n                <Avatar size={15} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: 40\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={40} icon={IconZap} />\n                <Avatar size={40} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] 10\", \"[m+] 20\"]}>\n            <View direction=\"row\" gap={3}>\n                <Avatar size={{ s: 10, m: 20 }} icon={IconZap} />\n                <Avatar size={{ s: 10, m: 20 }} icon={IconZap} squared />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"squared","snippet":"const squared = () => (\n    <Example>\n        <Example.Item title=\"squared, with image\">\n            <Avatar\n                squared\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n            />\n        </Example.Item>\n        <Example.Item title=\"squared, with initials\">\n            <Avatar squared initials=\"RS\" />\n        </Example.Item>\n        <Example.Item title=\"squared, with initials\">\n            <Avatar squared icon={IconZap} />\n        </Example.Item>\n    </Example>\n);"},{"name":"colors","snippet":"const colors = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"neutral\" icon={IconZap} />\n                <Avatar color=\"neutral\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"primary\" icon={IconZap} />\n                <Avatar color=\"primary\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"positive\" icon={IconZap} />\n                <Avatar color=\"positive\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"warning\" icon={IconZap} />\n                <Avatar color=\"warning\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"critical\" icon={IconZap} />\n                <Avatar color=\"critical\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"fallback","snippet":"const fallback = (args) => {\n    const [error, setError] = useState(false);\n\n    return (\n        <Avatar\n            src={error ? undefined : \"/foo\"}\n            icon={IconZap}\n            imageAttributes={{\n                onError: () => {\n                    setError(true);\n                    args.handleError();\n                },\n            }}\n        />\n    );\n};"},{"name":"renderImage","snippet":"const renderImage = () => (\n    <Example>\n        <Example.Item title=\"renderImage\">\n            <Avatar\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n                alt=\"Amsterdam canal\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image\" />}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Avatar\n            src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            imageAttributes={{ id: \"test-image-id\", alt: \"test image\" }}\n        />\n    </div>\n);"}],"import":"import { Avatar, Example, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Avatar","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Avatar/Avatar.tsx","actualName":"Avatar","exportName":"default"}},"components-badge":{"id":"components-badge","name":"Badge","path":"./src/components/Badge/tests/Badge.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Badge>Badge</Badge>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <Badge variant=\"faded\">Badge</Badge>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <Badge variant=\"outline\">Badge</Badge>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"primary\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"primary\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"primary\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: positive, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"positive\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"positive\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"positive\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: critical, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"critical\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"critical\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"critical\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: warning, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"warning\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"warning\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"warning\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"small\">Badge</Badge>\n                <Badge rounded size=\"small\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge>Badge</Badge>\n                <Badge rounded>Badge</Badge>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"large\">Badge</Badge>\n                <Badge rounded size=\"large\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={3} direction=\"row\">\n                <Badge icon={IconCheckmark} endIcon={IconChevronRight} size=\"small\">\n                    Badge\n                </Badge>\n                <Badge icon={IconCheckmark} size=\"small\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={3} direction=\"row\">\n                <Badge icon={IconCheckmark} endIcon={IconChevronRight}>\n                    Badge\n                </Badge>\n                <Badge icon={IconCheckmark} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"large\" icon={IconCheckmark} endIcon={IconChevronRight}>\n                    Badge\n                </Badge>\n\n                <Badge icon={IconCheckmark} size=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"onDismiss","snippet":"const onDismiss = () => <Example>\n    <Example.Item title=\"onDismiss\">\n        <Badge onDismiss={fn()} dismissAriaLabel=\"Dismiss\">Badge\n                            </Badge>\n    </Example.Item>\n</Example>;"},{"name":"rounded","snippet":"const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded>Badge</Badge>\n                <Badge rounded variant=\"faded\">\n                    Badge\n                </Badge>\n                <Badge rounded variant=\"outline\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"rounded, all sizes, color: critical\", \"one character, renders as circle\"]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Badge rounded color=\"critical\" size=\"small\">\n                    2\n                </Badge>\n                <Badge rounded color=\"critical\">\n                    2\n                </Badge>\n                <Badge rounded color=\"critical\" size=\"large\">\n                    2\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"empty","snippet":"const empty = () => (\n    <Example>\n        <Example.Item title=\"empty, not rounded, all sizes, color: critical\">\n            <View direction=\"row\" gap={3}>\n                <Badge size=\"small\" color=\"critical\" />\n                <Badge color=\"critical\" />\n                <Badge size=\"large\" color=\"critical\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"empty, rounded, all sizes, color: critical\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded size=\"small\" color=\"critical\" />\n                <Badge rounded color=\"critical\" />\n                <Badge rounded size=\"large\" color=\"critical\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"empty, rounded, all sizes, color: neutral\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded size=\"small\" color=\"neutral\" />\n                <Badge rounded />\n                <Badge rounded size=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"highlighted","snippet":"const highlighted = () => (\n    <Example>\n        <Example.Item title=\"highlighted, color: neutral\">\n            <View gap={3} direction=\"row\">\n                <Badge highlighted>Badge</Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"container","snippet":"const container = () => {\n    const [hidden, setHidden] = React.useState(false);\n\n    return (\n        <Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>\n            <Example.Item title=\"position: top-end\">\n                <Badge.Container>\n                    <Badge color=\"primary\" hidden={hidden}>\n                        5\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: bottom-end\">\n                <Badge.Container position=\"bottom-end\">\n                    <Badge color=\"primary\" hidden={hidden}>\n                        5\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: top-end, rounded, multiple digits\">\n                <Badge.Container>\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        123\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: top-end, rounded, empty\">\n                <Badge.Container>\n                    <Badge color=\"primary\" rounded hidden={hidden} />\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: top-end, overlap\", \"should cover the circular avatar\"]}>\n                <Badge.Container overlap>\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        2\n                    </Badge>\n                    <Avatar initials=\"A\" />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: bottom-end, overlap\", \"should cover the circular avatar\"]}>\n                <Badge.Container overlap position=\"bottom-end\">\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        2\n                    </Badge>\n                    <Avatar initials=\"A\" />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: top-end, overlap\", \"should cover the icon\"]}>\n                <Badge.Container overlap position=\"top-end\">\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden} />\n                    <Icon svg={IconCheckmark} size={5} />\n                </Badge.Container>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"href","snippet":"const href = () => (\n    <Badge href=\"https://reshaped.so\" dismissAriaLabel=\"Dismiss\">\n        Badge\n    </Badge>\n);"},{"name":"onClick","snippet":"const onClick = () => <Badge onClick={fn()}>Badge</Badge>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Badge color=\"primary\" className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Avatar, Badge, Button, Example, Icon, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Badge","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Badge/Badge.tsx","actualName":"Badge","exportName":"default"}},"components-breadcrumbs":{"id":"components-breadcrumbs","name":"Breadcrumbs","path":"./src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx","stories":[{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <Breadcrumbs ariaLabel=\"breadcrumb neutral\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"color: primary\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb primary\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"item","snippet":"const item = () => (\n    <Example>\n        <Example.Item title=\"disabled item\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb disabled\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}} disabled>\n                    Disabled item 2\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"item with icon\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb with icon\">\n                <Breadcrumbs.Item icon={IconZap} onClick={() => {}}>\n                    Item 1\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"slots","snippet":"const slots = () => (\n    <Example>\n        <Example.Item title=\"slot: separator\">\n            <Breadcrumbs color=\"primary\" separator=\"/\" ariaLabel=\"breadcrumb with separator\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"custom child content\">\n            <Breadcrumbs ariaLabel=\"breadcrumb with custom children\">\n                <Breadcrumbs.Item onClick={() => {}}>\n                    <Badge>Item 1</Badge>\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>\n                    <Badge>Item 2</Badge>\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"collapsed","snippet":"const collapsed = () => (\n    <Example>\n        <Example.Item title=\"collapsed, 3 items shown by default\">\n            <Breadcrumbs\n                defaultVisibleItems={3}\n                ariaLabel=\"breadcrumbs one\"\n                expandAriaLabel=\"Expand items\"\n            >\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"collapsed, 4 items shown by default\">\n            <Breadcrumbs\n                defaultVisibleItems={4}\n                ariaLabel=\"breadcrumb two\"\n                expandAriaLabel=\"Expand items\"\n            >\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"collapsed, 3 items shown by default, not expandable\">\n            <Breadcrumbs defaultVisibleItems={3} ariaLabel=\"breadcrumb three\" disableExpand>\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"multiline","snippet":"const multiline = () => (\n    <Example>\n        <Example.Item title=\"wraps content when multiline\">\n            <Breadcrumbs ariaLabel=\"breadcrumb multiline\">\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (\n                    <Breadcrumbs.Item onClick={() => {}} key={i}>\n                        Item {i}\n                    </Breadcrumbs.Item>\n                ))}\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"},{"name":"onClick","snippet":"const onClick = () => <Breadcrumbs>\n    <Breadcrumbs.Item onClick={fn()}>Trigger</Breadcrumbs.Item>\n    <Breadcrumbs.Item onClick={fn()} disabled>Trigger\n                    </Breadcrumbs.Item>\n</Breadcrumbs>;"},{"name":"href","snippet":"const href = () => (\n    <Breadcrumbs>\n        <Breadcrumbs.Item href=\"https://reshaped.so\">Trigger</Breadcrumbs.Item>\n    </Breadcrumbs>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Breadcrumbs className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Breadcrumbs.Item>Trigger</Breadcrumbs.Item>\n        </Breadcrumbs>\n    </div>\n);"}],"import":"import { Badge, Breadcrumbs, Example } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Breadcrumbs","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx","actualName":"Breadcrumbs","exportName":"default"}},"components-button":{"id":"components-button","name":"Button","path":"./src/components/Button/tests/Button.stories.tsx","stories":[{"name":"variantAndColor","snippet":"const variantAndColor = () => (\n    <Example>\n        <Example.Item title=\"variant: solid\">\n            <View gap={4} direction=\"row\">\n                <Button onClick={() => {}}>Button</Button>\n                <Button onClick={() => {}} color=\"primary\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"faded\">\n                    Button\n                </Button>\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"outline\">\n                    Button\n                </Button>\n\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: ghost\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"ghost\">\n                    Button\n                </Button>\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: media\">\n            <View backgroundColor=\"primary\" borderRadius=\"medium\" padding={4} direction=\"row\" gap={4}>\n                <Button onClick={() => {}} color=\"media\">\n                    Button\n                </Button>\n\n                <Button onClick={() => {}} color=\"media\" variant=\"faded\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Button onClick={() => {}} icon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"endIcon\">\n            <Button onClick={() => {}} endIcon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"icon, endIcon\">\n            <Button onClick={() => {}} icon={IconZap} endIcon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"icon only\">\n            <Button onClick={() => {}} icon={IconZap} attributes={{ \"aria-label\": \"Action\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"small\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"small\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Button icon={IconZap}>Button</Button>\n                <Button variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"large\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"large\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"xlarge\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"xlarge\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"xlarge\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large, [m+] medium\">\n            <Button size={{ s: \"large\", m: \"medium\" }} icon={IconZap}>\n                Responsive\n            </Button>\n        </Example.Item>\n    </Example>\n);"},{"name":"elevated","snippet":"const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated, color: neutral\">\n            <View direction=\"row\" gap={4}>\n                <Button elevated onClick={() => {}}>\n                    Button\n                </Button>\n                <Button elevated variant=\"outline\" onClick={() => {}}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"elevated, color\">\n            <View direction=\"row\" gap={4}>\n                <Button elevated color=\"primary\">\n                    Button\n                </Button>\n                <Button elevated variant=\"outline\" color=\"primary\">\n                    Button\n                </Button>\n                <View backgroundColor=\"primary\" padding={4} borderRadius=\"medium\">\n                    <Button color=\"media\" elevated>\n                        Button\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"rounded","snippet":"const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded, size: small, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, size: medium, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, size: large, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, icon only, all sizes\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"small\" icon={IconZap} />\n                <Button rounded icon={IconZap} />\n                <Button rounded size=\"large\" icon={IconZap} />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"fullWidth","snippet":"const fullWidth = () => (\n    <Example>\n        <Example.Item title=\"fullWidth, all variants\">\n            <View gap={3}>\n                <Button fullWidth>Neutral</Button>\n                <Button fullWidth variant=\"faded\">\n                    Faded\n                </Button>\n                <Button fullWidth variant=\"outline\">\n                    Outline\n                </Button>\n                <Button fullWidth variant=\"ghost\">\n                    Ghost\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive fullWidth\", \"[s] true\", \"[m+] false\"]}>\n            <Button fullWidth={{ s: true, m: false }}>Button</Button>\n        </Example.Item>\n    </Example>\n);"},{"name":"loading","snippet":"const loading = () => (\n    <Example>\n        <Example.Item title=\"loading, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"loading, color critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"loading, color positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"loading, color: media\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n\n                <div style={{ position: \"absolute\", top: 16, left: 16 }}>\n                    <View gap={3} direction=\"row\">\n                        <Button color=\"media\" loading loadingAriaLabel=\"Loading\">\n                            Button\n                        </Button>\n                        <Button color=\"media\" variant=\"faded\" loading loadingAriaLabel=\"Loading\">\n                            Button\n                        </Button>\n                    </View>\n                </div>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"loading, long button text\", \"button size should stay the same\"]}>\n            <Button loading loadingAriaLabel=\"Loading\" color=\"primary\">\n                Long button text\n            </Button>\n        </Example.Item>\n\n        <Example.Item title={[\"loading, icon only\", \"button keep square 1/1 ratio\"]}>\n            <Button icon={IconZap} rounded loading loadingAriaLabel=\"Loading\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"highlighted","snippet":"const highlighted = () => (\n    <Example>\n        <Example.Item title=\"highlighted, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"highlighted, color: critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted color=\"critical\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"highlighted, color: positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted color=\"positive\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled icon={IconZap} onClick={() => {}}>\n                    Button\n                </Button>\n                <Button disabled variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"disabled, color: critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled color=\"critical\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"disabled, color: positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled color=\"positive\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"disabled, color: media\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n\n                <div style={{ position: \"absolute\", top: 16, left: 16 }}>\n                    <View gap={3} direction=\"row\">\n                        <Button color=\"media\" disabled>\n                            Button\n                        </Button>\n                        <Button color=\"media\" variant=\"faded\" disabled>\n                            Button\n                        </Button>\n                    </View>\n                </div>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"aligner","snippet":"const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner: all\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>Content</View.Item>\n                <Button.Aligner>\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: top\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"top\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: top and end\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side={[\"top\", \"end\"]}>\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: bottom\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2} align=\"end\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"bottom\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: start\">\n            <View padding={4} borderColor=\"neutral-faded\" gap={2} align=\"start\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"start\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: end\">\n            <View padding={4} borderColor=\"neutral-faded\" gap={2} align=\"end\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"end\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"composition","snippet":"const composition = () => (\n    <Example>\n        <Example.Item title=\"slot gap\">\n            <Button variant=\"outline\">\n                <Avatar size={6} initials=\"RS\" />\n                Label\n                <Hotkey>B</Hotkey>\n            </Button>\n        </Example.Item>\n    </Example>\n);"},{"name":"href","snippet":"const href = () => <Button href=\"https://reshaped.so\">Trigger</Button>;"},{"name":"onClick","snippet":"const onClick = () => <Button onClick={fn()}>Trigger</Button>;"},{"name":"hrefOnClick","snippet":"const hrefOnClick = (args) => (\n    <Button\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </Button>\n);"},{"name":"as","snippet":"const as = () => (\n    <Example>\n        <Example.Item title=\"as: span\">\n            <Button onClick={() => {}} as=\"span\">\n                Trigger\n            </Button>\n        </Example.Item>\n        <Example.Item title=\"render, disabled\">\n            <Button\n                disabled\n                onClick={() => {}}\n                render={(props) => <section {...props} />}\n                attributes={{ \"data-testid\": \"render-el\" }}\n            >\n                Trigger\n            </Button>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Button className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Button>\n    </div>\n);"},{"name":"group","snippet":"const group = () => (\n    <Example>\n        <Example.Item title=\"with icon\">\n            <Button.Group>\n                <Button rounded>Submit</Button>\n                <Button rounded icon={IconZap} />\n            </Button.Group>\n        </Example.Item>\n        <Example.Item title=\"variant: solid\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\", \"media\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color}>One</Button>\n                        <Button color={color}>Two</Button>\n                        <Button color={color}>Three</Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"outline\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"outline\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"outline\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\", \"media\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"faded\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"faded\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"faded\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"variant: ghost\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"ghost\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"ghost\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"ghost\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"groupClassName","snippet":"const groupClassName = () => (\n    <div data-testid=\"root\">\n        <Button.Group className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Button>Trigger</Button>\n        </Button.Group>\n    </div>\n);"}],"import":"import { Avatar, Button, Example, Hotkey, Image, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Button","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Button/Button.tsx","actualName":"Button","exportName":"default"}},"components-calendar":{"id":"components-calendar","name":"Calendar","path":"./src/components/Calendar/tests/Calendar.stories.tsx","stories":[{"name":"defaultMonth","snippet":"const defaultMonth = () => (\n    <Example>\n        <Example.Item title=\"defaultMonth: 2020 January\">\n            <Calendar defaultMonth={new Date(2020, 0)} range />\n        </Example.Item>\n    </Example>\n);"},{"name":"uncontrolled","snippet":"const uncontrolled = () => <Example>\n    <Example.Item title=\"defaultValue\">\n        <Calendar\n            defaultMonth={new Date(2020, 0)}\n            defaultValue={new Date(2020, 0, 10)}\n            onChange={fn()} />\n    </Example.Item>\n    <Example.Item title=\"defaultValue, range\">\n        <Calendar\n            range\n            defaultMonth={new Date(2020, 0)}\n            defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }}\n            onChange={fn()} />\n    </Example.Item>\n</Example>;"},{"name":"controlled","snippet":"const controlled = () => <Example>\n    <Example.Item title=\"value\">\n        <Calendar\n            defaultMonth={new Date(2020, 0)}\n            value={new Date(2020, 0, 10)}\n            onChange={fn()} />\n    </Example.Item>\n    <Example.Item title=\"defaultValue, range\">\n        <Calendar\n            range\n            defaultMonth={new Date(2020, 0)}\n            value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }}\n            onChange={fn()} />\n    </Example.Item>\n</Example>;"},{"name":"selectedDates","snippet":"const selectedDates = () => (\n    <Example>\n        <Example.Item title=\"selectedDates: [4,8]\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                value={null}\n                selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"minMax","snippet":"const minMax = () => (\n    <Example>\n        <Example.Item title=\"min: 4, max: 20\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                min={new Date(2020, 0, 4)}\n                max={new Date(2020, 0, 20)}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"firstWeekDay","snippet":"const firstWeekDay = () => (\n    <Example>\n        <Example.Item title=\"firstWeekDay: 3 (Wed)\">\n            <Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3} />\n        </Example.Item>\n    </Example>\n);"},{"name":"translation","snippet":"const translation = () => (\n    <Example>\n        <Example.Item title=\"translated to NL\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                renderMonthLabel={({ date }) => date.toLocaleDateString(\"nl\", { month: \"short\" })}\n                renderSelectedMonthLabel={({ date }) =>\n                    date.toLocaleDateString(\"nl\", { month: \"long\", year: \"numeric\" })\n                }\n                renderWeekDay={({ date }) => date.toLocaleDateString(\"nl\", { weekday: \"short\" })}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"ariaLabels","snippet":"const ariaLabels = () => (\n    <Example>\n        <Example.Item title=\"aria labels\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                nextYearAriaLabel=\"Test next year\"\n                nextMonthAriaLabel=\"Test next month\"\n                renderDateAriaLabel={() => \"Test date\"}\n                renderMonthAriaLabel={() => \"Test month\"}\n                previousYearAriaLabel=\"Test previous year\"\n                previousMonthAriaLabel=\"Test previous month\"\n                monthSelectionAriaLabel=\"Test month selection\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"monthSelection","snippet":"const monthSelection = () => (\n    <Example>\n        <Example.Item title=\"month selection\">\n            <Calendar defaultMonth={new Date(2020, 1)} />\n        </Example.Item>\n    </Example>\n);"},{"name":"keyboardNavigation","snippet":"const keyboardNavigation = () => (\n    <Example>\n        <Example.Item title=\"keyboard navigation\">\n            <Calendar defaultMonth={new Date(2020, 0)} />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Calendar, Example } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Calendar","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Calendar/Calendar.tsx","actualName":"Calendar","exportName":"default"}},"components-card":{"id":"components-card","name":"Card","path":"./src/components/Card/tests/Card.stories.tsx","stories":[{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: default\">\n            <Card>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title=\"padding: 2\">\n            <Card padding={2}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title=\"padding: 0\">\n            <Card padding={0}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive padding\", \"[s] 4\", \"[m+] 8\"]}>\n            <Card padding={{ s: 4, m: 8 }}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"},{"name":"selected","snippet":"const selected = () => (\n    <Example>\n        <Example.Item title=\"selected\">\n            <Card selected>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"},{"name":"elevated","snippet":"const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated\">\n            <Card elevated>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"},{"name":"bleed","snippet":"const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4\">\n            <Card bleed={4}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n        <Example.Item title={[\"responsive bleed\", \"[s] 4\", \"[m+] 0\"]}>\n            <Card bleed={{ s: 4, m: 0 }}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"},{"name":"height","snippet":"const height = () => (\n    <Example>\n        <Example.Item title=\"height: 200px\">\n            <Card height=\"200px\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"onClick","snippet":"const onClick = () => <Card onClick={fn()}>Trigger</Card>;"},{"name":"href","snippet":"const href = () => <Card href=\"https://reshaped.so\">Trigger</Card>;"},{"name":"as","snippet":"const as = () => <Card as=\"span\" attributes={{ \"data-testid\": \"root\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Card className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Card, Example, Placeholder } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Card","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Card/Card.tsx","actualName":"Card","exportName":"default"}},"components-carousel":{"id":"components-carousel","name":"Carousel","path":"./src/components/Carousel/tests/Carousel.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Carousel attributes={{ \"data-testid\": \"test-id\" }} visibleItems={3}>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n    </Carousel>\n);"},{"name":"visibleItems","snippet":"const visibleItems = () => (\n    <Example>\n        <Example.Item title=\"visibleItems: 3\">\n            <Carousel visibleItems={3}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive visibleItems\", \"s: 2, m+ 3\"]}>\n            <Carousel visibleItems={{ s: 2, m: 3 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title=\"visibleItems: auto\">\n            <Carousel>\n                <Placeholder h={100} />\n                <Placeholder h={100} w={200} />\n                <Placeholder h={100} w={300} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"},{"name":"gap","snippet":"const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 2, visibleItems 3\">\n            <Carousel visibleItems={3} gap={2}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"gap: responsive, visibleItems: 3\", \"s: 2, l: 8\"]}>\n            <Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"},{"name":"bleed","snippet":"const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4, visibleItems: 3\">\n            <Carousel visibleItems={3} bleed={4}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive bleed, visibleItems: 3\", \"[s] 4, [l+] 0\"]}>\n            <Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"},{"name":"navigationDisplay","snippet":"const navigationDisplay = () => (\n    <Example>\n        <Example.Item title=\"navigationDisplay: hidden\">\n            <Carousel\n                visibleItems={3}\n                navigationDisplay=\"hidden\"\n                attributes={{ \"data-testid\": \"test-id\" }}\n            >\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"},{"name":"instanceRef","snippet":"const instanceRef = (args) => {\n    const carouselRef = React.useRef<CarouselInstanceRef>(null);\n    const [index, setIndex] = React.useState(0);\n\n    return (\n        <Example>\n            <Example.Item title=\"instanceRef, onChange\">\n                <View gap={3}>\n                    <View gap={3} direction=\"row\" align=\"center\">\n                        <Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>\n                        <Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>\n                        <Button onClick={() => carouselRef.current?.navigateTo(3)}>To 3</Button>\n                        <View.Item>Index: {index}</View.Item>\n                    </View>\n                    <Carousel\n                        visibleItems={2}\n                        instanceRef={carouselRef}\n                        navigationDisplay=\"hidden\"\n                        onChange={(changeArgs) => {\n                            args.handleChange(changeArgs);\n                            setIndex(changeArgs.index);\n                        }}\n                    >\n                        <Placeholder h={100}>Item 0</Placeholder>\n                        <Placeholder h={100}>Item 1</Placeholder>\n                        <Placeholder h={100}>Item 2</Placeholder>\n                        <Placeholder h={100}>Item 3</Placeholder>\n                        <Placeholder h={100}>Item 4</Placeholder>\n                        <Placeholder h={100}>Item 5</Placeholder>\n                    </Carousel>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Carousel visibleItems={2} className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder h={100}>Item 0</Placeholder>\n            <Placeholder h={100}>Item 1</Placeholder>\n            <Placeholder h={100}>Item 2</Placeholder>\n            <Placeholder h={100}>Item 3</Placeholder>\n            <Placeholder h={100}>Item 4</Placeholder>\n            <Placeholder h={100}>Item 5</Placeholder>\n        </Carousel>\n    </div>\n);"}],"import":"import { Button, Carousel, Example, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[{"name":"navigateTo","docblock":null,"modifiers":[],"params":[{"name":"index","optional":false,"type":{"name":"number"}}],"returns":null}],"displayName":"Carousel","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Carousel/Carousel.tsx","actualName":"Carousel","exportName":"default"}},"components-checkbox":{"id":"components-checkbox","name":"Checkbox","path":"./src/components/Checkbox/tests/Checkbox.stories.tsx","stories":[{"name":"render","snippet":"const render = () => (\n    <Checkbox name=\"test-name\" value=\"test-value\">\n        Content\n    </Checkbox>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"small\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"small\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"medium\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"medium\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"large\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"large\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: responsive, s: small, m: large\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size={{ s: \"small\", m: \"large\" }} defaultChecked>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Checkbox name=\"animal\" value=\"dog\" hasError>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n        <Example.Item title=\"disabled, checked\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled checked>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n        <Example.Item title=\"disabled, indeterminate\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled indeterminate>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n    </Example>\n);"},{"name":"checked","snippet":"const checked = () => <Checkbox name=\"test-name\" value=\"test-value\" checked onChange={fn()}>Content\n            </Checkbox>;"},{"name":"defaultChecked","snippet":"const defaultChecked = () => <Checkbox name=\"test-name\" value=\"test-value\" defaultChecked onChange={fn()}>Content\n            </Checkbox>;"},{"name":"indeterminate","snippet":"const indeterminate = () => (\n    <Checkbox name=\"test-name\" value=\"test-value\" indeterminate>\n        Content\n    </Checkbox>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Checkbox className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Checkbox>\n    </div>\n);"}],"import":"import { Checkbox, Example, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Checkbox","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Checkbox/Checkbox.tsx","actualName":"Checkbox","exportName":"default"}},"components-checkboxgroup":{"id":"components-checkboxgroup","name":"CheckboxGroup","path":"./src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx","stories":[{"name":"value","snippet":"const value = () => <View gap={2}>\n    <CheckboxGroup name=\"test-name\" value={[\"1\"]} onChange={fn()}>\n        {/* checked should be ignored */}\n        <Checkbox value=\"1\" checked={false}>Content\n                            </Checkbox>\n        <Checkbox value=\"2\">Content 2</Checkbox>\n    </CheckboxGroup>\n</View>;"},{"name":"defaultValue","snippet":"const defaultValue = () => <View gap={2}>\n    <CheckboxGroup name=\"test-name\" defaultValue={[\"1\"]} onChange={fn()}>\n        {/* checked should be ignored */}\n        <Checkbox value=\"1\" checked={false}>Content\n                            </Checkbox>\n        <Checkbox value=\"2\">Content 2</Checkbox>\n    </CheckboxGroup>\n</View>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <CheckboxGroup name=\"test-name\" disabled>\n        <Checkbox value=\"test-value\">Item 1</Checkbox>\n        <Checkbox value=\"test-value-2\">Item 2</Checkbox>\n    </CheckboxGroup>\n);"}],"import":"import { Checkbox, CheckboxGroup, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"CheckboxGroup","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/CheckboxGroup/CheckboxGroup.tsx","actualName":"CheckboxGroup","exportName":"default"}},"components-contextmenu":{"id":"components-contextmenu","name":"ContextMenu","path":"./src/components/ContextMenu/tests/ContextMenu.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"base\">\n            <div style={{ height: 200, overflow: \"auto\" }}>\n                <ContextMenu>\n                    <View height=\"400px\" backgroundColor=\"neutral-faded\" borderRadius=\"medium\" />\n\n                    <ContextMenu.Content>\n                        <ContextMenu.Item>Item 1</ContextMenu.Item>\n                        <ContextMenu.Item>Item 2</ContextMenu.Item>\n                    </ContextMenu.Content>\n                </ContextMenu>\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"handlers","snippet":"const handlers = () => <div style={{ height: 200, overflow: \"auto\" }} data-testid=\"scroll\">\n    <ContextMenu onOpen={fn()} onClose={fn()}>\n        <View\n            height=\"400px\"\n            backgroundColor=\"neutral-faded\"\n            borderRadius=\"medium\"\n            attributes={{ \"data-testid\": \"root\" }} />\n        <ContextMenu.Content>\n            <ContextMenu.Item>Item</ContextMenu.Item>\n        </ContextMenu.Content>\n    </ContextMenu>\n</div>;"}],"import":"import { ContextMenu, Example, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ContextMenu","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ContextMenu/ContextMenu.tsx","actualName":"ContextMenu","exportName":"default"}},"components-divider":{"id":"components-divider","name":"Divider","path":"./src/components/Divider/tests/Divider.stories.tsx","stories":[{"name":"rendering","snippet":"const rendering = () => (\n    <Example>\n        <Example.Item title=\"default rendering\">\n            <Divider />\n        </Example.Item>\n\n        <Example.Item title={[\"blank rendering\", \"box should overlap with divider\"]}>\n            <View width=\"40px\" height=\"10px\" backgroundColor=\"primary\" />\n            <Divider blank />\n        </Example.Item>\n    </Example>\n);"},{"name":"vertical","snippet":"const vertical = () => (\n    <Example>\n        <Example.Item title=\"vertical\">\n            <View gap={3} direction=\"row\" align=\"stretch\">\n                <Placeholder />\n                <View.Item>\n                    <Divider vertical />\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive vertical\", \"[s] true\", \"[m+]: false\"]}>\n            <View gap={3} direction={{ s: \"row\", m: \"column\" }} align=\"stretch\">\n                <Placeholder />\n                <View.Item>\n                    <Divider vertical={{ s: true, m: false }} />\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"label","snippet":"const label = () => {\n    return (\n        <Example>\n            <Example.Item title=\"alignment\">\n                <View gap={4}>\n                    <Divider>Centered label</Divider>\n                    <Divider contentPosition=\"start\">Start label</Divider>\n                    <Divider contentPosition=\"end\">End label</Divider>\n                </View>\n            </Example.Item>\n\n            <Example.Item title=\"responsive\">\n                <View gap={3} direction={{ s: \"column\", m: \"row\" }} align=\"stretch\">\n                    <Placeholder />\n                    <View.Item>\n                        <Divider vertical={{ s: false, m: true }}>or pick second option</Divider>\n                    </View.Item>\n                    <Placeholder />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Divider className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Divider, Example, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Divider","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Divider/Divider.tsx","actualName":"Divider","exportName":"default"}},"components-dropdownmenu":{"id":"components-dropdownmenu","name":"DropdownMenu","path":"./src/components/DropdownMenu/tests/DropdownMenu.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title=\"position: default\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <DropdownMenu position=\"end\">\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n\n        <Example.Item title={[\"position: top-start\", \"should change to top-start to fit viewport\"]}>\n            <DropdownMenu position=\"top-end\">\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n        <div style={{ height: 2000 }} />\n    </Example>\n);"},{"name":"sections","snippet":"const sections = () => (\n    <Example>\n        <Example.Item title=\"2 sections\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Section>\n                        <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                    </DropdownMenu.Section>\n\n                    <DropdownMenu.Section>\n                        <DropdownMenu.Item>Item 3</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 4</DropdownMenu.Item>\n                    </DropdownMenu.Section>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"},{"name":"submenu","snippet":"const submenu = () => (\n    <Example>\n        <Example.Item title=\"submenu\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item onClick={() => {}}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger>Item 3</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2-1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2-2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger disabled>Item 4, disabled</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 3-1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 3-2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"},{"name":"defaultActive","snippet":"const defaultActive = () => <DropdownMenu onOpen={fn()} onClose={fn()} defaultActive>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"},{"name":"active","snippet":"const active = () => <DropdownMenu onOpen={fn()} onClose={fn()} active>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"},{"name":"activeFalse","snippet":"const activeFalse = () => <DropdownMenu onOpen={fn()} onClose={fn()} active={false}>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <DropdownMenu active>\n            <DropdownMenu.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n                <DropdownMenu.Item>Item</DropdownMenu.Item>\n            </DropdownMenu.Content>\n        </DropdownMenu>\n    </div>\n);"},{"name":"testScroll","snippet":"const testScroll = () => (\n    <Example>\n        <Example.Item title=\"Scrolls on page mount to the dropdown\">\n            <div style={{ height: 1000 }} />\n            <DropdownMenu position=\"end\" key=\"scroll\" defaultActive>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"},{"name":"testTheme","snippet":"const testTheme = () => (\n    <Example>\n        <Example.Item title=\"switch color mode while dropdown is active and check that it still works\">\n            <ThemeSwitching />\n        </Example.Item>\n        <Example.Item title=\"dropdown inherits multiple themes\">\n            <ThemeMultiple />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, DropdownMenu, Example, Theme, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"DropdownMenu","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/DropdownMenu/DropdownMenu.tsx","actualName":"DropdownMenu","exportName":"default"}},"components-fileupload":{"id":"components-fileupload","name":"FileUpload","path":"./src/components/FileUpload/tests/FileUpload.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"Base upload with previews\">\n            <Demo />\n        </Example.Item>\n        <Example.Item title=\"With trigger\">\n            <FileUpload name=\"file\">\n                <div>\n                    Drop files to attach, or{\" \"}\n                    <FileUpload.Trigger>\n                        <Link variant=\"plain\">browse</Link>\n                    </FileUpload.Trigger>\n                </div>\n            </FileUpload>\n        </Example.Item>\n    </Example>\n);"},{"name":"inline","snippet":"const inline = () => {\n    return (\n        <Example>\n            <Example.Item title=\"inline\">\n                <FileUpload name=\"file\" inline onChange={console.log}>\n                    <View padding={2} paddingInline={3}>\n                        Upload\n                    </View>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"variant headless\">\n                <FileUpload name=\"file2\" variant=\"headless\" onChange={console.log}>\n                    <Button variant=\"outline\" fullWidth>\n                        Upload\n                    </Button>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"variant headless, inline\">\n                <FileUpload name=\"file2\" variant=\"headless\" inline onChange={console.log}>\n                    <Button>Upload</Button>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"inline, render props\">\n                <FileUpload name=\"file3\" variant=\"headless\" inline onChange={console.log}>\n                    {(props) => <Button highlighted={props.highlighted}>Upload</Button>}\n                </FileUpload>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"height","snippet":"const height = () => (\n    <Example>\n        <Example.Item title=\"Custom height\">\n            <FileUpload name=\"file\" height=\"300px\">\n                <View gap={3}>\n                    <Icon svg={IconMic} size={8} />\n                    Drop files to attach\n                </View>\n            </FileUpload>\n        </Example.Item>\n    </Example>\n);"},{"name":"onChange","snippet":"const onChange = () => <div data-testid=\"root\">\n    <FileUpload name=\"test-name\" onChange={fn()}>Content\n                    </FileUpload>\n</div>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <FileUpload\n            name=\"name\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ id: \"test-input-id\" }}\n        >\n            Content\n        </FileUpload>\n    </div>\n);"}],"import":"import { Button, Example, FileUpload, Icon, Image, Link, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"FileUpload","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/FileUpload/FileUpload.tsx","actualName":"FileUpload","exportName":"default"}},"components-hotkey":{"id":"components-hotkey","name":"Hotkey","path":"./src/components/Hotkey/tests/Hotkey.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n\t<Example>\n\t\t<Example.Item title=\"Base\">\n\t\t\t<Demo />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"Active\">\n\t\t\t<Hotkey active>⌘K</Hotkey>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"Inside input slot\">\n\t\t\t<View width=\"300px\">\n\t\t\t\t<TextField\n\t\t\t\t\tname=\"hey\"\n\t\t\t\t\tendSlot={<Demo />}\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"hotkey test\" }}\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Example.Item>\n\t</Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Hotkey className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            ⌘K\n        </Hotkey>\n    </div>\n);"}],"import":"import { Example, Hotkey, TextField, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Hotkey","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Hotkey/Hotkey.tsx","actualName":"Hotkey","exportName":"default"}},"components-link":{"id":"components-link","name":"Link","path":"./src/components/Link/tests/Link.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: underline\">\n            <Link href=\"http://reshaped.so\" attributes={{ target: \"_blank\" }}>\n                Reshaped\n            </Link>\n        </Example.Item>\n        <Example.Item title=\"variant: plain\">\n            <Link onClick={() => {}} variant=\"plain\">\n                Link\n            </Link>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary\">\n            <Link color=\"primary\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Link color=\"critical\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Link color=\"positive\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <Link color=\"warning\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <Link color=\"inherit\">Link</Link>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"icon, variant: underline\">\n            <Link icon={IconZap}>Link</Link>\n        </Example.Item>\n        <Example.Item title=\"icon, variant: plain\">\n            <Link icon={IconZap} variant=\"plain\">\n                Link\n            </Link>\n        </Example.Item>\n        <Example.Item\n            title={[\"icon, variant: underline\", \"should inherit display-1 size from the parent\"]}\n        >\n            <Text variant=\"title-3\">\n                <Link icon={IconZap} variant=\"underline\">\n                    Instant delivery\n                </Link>\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"href","snippet":"const href = () => <Link href=\"https://reshaped.so\">Trigger</Link>;"},{"name":"onClick","snippet":"const onClick = () => <Link onClick={fn()}>Trigger</Link>;"},{"name":"hrefOnClick","snippet":"const hrefOnClick = (args) => (\n    <Link\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </Link>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Link disabled onClick={() => {}}>\n        Trigger\n    </Link>\n);"},{"name":"render","snippet":"const render = () => <Link render={(props) => <section {...props} />}>Trigger</Link>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Link className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Link>\n    </div>\n);"},{"name":"testMultilineInText","snippet":"const testMultilineInText = () => (\n    <Example>\n        <Example.Item title=\"should wrap inside the text\">\n            <div>\n                Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;\n                <Link href=\"/\">this very very long link</Link> to it.\n            </div>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, Link, Text } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Link","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Link/Link.tsx","actualName":"Link","exportName":"default"}},"components-loader":{"id":"components-loader","name":"Loader","path":"./src/components/Loader/tests/Loader.stories.tsx","stories":[{"name":"size","snippet":"const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: medium\">\n                <Loader size=\"medium\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title=\"size: small\">\n                <Loader size=\"small\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title=\"size: large\">\n                <Loader size=\"large\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title={[\"responsive size\", \"[s] small\", \"[m+] medium\"]}>\n                <Loader size={{ s: \"small\", m: \"medium\" }} ariaLabel=\"Loading\" />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary\">\n            <Loader ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Loader color=\"critical\" ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Loader color=\"positive\" ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <Loader color=\"inherit\" ariaLabel=\"Loading\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"ariaLabel","snippet":"const ariaLabel = () => <Loader ariaLabel=\"Loading\" attributes={{ \"data-testid\": \"root\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Loader className=\"test-classname\" attributes={{ id: \"test-id\" }} ariaLabel=\"Loading\" />\n    </div>\n);"}],"import":"import { Example, Loader } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Loader","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Loader/Loader.tsx","actualName":"Loader","exportName":"default"}},"components-menuitem":{"id":"components-menuitem","name":"MenuItem","path":"./src/components/MenuItem/tests/MenuItem.stories.tsx","stories":[{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <MenuItem size=\"small\" icon={IconZap} onClick={() => {}} endSlot={<Hotkey>⌘K</Hotkey>}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <MenuItem icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <MenuItem size=\"large\" icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title={[\"responsive size\", \"[s] small\", \"[m] medium\", \"[l+] large\"]}>\n            <MenuItem size={{ s: \"small\", m: \"medium\", l: \"large\" }} icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <MenuItem color=\"neutral\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <MenuItem color=\"primary\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <MenuItem color=\"critical\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"selected","snippet":"const selected = () => (\n    <Example>\n        <Example.Item title=\"selected, color: neutral\">\n            <MenuItem color=\"neutral\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"selected, color: primary\">\n            <MenuItem color=\"primary\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"selected, color: critical\">\n            <MenuItem color=\"critical\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"roundedCorners","snippet":"const roundedCorners = () => (\n    <Example>\n        <Example.Item title=\"roundedCorners\">\n            <MenuItem roundedCorners selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive roundedCorners\", \"[s]: false\", \"[m+]: true\"]}>\n            <MenuItem roundedCorners={{ s: false, m: true }} selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"slots","snippet":"const slots = () => (\n    <Example>\n        <Example.Item title=\"startSlot, endSlot, selected\">\n            <MenuItem startSlot={<Placeholder h={20} />} endSlot={<Placeholder h={20} />} selected>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"aligner","snippet":"const aligner = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem size=\"small\" selected onClick={() => {}}>\n                        Menu item\n                    </MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem selected>Menu item</MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem size=\"large\" selected>\n                        Menu item\n                    </MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"href","snippet":"const href = () => <MenuItem href=\"https://reshaped.so\">Trigger</MenuItem>;"},{"name":"onClick","snippet":"const onClick = () => <MenuItem onClick={fn()}>Trigger</MenuItem>;"},{"name":"hrefOnClick","snippet":"const hrefOnClick = (args) => (\n    <MenuItem\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </MenuItem>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <MenuItem disabled onClick={() => {}}>\n        Trigger\n    </MenuItem>\n);"},{"name":"as","snippet":"const as = () => (\n    <Example>\n        <Example.Item title=\"render, disabled\">\n            <MenuItem\n                disabled\n                onClick={() => {}}\n                render={(props) => <section {...props} />}\n                attributes={{ \"data-testid\": \"render-el\" }}\n            >\n                Trigger\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <MenuItem className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </MenuItem>\n    </div>\n);"},{"name":"alignerClassName","snippet":"const alignerClassName = () => (\n    <div data-testid=\"root\">\n        <MenuItem.Aligner className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <MenuItem>Trigger</MenuItem>\n        </MenuItem.Aligner>\n    </div>\n);"}],"import":"import { Example, Hotkey, MenuItem, Placeholder, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"MenuItem","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/MenuItem/MenuItem.tsx","actualName":"MenuItem","exportName":"default"}},"components-modal":{"id":"components-modal","name":"Modal","path":"./src/components/Modal/tests/Modal.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title={[\"responsive position\", \"[s] full-screen\", \"[m] center\", \"[l] end\"]}>\n            <Demo position={{ s: \"full-screen\", m: \"center\", l: \"end\" }} />\n        </Example.Item>\n        <Example.Item title=\"position: center\">\n            <Demo position=\"center\" />\n        </Example.Item>\n        <Example.Item title=\"position: bottom\">\n            <Demo position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"position: start\">\n            <Demo position=\"start\" />\n        </Example.Item>\n        <Example.Item title=\"position: end\">\n            <Demo position=\"end\" />\n        </Example.Item>\n        <Example.Item title=\"position: full-screen\">\n            <Demo position=\"full-screen\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: default\">\n                <Demo />\n            </Example.Item>\n            <Example.Item title=\"size: 300px\">\n                <Demo size=\"300px\" />\n            </Example.Item>\n            <Example.Item\n                title={[\"size: 800px\", \"should have max width of 100% minus gaps on the sides\"]}\n            >\n                <Demo size=\"800px\" />\n            </Example.Item>\n            <Example.Item\n                title={[\n                    \"responsive size, responsive position\",\n                    \"[s] auto\",\n                    \"[m+] 600px\",\n                    \"bottom position changes height instead of width\",\n                ]}\n            >\n                <Demo\n                    position={{ s: \"bottom\", m: \"center\", l: \"end\" }}\n                    size={{ s: \"auto\", m: \"600px\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 0\">\n            <Demo padding={0} />\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <Demo padding={6} />\n        </Example.Item>\n        <Example.Item title={[\"responsive padding\", \"[s] 2\", \"[m+]: 6\"]}>\n            <Demo padding={{ s: 2, m: 6 }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"overflow","snippet":"const overflow = () => (\n    <Example>\n        <Example.Item title=\"default overflow\">\n            <Demo>\n                <div\n                    style={{\n                        position: \"absolute\",\n                        top: -32,\n                        left: -32,\n                        height: 100,\n                        width: 100,\n                        background: \"tomato\",\n                    }}\n                />\n            </Demo>\n        </Example.Item>\n\n        <Example.Item title=\"overflow: visible\">\n            <Demo overflow=\"visible\">\n                <div\n                    style={{\n                        position: \"absolute\",\n                        top: -32,\n                        left: -32,\n                        height: 100,\n                        width: 100,\n                        background: \"tomato\",\n                    }}\n                />\n            </Demo>\n        </Example.Item>\n    </Example>\n);"},{"name":"composition","snippet":"const composition = () => (\n    <Example>\n        <Example.Item title=\"title, subtitle, dismissible\">\n            <Demo title=\"Modal title\" subtitle=\"Modal subtitle\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"overlay","snippet":"const overlay = () => (\n    <Example>\n        <Example.Item title=\"transparentOverlay, doesn't lock scroll\">\n            <Demo transparentOverlay />\n        </Example.Item>\n        <Example.Item title=\"blurredOverlay\">\n            <Demo blurredOverlay />\n        </Example.Item>\n        <View height=\"1000px\" />\n    </Example>\n);"},{"name":"flags","snippet":"const flags = () => {\n    return (\n        <Example>\n            <Example.Item title=\"disableCloseOnOutsideClick\">\n                <Demo disableCloseOnOutsideClick onClose={fn()} active />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"containerRef","snippet":"const containerRef = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const containerRef2 = React.useRef<HTMLDivElement>(null);\n    const toggle = useToggle();\n    const toggle2 = useToggle();\n\n    return (\n        <Example>\n            <Example.Item title={[\"in scrollable container\", \"scroll and then open\"]}>\n                <View\n                    attributes={{ ref: containerRef2 }}\n                    borderRadius=\"medium\"\n                    height=\"400px\"\n                    overflow=\"auto\"\n                    backgroundColor=\"neutral-faded\"\n                    padding={4}\n                >\n                    <View gap={4} align=\"start\">\n                        <Button onClick={toggle2.activate}>Open modal</Button>\n                        <View height=\"500px\" backgroundColor=\"primary\" width=\"500px\" borderRadius=\"medium\" />\n                    </View>\n                    <Modal\n                        containerRef={containerRef2}\n                        active={toggle2.active}\n                        onClose={toggle2.deactivate}\n                        position=\"end\"\n                    >\n                        <Placeholder />\n                    </Modal>\n                </View>\n            </Example.Item>\n            <Example.Item title=\"in static container\">\n                <View\n                    attributes={{ ref: containerRef }}\n                    borderRadius=\"medium\"\n                    height=\"400px\"\n                    overflow=\"hidden\"\n                    backgroundColor=\"neutral-faded\"\n                    padding={4}\n                >\n                    <Button onClick={toggle.activate}>Open modal</Button>\n                    <Modal\n                        containerRef={containerRef}\n                        active={toggle.active}\n                        onClose={toggle.deactivate}\n                        position=\"end\"\n                    >\n                        <Placeholder />\n                    </Modal>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"renderProps","snippet":"const renderProps = () => (\n    <Modal active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        <Modal.Title>Title</Modal.Title>\n        Content\n    </Modal>\n);"},{"name":"handlers","snippet":"const handlers = () => {\n    const overlayToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>\n            <Modal\n                active={overlayToggle.active}\n                onClose={(closeArgs) => {\n                    overlayToggle.deactivate();\n                    args.handleClose(closeArgs);\n                }}\n                onOpen={fn()}\n                onAfterOpen={fn()}\n                onAfterClose={fn()}>\n                <Modal.Title>Title</Modal.Title>Content\n                                </Modal>\n        </>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <Modal active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        <Modal.Title>Title</Modal.Title>\n        Content\n    </Modal>\n);"},{"name":"edgeCases","snippet":"const edgeCases = () => {\n    const menuModalToggle = useToggle();\n    const menuModalToggleInner = useToggle();\n    const scrollModalToggle = useToggle();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    return (\n        <Example>\n            <Example.Item title=\"Scrolls with long content on touch devices\">\n                <Demo position=\"center\">\n                    <Button onClick={() => {}}>Action</Button>\n                    <View height=\"2000px\" backgroundColor=\"primary-faded\" />\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"keyboard focus stays on the modal first\">\n                <Demo title=\"Modal title\" autoFocus={false} />\n            </Example.Item>\n            <Example.Item title=\"trap focus works with custom children components\">\n                <Demo title=\"Modal title\">\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <Switch name=\"switch\" />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"focus moves to the input\">\n                <Demo\n                    title=\"Modal title\"\n                    onOpen={() => {\n                        inputRef.current?.focus();\n                    }}\n                >\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <TextField name=\"name\" inputAttributes={{ ref: inputRef }} />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"Focus moves to the input with autoFocus\">\n                <Demo title=\"Modal title\">\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <TextField\n                            name=\"name\"\n                            placeholder=\"autofocus\"\n                            inputAttributes={{ autoFocus: true }}\n                        />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"scrollable area in modal ignores swipe-to-close\">\n                <View gap={3} direction=\"row\">\n                    <Button onClick={scrollModalToggle.activate}>Open</Button>\n                    <Modal\n                        active={scrollModalToggle.active}\n                        onClose={scrollModalToggle.deactivate}\n                        size=\"300px\"\n                        position=\"bottom\"\n                    >\n                        <View\n                            height=\"1000px\"\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            padding={4}\n                        >\n                            Content\n                        </View>\n                    </Modal>\n                </View>\n            </Example.Item>\n            <Example.Item\n                title={[\n                    \"trap focus works correctly when it was already trapped\",\n                    \"focus return back to the dropdown trigger on modal close\",\n                    \"closing dropdown inside the modal doesn't close the modal\",\n                ]}\n            >\n                <DropdownMenu>\n                    <DropdownMenu.Trigger>\n                        {(attributes) => <Button attributes={attributes}>Open menu</Button>}\n                    </DropdownMenu.Trigger>\n                    <DropdownMenu.Content>\n                        <DropdownMenu.Item onClick={menuModalToggle.activate}>Open dialog</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                </DropdownMenu>\n                <Modal active={menuModalToggle.active} onClose={menuModalToggle.deactivate}>\n                    <View gap={3}>\n                        <DropdownMenu>\n                            <DropdownMenu.Trigger>\n                                {(attributes) => <Button attributes={attributes}>Open menu</Button>}\n                            </DropdownMenu.Trigger>\n                            <DropdownMenu.Content>\n                                <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                                <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                            </DropdownMenu.Content>\n                        </DropdownMenu>\n                        <Button onClick={menuModalToggleInner.activate}>Open dialog</Button>\n                        <Button onClick={menuModalToggle.deactivate}>Close</Button>\n                        <Modal active={menuModalToggleInner.active} onClose={menuModalToggleInner.deactivate}>\n                            <Button onClick={menuModalToggleInner.deactivate}>Close</Button>\n                        </Modal>\n                    </View>\n                </Modal>\n            </Example.Item>\n\n            <Example.Item title=\"disableSwipeGesture\">\n                <Demo disableSwipeGesture position=\"start\" />\n            </Example.Item>\n\n            <Example.Item title=\"scroll locks on open\">\n                <Demo />\n                <View height=\"1000px\" />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"trapFocusEdgeCases","snippet":"const trapFocusEdgeCases = () => {\n    const toggle = useToggle();\n\n    return (\n        <Example>\n            <Example.Item title=\"Radio should be navigatable with arrow keys\">\n                <Button onClick={toggle.activate}>Open modal</Button>\n                <Modal active={toggle.active} onClose={toggle.deactivate}>\n                    <View gap={2}>\n                        <Button onClick={() => {}}>Action 1</Button>\n                        <Radio name=\"radio\" value=\"1\">\n                            Option 1\n                        </Radio>\n                        <Radio name=\"radio\" value=\"2\">\n                            Option 2\n                        </Radio>\n                        <Button onClick={() => {}}>Action 2</Button>\n                    </View>\n                </Modal>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import {\n    Button,\n    Dismissible,\n    DropdownMenu,\n    Example,\n    Modal,\n    Placeholder,\n    Radio,\n    Switch,\n    TextField,\n    View,\n} from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Modal","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Modal/Modal.tsx","actualName":"Modal","exportName":"default"}},"components-numberfield":{"id":"components-numberfield","name":"NumberField","path":"./src/components/NumberField/tests/NumberField.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => {\n    return (\n        <Example>\n            <Example.Item title=\"variant: outline\">\n                <NumberField\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"variant: faded\">\n                <NumberField\n                    variant=\"faded\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"variant: headless\">\n                <NumberField\n                    variant=\"headless\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"size","snippet":"const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: small\">\n                <NumberField\n                    size=\"small\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    suffix=\"m2\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: medium\">\n                <NumberField\n                    size=\"medium\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: large\">\n                <NumberField\n                    size=\"large\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: xlarge\">\n                <NumberField\n                    size=\"xlarge\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"disabled","snippet":"const disabled = () => <NumberField\n    name=\"test-name\"\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    disabled\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"defaultValue","snippet":"const defaultValue = () => <NumberField\n    name=\"test-name\"\n    defaultValue={2}\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"value","snippet":"const value = () => <NumberField\n    name=\"test-name\"\n    value={2}\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"minMax","snippet":"const minMax = () => (\n    <NumberField\n        name=\"test-name\"\n        defaultValue={6}\n        min={5}\n        max={10}\n        increaseAriaLabel=\"Increase\"\n        decreaseAriaLabel=\"Decrease\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"},{"name":"step","snippet":"const step = () => (\n    <NumberField\n        name=\"test-name\"\n        defaultValue={6}\n        step={0.5}\n        increaseAriaLabel=\"Increase\"\n        decreaseAriaLabel=\"Decrease\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <NumberField\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n            increaseAriaLabel=\"Increase\"\n            decreaseAriaLabel=\"Decrease\"\n        />\n    </div>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <Example>\n        <Example.Item title=\"FormControl\">\n            <FormControl>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"FormControl, disabled\">\n            <FormControl disabled>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"FormControl, error\">\n            <FormControl hasError>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"valueChanges","snippet":"const valueChanges = () => (\n    <Example>\n        <Example.Item title=\"keyboard\">\n            <NumberField\n                name=\"name\"\n                increaseAriaLabel=\"Increase\"\n                decreaseAriaLabel=\"Decrease\"\n                inputAttributes={{ \"aria-label\": \"Label\" }}\n            />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, FormControl, NumberField } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"NumberField","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/NumberField/NumberField.tsx","actualName":"NumberField","exportName":"default"}},"components-pagination":{"id":"components-pagination","name":"Pagination","path":"./src/components/Pagination/tests/Pagination.stories.tsx","stories":[{"name":"truncate","snippet":"const truncate = () => {\n    return (\n        <Example>\n            <Example.Item title=\"start\">\n                <Pagination\n                    total={10}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"middle\">\n                <Pagination\n                    total={10}\n                    defaultPage={5}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"end\">\n                <Pagination\n                    total={10}\n                    defaultPage={10}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"no truncation\">\n                <Pagination\n                    total={4}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"render","snippet":"const render = () => (\n    <div data-testid=\"root\">\n        <Pagination\n            total={10}\n            previousAriaLabel=\"Previous\"\n            nextAriaLabel=\"Next\"\n            pageAriaLabel={(args) => `Page ${args.page}`}\n        />\n    </div>\n);"},{"name":"defaultPage","snippet":"const defaultPage = () => <div data-testid=\"root\">\n    <Pagination\n        total={10}\n        defaultPage={2}\n        onChange={fn()}\n        previousAriaLabel=\"Previous\"\n        nextAriaLabel=\"Next\" />\n</div>;"},{"name":"page","snippet":"const page = () => <div data-testid=\"root\">\n    <Pagination\n        total={10}\n        page={2}\n        onChange={fn()}\n        previousAriaLabel=\"Previous\"\n        nextAriaLabel=\"Next\" />\n</div>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Pagination\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            total={10}\n            previousAriaLabel=\"Previous\"\n            nextAriaLabel=\"Next\"\n        />\n    </div>\n);"}],"import":"import { Example, Pagination } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Pagination","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Pagination/Pagination.tsx","actualName":"Pagination","exportName":"default"}},"components-pinfield":{"id":"components-pinfield","name":"PinField","path":"./src/components/PinField/tests/PinField.stories.tsx","stories":[{"name":"base","snippet":"const base = () => <PinField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <PinField name=\"pin\" variant=\"faded\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <PinField name=\"pin\" size=\"small\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <PinField name=\"pin\" size=\"medium\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <PinField name=\"pin\" size=\"large\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <PinField name=\"pin\" size=\"xlarge\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: responsive, s: medium, m+: xlarge\">\n            <PinField\n                name=\"pin\"\n                size={{ s: \"medium\", m: \"xlarge\" }}\n                inputAttributes={{ \"aria-label\": \"Pin\" }}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"valueLength","snippet":"const valueLength = () => (\n    <PinField name=\"test-name\" valueLength={6} inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"},{"name":"defaultValue","snippet":"const defaultValue = () => <PinField\n    name=\"test-name\"\n    onChange={fn()}\n    defaultValue=\"12\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"value","snippet":"const value = () => <PinField\n    name=\"test-name\"\n    onChange={fn()}\n    value=\"12\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"pattern","snippet":"const pattern = () => <PinField\n    name=\"test-name\"\n    pattern=\"alphabetic\"\n    defaultValue=\"ab\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <PinField\n            name=\"test-name\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ \"aria-label\": \"Label\", id: \"test-input-id\" }}\n        />\n    </div>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <FormControl>\n        <FormControl.Label>Label</FormControl.Label>\n        <PinField name=\"test-name\" />\n    </FormControl>\n);"},{"name":"keyboard","snippet":"const keyboard = () => <PinField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"}],"import":"import { Example, FormControl, PinField } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"PinField","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/PinField/PinField.tsx","actualName":"PinField","exportName":"default"}},"components-popover":{"id":"components-popover","name":"Popover","path":"./src/components/Popover/tests/Popover.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title=\"position: bottom\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"bottom-start\" />\n                <Demo position=\"bottom\" />\n                <Demo position=\"bottom-end\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: top\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"top-start\" />\n                <Demo position=\"top\" />\n                <Demo position=\"top-end\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: start\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"start-top\" />\n                <Demo position=\"start\" />\n                <Demo position=\"start-bottom\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: end\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"end-top\" />\n                <Demo position=\"end\" />\n                <Demo position=\"end-bottom\" defaultActive />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"widthNumber","snippet":"const widthNumber = () => <Demo width=\"400px\" defaultActive />;"},{"name":"widthFull","snippet":"const widthFull = () => <Demo width=\"100%\" defaultActive />;"},{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 0\">\n            <Demo padding={0} />\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <Demo padding={6} defaultActive />\n        </Example.Item>\n    </Example>\n);"},{"name":"elevation","snippet":"const elevation = () => (\n    <Example>\n        <Example.Item title=\"elevation: raised\">\n            <Demo elevation=\"raised\" defaultActive />\n        </Example.Item>\n    </Example>\n);"},{"name":"defaultActive","snippet":"const defaultActive = () => <Popover onOpen={fn()} onClose={fn()} defaultActive>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"},{"name":"active","snippet":"const active = () => <Popover onOpen={fn()} onClose={fn()} active>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"},{"name":"activeFalse","snippet":"const activeFalse = () => <Popover onOpen={fn()} onClose={fn()} active={false}>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"},{"name":"dismissible","snippet":"const dismissible = () => <Popover onClose={fn()} defaultActive>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>\n        <Popover.Dismissible\n            closeAriaLabel=\"Close\"\n            attributes={{ \"data-testid\": \"test-id\" }}\n            className=\"test-classname\">Content\n                            </Popover.Dismissible>\n    </Popover.Content>\n</Popover>;"},{"name":"autoFocus","snippet":"const autoFocus = () => (\n    <Example>\n        <Example.Item title=\"autoFocus=false\">\n            <Demo autoFocus={false} />\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Popover active>\n            <Popover.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </Popover.Trigger>\n            <Popover.Content className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n                Content\n            </Popover.Content>\n        </Popover>\n    </div>\n);"},{"name":"testNested","snippet":"const testNested = () => (\n    <Popover position=\"bottom\">\n        <Popover.Trigger>\n            {(attributes) => <Button attributes={attributes}>Open</Button>}\n        </Popover.Trigger>\n        <Popover.Content>\n            <View gap={2} align=\"start\">\n                Popover content\n                <Popover>\n                    <Popover.Trigger>\n                        {(attributes) => <Button attributes={attributes}>Open</Button>}\n                    </Popover.Trigger>\n                    <Popover.Content>Hello</Popover.Content>\n                </Popover>\n            </View>\n        </Popover.Content>\n    </Popover>\n);"},{"name":"testWithTooltip","snippet":"const testWithTooltip = () => (\n    <View paddingTop={10}>\n        <Tooltip position=\"top\" text=\"Hello\">\n            {(tooltipAttributes) => (\n                <Popover position=\"bottom\">\n                    <Popover.Trigger>\n                        {(attributes) => (\n                            <Button\n                                attributes={{\n                                    ...attributes,\n                                    ...tooltipAttributes,\n                                }}\n                            >\n                                Open\n                            </Button>\n                        )}\n                    </Popover.Trigger>\n                    <Popover.Content>\n                        <View gap={2} align=\"start\">\n                            Popover content\n                            <Button onClick={() => {}}>Button</Button>\n                        </View>\n                    </Popover.Content>\n                </Popover>\n            )}\n        </Tooltip>\n    </View>\n);"},{"name":"testContentEditable","snippet":"const testContentEditable = () => {\n    const [active, setActive] = useState(false);\n\n    return (\n        <Popover>\n            <Popover.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </Popover.Trigger>\n            <Popover.Content>\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={() => {}}>Hello</Button>\n                    </View.Item>\n\n                    <ScrollArea height=\"100px\">\n                        <div\n                            style={{ height: \"200px\" }}\n                            contentEditable\n                            tabIndex={0}\n                            onInput={(e) => {\n                                setActive(e.currentTarget.innerText.startsWith(\"@\"));\n                            }}\n                            onKeyDown={(e) => {\n                                console.log(e.key);\n                                if (e.key === \"Enter\" && active) {\n                                    e.preventDefault();\n                                    e.currentTarget.innerText = \"@hello\";\n                                    setActive(false);\n                                }\n                            }}\n                        />\n                    </ScrollArea>\n\n                    <Popover\n                        active={active}\n                        onClose={() => setActive(false)}\n                        originCoordinates={{ x: 300, y: 300 }}\n                        trapFocusMode=\"selection-menu\"\n                    >\n                        <Popover.Content>\n                            <View gap={4}>\n                                <MenuItem onClick={() => {}}>Action</MenuItem>\n                                <MenuItem onClick={() => {}}>Close</MenuItem>\n                            </View>\n                        </Popover.Content>\n                    </Popover>\n                </View>\n            </Popover.Content>\n        </Popover>\n    );\n};"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: headless\">\n            <Popover variant=\"headless\" defaultActive position=\"bottom-start\">\n                <Popover.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </Popover.Trigger>\n                <Popover.Content>\n                    <View\n                        height=\"100px\"\n                        width=\"100px\"\n                        borderColor=\"primary\"\n                        borderRadius=\"medium\"\n                        backgroundColor=\"primary-faded\"\n                    />\n                </Popover.Content>\n            </Popover>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Example, MenuItem, Popover, ScrollArea, Tooltip, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Popover","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Popover/Popover.tsx","actualName":"Popover","exportName":"default"}},"components-progress":{"id":"components-progress","name":"Progress","path":"./src/components/Progress/tests/Progress.stories.tsx","stories":[{"name":"value","snippet":"const value = () => (\n    <Example>\n        <Example.Item title=\"value: 50\">\n            <Progress value={50} ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"value: 20, min: 0, max: 40\">\n            <Progress value={20} min={0} max={40} ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"value: 50, min: 0, max: 40\">\n            <Progress value={50} min={0} max={40} ariaLabel=\"rating value\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small, value: 50\">\n            <Progress value={50} size=\"small\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"size: medium, value: 50\">\n            <Progress value={50} size=\"medium\" ariaLabel=\"rating value\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: critical, value: 50\">\n            <Progress value={50} color=\"critical\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: warning, value: 50\">\n            <Progress value={50} color=\"warning\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive, value: 50\">\n            <Progress value={50} color=\"positive\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: media, value: 50\">\n            <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                <Progress value={50} color=\"media\" ariaLabel=\"rating value\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"duration","snippet":"const duration = () => {\n    const [active, setActive] = React.useState(false);\n\n    const handleChange = () => {\n        setActive((state) => !state);\n    };\n\n    return (\n        <Example>\n            <Example.Item title=\"duration: 2000\">\n                <View gap={3}>\n                    <View.Item>\n                        <Button onClick={handleChange}>Change</Button>\n                    </View.Item>\n\n                    <Progress value={active ? 100 : 0} duration={2000} ariaLabel=\"rating value\" />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"render","snippet":"const render = () => <Progress value={75} min={50} max={100} ariaLabel=\"progress\" />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Progress className=\"test-classname\" attributes={{ id: \"test-id\" }} ariaLabel=\"progress\" />\n    </div>\n);"}],"import":"import { Button, Example, Progress, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Progress","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Progress/Progress.tsx","actualName":"Progress","exportName":"default"}},"components-progressindicator":{"id":"components-progressindicator","name":"ProgressIndicator","path":"./src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const [activeIndex, setActiveIndex] = React.useState(0);\n    const total = 10;\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <View gap={4}>\n                    <View direction=\"row\" gap={2} align=\"center\">\n                        <Button\n                            onClick={() => {\n                                setActiveIndex((prev) => Math.max(0, prev - 1));\n                            }}\n                        >\n                            Previous\n                        </Button>\n                        <Button\n                            onClick={() => {\n                                setActiveIndex((prev) => Math.min(total - 1, prev + 1));\n                            }}\n                        >\n                            Next\n                        </Button>\n                        <Text weight=\"medium\">Index: {activeIndex}</Text>\n                    </View>\n\n                    <View borderRadius=\"medium\" overflow=\"hidden\" width=\"300px\">\n                        <Scrim\n                            position=\"bottom\"\n                            backgroundSlot={<View aspectRatio={16 / 9} backgroundColor=\"neutral-faded\" />}\n                        >\n                            <View align=\"center\">\n                                <ProgressIndicator total={total} activeIndex={activeIndex} color=\"media\" />\n                            </View>\n                        </Scrim>\n                    </View>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"color","snippet":"const color = () => {\n    return (\n        <Example>\n            <Example.Item title=\"color: primary\">\n                <ProgressIndicator total={10} activeIndex={5} color=\"primary\" />\n            </Example.Item>\n            <Example.Item title=\"color: media\">\n                <View borderRadius=\"medium\" overflow=\"hidden\" width=\"300px\">\n                    <Scrim\n                        position=\"bottom\"\n                        backgroundSlot={<View aspectRatio={16 / 9} backgroundColor=\"neutral-faded\" />}\n                    >\n                        <View align=\"center\">\n                            <ProgressIndicator total={10} activeIndex={5} color=\"media\" />\n                        </View>\n                    </Scrim>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"ariaLabel","snippet":"const ariaLabel = () => <ProgressIndicator total={10} className=\"test-classname\" ariaLabel=\"Progress\" />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <ProgressIndicator total={10} className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Button, Example, ProgressIndicator, Scrim, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ProgressIndicator","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ProgressIndicator/ProgressIndicator.tsx","actualName":"ProgressIndicator","exportName":"default"}},"components-radio":{"id":"components-radio","name":"Radio","path":"./src/components/Radio/tests/Radio.stories.tsx","stories":[{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"small\" defaultChecked>\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"medium\">\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"large\">\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: responsive, s: small, m: large\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size={{ s: \"small\", m: \"large\" }}>\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Radio name=\"error\" value=\"dog\" hasError>\n                Radio\n            </Radio>\n        </Example.Item>\n    </Example>\n);"},{"name":"render","snippet":"const render = () => (\n    <Radio name=\"test-name\" value=\"test-value\">\n        Content\n    </Radio>\n);"},{"name":"checked","snippet":"const checked = () => <Radio name=\"test-name\" value=\"test-value\" checked onChange={fn()}>Content\n            </Radio>;"},{"name":"checkedFalse","snippet":"const checkedFalse = () => <Radio name=\"test-name\" value=\"test-value\" checked={false} onChange={fn()}>Content\n            </Radio>;"},{"name":"defaultChecked","snippet":"const defaultChecked = () => <Radio name=\"test-name\" value=\"test-value\" defaultChecked onChange={fn()}>Content\n            </Radio>;"},{"name":"defaultCheckedFalse","snippet":"const defaultCheckedFalse = () => <Radio name=\"test-name\" value=\"test-value\" onChange={fn()}>Content\n            </Radio>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <Radio name=\"test-name\" value=\"test-value\" disabled>\n        Content\n    </Radio>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Radio className=\"test-classname\" attributes={{ id: \"test-id\" }} value=\"value\">\n            Content\n        </Radio>\n    </div>\n);"}],"import":"import { Example, Radio, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Radio","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Radio/Radio.tsx","actualName":"Radio","exportName":"default"}},"components-radiogroup":{"id":"components-radiogroup","name":"RadioGroup","path":"./src/components/RadioGroup/tests/RadioGroup.stories.tsx","stories":[{"name":"value","snippet":"const value = () => <RadioGroup name=\"test-name\" value=\"1\" onChange={fn()}>\n    {/* checked should be ignored */}\n    <Radio value=\"1\" checked={false}>Content\n                    </Radio>\n    <Radio value=\"2\">Content 2</Radio>\n</RadioGroup>;"},{"name":"defaultValue","snippet":"const defaultValue = () => <RadioGroup name=\"test-name\" defaultValue=\"1\" onChange={fn()}>\n    {/* checked should be ignored */}\n    <Radio value=\"1\" checked={false}>Content\n                    </Radio>\n    <Radio value=\"2\">Content 2</Radio>\n</RadioGroup>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <RadioGroup name=\"test-name\" disabled>\n        <Radio value=\"test-value\">Content</Radio>\n    </RadioGroup>\n);"}],"import":"import { Radio, RadioGroup } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"RadioGroup","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/RadioGroup/RadioGroup.tsx","actualName":"RadioGroup","exportName":"default"}},"components-resizable":{"id":"components-resizable","name":"Resizable","path":"./src/components/Resizable/tests/Resizable.stories.tsx","stories":[{"name":"direction","snippet":"const direction = () => {\n    return (\n        <Example>\n            <Example.Item title=\"row\">\n                <Resizable height=\"200px\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n            <Example.Item title=\"column\">\n                <Resizable height=\"400px\" direction=\"column\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n\n            {/* Test that page doesn't scroll on dragging */}\n            <div style={{ height: 2000 }} />\n        </Example>\n    );\n};"},{"name":"children","snippet":"const children = () => {\n    return (\n        <Example>\n            <Example.Item title=\"render props, row\">\n                <Resizable height=\"200px\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n            <Example.Item title=\"render props, column\">\n                <Resizable height=\"400px\" direction=\"column\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"bordered, row\">\n            <Resizable height=\"200px\" variant=\"bordered\">\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n            </Resizable>\n        </Example.Item>\n        <Example.Item title=\"bordered, column\">\n            <Resizable height=\"400px\" direction=\"column\" variant=\"bordered\">\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n            </Resizable>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Resizable className=\"test-classname\" attributes={{ id: \"test-id\" }} height=\"200px\">\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n        <Resizable.Handle />\n        <Resizable.Item minSize=\"200px\" maxSize=\"500px\" defaultSize=\"300px\">\n            <Panel />\n        </Resizable.Item>\n    </Resizable>\n);"},{"name":"layout","snippet":"const layout = () => (\n    <Resizable height=\"100px\" gap={8}>\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n        <Resizable.Handle />\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n    </Resizable>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Resizable className=\"test-classname\" attributes={{ id: \"test-id\" }} height=\"200px\">\n            <Resizable.Item>\n                <Panel />\n            </Resizable.Item>\n            <Resizable.Handle />\n            <Resizable.Item>\n                <Panel />\n            </Resizable.Item>\n        </Resizable>\n    </div>\n);"}],"import":"import { Button, Example, Resizable, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Resizable","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Resizable/Resizable.tsx","actualName":"Resizable","exportName":"default"}},"components-scrim":{"id":"components-scrim","name":"Scrim","path":"./src/components/Scrim/tests/Scrim.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title=\"position: center\">\n            <Scrim backgroundSlot={<Placeholder h={200} />}>Scrim</Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <Scrim position=\"bottom\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: top\">\n            <Scrim position=\"top\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: start\">\n            <Scrim position=\"start\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <Scrim position=\"end\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Scrim className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Scrim>\n    </div>\n);"},{"name":"composition","snippet":"const composition = () => (\n    <Example>\n        <Example.Item title=\"without backgroundSlot, size is based on the parent component\">\n            <div style={{ height: 300, position: \"relative\" }}>\n                <Scrim>Text</Scrim>\n            </div>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, Placeholder, Scrim } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Scrim","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Scrim/Scrim.tsx","actualName":"Scrim","exportName":"default"}},"components-select":{"id":"components-select","name":"Select","path":"./src/components/Select/tests/Select.stories.tsx","stories":[{"name":"nativeRender","snippet":"const nativeRender = () => (\n    <Example>\n        <Example.Item title=\"native with options prop\">\n            <Select\n                name=\"animal\"\n                id=\"animal-1\"\n                placeholder=\"Select an animal\"\n                options={[\n                    { label: \"Dog\", value: \"dog\" },\n                    { label: \"Turtle\", value: \"turtle\" },\n                ]}\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            />\n        </Example.Item>\n        <Example.Item title=\"native with option tags\">\n            <Select\n                name=\"animal\"\n                id=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n    </Example>\n);"},{"name":"customRender","snippet":"const customRender = () => (\n    <Example>\n        <Example.Item title=\"custom with options\">\n            <Select.Custom\n                name=\"animal\"\n                id=\"animal-1\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"native with option tags\">\n            <Select.Custom\n                name=\"animal-2\"\n                id=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Group label=\"Birds\">\n                    <Select.Option value=\"pigeon\">Pigeon</Select.Option>\n                    <Select.Option value=\"parrot\">Parrot</Select.Option>\n                </Select.Group>\n                <Select.Group label=\"Sea Mammals\">\n                    <Select.Option value=\"whale\">Whale</Select.Option>\n                    <Select.Option value=\"dolphin\">Dolphin</Select.Option>\n                </Select.Group>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"nativeHandlers","snippet":"const nativeHandlers = () => <Example>\n    <Example.Item title=\"native, uncontrolled, onChange\">\n        <Select\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n    <Example.Item title=\"native, controlled, onChange\">\n        <Select\n            name=\"animal-2\"\n            placeholder=\"Select an animal\"\n            value=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n    <Example.Item title=\"native, onFocus, onBlur, onClick\">\n        <Select\n            name=\"animal-3\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onFocus={fn()}\n            onBlur={fn()}\n            onClick={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n</Example>;"},{"name":"customHandlers","snippet":"const customHandlers = () => <Example>\n    <Example.Item title=\"custom, uncontrolled, onChange\">\n        <Select.Custom\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n    <Example.Item title=\"custom, controlled, onChange\">\n        <Select.Custom\n            name=\"animal-2\"\n            placeholder=\"Select an animal\"\n            value=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n    <Example.Item title=\"native, onFocus, onBlur, onClick\">\n        <Select.Custom\n            name=\"animal-3\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onFocus={fn()}\n            onBlur={fn()}\n            onClick={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n</Example>;"},{"name":"triggerOnly","snippet":"const triggerOnly = (args) => {\n    const toggle = useToggle();\n    const [value, setValue] = React.useState(\"Dog\");\n\n    const handleClick: SelectProps[\"onClick\"] = (e) => {\n        args.handleClick(e);\n        toggle.toggle();\n    };\n\n    return (\n        <Example>\n            <Example.Item title=\"trigger only, onClick\">\n                <Select\n                    name=\"animal\"\n                    placeholder=\"Select an animal\"\n                    onClick={handleClick}\n                    value=\"dog\"\n                    inputAttributes={{\n                        \"aria-label\": \"Select an animal\",\n                    }}\n                >\n                    {value}\n                </Select>\n                <Modal\n                    active={toggle.active}\n                    onClose={toggle.deactivate}\n                    position=\"bottom\"\n                    padding={2}\n                    attributes={{ \"aria-label\": \"Select an animal\" }}\n                >\n                    <div role=\"listbox\" aria-label=\"Select an animal\">\n                        <MenuItem\n                            roundedCorners\n                            onClick={() => {\n                                setValue(\"Dog\");\n                                toggle.deactivate();\n                            }}\n                            attributes={{\n                                role: \"option\",\n                            }}\n                        >\n                            Dog\n                        </MenuItem>\n                        <MenuItem\n                            roundedCorners\n                            attributes={{\n                                role: \"option\",\n                            }}\n                            onClick={() => {\n                                setValue(\"Turtle\");\n                                toggle.deactivate();\n                            }}\n                        >\n                            Turtle\n                        </MenuItem>\n                    </div>\n                </Modal>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"multiple","snippet":"const multiple = () => <Example>\n    <Example.Item title=\"multiple\">\n        <Select.Custom\n            multiple\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue={[\"dog\"]}\n            onChange={fn()}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n</Example>;"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded, native\">\n            <Select\n                variant=\"faded\"\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n\n        <Example.Item title=\"variant: faded, custom\">\n            <Select.Custom\n                variant=\"faded\"\n                name=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless, native\">\n            <Select\n                variant=\"headless\"\n                name=\"animal-3\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless, custom\">\n            <Select.Custom\n                variant=\"headless\"\n                name=\"animal-4\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <Select.Custom size=\"small\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <Select.Custom size=\"medium\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <Select.Custom size=\"large\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: xlarge\">\n            <Select.Custom size=\"xlarge\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"startSlot","snippet":"const startSlot = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Select.Custom name=\"animal\" placeholder=\"Select an animal\" icon={IconZap}>\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n\n        <Example.Item title=\"startSlot\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                startSlot={<Placeholder h={20} />}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"renderValue","snippet":"const renderValue = () => {\n    const options = [\n        {\n            value: \"1\",\n            label: \"Title 1\",\n            subtitle: \"Subtitle 1\",\n        },\n        {\n            value: \"2\",\n            label: \"Title 2\",\n            subtitle: \"Subtitle 2\",\n        },\n    ];\n\n    return (\n        <Example>\n            <Example.Item title=\"default renderer, single\">\n                <Select.Custom name=\"animal\" defaultValue=\"1\" placeholder=\"Nothing selected\">\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"default renderer, multiple\">\n                <Select.Custom name=\"animal\" defaultValue={[\"1\"]} multiple placeholder=\"Nothing selected\">\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"renderValue, single\">\n                <Select.Custom\n                    name=\"animal\"\n                    defaultValue=\"1\"\n                    placeholder=\"Nothing selected\"\n                    renderValue={(args) => <Badge>Title {args.value}</Badge>}\n                >\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"renderValue, multiple\">\n                <Select.Custom\n                    name=\"animal\"\n                    defaultValue={[\"1\"]}\n                    multiple\n                    placeholder=\"Nothing selected\"\n                    renderValue={(args) => <Badge>Titles {args.value.join(\", \")}</Badge>}\n                >\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Select.Custom name=\"animal\" placeholder=\"Select an animal\" hasError>\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, native\">\n            <Select\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                disabled\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n        <Example.Item title=\"disabled, custom\">\n            <Select.Custom\n                name=\"animal-2\"\n                placeholder=\"Select an animal\"\n                disabled\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <Example>\n        <Example.Item title=\"native, className, attributes, inputAttributes\">\n            <Select\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                className=\"native-class\"\n                attributes={{ id: \"test-id\" }}\n                inputAttributes={{ \"aria-label\": \"test-label\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n        <Example.Item title=\"custom, className, attributes, inputAttributes\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                className=\"custom-class\"\n                attributes={{ id: \"test-id\" }}\n                inputAttributes={{ \"aria-label\": \"test-label\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"fallback","snippet":"const fallback = () => (\n    <Example>\n        <Example.Item title=\"fallback\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                {[...Array(100)].map((_, index) => (\n                    <Select.Option key={index} value={`item-${index}`}>\n                        Item {index + 1}\n                    </Select.Option>\n                ))}\n            </Select.Custom>\n            <div style={{ height: \"1000px\" }}></div>\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                {[...Array(100)].map((_, index) => (\n                    <Select.Option key={index} value={`item-${index}`}>\n                        Item {index + 1}\n                    </Select.Option>\n                ))}\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <Example>\n        <Example.Item title=\"FormControl\">\n            <FormControl hasError>\n                <FormControl.Label>Animal</FormControl.Label>\n                <Select.Custom name=\"animal\" placeholder=\"Select an animal\">\n                    <Select.Option value=\"dog\">Dog</Select.Option>\n                    <Select.Option value=\"turtle\">Turtle</Select.Option>\n                </Select.Custom>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"testComposition","snippet":"const testComposition = () => (\n    <Example>\n        <Example.Item title=\"custom with options\">\n            <Select.Custom\n                name=\"animal\"\n                id=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Group>\n                    <Select.Option value=\"dog\">Dog</Select.Option>\n                    <Select.Option value=\"turtle\">Turtle</Select.Option>\n                </Select.Group>\n                <Select.Group>Hello</Select.Group>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Badge, Example, FormControl, MenuItem, Modal, Placeholder, Select, Text } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Select","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Select/Select.tsx","actualName":"Select","exportName":"default"}},"components-skeleton":{"id":"components-skeleton","name":"Skeleton","path":"./src/components/Skeleton/tests/Skeleton.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"text\">\n            <Skeleton />\n        </Example.Item>\n\n        <Example.Item title=\"view, rectangle\">\n            <Skeleton width=\"100px\" height=\"100px\" />\n        </Example.Item>\n\n        <Example.Item title=\"view, circle\">\n            <Skeleton width=\"100px\" height=\"100px\" borderRadius=\"circular\" />\n        </Example.Item>\n\n        <Example.Item title=\"view, rectangle, responsive\">\n            <Skeleton width={{ s: \"100px\", m: \"200px\" }} height={{ s: \"100px\", m: \"200px\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"radius","snippet":"const radius = () => (\n    <Example>\n        <Example.Item title=\"radius=small\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"small\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=medium\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"medium\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=large\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"large\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=circular\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"circular\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Skeleton className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"}],"import":"import { Example, Skeleton } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Skeleton","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Skeleton/Skeleton.tsx","actualName":"Skeleton","exportName":"default"}},"components-slider":{"id":"components-slider","name":"Slider","path":"./src/components/Slider/tests/Slider.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"single, name\">\n            <Slider name=\"slider-single\" defaultValue={30} />\n        </Example.Item>\n        <Example.Item title=\"range, name\">\n            <Slider range name=\"slider-range\" defaultMinValue={30} defaultMaxValue={85} />\n        </Example.Item>\n        <Example.Item title=\"range, minName, maxName\">\n            <Slider\n                range\n                minName=\"slider-min\"\n                maxName=\"slider-max\"\n                defaultMinValue={30}\n                defaultMaxValue={85}\n            />\n        </Example.Item>\n        <div style={{ height: 2000 }} />\n    </Example>\n);"},{"name":"orientation","snippet":"const orientation = () => (\n    <Example>\n        <Example.Item title=\"orientation: vertical\">\n            <View height=\"200px\">\n                <Slider\n                    range\n                    name=\"slider\"\n                    defaultMinValue={30}\n                    defaultMaxValue={85}\n                    orientation=\"vertical\"\n                />\n            </View>\n        </Example.Item>\n        <View height=\"2000px\" />\n    </Example>\n);"},{"name":"minMax","snippet":"const minMax = () => (\n    <Example>\n        <Example.Item title=\"min, max\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={60} />\n        </Example.Item>\n        <Example.Item title=\"min, max, value < min\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={30} />\n        </Example.Item>\n        <Example.Item title=\"min, max, value > max\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={80} />\n        </Example.Item>\n    </Example>\n);"},{"name":"step","snippet":"const step = () => (\n    <Example>\n        <Example.Item title=\"step: 5\">\n            <Slider name=\"slider\" defaultValue={30} step={5} />\n        </Example.Item>\n\n        <Example.Item title=\"step: 5, defaultValue: 31, rounded down to 30\">\n            <Slider name=\"slider\" defaultValue={31} step={5} />\n        </Example.Item>\n\n        <Example.Item title=\"step: 0.01, float\">\n            <Slider name=\"slider\" defaultValue={30} step={0.01} />\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <Slider name=\"slider\" defaultValue={30} disabled />\n        </Example.Item>\n\n        <Example.Item title=\"disabled, range\">\n            <Slider name=\"slider\" range defaultMinValue={30} defaultMaxValue={80} disabled />\n        </Example.Item>\n    </Example>\n);"},{"name":"renderValue","snippet":"const renderValue = () => (\n    <Example>\n        <Example.Item title=\"renderValue: $\">\n            <Slider name=\"name\" defaultValue={50} renderValue={(args) => `$${args.value}`} />\n        </Example.Item>\n        <Example.Item title=\"renderValue: false\">\n            <Slider name=\"name\" defaultValue={50} renderValue={false} />\n        </Example.Item>\n    </Example>\n);"},{"name":"defaultValue","snippet":"const defaultValue = () => <View paddingTop={10}>\n    <Slider name=\"test-name\" defaultValue={50} onChange={fn()} onChangeCommit={fn()} />\n</View>;"},{"name":"value","snippet":"const value = () => <View paddingTop={10}>\n    <Slider name=\"test-name\" value={50} onChange={fn()} onChangeCommit={fn()} />\n</View>;"},{"name":"rangeDefaultValue","snippet":"const rangeDefaultValue = () => <View paddingTop={10}>\n    <Slider\n        range\n        name=\"test-name\"\n        defaultMinValue={50}\n        defaultMaxValue={70}\n        onChange={fn()}\n        onChangeCommit={fn()} />\n</View>;"},{"name":"rangeValue","snippet":"const rangeValue = () => <View paddingTop={10}>\n    <Slider\n        range\n        minName=\"test-name-min\"\n        maxName=\"test-name-max\"\n        minValue={50}\n        maxValue={70}\n        onChange={fn()}\n        onChangeCommit={fn()} />\n</View>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Slider name=\"name\" className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"},{"name":"testForm","snippet":"const testForm = (args) => {\n    const formRef = React.useRef<HTMLFormElement>(null);\n    const [data, setData] = React.useState<[string, FormDataEntryValue][]>([]);\n\n    const handleChange = (e: React.FormEvent<HTMLFormElement>) => {\n        const formData = new FormData(e.currentTarget);\n        const nextState = [...formData.entries()];\n\n        args.handleFormChange({ formData: nextState });\n        setData(nextState);\n    };\n\n    return (\n        <View paddingTop={10} gap={4}>\n            <form onChange={handleChange} ref={formRef}>\n                <Slider\n                    range\n                    minName=\"slider-min\"\n                    maxName=\"slider-max\"\n                    defaultMinValue={30}\n                    defaultMaxValue={50}\n                />\n            </form>\n\n            {data.map((v) => v.join(\": \")).join(\", \")}\n        </View>\n    );\n};"},{"name":"testSwipe","snippet":"const testSwipe = () => {\n    const toggle = useToggle(true);\n\n    return (\n        <Modal active={toggle.active} onClose={toggle.deactivate} position=\"end\">\n            <View gap={4}>\n                <Modal.Title>Modal</Modal.Title>\n                <Slider name=\"slider\" defaultValue={30} />\n            </View>\n        </Modal>\n    );\n};"}],"import":"import { Example, Modal, Slider, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Slider","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Slider/Slider.tsx","actualName":"Slider","exportName":"default"}},"components-stepper":{"id":"components-stepper","name":"Stepper","path":"./src/components/Stepper/tests/Stepper.stories.tsx","stories":[{"name":"direction","snippet":"const direction = () => (\n    <Example>\n        <Example.Item title=\"direction: row\">\n            <Stepper activeId=\"1\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <Stepper activeId=\"1\" direction=\"column\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"},{"name":"labelDisplay","snippet":"const labelDisplay = () => (\n    <Example>\n        <Example.Item title=\"direction: row, labels hidden\">\n            <Stepper activeId=\"1\" labelDisplay=\"hidden\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: column, labels hiden\">\n            <Stepper activeId=\"1\" direction=\"column\" labelDisplay=\"hidden\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: row, labels hidden on s\">\n            <Stepper activeId=\"1\" labelDisplay={{ s: \"hidden\", m: \"inline\" }}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"},{"name":"gap","snippet":"const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 6, direction: row\">\n            <Stepper activeId=\"1\" gap={6}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"gap: 6, direction: column\">\n            <Stepper activeId=\"1\" direction=\"column\" gap={6}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap\", \"[s] 2\", \"[m+] 5\"]}>\n            <Stepper activeId=\"1\" gap={{ s: 2, m: 5 }}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Stepper className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Stepper.Item attributes={{ id: \"test-item-id\" }} className=\"test-item-classname\" />\n        </Stepper>\n    </div>\n);"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"multiline subtitle\",\n                \"should wrap the text correctly\",\n                \"should display the connector correctly\",\n            ]}\n        >\n            <Demo\n                activeId={0}\n                subtitle=\"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy\"\n            />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Example, Placeholder, Stepper, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Stepper","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Stepper/Stepper.tsx","actualName":"Stepper","exportName":"default"}},"components-switch":{"id":"components-switch","name":"Switch","path":"./src/components/Switch/tests/Switch.stories.tsx","stories":[{"name":"size","snippet":"const size = () => (\n\t<Example>\n\t\t<Example.Item title=\"size: medium\">\n\t\t\t<Switch name=\"active\" size=\"medium\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: small\">\n\t\t\t<Switch name=\"active\" size=\"small\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: large\">\n\t\t\t<Switch name=\"active\" size=\"large\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: responsive, s: small, m: large\">\n\t\t\t<Switch\n\t\t\t\tname=\"active\"\n\t\t\t\tsize={{ s: \"small\", m: \"large\" }}\n\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t/>\n\t\t</Example.Item>\n\t</Example>\n);"},{"name":"label","snippet":"const label = () => (\n\t<Example>\n\t\t<Example.Item title=\"size: medium\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch reversed name=\"active\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: small\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" size=\"small\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch\n\t\t\t\t\treversed\n\t\t\t\t\tname=\"active\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t\t>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\n\t\t<Example.Item title=\"size: large\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" size=\"large\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch\n\t\t\t\t\treversed\n\t\t\t\t\tname=\"active\"\n\t\t\t\t\tsize=\"large\"\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t\t>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\t</Example>\n);"},{"name":"defaultChecked","snippet":"const defaultChecked = () => <Switch name=\"test-name\" defaultChecked onChange={fn()}>Label\n            </Switch>;"},{"name":"checked","snippet":"const checked = () => <Switch name=\"test-name\" checked onChange={fn()}>Label\n            </Switch>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, unselected\">\n            <Switch name=\"active\" disabled inputAttributes={{ \"aria-label\": \"test switch\" }} />\n        </Example.Item>\n        <Example.Item title=\"disabled, selected\">\n            <Switch\n                name=\"active\"\n                disabled\n                defaultChecked\n                inputAttributes={{ \"aria-label\": \"test switch\" }}\n            />\n        </Example.Item>\n        <Example.Item title=\"disabled, with label\">\n            <Switch name=\"active\" disabled>\n                Switch\n            </Switch>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Switch\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ \"aria-label\": \"test select\", id: \"test-input-id\" }}\n            name=\"name\"\n        >\n            Label\n        </Switch>\n    </div>\n);"}],"import":"import { Example, Switch, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Switch","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Switch/Switch.tsx","actualName":"Switch","exportName":"default"}},"components-table":{"id":"components-table","name":"Table","path":"./src/components/Table/tests/Table.stories.tsx","stories":[{"name":"layout","snippet":"const layout = () => (\n    <Example>\n        <Example.Item title=\"base\">\n            <Table>\n                <Table.Head>\n                    <Table.Row>\n                        <Table.Heading>Column 1</Table.Heading>\n                        <Table.Heading>Column 2</Table.Heading>\n                    </Table.Row>\n                </Table.Head>\n                <Table.Body>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell>Cell 2</Table.Cell>\n                    </Table.Row>\n                </Table.Body>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"colspan: 2 for col 2, rowspan: 2 for cell 3\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading colSpan={2}>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                    <Table.Cell rowSpan={2}>Cell 3</Table.Cell>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"align: center for heading 1, align: end for heading 2\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading align=\"center\">Column 1</Table.Heading>\n                    <Table.Heading align=\"end\">Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"valign: center for cell 2, valign: end for cell 3\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>\n                        <View height={15} backgroundColor=\"neutral-faded\" />\n                    </Table.Cell>\n                    <Table.Cell verticalAlign=\"center\">Cell 2</Table.Cell>\n                    <Table.Cell verticalAlign=\"end\">Cell 3</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"width: 40%, minWidth: 200px for col 1\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"40%\" minWidth=\"200px\">\n                        Column 1\n                    </Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"},{"name":"border","snippet":"const border = () => (\n    <Example>\n        <Example.Item title=\"border: true\">\n            <Table border>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"columnBorder: true\">\n            <Table columnBorder>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"columnBorder: true, border: true\">\n            <Table columnBorder border>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"},{"name":"rows","snippet":"const rows = () => (\n    <Example>\n        <Example.Item title=\"highlighted for row 2\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row highlighted>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"clickable row 2, focus ring\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row onClick={() => {}}>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"},{"name":"render","snippet":"const render = () => (\n    <Table>\n        <Table.Head>\n            <Table.Row>\n                <Table.Heading>Heading</Table.Heading>\n                <Table.Heading>Heading</Table.Heading>\n            </Table.Row>\n        </Table.Head>\n        <Table.Body>\n            <Table.Row>\n                <Table.Cell>Content</Table.Cell>\n                <Table.Cell>Content</Table.Cell>\n            </Table.Row>\n        </Table.Body>\n    </Table>\n);"},{"name":"tbody","snippet":"const tbody = () => (\n    <Table>\n        <Table.Row>\n            <Table.Heading>Heading</Table.Heading>\n            <Table.Heading>Heading</Table.Heading>\n        </Table.Row>\n    </Table>\n);"},{"name":"tabIndex","snippet":"const tabIndex = () => (\n    <Table>\n        <Table.Row>\n            <Table.Cell />\n        </Table.Row>\n        <Table.Row onClick={() => {}}>\n            <Table.Cell />\n        </Table.Row>\n        <Table.Row attributes={{ onClick: () => {} }}>\n            <Table.Cell />\n        </Table.Row>\n    </Table>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Table className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Table.Row attributes={{ id: \"test-row-id\" }}>\n                <Table.Cell attributes={{ id: \"test-cell-id\" }}></Table.Cell>\n            </Table.Row>\n        </Table>\n    </div>\n);"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"scroll fade\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"500px\">Column 1</Table.Heading>\n                    <Table.Heading width=\"500px\">Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"card with highlighted heading\">\n            <Card elevated padding={0}>\n                <Table>\n                    <Table.Row highlighted>\n                        <Table.Heading width=\"50%\" minWidth=\"200px\">\n                            Column 1\n                        </Table.Heading>\n                        <Table.Heading colSpan={2} align=\"end\">\n                            Column 2\n                        </Table.Heading>\n                    </Table.Row>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell align=\"center\">Cell 2</Table.Cell>\n                        <Table.Cell align=\"end\">Cell 3</Table.Cell>\n                    </Table.Row>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell align=\"center\">Cell 2</Table.Cell>\n                        <Table.Cell align=\"end\">Cell 3</Table.Cell>\n                    </Table.Row>\n                </Table>\n            </Card>\n        </Example.Item>\n        <Example.Item title=\"width: auto, nowrap\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"50%\">Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                    <Table.Heading>Column 3</Table.Heading>\n                    <Table.Heading width=\"auto\">Long heading title</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                    <Table.Cell>Cell 3</Table.Cell>\n                    <Table.Cell>Cell 4</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"},{"name":"examples","snippet":"const examples = () => (\n    <Example>\n        <Example.Item title=\"selectable\">\n            <SelectionDemo />\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Card, Checkbox, Example, Table, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Table","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Table/Table.tsx","actualName":"Table","exportName":"default"}},"components-tabs":{"id":"components-tabs","name":"Tabs","path":"./src/components/Tabs/tests/Tabs.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Tabs>\n        <Tabs.List>\n            <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n            <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n        </Tabs.List>\n\n        <Tabs.Panel value=\"1\">\n            <View padding={4}>Content 1</View>\n        </Tabs.Panel>\n        <Tabs.Panel value=\"2\">\n            <View padding={4}>Content 2</View>\n        </Tabs.Panel>\n    </Tabs>\n);"},{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Tabs defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills\">\n            <Tabs variant=\"pills\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills-elevated\">\n            <Tabs variant=\"pills-elevated\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: borderless\">\n            <Tabs variant=\"borderless\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"variant: default, size: large\">\n            <Tabs size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills, size: large\">\n            <Tabs variant=\"pills\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills-elevated, size: large\">\n            <Tabs variant=\"pills-elevated\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: borderless, size: large\">\n            <Tabs variant=\"borderless\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"direction","snippet":"const direction = () => (\n    <Example>\n        <Example.Item title=\"direction: column, variant: underline\">\n            <Tabs direction=\"column\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: pills\">\n            <Tabs direction=\"column\" variant=\"pills\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: pills-elevated\">\n            <Tabs direction=\"column\" variant=\"pills-elevated\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: borderless\">\n            <Tabs direction=\"column\" variant=\"borderless\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"icon","snippet":"const icon = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Tabs>\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"1\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"icon only\">\n            <Tabs variant=\"pills-elevated\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap} attributes={{ \"aria-label\": \"Tab 1\" }} />\n                    <Tabs.Item value=\"1\" icon={IconZap} attributes={{ \"aria-label\": \"Tab 2\" }} />\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"equalWidth","snippet":"const equalWidth = () => (\n    <Example>\n        <Example.Item title=\"equal width items\">\n            <Tabs onChange={console.log} itemWidth=\"equal\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"1\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                    <Tabs.Item value=\"2\" icon={IconZap}>\n                        Very long item 3\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"href","snippet":"const href = () => (\n    <Example>\n        <Example.Item title=\"href, no onChange\">\n            <Tabs value=\"2\">\n                <Tabs.List>\n                    <Tabs.Item value=\"1\" href=\"#item-1\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"2\" href=\"#item-2\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                    <Tabs.Item value=\"3\" href=\"#item-3\" icon={IconZap}>\n                        Very long item 3\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => {\n    return (\n        <Example>\n            <Example.Item title=\"disabled\">\n                <Tabs defaultValue=\"1\">\n                    <Tabs.List>\n                        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"2\" disabled icon={IconZap}>\n                            Item 2\n                        </Tabs.Item>\n                        <Tabs.Item value=\"3\">Item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"1\">\n                        <View padding={4}>Content 1</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <View padding={4}>Content 2</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"3\">\n                        <View padding={4}>Content 3</View>\n                    </Tabs.Panel>\n                </Tabs>\n            </Example.Item>\n\n            <Example.Item title=\"disabled, href\">\n                <Tabs defaultValue=\"1\">\n                    <Tabs.List>\n                        <Tabs.Item href=\"#item1\" value=\"1\">\n                            Item 1\n                        </Tabs.Item>\n                        <Tabs.Item href=\"#item2\" value=\"2\" disabled icon={IconZap}>\n                            Item 2\n                        </Tabs.Item>\n                        <Tabs.Item href=\"#item3\" value=\"3\">\n                            Item 3\n                        </Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"1\">\n                        <View padding={4}>Content 1</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <View padding={4}>Content 2</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"3\">\n                        <View padding={4}>Content 3</View>\n                    </Tabs.Panel>\n                </Tabs>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"defaultValue","snippet":"const defaultValue = () => <Tabs defaultValue=\"2\" onChange={fn()}>\n    <Tabs.List>\n        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n        <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n    </Tabs.List>\n    <Tabs.Panel value=\"1\">Content 1</Tabs.Panel>\n    <Tabs.Panel value=\"2\">Content 2</Tabs.Panel>\n</Tabs>;"},{"name":"value","snippet":"const value = () => <Tabs value=\"2\" onChange={fn()}>\n    <Tabs.List>\n        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n        <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n    </Tabs.List>\n    <Tabs.Panel value=\"1\">Content 1</Tabs.Panel>\n    <Tabs.Panel value=\"2\">Content 2</Tabs.Panel>\n</Tabs>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Tabs>\n            <Tabs.List attributes={{ id: \"test-list-id\" }} className=\"test-list-classname\">\n                <Tabs.Item attributes={{ id: \"test-item-id\" }} value=\"1\">\n                    Item\n                </Tabs.Item>\n            </Tabs.List>\n\n            <Tabs.Panel\n                attributes={{ \"data-testid\": \"test-panel-id\" }}\n                className=\"test-panel-classname\"\n                value=\"1\"\n            />\n        </Tabs>\n    </div>\n);"},{"name":"testFocusableContent","snippet":"const testFocusableContent = () => (\n    <Example>\n        <Example.Item title=\"panels without focusable content\">\n            <Tabs>\n                <View gap={4}>\n                    <Tabs.List>\n                        <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                        <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"0\">Tab 1</Tabs.Panel>\n                    <Tabs.Panel value=\"1\">Tab 2</Tabs.Panel>\n                    <Tabs.Panel value=\"2\">Tab 3</Tabs.Panel>\n                </View>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"panels with focusable content\">\n            <Tabs>\n                <View gap={4}>\n                    <Tabs.List>\n                        <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                        <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"0\">\n                        <Button onClick={() => {}}>Tab 1 action</Button>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"1\">\n                        <Button onClick={() => {}}>Tab 2 action</Button>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <Button onClick={() => {}}>Tab 3 action</Button>\n                    </Tabs.Panel>\n                </View>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"testComposition","snippet":"const testComposition = () => (\n    <Example>\n        <Example.Item title=\"Viewport overflow\">\n            <Tabs>\n                <Tabs.List>\n                    {[...Array(8)].map((_, i) => (\n                        <Tabs.Item value={`${i}`} key={i} icon={IconZap}>\n                            Very long item {i}\n                        </Tabs.Item>\n                    ))}\n                </Tabs.List>\n\n                {[...Array(8)].map((_, i) => (\n                    <Tabs.Panel value={`${i}`} key={i}>\n                        Tab {i}\n                    </Tabs.Panel>\n                ))}\n            </Tabs>\n        </Example.Item>\n        <Example.Item>\n            <Tabs onChange={console.log} variant=\"pills-elevated\" name=\"hey\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">\n                        <View borderColor=\"neutral-faded\" padding={5}>\n                            Item 3\n                        </View>\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"Custom non-interactive list children\">\n            <Tabs direction=\"column\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <View height={6} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"},{"name":"testEdgeCaseDom","snippet":"const testEdgeCaseDom = () => {\n    const [activeItem, setActiveItem] = React.useState(\"1\");\n    const sectionsRef = React.useRef(null);\n\n    return (\n        <Example>\n            <Example.Item title=\"active item changes on scroll\">\n                <View justify=\"center\" align=\"center\" padding={10}>\n                    <View width={60} gap={2}>\n                        <Tabs value={activeItem} onChange={(args) => setActiveItem(args.value)}>\n                            <Tabs.List>\n                                <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                                <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n                                <Tabs.Item value=\"3\">Item 3</Tabs.Item>\n                                <Tabs.Item value=\"4\">Item 4</Tabs.Item>\n                            </Tabs.List>\n                        </Tabs>\n\n                        <ScrollArea\n                            attributes={{ ref: sectionsRef }}\n                            height={70}\n                            onScroll={(args) => {\n                                setActiveItem(Math.min(4, Math.floor(args.y * 10) + 1).toString());\n                            }}\n                        >\n                            <View gap={4}>\n                                <View gap={2}>\n                                    <Text>Section 1</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View grow height=\"100px\" backgroundColor=\"neutral-faded\" key={i} />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 2</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 3</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 4</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n                            </View>\n                        </ScrollArea>\n                    </View>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import { Button, Example, ScrollArea, Tabs, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Tabs","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Tabs/Tabs.tsx","actualName":"Tabs","exportName":"default"}},"components-textarea":{"id":"components-textarea","name":"TextArea","path":"./src/components/TextArea/tests/TextArea.stories.tsx","stories":[{"name":"variants","snippet":"const variants = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <TextArea variant=\"faded\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless\">\n            <TextArea variant=\"headless\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: medium\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"medium\" />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"large\" />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"xlarge\" />\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] large\", \"[m+] medium\"]}>\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size={{ s: \"xlarge\", m: \"medium\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"resize","snippet":"const resize = () => (\n    <Example>\n        <Example.Item title=\"resize: none\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" resize=\"none\" />\n        </Example.Item>\n        <Example.Item title=\"resize: auto\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" resize=\"auto\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" hasError />\n        </Example.Item>\n    </Example>\n);"},{"name":"aligner","snippet":"const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner\">\n            <View gap={2}>\n                <Text variant=\"featured-2\">What problem are you trying to solve?</Text>\n                <TextArea.Aligner>\n                    <TextArea\n                        variant=\"headless\"\n                        placeholder=\"Try something like 'I have a job'\"\n                        name=\"description\"\n                    />\n                </TextArea.Aligner>\n                <View.Item>\n                    <Button>Next</Button>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"long value without breaks\">\n            <TextArea\n                name=\"hey\"\n                defaultValue={`<div style=\"position:relative;width:100%;padding-top:calc(150% + 72px)\">\n<iframe src=\"nskjdfdsdkjfsjkdfhbsjlhdfbsjlhfbs;jhbsdljfhsbljhfsbljhfbsjlfdhbsljhfbsdljhfbsljhfbslufbhsdlfds\" />\n</div>`}\n                resize=\"auto\"\n                placeholder=\"Placeholder\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"render","snippet":"const render = () => <TextArea name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"placeholder","snippet":"const placeholder = () => (\n    <TextArea\n        name=\"test-name\"\n        placeholder=\"Placeholder\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"},{"name":"id","snippet":"const id = () => (\n    <TextArea name=\"test-name\" id=\"test-id\" inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"},{"name":"disabled","snippet":"const disabled = () => <TextArea name=\"test-name\" disabled inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"defaultValue","snippet":"const defaultValue = () => <TextArea\n    name=\"test-name\"\n    defaultValue=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"value","snippet":"const value = () => <TextArea\n    name=\"test-name\"\n    value=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <TextArea\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n        />\n    </div>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <Example>\n        <Example.Item title=\"with helper\">\n            <FormControl>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextArea name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n        <Example.Item title=\"with error\">\n            <FormControl hasError>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextArea name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Example, FormControl, Text, TextArea, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"TextArea","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/TextArea/TextArea.tsx","actualName":"TextArea","exportName":"default"}},"components-textfield":{"id":"components-textfield","name":"TextField","path":"./src/components/TextField/tests/TextField.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <TextField variant=\"faded\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless\">\n            <TextField variant=\"headless\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"rounded","snippet":"const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded\">\n            <TextField\n                rounded\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                icon={IconZap}\n                prefix=\"+31\"\n                endSlot={<Button rounded size=\"small\" icon={IconZap} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"rounded, variant: faded\">\n            <View direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <TextField\n                        rounded\n                        variant=\"faded\"\n                        name=\"Name\"\n                        placeholder=\"Enter your name\"\n                        startSlot={\n                            <Badge rounded size=\"small\">\n                                Hello\n                            </Badge>\n                        }\n                    />\n                </View.Item>\n                <Button rounded>Submit</Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"error","snippet":"const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" hasError />\n        </Example.Item>\n    </Example>\n);"},{"name":"attachments","snippet":"const attachments = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" value=\"Reshaped\" icon={IconZap} />\n        </Example.Item>\n        <Example.Item title=\"endIcon\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" value=\"Reshaped\" endIcon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title={[\"startSlot\", \"vertical and horizontal padding aligned\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title={[\"endSlot\", \"vertical and horizontal padding aligned\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                endSlot={\n                    <Button\n                        icon={IconZap}\n                        size=\"small\"\n                        onClick={() => {}}\n                        attributes={{ \"aria-label\": \"Action\" }}\n                    />\n                }\n            />\n        </Example.Item>\n\n        <Example.Item title=\"paddingSlotStart=4, paddingSlotEnd=2\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlotPadding={4}\n                endSlotPadding={2}\n                startSlot={<Placeholder h={20} />}\n                endSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"with all affixes\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                endIcon={IconZap}\n                icon={IconZap}\n                prefix=\"Estimated value\"\n                suffix=\"m2\"\n                startSlot={<Placeholder h={20} />}\n                endSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"multiline wrap\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlot={[...Array(10).keys()].map((i) => (\n                    <Badge size=\"small\" key={i}>\n                        Item {i + 1}\n                    </Badge>\n                ))}\n                multiline\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"small\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"medium\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"large\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"xlarge\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] xlarge\", \"[m+] medium\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                size={{ s: \"xlarge\", m: \"medium\" }}\n                icon={IconZap}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"aligner","snippet":"const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner\">\n            <View gap={2}>\n                <Text variant=\"featured-2\">What problem are you trying to solve?</Text>\n                <TextField.Aligner>\n                    <TextField\n                        variant=\"headless\"\n                        placeholder=\"Try something like 'I have a job'\"\n                        name=\"description\"\n                    />\n                </TextField.Aligner>\n                <View.Item>\n                    <Button>Next</Button>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"render","snippet":"const render = () => <TextField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"placeholder","snippet":"const placeholder = () => (\n    <TextField\n        name=\"test-name\"\n        placeholder=\"Placeholder\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"},{"name":"id","snippet":"const id = () => (\n    <TextField name=\"test-name\" id=\"test-id\" inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"},{"name":"disabled","snippet":"const disabled = () => <TextField name=\"test-name\" disabled inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"defaultValue","snippet":"const defaultValue = () => <TextField\n    name=\"test-name\"\n    defaultValue=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"value","snippet":"const value = () => <TextField\n    name=\"test-name\"\n    value=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <TextField\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n        />\n    </div>\n);"},{"name":"formControl","snippet":"const formControl = () => (\n    <Example>\n        <Example.Item title=\"with helper\">\n            <FormControl>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextField name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n        <Example.Item title=\"with error\">\n            <FormControl hasError>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextField name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Badge, Button, Example, FormControl, Placeholder, Text, TextField, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"TextField","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/TextField/TextField.tsx","actualName":"TextField","exportName":"default"}},"components-timeline":{"id":"components-timeline","name":"Timeline","path":"./src/components/Timeline/tests/Timeline.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"children passed directly\">\n            <Timeline>\n                <Placeholder />\n                <Placeholder />\n                <Placeholder />\n            </Timeline>\n        </Example.Item>\n        <Example.Item title=\"children wrapped with Timeline.Item\">\n            <Timeline>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n    </Example>\n);"},{"name":"marker","snippet":"const marker = () => (\n    <Example>\n        <Example.Item title=\"slot\">\n            <Timeline>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n\n        <Example.Item title=\"null marker\">\n            <Timeline>\n                <Timeline.Item markerSlot={null}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={null}>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Timeline className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Timeline.Item className=\"test-item-classname\" attributes={{ id: \"test-item-id\" }}>\n                Content\n            </Timeline.Item>\n            <Timeline.Item>Content</Timeline.Item>\n        </Timeline>\n    </div>\n);"}],"import":"import { Example, Placeholder, Timeline } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Timeline","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Timeline/Timeline.tsx","actualName":"Timeline","exportName":"default"}},"components-toast":{"id":"components-toast","name":"Toast","path":"./src/components/Toast/tests/Toast.stories.tsx","stories":[{"name":"size","snippet":"const size = () => <Size />;"},{"name":"position","snippet":"const position = () => <Position />;"},{"name":"color","snippet":"const color = () => <Color />;"},{"name":"timeout","snippet":"const timeout = () => <Timeout />;"},{"name":"regionOptions","snippet":"const regionOptions = () => <Expanded />;"},{"name":"slots","snippet":"const slots = () => <Slots />;"},{"name":"base","snippet":"const base = () => {\n    const toast = useToast();\n\n    return (\n        <Button\n            onClick={() => {\n                const id = toast.show({\n                    title: \"Title\",\n                    text: \"Text\",\n                    children: \"Children\",\n                    startSlot: \"Slot\",\n                    actionsSlot: (\n                        <Button attributes={{ \"data-testid\": \"trigger-id\" }} onClick={() => toast.hide(id)}>\n                            Trigger\n                        </Button>\n                    ),\n                });\n            }}\n        >\n            Show toast\n        </Button>\n    );\n};"},{"name":"nested","snippet":"const nested = () => {\n    return (\n        <div data-testid=\"test-container-id\">\n            <ToastProvider>\n                <NestedDemo />\n            </ToastProvider>\n        </div>\n    );\n};"},{"name":"className","snippet":"const className = () => {\n    const toast = useToast();\n\n    return (\n        <Button\n            onClick={() => {\n                const id = toast.show({\n                    text: \"Content\",\n                    attributes: { \"data-testid\": \"test-id\" },\n                    className: \"test-classname\",\n                });\n            }}\n        >\n            Show toast\n        </Button>\n    );\n};"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"Multiline, should support dynamic height\">\n            <Multiline />\n        </Example.Item>\n        <Example.Item title=\"Nested ToastProvider\">\n            <ToastProvider>\n                <Nested />\n            </ToastProvider>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Dismissible, Example, Image, Text, ToastProvider, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  11 | import { sleep } from \"utilities/helpers\";\n  12 |\n> 13 | export default {\n     | ^\n  14 | \ttitle: \"Components/Toast\",\n  15 | \tparameters: {\n  16 | \t\tiframe: {\n\n./src/components/Toast/tests/Toast.stories.tsx:\nimport { Example } from \"utilities/storybook\";\nimport { useToast, ToastProvider } from \"components/Toast\";\nimport Button from \"components/Button\";\nimport View from \"components/View\";\nimport Image from \"components/Image\";\nimport Text from \"components/Text\";\nimport Dismissible from \"components/Dismissible\";\nimport IconZap from \"icons/Zap\";\nimport { expect, userEvent, waitFor, within } from \"storybook/test\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { sleep } from \"utilities/helpers\";\n\nexport default {\n\ttitle: \"Components/Toast\",\n\tparameters: {\n\t\tiframe: {\n\t\t\turl: \"https://reshaped.so/docs/components/toast\",\n\t\t},\n\t},\n};\n\nconst Size = () => {\n\tconst toast = useToast();\n\tconst props = {\n\t\ticon: IconZap,\n\t\ttitle: \"Hey!\",\n\t\ttext: \"Event completed\",\n\t\tactionsSlot: [<Button>Action</Button>],\n\t};\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"size: small\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({ ...props });\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"size: medium\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({ ...props, size: \"medium\" });\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"large\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({ ...props, size: \"large\" });\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const size = { name: \"size\", render: () => <Size /> };\n\nconst Position = () => {\n\tconst toast = useToast();\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"position: bottom-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom-start\",\n\t\t\t\t\t\t\tactionsSlot: <Button onClick={() => toast.hide(id)}>Close</Button>,\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: bottom\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: bottom-end\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom-end\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: top-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"top-start\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: top\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"top\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: top-end\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"top-end\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const position = { name: \"position\", render: () => <Position /> };\n\nconst Color = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"color: inverted\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"inverted\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: neutral\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"neutral\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: primary\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"primary\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: positive\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"positive\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: critical\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"critical\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: warning\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"warning\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\n\nexport const color = { name: \"color\", render: () => <Color /> };\n\nconst Timeout = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"timeout: short\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\ttimeout: \"short\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"timeout: long\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\ttimeout: \"long\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"timeout: 0\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\ttimeout: 0,\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const timeout = { name: \"timeout\", render: () => <Timeout /> };\n\nconst Expanded = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"Custom width coming from Reshaped provider for bottom-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom-start\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const regionOptions = { name: \"expanded\", render: () => <Expanded /> };\n\nconst Slots = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"always expanded, promotion banner\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\tchildren: (\n\t\t\t\t\t\t\t\t<View gap={3} direction=\"row\">\n\t\t\t\t\t\t\t\t\t<View aspectRatio={1}>\n\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\theight=\"100px\"\n\t\t\t\t\t\t\t\t\t\t\tsrc=\"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80\"\n\t\t\t\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t<View.Item grow>\n\t\t\t\t\t\t\t\t\t\t<View gap={1}>\n\t\t\t\t\t\t\t\t\t\t\t<Dismissible\n\t\t\t\t\t\t\t\t\t\t\t\tcloseAriaLabel=\"Close notification\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClose={() => toast.hide(id)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Text variant=\"body-2\" weight=\"bold\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tLook at this gradient!\n\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t</Dismissible>\n\t\t\t\t\t\t\t\t\t\t\t<Text variant=\"body-3\">\n\t\t\t\t\t\t\t\t\t\t\t\tIf you start using more gradients, your product will become even more\n\t\t\t\t\t\t\t\t\t\t\t\tsuccesful.\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t</View.Item>\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tcolor: \"neutral\",\n\t\t\t\t\t\t\tposition: \"bottom-start\",\n\t\t\t\t\t\t\ttimeout: 0,\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const slots = { name: \"slots\", render: () => <Slots /> };\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst toast = useToast();\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\ttitle: \"Title\",\n\t\t\t\t\t\ttext: \"Text\",\n\t\t\t\t\t\tchildren: \"Children\",\n\t\t\t\t\t\tstartSlot: \"Slot\",\n\t\t\t\t\t\tactionsSlot: (\n\t\t\t\t\t\t\t<Button attributes={{ \"data-testid\": \"trigger-id\" }} onClick={() => toast.hide(id)}>\n\t\t\t\t\t\t\t\tTrigger\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t),\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tShow toast\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvasElement }) => {\n\t\tconst canvas = within(canvasElement.ownerDocument.body);\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\tconst title = canvas.getByText(\"Title\");\n\t\tconst text = canvas.getByText(\"Text\");\n\t\tconst children = canvas.getByText(\"Children\");\n\t\tconst slot = canvas.getByText(\"Slot\");\n\t\tconst action = canvas.getByTestId(\"trigger-id\");\n\n\t\texpect(title).toBeInTheDocument();\n\t\texpect(text).toBeInTheDocument();\n\t\texpect(children).toBeInTheDocument();\n\t\texpect(slot).toBeInTheDocument();\n\t\texpect(action).toBeInTheDocument();\n\n\t\tawait userEvent.click(action);\n\n\t\tawait sleep(600);\n\n\t\tawait waitFor(() => {\n\t\t\texpect(title).not.toBeInTheDocument();\n\t\t});\n\t},\n};\n\nconst NestedDemo = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={() => {\n\t\t\t\ttoast.show({\n\t\t\t\t\ttext: \"Content\",\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\tShow toast\n\t\t</Button>\n\t);\n};\n\nexport const nested: StoryObj = {\n\tname: \"ToastProvider\",\n\trender: () => {\n\t\treturn (\n\t\t\t<div data-testid=\"test-container-id\">\n\t\t\t\t<ToastProvider>\n\t\t\t\t\t<NestedDemo />\n\t\t\t\t</ToastProvider>\n\t\t\t</div>\n\t\t);\n\t},\n\tplay: async ({ canvasElement }) => {\n\t\tconst canvas = within(canvasElement.ownerDocument.body);\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\tconst container = canvas.getByTestId(\"test-container-id\");\n\t\tconst toast = within(container).getByText(\"Content\");\n\n\t\texpect(toast).toBeInTheDocument();\n\t},\n};\n\nexport const className: StoryObj = {\n\tname: \"className, attributes\",\n\trender: () => {\n\t\tconst toast = useToast();\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\ttext: \"Content\",\n\t\t\t\t\t\tattributes: { \"data-testid\": \"test-id\" },\n\t\t\t\t\t\tclassName: \"test-classname\",\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tShow toast\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvasElement }) => {\n\t\tconst canvas = within(canvasElement.ownerDocument.body);\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\tconst toast = canvas.getByTestId(\"test-id\");\n\n\t\texpect(toast).toBeInTheDocument();\n\t\texpect(toast).toHaveClass(\"test-classname\");\n\t},\n};\n\nconst Multiline = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={() => {\n\t\t\t\ttoast.show({\n\t\t\t\t\ttext: \"Very long event completed notification message\",\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\tShow toast\n\t\t</Button>\n\t);\n};\n\nconst Nested = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<View height=\"300px\">\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\ttoast.show({\n\t\t\t\t\t\ttext: \"Notification sent\",\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tShow toast\n\t\t\t</Button>\n\t\t</View>\n\t);\n};\nexport const edgeCases = {\n\tname: \"test: edge cases\",\n\trender: () => (\n\t\t<Example>\n\t\t\t<Example.Item title=\"Multiline, should support dynamic height\">\n\t\t\t\t<Multiline />\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"Nested ToastProvider\">\n\t\t\t\t<ToastProvider>\n\t\t\t\t\t<Nested />\n\t\t\t\t</ToastProvider>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t),\n};\n"}},"components-togglebutton":{"id":"components-togglebutton","name":"ToggleButton","path":"./src/components/ToggleButton/tests/ToggleButton.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"outline\">\n            <ToggleButton>Button</ToggleButton>\n        </Example.Item>\n        <Example.Item title=\"ghost\">\n            <ToggleButton variant=\"ghost\">Button</ToggleButton>\n        </Example.Item>\n    </Example>\n);"},{"name":"selectedColor","snippet":"const selectedColor = () => (\n    <Example>\n        <Example.Item title=\"selectedColor: primary\">\n            <ToggleButton selectedColor=\"primary\" defaultChecked>\n                Button\n            </ToggleButton>\n        </Example.Item>\n    </Example>\n);"},{"name":"onChange","snippet":"const onChange = () => <Example>\n    <Example.Item title=\"defaultChecked, onChange\">\n        <ToggleButton defaultChecked onChange={fn()} value=\"1\">Button\n                                </ToggleButton>\n    </Example.Item>\n    <Example.Item title=\"checked, onChange\">\n        <ToggleButton checked onChange={fn()} value=\"2\">Button\n                                </ToggleButton>\n    </Example.Item>\n</Example>;"},{"name":"onClick","snippet":"const onClick = () => <ToggleButton onClick={fn()}>Button</ToggleButton>;"}],"import":"import { Example, ToggleButton } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ToggleButton","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ToggleButton/ToggleButton.tsx","actualName":"ToggleButton","exportName":"default"}},"components-togglebuttongroup":{"id":"components-togglebuttongroup","name":"ToggleButtonGroup","path":"./src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx","stories":[{"name":"single","snippet":"const single = () => <Example>\n    <Example.Item title=\"single, uncontrolled, onChange\">\n        <ToggleButtonGroup onChange={fn()}>\n            <ToggleButton value=\"1\" onChange={fn()}>Button\n                                    </ToggleButton>\n            <ToggleButton value=\"2\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n    <Example.Item title=\"single, controlled, onChange\">\n        <ToggleButtonGroup onChange={fn()} value={[]}>\n            <ToggleButton value=\"3\" onChange={fn()}>Button\n                                    </ToggleButton>\n            <ToggleButton value=\"4\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n</Example>;"},{"name":"multiple","snippet":"const multiple = () => <Example>\n    <Example.Item title=\"multiple, uncontrolled, onChange\">\n        <ToggleButtonGroup onChange={fn()} selectionMode=\"multiple\">\n            <ToggleButton value=\"1\">Button</ToggleButton>\n            <ToggleButton value=\"2\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n    <Example.Item title=\"multiple, controlled, onChange\">\n        <ToggleButtonGroup onChange={fn()} value={[]} selectionMode=\"multiple\">\n            <ToggleButton value=\"3\">Button</ToggleButton>\n            <ToggleButton value=\"4\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n</Example>;"},{"name":"selectedColor","snippet":"const selectedColor = () => (\n    <Example>\n        <Example.Item title=\"selectedColor: primary\">\n            <ToggleButtonGroup selectedColor=\"primary\" defaultValue={[\"2\"]}>\n                <ToggleButton value=\"1\">Button</ToggleButton>\n                <ToggleButton value=\"2\">Button</ToggleButton>\n                <ToggleButton value=\"3\">Button</ToggleButton>\n            </ToggleButtonGroup>\n        </Example.Item>\n        <Example.Item title=\"color: primary, selectedColor: critical\">\n            <ToggleButtonGroup color=\"primary\" selectedColor=\"critical\" defaultValue={[\"2\"]}>\n                <ToggleButton value=\"1\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n                <ToggleButton value=\"2\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n                <ToggleButton value=\"3\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n            </ToggleButtonGroup>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <ToggleButtonGroup className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <ToggleButton>Button 1</ToggleButton>\n            <ToggleButton>Button 1</ToggleButton>\n        </ToggleButtonGroup>\n    </div>\n);"},{"name":"testIcon","snippet":"const testIcon = () => (\n    <Example>\n        <Example.Item title=\"icon only\">\n            <ToggleButtonGroup selectedColor=\"primary\">\n                <ToggleButton value=\"1\" icon={IconPlus} />\n                <ToggleButton value=\"2\" icon={IconMinus} />\n                <ToggleButton value=\"3\" icon={IconCheckmark} />\n            </ToggleButtonGroup>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, ToggleButton, ToggleButtonGroup } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ToggleButtonGroup","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx","actualName":"ToggleButtonGroup","exportName":"default"}},"components-tooltip":{"id":"components-tooltip","name":"Tooltip","path":"./src/components/Tooltip/tests/Tooltip.stories.tsx","stories":[{"name":"position","snippet":"const position = () => (\n    <Example>\n        <Example.Item title=\"position: bottom-start\">\n            <View direction=\"row\" gap={2}>\n                <Demo position=\"bottom-start\" text=\"Tooltip 1\" />\n                <Demo position=\"bottom-start\" text=\"Tooltip 2\" />\n                <Demo position=\"bottom-start\" text=\"Tooltip 3\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: bottom\">\n            <Demo position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"position: bottom-end\">\n            <Demo position=\"bottom-end\" />\n        </Example.Item>\n        <Example.Item title=\"position: top-start\">\n            <Demo position=\"top-start\" />\n        </Example.Item>\n        <Example.Item title=\"position: top\">\n            <Demo position=\"top\" />\n        </Example.Item>\n        <Example.Item title=\"position: top-end\">\n            <Demo position=\"top-end\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: start\">\n            <View align=\"end\">\n                <Demo position=\"start\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: start-top\">\n            <View align=\"end\">\n                <Demo position=\"start-top\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: start-bottom\">\n            <View align=\"end\">\n                <Demo position=\"start-bottom\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <Demo position=\"end\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: end-top\">\n            <Demo position=\"end-top\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: end-bottom\">\n            <Demo position=\"end-bottom\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: inverted\">\n            <Demo color=\"inverted\" position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"color: dark\">\n            <Demo color=\"dark\" position=\"bottom\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"defaultActive","snippet":"const defaultActive = () => <Tooltip text=\"Content\" onOpen={fn()} onClose={fn()}>\n    {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n</Tooltip>;"},{"name":"edgeCases","snippet":"const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"responsive visibility\">\n            <DemoResponsive text=\"Responsive\" />\n        </Example.Item>\n\n        <Example.Item title=\"without text\">\n            <Tooltip>{() => <Button>Button</Button>}</Tooltip>\n        </Example.Item>\n\n        <Example.Item title=\"tooltip with popover\">\n            <Tooltip text=\"Tooltip\" position=\"top\">\n                {(attributes) => (\n                    <Popover position=\"bottom\">\n                        <Popover.Trigger>\n                            {(popoverAttributes) => (\n                                <Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>\n                            )}\n                        </Popover.Trigger>\n                        <Popover.Content>Popover</Popover.Content>\n                    </Popover>\n                )}\n            </Tooltip>\n        </Example.Item>\n\n        <Example.Item title=\"nested popovers inside a tooltip\">\n            <View direction=\"row\" gap={2}>\n                <Tooltip position=\"top\" text=\"Hello\">\n                    {(tooltipAttributes) => (\n                        <Popover position=\"bottom\" width=\"300px\">\n                            <Popover.Trigger>\n                                {(attributes) => (\n                                    <Button attributes={{ ...tooltipAttributes, ...attributes }}>\n                                        Tooltip with popover\n                                    </Button>\n                                )}\n                            </Popover.Trigger>\n                            <Popover.Content>\n                                <View gap={2} align=\"center\" direction=\"row\" justify=\"space-between\">\n                                    Popover content\n                                    <Popover position=\"bottom\" width=\"300px\">\n                                        <Popover.Trigger>\n                                            {(attributes) => <Button attributes={attributes}>Open</Button>}\n                                        </Popover.Trigger>\n                                        <Popover.Content>\n                                            <Popover.Dismissible align=\"center\" closeAriaLabel=\"Close\">\n                                                Another popover content\n                                            </Popover.Dismissible>\n                                        </Popover.Content>\n                                    </Popover>\n                                </View>\n                            </Popover.Content>\n                        </Popover>\n                    )}\n                </Tooltip>\n                <Tooltip position=\"top\" text=\"Hello\">\n                    {(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}\n                </Tooltip>\n            </View>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Button, Example, Popover, Tooltip, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Tooltip","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Tooltip/Tooltip.tsx","actualName":"Tooltip","exportName":"default"}},"utility-components-accordion":{"id":"utility-components-accordion","name":"Accordion","path":"./src/components/Accordion/tests/Accordion.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Accordion defaultActive>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"},{"name":"iconSize","snippet":"const iconSize = () => (\n    <Accordion iconSize={6}>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"},{"name":"iconPosition","snippet":"const iconPosition = () => (\n    <Accordion iconPosition=\"start\">\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"},{"name":"gap","snippet":"const gap = () => (\n    <Accordion defaultActive gap={4}>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <Placeholder />\n        </Accordion.Content>\n    </Accordion>\n);"},{"name":"onToggle","snippet":"const onToggle = () => <Accordion onToggle={fn()}>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"},{"name":"active","snippet":"const active = () => <Accordion onToggle={fn()} active>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"},{"name":"defaultActive","snippet":"const defaultActive = () => <Accordion onToggle={fn()} defaultActive>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"},{"name":"renderProps","snippet":"const renderProps = () => <Accordion onToggle={fn()}>\n    <Accordion.Trigger>\n        {(attributes, { active }) => (\n            <Button attributes={{ ...attributes, \"data-active\": active }}>Trigger</Button>\n        )}\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Accordion className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Accordion.Trigger>\n                <Placeholder>Trigger</Placeholder>\n            </Accordion.Trigger>\n            <Accordion.Content>\n                <View paddingTop={2}>\n                    <Placeholder />\n                </View>\n            </Accordion.Content>\n        </Accordion>\n    </div>\n);"}],"import":"import { Accordion, Button, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Accordion","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Accordion/Accordion.tsx","actualName":"Accordion","exportName":"default"}},"utility-components-actionable":{"id":"utility-components-actionable","name":"Actionable","path":"./src/components/Actionable/tests/Actionable.stories.tsx","stories":[{"name":"base","snippet":"const base = () => <Example>\n    <Example.Item title=\"span\">\n        <Actionable>Span</Actionable>\n    </Example.Item>\n    <Example.Item title=\"onClick\">\n        <Actionable onClick={fn()}>Button</Actionable>\n    </Example.Item>\n    <Example.Item title=\"href\">\n        <Actionable href=\"https://reshaped.so\" attributes={{ target: \"_blank\" }}>Link\n                            </Actionable>\n    </Example.Item>\n    <Example.Item title=\"attributes.href\">\n        <Actionable attributes={{ href: \"https://reshaped.so\" }}>Link with attributes</Actionable>\n    </Example.Item>\n    <Example.Item title=\"href, onClick\">\n        <Actionable\n            onClick={(e) => {\n                e.preventDefault();\n                args.handleSecondClick(e);\n            }}\n            href=\"https://reshaped.so\">Link with onClick\n                            </Actionable>\n    </Example.Item>\n</Example>;"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, button\">\n            <Actionable disabled onClick={() => {}}>\n                Button\n            </Actionable>\n        </Example.Item>\n        <Example.Item title=\"disabled, link\">\n            <Actionable disabled href=\"https://reshaped.so\">\n                Link\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"fullWidth","snippet":"const fullWidth = () => (\n    <Example>\n        <Example.Item title=\"fullWidth\">\n            <Actionable fullWidth href=\"https://reshaped.so\">\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"insetFocus","snippet":"const insetFocus = () => (\n    <Example>\n        <Example.Item title=\"insetFocus\">\n            <Actionable insetFocus onClick={() => {}}>\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"disableFocusRing","snippet":"const disableFocusRing = () => (\n    <Example>\n        <Example.Item title=\"disableFocusRing\">\n            <Actionable disableFocusRing onClick={() => {}}>\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"borderRadius","snippet":"const borderRadius = () => (\n    <Example>\n        <Example.Item title=\"borderRadius: inherit\">\n            <Actionable borderRadius=\"inherit\" onClick={() => {}}>\n                <View borderRadius=\"large\">Actionable</View>\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"type","snippet":"const type = (args) => (\n    <Example>\n        <Example.Item title=\"type: submit\">\n            <form\n                onSubmit={(e) => {\n                    e.preventDefault();\n                    args.handleSubmit();\n                }}\n            >\n                <Actionable onClick={() => {}} type=\"submit\">\n                    Submit\n                </Actionable>\n            </form>\n        </Example.Item>\n    </Example>\n);"},{"name":"as","snippet":"const as = () => (\n    <Example>\n        <Example.Item title=\"as: span\">\n            <Actionable onClick={() => {}} as=\"span\">\n                Trigger\n            </Actionable>\n        </Example.Item>\n        <Example.Item title=\"render, disabled\">\n            <Actionable disabled onClick={() => {}} render={(props) => <section {...props} />}>\n                Trigger\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"},{"name":"stopPropagation","snippet":"const stopPropagation = () => <div onClick={fn()}>\n    <Actionable stopPropagation onClick={() => {}}>Trigger\n                    </Actionable>\n</div>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Actionable className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Actionable>\n    </div>\n);"}],"import":"import { Actionable, Example, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Actionable","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Actionable/Actionable.tsx","actualName":"Actionable","exportName":"default"}},"utility-components-container":{"id":"utility-components-container","name":"Container","path":"./src/components/Container/tests/Container.stories.tsx","stories":[{"name":"padding","snippet":"const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: default\">\n            <Container>\n                <Placeholder />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"padding: 0\">\n            <Container padding={0}>\n                <Placeholder />\n            </Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"width: 200px, height: 200px\">\n            <Container width=\"200px\" height=\"200px\">\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width: 200px, height: 200px, maxHeight: 100px\">\n            <Container width=\"200px\" height=\"200px\" maxHeight=\"100px\">\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width, height: [s] 100px, [m+] 200px\">\n            <Container width={{ s: \"100px\", m: \"200px\" }} height={{ s: \"100px\", m: \"200px\" }}>\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width, height: [s] 100px, [m+] 200px, maxHeight: [s] 50px, [m+]: 100px\">\n            <Container\n                width={{ s: \"100px\", m: \"200px\" }}\n                height={{ s: \"100px\", m: \"200px\" }}\n                maxHeight={{ s: \"50px\", m: \"100px\" }}\n            >\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"flex","snippet":"const flex = () => (\n    <Example>\n        <Example.Item title=\"align: center, justify: center\">\n            <Container align=\"center\" justify=\"center\" height=\"200px\">\n                <Placeholder />\n            </Container>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Container className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </Container>\n    </div>\n);"}],"import":"import { Container, Example, Placeholder } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Container","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Container/Container.tsx","actualName":"Container","exportName":"default"}},"utility-components-dismissible":{"id":"utility-components-dismissible","name":"Dismissible","path":"./src/components/Dismissible/tests/Dismissible.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Dismissible closeAriaLabel=\"Close banner\" onClose={() => {}}>\n                <Placeholder />\n            </Dismissible>\n        </Example.Item>\n        <Example.Item title=\"variant: media\">\n            <View width=\"300px\">\n                <Dismissible variant=\"media\" closeAriaLabel=\"Close banner\" onClose={() => {}}>\n                    <View aspectRatio={16 / 9}>\n                        <Image\n                            height=\"100%\"\n                            src=\"https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)\"\n                        />\n                    </View>\n                </Dismissible>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"align","snippet":"const align = () => (\n    <Example>\n        <Example.Item title=\"align: center\">\n            <Dismissible align=\"center\" closeAriaLabel=\"Close\" onClose={() => {}}>\n                <Placeholder />\n            </Dismissible>\n        </Example.Item>\n\n        <Example.Item title=\"align: center, variant: media\">\n            <Dismissible align=\"center\" closeAriaLabel=\"Close\" variant=\"media\" onClose={() => {}}>\n                <View aspectRatio={16 / 9}>\n                    <Image\n                        height=\"100%\"\n                        src=\"https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)\"\n                    />\n                </View>\n            </Dismissible>\n        </Example.Item>\n    </Example>\n);"},{"name":"hideCloseButton","snippet":"const hideCloseButton = () => (\n    <Example>\n        <Example.Item title=\"hide close button\">\n            <div id=\"root\">\n                <Dismissible hideCloseButton>\n                    <Placeholder />\n                </Dismissible>\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"closeAriaLabel","snippet":"const closeAriaLabel = () => <Dismissible closeAriaLabel=\"Close\" onClose={fn()}>\n    <Placeholder />\n</Dismissible>;"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Dismissible\n            closeAriaLabel=\"Close\"\n            onClose={() => {}}\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n        >\n            <Placeholder />\n        </Dismissible>\n    </div>\n);"}],"import":"import { Dismissible, Example, Image, Placeholder, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Dismissible","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Dismissible/Dismissible.tsx","actualName":"Dismissible","exportName":"default"}},"utility-components-flyout":{"id":"utility-components-flyout","name":"Flyout","path":"./src/components/Flyout/tests/Flyout.stories.tsx","stories":[{"name":"position","snippet":"const position = () => {\n    return (\n        <View gap={4} padding={50} align=\"center\" justify=\"center\" height=\"100vh\" width=\"120%\">\n            <View gap={4} direction=\"row\">\n                <Demo position=\"top-start\" defaultActive />\n                <Demo position=\"top\" />\n                <Demo position=\"top-end\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"end-top\" />\n                <Demo position=\"end\" />\n                <Demo position=\"end-bottom\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"start-top\" />\n                <Demo position=\"start\" />\n                <Demo position=\"start-bottom\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"bottom-start\" />\n                <Demo position=\"bottom\" />\n                <Demo position=\"bottom-end\" />\n            </View>\n        </View>\n    );\n};"},{"name":"defaultActive","snippet":"const defaultActive = () => <Flyout onOpen={fn()} onClose={fn()} defaultActive>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"},{"name":"active","snippet":"const active = () => <Flyout onOpen={fn()} onClose={fn()} active>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"},{"name":"activeFalse","snippet":"const activeFalse = () => <Flyout onOpen={fn()} onClose={fn()} active={false}>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"},{"name":"modes","snippet":"const modes = () => {\n    return (\n        <Example>\n            <Example.Item title=\"triggerType: click\">\n                <View direction=\"row\" gap={4}>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"dialog\" text=\"dialog\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"action-menu\" text=\"action-menu\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"action-bar\" text=\"action-bar\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"content-menu\" text=\"content-menu\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode={false} text=\"false\">\n                        {modeContent}\n                    </Demo>\n                </View>\n            </Example.Item>\n\n            <Example.Item title=\"triggerType: hover\">\n                <View direction=\"row\" gap={4}>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"dialog\" triggerType=\"hover\" text=\"dialog\">\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"action-menu\"\n                        triggerType=\"hover\"\n                        text=\"action-menu\"\n                    >\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"action-bar\"\n                        triggerType=\"hover\"\n                        text=\"action-bar\"\n                    >\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"content-menu\"\n                        triggerType=\"hover\"\n                        text=\"content-menu\"\n                    >\n                        {modeContent}\n                    </Demo>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"positionFallbacks","snippet":"const positionFallbacks = () => {\n    return (\n        <Example>\n            <Example.Item title=\"position: top, default fallbacks\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" />\n                </View>\n            </Example.Item>\n            <Example.Item title=\"position: top, fallbackPositions: [start]\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" fallbackPositions={[\"start\"]} contentHeight={200} defaultActive />\n                </View>\n            </Example.Item>\n            <Example.Item title=\"position: top, fallbackPositions: false\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" fallbackPositions={false} contentHeight={400} />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"fallbackAdjustLayout","snippet":"const fallbackAdjustLayout = () => {\n    return (\n        <Demo\n            contentHeight={false}\n            position=\"bottom-start\"\n            width=\"200px\"\n            fallbackAdjustLayout\n            defaultActive\n        >\n            <div style={{ height: \"600px\" }}>Content</div>\n        </Demo>\n    );\n};"},{"name":"fallbackAdjustLayoutShift","snippet":"const fallbackAdjustLayoutShift = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={10}>\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    attributes={{ ref: containerRef }}\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls containerRef={containerRef} />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <FallbackAdjustLayoutControls />\n            <div style={{ height: \"100vh\", width: \"250%\" }} />\n        </View>\n    );\n};"},{"name":"fallbackAdjustLayoutSize","snippet":"const fallbackAdjustLayoutSize = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={10}>\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls large />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    attributes={{ ref: containerRef }}\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls containerRef={containerRef} large />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <FallbackAdjustLayoutControls large />\n            <div style={{ height: \"100vh\", width: \"250%\" }} />\n        </View>\n    );\n};"},{"name":"originCoordinates","snippet":"const originCoordinates = () => {\n    return (\n        <View gap={4} direction=\"row\">\n            <Demo position=\"bottom-start\" originCoordinates={{ x: 150, y: 150 }} defaultActive />\n        </View>\n    );\n};"},{"name":"width","snippet":"const width = () => (\n    <Example>\n        <Example.Item title=\"width: 300px\">\n            <Demo width=\"300px\" position=\"bottom\" />\n        </Example.Item>\n\n        <Example.Item title=\"width: trigger\">\n            <Demo width=\"trigger\" contentWidth={false} defaultActive />\n        </Example.Item>\n    </Example>\n);"},{"name":"contentGap","snippet":"const contentGap = () => <Demo contentGap={10} defaultActive />;"},{"name":"contentShift","snippet":"const contentShift = () => <Demo contentShift={10} defaultActive />;"},{"name":"disableContentHover","snippet":"const disableContentHover = () => <Demo triggerType=\"hover\" disableContentHover />;"},{"name":"disableCloseOnOutsideClick","snippet":"const disableCloseOnOutsideClick = () => <Demo disableCloseOnOutsideClick />;"},{"name":"disableHideAnimation","snippet":"const disableHideAnimation = () => <Demo disableHideAnimation defaultActive />;"},{"name":"disabled","snippet":"const disabled = () => (\n    <Flyout disabled>\n        <Flyout.Trigger>\n            {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n        </Flyout.Trigger>\n        <Flyout.Content>\n            <Content />\n        </Flyout.Content>\n    </Flyout>\n);"},{"name":"containerRef","snippet":"const containerRef = () => {\n    const portalRef = React.useRef<HTMLDivElement>(null);\n    const portalRef2 = React.useRef<HTMLDivElement>(null);\n    const portalRef3 = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={4} direction=\"row\">\n            <View\n                grow\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef, \"data-testid\": \"container\" }}\n                justify=\"end\"\n                align=\"start\"\n                padding={4}\n            >\n                <Demo containerRef={portalRef} position=\"bottom-start\" defaultActive />\n            </View>\n            <View\n                grow\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef2 }}\n                justify=\"start\"\n                align=\"end\"\n                padding={4}\n            >\n                <Demo containerRef={portalRef2} position=\"top-end\" />\n            </View>\n            <View\n                width={50}\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef3 }}\n                padding={4}\n                overflow=\"auto\"\n            >\n                <View height={120} width=\"120%\" justify=\"center\" align=\"center\">\n                    <Demo containerRef={portalRef3} position=\"bottom-end\" />\n                </View>\n            </View>\n        </View>\n    );\n};"},{"name":"initialFocusRef","snippet":"const initialFocusRef = () => {\n    const initialFocusRef = React.useRef<HTMLInputElement>(null);\n\n    return (\n        <Demo initialFocusRef={initialFocusRef}>\n            <View gap={4}>\n                <Button onClick={() => {}}>Action 1</Button>\n                <TextField name=\"foo\" inputAttributes={{ ref: initialFocusRef }} />\n            </View>\n        </Demo>\n    );\n};"},{"name":"instanceRef","snippet":"const instanceRef = () => {\n    const flyoutRef = React.useRef<FlyoutInstance>(null);\n\n    return (\n        <View direction=\"row\" gap={4}>\n            <Demo\n                instanceRef={flyoutRef}\n                disableCloseOnOutsideClick\n                onOpen={fn()}\n                onClose={fn()} />\n            <Button onClick={() => flyoutRef.current?.open()}>Open</Button>\n            <Button onClick={() => flyoutRef.current?.close()}>Close</Button>\n        </View>\n    );\n};"},{"name":"contentAttributes","snippet":"const contentAttributes = () => {\n    return (\n        <Flyout position=\"bottom\" defaultActive>\n            <Flyout.Trigger>\n                {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n            </Flyout.Trigger>\n            <Flyout.Content attributes={{ \"data-testid\": \"test-id\" }} className=\"test-classname\">\n                <Content />\n            </Flyout.Content>\n        </Flyout>\n    );\n};"},{"name":"testShadowDom","snippet":"const testShadowDom = () => <custom-element-flyout />;"},{"name":"testInsideFixed","snippet":"const testInsideFixed = () => (\n    <React.Fragment>\n        <View\n            position=\"fixed\"\n            insetBottom={2}\n            insetStart={2}\n            insetEnd={2}\n            backgroundColor=\"elevation-overlay\"\n            borderColor=\"neutral-faded\"\n            borderRadius=\"small\"\n            padding={4}\n            zIndex={10}\n            attributes={{ \"data-testid\": \"container\" }}\n            height={20}\n        >\n            <Demo defaultActive position=\"top-start\" />\n        </View>\n        <View paddingTop={18} gap={4}>\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n        </View>\n    </React.Fragment>\n);"},{"name":"testInsideSticky","snippet":"const testInsideSticky = () => (\n    <React.Fragment>\n        <View\n            position=\"sticky\"\n            insetTop={4}\n            insetStart={0}\n            insetEnd={0}\n            backgroundColor=\"elevation-overlay\"\n            borderColor=\"neutral-faded\"\n            borderRadius=\"small\"\n            padding={4}\n            zIndex={10}\n            attributes={{ \"data-testid\": \"container\" }}\n        >\n            <Demo defaultActive />\n        </View>\n        <View gap={4} paddingTop={2}>\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n        </View>\n    </React.Fragment>\n);"},{"name":"testInsideScrollable","snippet":"const testInsideScrollable = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View padding={20}>\n            <View height={30} overflow=\"auto\" backgroundColor=\"neutral-faded\" borderRadius=\"small\">\n                <View height={50} attributes={{ ref: containerRef }} padding={20} paddingBottom={30}>\n                    <Demo position=\"bottom\" />\n                </View>\n            </View>\n        </View>\n    );\n};"},{"name":"testInsideModal","snippet":"const testInsideModal = () => {\n    return (\n        <Modal active position=\"end\">\n            <View gap={4} align=\"start\">\n                <Modal.Title>Title</Modal.Title>\n                <Demo position=\"bottom-start\" />\n                <View height={300} width={25} backgroundColor=\"neutral-faded\" />\n                <Demo position=\"start\" />\n                <View height={300} width={25} backgroundColor=\"neutral-faded\" />\n                <Demo position=\"bottom-start\" />\n            </View>\n        </Modal>\n    );\n};"},{"name":"testDynamicBounds","snippet":"const testDynamicBounds = () => {\n    const [left, setLeft] = React.useState(50);\n    const [top, setTop] = React.useState(50);\n    const [size, setSize] = React.useState<\"medium\" | \"large\">(\"medium\");\n    const flyoutRef = React.useRef<FlyoutInstance>(null);\n\n    React.useEffect(() => {\n        flyoutRef.current?.updatePosition();\n    }, [left, top]);\n\n    return (\n        <View gap={4}>\n            <View direction=\"row\" gap={2}>\n                <Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>\n                <Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>\n                <Button onClick={() => setTop((prev) => prev - 10)}>Up</Button>\n                <Button onClick={() => setTop((prev) => prev + 10)}>Down</Button>\n                <Button\n                    onClick={() => {\n                        setLeft(50);\n                        setTop(50);\n                    }}\n                >\n                    Center\n                </Button>\n                <Button onClick={() => setSize(\"large\")}>Large button</Button>\n                <Button onClick={() => setSize(\"medium\")}>Small button</Button>\n            </View>\n            <View height={100}>\n                <Flyout\n                    position=\"bottom\"\n                    instanceRef={flyoutRef}\n                    disableCloseOnOutsideClick\n                    defaultActive\n                >\n                    <Flyout.Trigger>\n                        {(attributes) => (\n                            <div style={{ position: \"absolute\", left: `${left}%`, top: `${top}%` }}>\n                                <Button color=\"primary\" attributes={attributes} size={size}>\n                                    Open\n                                </Button>\n                            </div>\n                        )}\n                    </Flyout.Trigger>\n                    <Flyout.Content>\n                        <Content />\n                    </Flyout.Content>\n                </Flyout>\n            </View>\n        </View>\n    );\n};"},{"name":"testScopedTheming","snippet":"const testScopedTheming = () => (\n    <View gap={3} align=\"start\">\n        <Button color=\"primary\">Slate button</Button>\n        <Theme name=\"reshaped\">\n            <Flyout triggerType=\"click\" active position=\"bottom-start\">\n                <Flyout.Trigger>\n                    {(attributes) => (\n                        <Button color=\"primary\" attributes={attributes}>\n                            Reshaped button\n                        </Button>\n                    )}\n                </Flyout.Trigger>\n                <Flyout.Content>\n                    <Content>\n                        <View gap={1}>\n                            <View.Item>Portal content, rendered in body</View.Item>\n                            <Button color=\"primary\">Reshaped button</Button>\n                        </View>\n                    </Content>\n                </Flyout.Content>\n            </Flyout>\n        </Theme>\n    </View>\n);"},{"name":"testWithoutFocusable","snippet":"const testWithoutFocusable = () => <Demo position=\"bottom-start\" />;"},{"name":"testChangeSize","snippet":"const testChangeSize = () => {\n    const [position, setPosition] = React.useState<FlyoutProps[\"position\"]>(\"bottom-start\");\n    const [updatedHeight, setUpdatedHeight] = React.useState(false);\n\n    return (\n        <>\n            <View direction=\"row\" gap={4} align=\"center\">\n                <Select\n                    name=\"position\"\n                    options={[\n                        \"bottom-start\",\n                        \"bottom\",\n                        \"bottom-end\",\n                        \"top-start\",\n                        \"top\",\n                        \"top-end\",\n                        \"start-top\",\n                        \"start\",\n                        \"start-bottom\",\n                        \"end-top\",\n                        \"end\",\n                        \"end-bottom\",\n                    ].map((p) => ({ label: p, value: p }))}\n                    onChange={(args) => setPosition(args.value as FlyoutProps[\"position\"])}\n                    value={position}\n                />\n                <Switch name=\"height\" onChange={(args) => setUpdatedHeight(args.checked)}>\n                    Change height\n                </Switch>\n            </View>\n            <div\n                style={{\n                    position: \"fixed\",\n                    top: \"50%\",\n                    left: \"50%\",\n                    transform: \"translate(-50%, -50%)\",\n                }}\n            >\n                <Demo position={position} disableCloseOnOutsideClick active contentHeight={false}>\n                    <View\n                        backgroundColor=\"neutral-faded\"\n                        borderRadius=\"small\"\n                        height={updatedHeight ? 50 : 25}\n                        attributes={{ style: { transition: \"0.2s ease-in-out\" } }}\n                    />\n                </Demo>\n            </div>\n        </>\n    );\n};"}],"import":"import {\n    Button,\n    Example,\n    Flyout,\n    Modal,\n    Reshaped,\n    Select,\n    Switch,\n    TextField,\n    Theme,\n    View,\n} from \"reshaped\";\nimport React from \"react\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Flyout","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Flyout/Flyout.tsx","actualName":"Flyout","exportName":"default"}},"utility-components-formcontrol":{"id":"utility-components-formcontrol","name":"FormControl","path":"./src/components/FormControl/tests/FormControl.stories.tsx","stories":[{"name":"status","snippet":"const status = () => (\n    <Example>\n        <Example.Item title=\"status: default\">\n            <FormControl>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"status: error\">\n            <FormControl hasError>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: medium\">\n            <FormControl size=\"medium\">\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <FormControl size=\"large\">\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" size=\"large\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"disabled","snippet":"const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <FormControl disabled>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"required","snippet":"const required = () => (\n    <Example>\n        <Example.Item title=\"required\">\n            <FormControl required>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"composition","snippet":"const composition = () => (\n    <Example>\n        <Example.Item title=\"horizontal\">\n            <FormControl>\n                <View direction=\"row\" gap={10} align=\"center\">\n                    <View width=\"100px\">\n                        <FormControl.Label>Label</FormControl.Label>\n                    </View>\n                    <View.Item grow>\n                        <TextField name=\"name\" placeholder=\"Enter value\" />\n                    </View.Item>\n                </View>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <FormControl id=\"test-id\" hasError>\n        <FormControl.Label>Label</FormControl.Label>\n        <TextField name=\"name\" />\n        <FormControl.Helper>Caption</FormControl.Helper>\n        <FormControl.Error>Error</FormControl.Error>\n    </FormControl>\n);"},{"name":"group","snippet":"const group = () => (\n    <FormControl group>\n        <FormControl.Label>Label</FormControl.Label>\n        <RadioGroup name=\"name\">\n            <View gap={2}>\n                <Radio value=\"1\">One</Radio>\n                <Radio value=\"2\">Two</Radio>\n            </View>\n        </RadioGroup>\n    </FormControl>\n);"}],"import":"import { Example, FormControl, Radio, RadioGroup, TextField, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"FormControl","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/FormControl/FormControl.tsx","actualName":"FormControl","exportName":"default"}},"utility-components-grid":{"id":"utility-components-grid","name":"Grid","path":"./src/components/Grid/tests/Grid.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"gap: 2\">\n            <Grid gap={2} columns={2}>\n                {[1, 2].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"columnGap: 2, rowGap: 4\">\n            <Grid columnGap={2} rowGap={4} columns={2}>\n                {[1, 2, 3, 4].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"align: center\">\n            <Grid gap={2} columns={2} align=\"center\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={8}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"justify: center\">\n            <Grid gap={2} columns=\"200px 200px\" justify=\"center\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"maxWidth: 400px\">\n            <Grid gap={2} columns=\"200px 200px\" maxWidth=\"400px\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"width: 400px, height: 200px\">\n            <Grid gap={2} columns={2} width=\"400px\" height=\"200px\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"layout","snippet":"const layout = () => (\n    <Example>\n        <Example.Item title=\"simple: 2 rows, 3 columns\">\n            <Grid gap={4} columns={3} rows={2}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"columns template, 1fr 2fr 1fr\">\n            <Grid gap={4} columns=\"1fr 2fr 1fr\" rows={2}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"rows template, 1fr 2fr\">\n            <Grid gap={4} columns={3} rows=\"1fr 2fr\">\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"responsive\">\n            <Grid gap={4} columns={{ s: 3, m: \"1fr 2fr 1fr\" }} rows={{ s: 2, m: \"1fr 2fr\" }}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"itemLayout","snippet":"const itemLayout = () => (\n    <Example>\n        <Example.Item title=\"column, start 1, end 3\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item colStart={1} colEnd={3}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"column, start 1, span 2\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item colStart={1} colSpan={2}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"row, start 1, end 3\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowEnd={3}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"row, start 1, span 2\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowSpan={2}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"responsive\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"areas","snippet":"const areas = () => (\n    <Example>\n        <Example.Item title=\"simple: 2 rows, 3 columns\">\n            <Grid gap={4} rows={2} areas={[\"a .\", \"a b\"]}>\n                {[\"a\", \"b\"].map((area) => (\n                    <Grid.Item area={area} key={area}>\n                        <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                            {area}\n                        </View>\n                    </Grid.Item>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"auto","snippet":"const auto = () => (\n    <Example>\n        <Example.Item title=\"auto flow: column\">\n            <Grid gap={4} autoFlow=\"column\" rows={2} columns={2}>\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"auto rows\">\n            <Grid gap={4} autoRows=\"100px\" columns={2}>\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"auto columns\">\n            <Grid gap={4} autoColumns=\"100px\" autoFlow=\"column\">\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"},{"name":"as","snippet":"const as = () => (\n    <Grid as=\"ul\">\n        <Grid.Item as=\"li\">Content</Grid.Item>\n    </Grid>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Grid className=\"test-class\" attributes={{ id: \"test-id\" }}>\n            <Grid.Item className=\"test-item-class\" attributes={{ id: \"test-item-id\" }}>\n                Content\n            </Grid.Item>\n        </Grid>\n    </div>\n);"}],"import":"import { Example, Grid, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Grid","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Grid/Grid.tsx","actualName":"Grid","exportName":"default"}},"utility-components-hidden":{"id":"utility-components-hidden","name":"Hidden","path":"./src/components/Hidden/tests/Hidden.stories.tsx","stories":[{"name":"visibility","snippet":"const visibility = () => (\n    <Example>\n        <Example.Item title=\"hide: always\">\n            <Hidden hide={true}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on s\">\n            <Hidden hide={{ s: false, m: true }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on l/xl\">\n            <Hidden hide={{ s: true, l: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on m/l/xl\">\n            <Hidden hide={{ s: true, m: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on m\">\n            <Hidden hide={{ s: true, m: false, l: true }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on s/xl\">\n            <Hidden hide={{ s: false, m: true, xl: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"hide: always, visibility\">\n            <Hidden hide visibility>\n                Content\n            </Hidden>\n        </Example.Item>\n    </Example>\n);"},{"name":"as","snippet":"const as = () => <Hidden as=\"span\">Content</Hidden>;"}],"import":"import { Example, Hidden } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Hidden","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Hidden/Hidden.tsx","actualName":"Hidden","exportName":"default"}},"utility-components-hiddenvisually":{"id":"utility-components-hiddenvisually","name":"HiddenVisually","path":"./src/components/HiddenVisually/tests/HiddenVisually.stories.tsx","stories":[{"name":"visibility","snippet":"const visibility = () => (\n    <Example>\n        <Example.Item title=\"pronounced by screen readers\">\n            <HiddenVisually>Screen-reader only</HiddenVisually>\n        </Example.Item>\n    </Example>\n);"},{"name":"children","snippet":"const children = () => <HiddenVisually>Content</HiddenVisually>;"}],"import":"import { Example, HiddenVisually } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"HiddenVisually","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/HiddenVisually/HiddenVisually.tsx","actualName":"HiddenVisually","exportName":"default"}},"utility-components-icon":{"id":"utility-components-icon","name":"Icon","path":"./src/components/Icon/tests/Icon.stories.tsx","stories":[{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"size: 4\">\n            <Icon svg={IconZap} size={4} />\n        </Example.Item>\n        <Example.Item title=\"size: 8\">\n            <Icon svg={IconZap} size={8} />\n        </Example.Item>\n        <Example.Item title=\"size: 100%\">\n            <View width={25} height={25}>\n                <Icon svg={IconZap} size=\"100%\" />\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive size\", \"[s] 5\", \"[m]: 10\"]}>\n            <Icon svg={IconZap} size={{ s: 5, m: 10 }} />\n        </Example.Item>\n        <Example.Item title=\"size: inherit from font\">\n            <Text variant=\"title-6\">\n                <View direction=\"row\" align=\"center\" gap={2}>\n                    <Icon svg={IconZap} />\n                    <View.Item>Reshaped</View.Item>\n                </View>\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <Icon svg={IconZap} color=\"neutral\" />\n        </Example.Item>\n        <Example.Item title=\"color: neutral-faded\">\n            <Icon svg={IconZap} color=\"neutral-faded\" />\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <Icon svg={IconZap} color=\"primary\" />\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Icon svg={IconZap} color=\"critical\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Icon svg={IconZap} color=\"positive\" />\n        </Example.Item>\n        <Example.Item title=\"color: disabled\">\n            <Icon svg={IconZap} color=\"disabled\" />\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <div style={{ color: \"tomato\" }}>\n                <Icon svg={IconZap} />\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"autoWidth","snippet":"const autoWidth = () => (\n    <Example>\n        <Example.Item title=\"square boundaries\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={IconMic} size={10} />\n            </div>\n        </Example.Item>\n        <Example.Item title=\"auto width boundaries\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={IconMic} size={10} autoWidth />\n            </div>\n        </Example.Item>\n        <Example.Item title=\"blank\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={null} size={10} />\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Icon svg={IconZap} className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"},{"name":"render","snippet":"const render = () => (\n    <div data-testid=\"root\">\n        <Icon svg={IconZap} />\n    </div>\n);"}],"import":"import { Example, Icon, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Icon","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Icon/Icon.tsx","actualName":"Icon","exportName":"default"}},"utility-components-image":{"id":"utility-components-image","name":"Image","path":"./src/components/Image/tests/Image.stories.tsx","stories":[{"name":"src","snippet":"const src = () => (\n    <Example>\n        <Example.Item title=\"src, alt\">\n            <Image src={imgUrl} alt=\"Image alt\" />\n        </Example.Item>\n\n        <Example.Item title=\"src\">\n            <Image src={imgUrl} />\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"width: 200px\">\n            <Image src={imgUrl} width=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"height: 200px\">\n            <Image src={imgUrl} height=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"maxWidth: 200px\">\n            <Image src={imgUrl} maxWidth=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"aspectRatio: 1/1\">\n            <Image src={imgUrl} aspectRatio={1 / 1} width=\"300px\" />\n        </Example.Item>\n        <Example.Item title={[\"responsive width\", \"[s] 200px\", \"[m+] 300px\"]}>\n            <Image src={imgUrl} width={{ s: \"200px\", m: \"300px\" }} />\n        </Example.Item>\n    </Example>\n);"},{"name":"radius","snippet":"const radius = () => (\n    <Example>\n        <Example.Item title=\"radius: small\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"small\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"radius: medium\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"medium\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"radius: large\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"displayMode","snippet":"const displayMode = () => (\n    <Example>\n        <Example.Item title=\"mode: cover\">\n            <Image src={imgUrl} height=\"200px\" width=\"100%\" displayMode=\"cover\" />\n        </Example.Item>\n        <Example.Item title=\"mode: contain\">\n            <Image src={imgUrl} height=\"200px\" width=\"100%\" displayMode=\"contain\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"onLoad","snippet":"const onLoad = () => <Image src={imgUrl} alt=\"photo\" onLoad={fn()} />;"},{"name":"onError","snippet":"const onError = () => <Image src=\"/invalid.png\" alt=\"photo\" onError={fn()} />;"},{"name":"fallback","snippet":"const fallback = () => (\n    <Example>\n        <Example.Item title=\"fallback, background, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"fallback, image, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback={imgUrl} />\n                </View>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"fallback, icon, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback={<Icon svg={IconZap} size={10} />} />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"fallback, icon, no url\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image fallback={<Icon svg={IconZap} size={10} />} />\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"renderImage","snippet":"const renderImage = () => (\n    <Example>\n        <Example.Item title=\"renderImage\">\n            <Image\n                src={imgUrl}\n                alt=\"Amsterdam canal\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image\" />}\n            />\n        </Example.Item>\n        <Example.Item title=\"renderImage, fallback\">\n            <Image\n                src=\"error\"\n                fallback={imgUrl}\n                alt=\"Amsterdam canal 2\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image-fallback\" />}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"imageAttributes","snippet":"const imageAttributes = () => (\n    <div data-testid=\"root\">\n        <Image\n            src={imgUrl}\n            alt=\"photo\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            imageAttributes={{ \"data-testid\": \"test-img-id\" }}\n        />\n    </div>\n);"},{"name":"ratio","snippet":"const ratio = () => (\n    <Example>\n        <Example.Item title=\"ratio: 16/9\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"ratio: 16/9, displayMode: contain\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} displayMode=\"contain\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"}],"import":"import { Example, Icon, Image, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Image","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Image/Image.tsx","actualName":"Image","exportName":"default"}},"utility-components-overlay":{"id":"utility-components-overlay","name":"Overlay","path":"./src/components/Overlay/tests/Overlay.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate}>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"transparent","snippet":"const transparent = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} transparent>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"blurred","snippet":"const blurred = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} blurred>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"renderProps","snippet":"const renderProps = () => (\n    <Overlay active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        {(args) => (args.active ? \"Opened\" : \"Closed\")}\n    </Overlay>\n);"},{"name":"handlers","snippet":"const handlers = () => {\n    const overlayToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>\n            <Overlay\n                active={overlayToggle.active}\n                onClose={(closeArgs) => {\n                    overlayToggle.deactivate();\n                    args.handleClose(closeArgs);\n                }}\n                onOpen={fn()}\n                onAfterOpen={fn()}\n                onAfterClose={fn()}>Content\n                                </Overlay>\n        </>\n    );\n};"},{"name":"disableCloseOnClick","snippet":"const disableCloseOnClick = (args) => (\n    <Overlay\n        active\n        disableCloseOnClick\n        onClose={(closeArgs) => {\n            args.handleClose(closeArgs);\n        }}\n    >\n        Content\n    </Overlay>\n);"},{"name":"containerRef","snippet":"const containerRef = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <>\n            <div ref={containerRef} data-testid=\"test-id\" style={{ height: 200 }} />\n            <Overlay active containerRef={containerRef}>\n                Content\n            </Overlay>\n        </>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <Overlay active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        Content\n    </Overlay>\n);"}],"import":"import { Button, Example, Overlay } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Overlay","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Overlay/Overlay.tsx","actualName":"Overlay","exportName":"default"}},"utility-components-reshaped":{"id":"utility-components-reshaped","name":"Reshaped","path":"./src/components/Reshaped/tests/Reshaped.stories.tsx","stories":[{"name":"rtl","snippet":"const rtl = () => (\n    <Reshaped defaultRTL theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"},{"name":"controlledMode","snippet":"const controlledMode = () => {\n    const [mode, setMode] = useState<G.ColorMode>(\"dark\");\n\n    return (\n        <Reshaped theme=\"reshaped\" colorMode={mode}>\n            <Button\n                onClick={() => {\n                    setMode(mode === \"dark\" ? \"light\" : \"dark\");\n                }}\n            >\n                Toggle color mode\n            </Button>\n        </Reshaped>\n    );\n};"},{"name":"lightMode","snippet":"const lightMode = () => <Reshaped theme=\"reshaped\">Hello</Reshaped>;"},{"name":"darkMode","snippet":"const darkMode = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"},{"name":"scoped","snippet":"const scoped = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\" scoped>\n        Hello\n    </Reshaped>\n);"},{"name":"testScoped","snippet":"const testScoped = () => (\n    <Reshaped theme=\"reshaped\">\n        <Reshaped theme=\"slate\" scoped>\n            <ScopedComponent />\n        </Reshaped>\n    </Reshaped>\n);"},{"name":"keyboardMode","snippet":"const keyboardMode = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"}],"import":"import { Button, Reshaped } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Reshaped","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Reshaped/Reshaped.tsx","actualName":"Reshaped","exportName":"default"}},"utility-components-scrollarea":{"id":"utility-components-scrollarea","name":"ScrollArea","path":"./src/components/ScrollArea/tests/ScrollArea.stories.tsx","stories":[{"name":"base","snippet":"const base = () => (\n    <Example>\n        <Example.Item title=\"vertical scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"horizontal scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\" height=\"100px\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"horizontal and vertical scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"},{"name":"scrollbarDisplay","snippet":"const scrollbarDisplay = () => (\n    <Example>\n        <Example.Item title=\"scrollbarDisplay: hover\">\n            <ScrollArea height=\"100px\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"scrollbarDisplay: hidden\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"hidden\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"scrollbarDisplay: visible\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"},{"name":"height","snippet":"const height = () => (\n    <Example>\n        <Example.Item title=\"height: 80px\">\n            <ScrollArea height=\"80px\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"responsive height: s 80px, m: 120px\">\n            <ScrollArea height={{ s: \"80px\", m: \"120px\" }}>\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"maxHeight: 80px\">\n            <ScrollArea maxHeight=\"80px\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"responsive max height: s 80px, m: 200px\">\n            <ScrollArea maxHeight={{ s: \"80px\", m: \"200px\" }}>\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"},{"name":"onScroll","snippet":"const onScroll = () => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={4}>\n            <View.Item>\n                <Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>\n            </View.Item>\n            <ScrollArea height=\"100px\" ref={ref} scrollbarDisplay=\"visible\" onScroll={fn()}>\n                <View backgroundColor=\"neutral-faded\" padding={4} width=\"1000px\" height=\"200px\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                                            has been the industry's standard dummy text ever since the 1500s, when an unknown\n                                            printer took a galley of type and scrambled it to make a type specimen book. It has\n                                            survived not only five centuries, but also the leap into electronic typesetting,\n                                            remaining essentially unchanged. It was popularised in the 1960s with the release of\n                                            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                                            publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                                        </View>\n            </ScrollArea>\n        </View>\n    );\n};"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <ScrollArea className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </ScrollArea>\n    </div>\n);"},{"name":"testNested","snippet":"const testNested = () => (\n    <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n        <View padding={4} paddingInline={16}>\n            <ScrollArea height=\"200px\" scrollbarDisplay=\"visible\">\n                {Array(20)\n                    .fill(\"\")\n                    .map((_, index) => {\n                        return <div key={index}>Item {index + 1}</div>;\n                    })}\n            </ScrollArea>\n        </View>\n    </ScrollArea>\n);"},{"name":"testDynamicHeight","snippet":"const testDynamicHeight = () => {\n    const [count, setCount] = React.useState(10);\n\n    return (\n        <View gap={4}>\n            <View.Item>\n                <Button onClick={() => setCount((prev) => prev + 10)}>Add more items</Button>\n            </View.Item>\n\n            <ScrollArea height=\"200px\" scrollbarDisplay=\"visible\">\n                <View gap={2}>\n                    {new Array(count).fill(\"\").map((_, i) => (\n                        <View.Item key={i}>Item {i + 1}</View.Item>\n                    ))}\n                </View>\n            </ScrollArea>\n        </View>\n    );\n};"}],"import":"import { Button, Example, ScrollArea, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"ScrollArea","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/ScrollArea/ScrollArea.tsx","actualName":"ScrollArea","exportName":"default"}},"utility-components-text":{"id":"utility-components-text","name":"Text","path":"./src/components/Text/tests/Text.stories.tsx","stories":[{"name":"variant","snippet":"const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: title-1\">\n            <Text variant=\"title-1\">Title 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-2\">\n            <Text variant=\"title-2\">Title 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-3\">\n            <Text variant=\"title-3\">Title 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-4\">\n            <Text variant=\"title-4\">Title 4</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-5\">\n            <Text variant=\"title-5\">Title 5</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-6\">\n            <Text variant=\"title-6\">Title 6</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-1\">\n            <Text variant=\"featured-1\">Featured 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-2\">\n            <Text variant=\"featured-2\">Featured 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-3\">\n            <Text variant=\"featured-3\">Featured 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-1\">\n            <Text variant=\"body-1\">Body 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-2\">\n            <Text variant=\"body-2\">Body 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-3\">\n            <Text variant=\"body-3\">Body 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: caption-1\">\n            <Text variant=\"caption-1\">Caption 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: caption-2\">\n            <Text variant=\"caption-2\">Caption 2</Text>\n        </Example.Item>\n        <Example.Item title={[\"responsive variant\", \"[s] body-3\", \"[m+] title-4\"]}>\n            <Text variant={{ s: \"body-3\", m: \"title-4\" }}>Responsive</Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"weight","snippet":"const weight = () => (\n    <Example>\n        <Example.Item title=\"weight: regular\">\n            <Text weight=\"regular\">Regular</Text>\n        </Example.Item>\n        <Example.Item title=\"weight: medium\">\n            <Text weight=\"medium\">Medium</Text>\n        </Example.Item>\n        <Example.Item title=\"weight: bold\">\n            <Text weight=\"bold\">Bold</Text>\n        </Example.Item>\n        <Example.Item title={[\"responsive\", \"[s] weight: regular\", \"[m+] bold\"]}>\n            <Text weight={{ s: \"regular\", m: \"bold\" }}>Responsive</Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"color","snippet":"const color = () => (\n    <Example>\n        <Example.Item title=\"color: inherit\">\n            <Text>Neutral</Text>\n        </Example.Item>\n        <Example.Item title=\"color: neutral-faded\">\n            <Text color=\"neutral-faded\">Faded</Text>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Text color=\"positive\">Positive</Text>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <Text color=\"warning\">Warning</Text>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Text color=\"critical\">Critical</Text>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <Text color=\"primary\">Primary</Text>\n        </Example.Item>\n        <Example.Item title=\"color: disabled\">\n            <Text color=\"disabled\" attributes={{ \"aria-disabled\": true }}>\n                Disabled\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"decoration","snippet":"const decoration = () => (\n    <Example>\n        <Example.Item title=\"decoration: line-through\">\n            <Text decoration=\"line-through\">Line through</Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"wrap","snippet":"const wrap = () => (\n    <Example>\n        <Example.Item title=\"wrap: balance\">\n            <Text wrap=\"balance\" variant=\"title-3\">\n                The design system you want to build\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"mono","snippet":"const mono = () => (\n    <Example>\n        <Example.Item title=\"monospace\">\n            <Text monospace>Content</Text>\n        </Example.Item>\n        <Example.Item title=\"monospace, variant, weight\">\n            <Text monospace variant=\"title-1\" weight=\"regular\">\n                Content\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"maxLines","snippet":"const maxLines = () => (\n    <Example>\n        <Example.Item title=\"maxLines: 2\">\n            <Text maxLines={2}>\n                There are many variations of passages of Lorem Ipsum available, but the majority have\n                suffered alteration in some form, by injected humour, or randomised words which don't look\n                even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be\n                sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum\n                generators on the Internet tend to repeat predefined chunks as necessary, making this the\n                first true generator on the Internet. It uses a dictionary of over 200 Latin words,\n                combined with a handful of model sentence structures, to generate Lorem Ipsum which looks\n                reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected\n                humour, or non-characteristic words etc.\n            </Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"align","snippet":"const align = () => (\n    <Example>\n        <Example.Item title=\"align: start\">\n            <Text align=\"start\">Text content</Text>\n        </Example.Item>\n        <Example.Item title=\"align: center\">\n            <Text align=\"center\">Text content</Text>\n        </Example.Item>\n        <Example.Item title=\"align: end\">\n            <Text align=\"end\">Text content</Text>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive alignment\", \"[s]: center\", \"[m+] start\"]}>\n            <Text align={{ s: \"center\", m: \"start\" }}>Text content</Text>\n        </Example.Item>\n    </Example>\n);"},{"name":"asProp","snippet":"const asProp = () => (\n    <>\n        <Text as=\"h1\">Content</Text>\n        <Text variant=\"title-3\">Content</Text>\n        <Text variant={{ s: \"title-3\", m: \"title-4\" }}>Content</Text>\n    </>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <Text className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Text>\n    </div>\n);"}],"import":"import { Example, Text } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Text","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Text/Text.tsx","actualName":"Text","exportName":"default"}},"utility-components-theme":{"id":"utility-components-theme","name":"Theme","path":"./src/components/Theme/tests/Theme.stories.tsx","stories":[{"name":"scoped","snippet":"const scoped = () => (\n    <Example>\n        <Example.Item title=\"scoped, single\">\n            <Theme name=\"reshaped\">\n                <Card attributes={{ \"data-testid\": \"test-id\" }}>\n                    <Button color=\"primary\">Action</Button>\n                </Card>\n            </Theme>\n        </Example.Item>\n\n        <Example.Item title=\"scoped, multiple\">\n            <Theme name={[\"reshaped\", \"figma\"]}>\n                <Card attributes={{ \"data-testid\": \"test-id-multi\" }}>\n                    <View direction=\"row\" gap={4}>\n                        <Button color=\"primary\">Action</Button>\n\n                        <Popover>\n                            <Popover.Trigger>\n                                {(attributes) => <Button attributes={attributes}>Popover</Button>}\n                            </Popover.Trigger>\n                            <Popover.Content>Content</Popover.Content>\n                        </Popover>\n                    </View>\n                </Card>\n            </Theme>\n        </Example.Item>\n    </Example>\n);"},{"name":"light","snippet":"const light = () => (\n    <Theme name=\"reshaped\" colorMode=\"light\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"},{"name":"dark","snippet":"const dark = () => (\n    <Theme name=\"reshaped\" colorMode=\"dark\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"},{"name":"inherited","snippet":"const inherited = () => (\n    <Theme name=\"reshaped\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"},{"name":"inverted","snippet":"const inverted = () => (\n    <Theme name=\"reshaped\" colorMode=\"inverted\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"},{"name":"controlled","snippet":"const controlled = () => {\n    const Internal = () => {\n        const { setTheme, theme } = useTheme();\n\n        return (\n            <Button color=\"primary\" onClick={() => setTheme(\"slate\")}>\n                Switch to slate\n            </Button>\n        );\n    };\n\n    return (\n        <div data-testid=\"root\">\n            <Theme name=\"reshaped\">\n                <Internal />\n            </Theme>\n        </div>\n    );\n};"},{"name":"uncontrolled","snippet":"const uncontrolled = () => {\n    const Internal = () => {\n        const { setTheme } = useTheme();\n\n        return (\n            <Button color=\"primary\" onClick={() => setTheme(\"slate\")}>\n                Switch to slate\n            </Button>\n        );\n    };\n\n    return (\n        <div data-testid=\"root\">\n            <Theme defaultName=\"reshaped\">\n                <Internal />\n            </Theme>\n        </div>\n    );\n};"},{"name":"disabledTransition","snippet":"const disabledTransition = () => {\n    const { invertColorMode } = useTheme();\n\n    return (\n        <Example>\n            <Example.Item title=\"should have no transitions while switching color mode\">\n                <View gap={3}>\n                    <Button onClick={invertColorMode}>Invert mode</Button>\n\n                    <MenuItem selected>Test transition</MenuItem>\n\n                    <Card>Default card</Card>\n\n                    <Theme colorMode=\"inverted\">\n                        <Card>Inverted card</Card>\n                    </Theme>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import { Button, Card, Example, MenuItem, Popover, Theme, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Theme","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Theme/Theme.tsx","actualName":"Theme","exportName":"default"}},"utility-components-view":{"id":"utility-components-view","name":"View","path":"./src/components/View/tests/View.stories.tsx","stories":[{"name":"padding","snippet":"const padding = () => (\n    <Example title=\"Border is used to highlight the padding value\">\n        <Example.Item title=\"padding: 4\">\n            <View padding={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <View padding={6} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: 0\">\n            <View padding={0} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: vertical 2, horizontal 4\">\n            <View paddingInline={4} paddingBlock={2} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingTop: 4\">\n            <View paddingTop={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingBottom: 4\">\n            <View paddingBottom={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingStart: 4\">\n            <View paddingStart={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingEnd: 4\">\n            <View paddingEnd={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive padding:\",\n                \"[s] vertical 2, horizontal 4\",\n                \"[m+] vertical 4, horizontal 8\",\n            ]}\n        >\n            <View paddingInline={{ s: 4, m: 8 }} paddingBlock={{ s: 2, m: 4 }} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"responsive padding:\", \"[s] top 2, bottom 4\", \"[m+] top 4, bottom 0, start: 8\"]}\n        >\n            <View\n                paddingTop={{ s: 2, m: 4 }}\n                paddingBottom={{ s: 4, m: 0 }}\n                paddingStart={{ s: 0, m: 8 }}\n                borderColor=\"neutral\"\n            >\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"nested padding, child view should have no horizontal padding\">\n            <View paddingStart={4} borderColor=\"neutral\">\n                <View borderColor=\"primary\" paddingBlock={4}>\n                    <Placeholder />\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"direction","snippet":"const direction = () => (\n    <Example title=\"Item 1 is another component, Item 2 is View.Item, Item 3 is text\">\n        <Example.Item title=\"direction: column as default\">\n            <View gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <View gap={3} direction=\"column\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column-reverse\">\n            <View gap={3} direction=\"column-reverse\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row\">\n            <View gap={3} direction=\"row\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row-reverse\">\n            <View gap={3} direction=\"row-reverse\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"responsive direction\", \"[s] column-reverse\", \"[m] row-reverse\", \"[l+] row\"]}\n        >\n            <View direction={{ s: \"column-reverse\", m: \"row-reverse\", l: \"row\" }} gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"gap","snippet":"const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 4, direction: row\">\n            <View direction=\"row\" gap={4} divided>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n                <Placeholder>Item 3</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 0, direction: row\">\n            <View direction=\"row\" gap={0}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap, direction: row\", \"[s] 4\", \"[m+] 8\"]}>\n            <View direction=\"row\" gap={{ s: 4, m: 8 }}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 4, direction: column\">\n            <View gap={4}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 0, direction: column\">\n            <View gap={0}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap, direction: column\", \"[s] 4\", \"[m+] 8\"]}>\n            <View gap={{ s: 4, m: 8 }}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"divided","snippet":"const divided = () => (\n    <Example>\n        <Example.Item title=\"direction: row\">\n            <View divided direction=\"row\" gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <View divided gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive divided\", \"[s] direction: row\", \"[m+] direction: column\"]}>\n            <View divided direction={{ s: \"row\", m: \"column\" }} gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row, columns\">\n            <View divided gap={3} direction=\"row\">\n                <View.Item columns={2}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={8}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={2}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"with React.Fragment\">\n            <View direction=\"row\" gap={4} divided>\n                <Placeholder>Item 1</Placeholder>\n                <>\n                    <Placeholder>Item 2</Placeholder>\n                    <Placeholder>Item 3</Placeholder>\n                </>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"bleed","snippet":"const bleed = () => (\n    <Example title=\"Removes side borders and border radius when applied\">\n        <Example.Item title=\"bleed: 4\">\n            <View bleed={4} padding={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive bleed\", \"[s] 4\", \"[m+] 0\"]}>\n            <View bleed={{ s: 4, m: 0 }} padding={4} borderRadius=\"small\" borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"wrap","snippet":"const wrap = () => (\n    <Example>\n        <Example.Item title=\"wrap: false\">\n            <View direction=\"row\" wrap={false} gap={3}>\n                <Placeholder w={600} h={100} />\n                <Placeholder w={600} h={100} />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"align","snippet":"const align = () => (\n    <Example>\n        <Example.Item title=\"align: start, direction: row\">\n            <View align=\"start\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: center, direction: row\">\n            <View align=\"center\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: end, direction: row\">\n            <View align=\"end\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"align: stretch, direction: row\",\n                \"2nd item is stretched based on the 1st item height\",\n            ]}\n        >\n            <View align=\"stretch\" direction=\"row\" gap={3}>\n                <Placeholder h={100} />\n                <Placeholder h=\"auto\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: baseline, direction: row\">\n            <View align=\"baseline\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Text variant=\"title-6\">Content</Text>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"align: start, direction: column\">\n            <View align=\"start\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: center, direction: column\">\n            <View align=\"center\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: end, direction: row\">\n            <View align=\"end\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"align: stretch, direction: column\",\n                \"1st item uses its own width, 2nd item is stretched to full width\",\n            ]}\n        >\n            <View align=\"stretch\" direction=\"column\" gap={3}>\n                <Placeholder w={100} />\n                <Placeholder w=\"auto\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"justify","snippet":"const justify = () => (\n    <Example>\n        <Example.Item title=\"justify: start, direction: row\">\n            <View justify=\"start\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: center, direction: row\">\n            <View justify=\"center\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: end, direction: row\">\n            <View justify=\"end\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: space-between, direction: row\">\n            <View justify=\"space-between\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"justify: start, direction: column, height: 200px\">\n            <View height=\"200px\" justify=\"start\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: center, direction: column, height: 200px\">\n            <View height=\"200px\" justify=\"center\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: end, direction: column, height: 200px\">\n            <View justify=\"end\" height=\"200px\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: space-between, direction: column, height: 200px\">\n            <View justify=\"space-between\" height=\"200px\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"textAlign","snippet":"const textAlign = () => (\n    <Example>\n        <Example.Item title=\"textAlign: start\">\n            <View textAlign=\"start\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: center\">\n            <View textAlign=\"center\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: end\">\n            <View textAlign=\"end\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: [s] start, [m+] end\">\n            <View textAlign={{ s: \"start\", m: \"end\" }}>Content</View>\n        </Example.Item>\n    </Example>\n);"},{"name":"size","snippet":"const size = () => (\n    <Example>\n        <Example.Item title=\"height: 100px, width: 100px\">\n            <View backgroundColor=\"neutral-faded\" height=\"100px\" width=\"100px\" />\n        </Example.Item>\n        <Example.Item title=\"height: 25, width: 25\">\n            <View backgroundColor=\"neutral-faded\" height={25} width={25} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive height and width\",\n                \"[s] height: 25, width: 25\",\n                \"[m+] height: 200px, width: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                height={{ s: 25, m: \"200px\" }}\n                width={{ s: 25, m: \"200px\" }}\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"ratio","snippet":"const ratio = () => (\n    <Example>\n        <Example.Item title=\"ratio: 16 / 9\">\n            <View backgroundColor=\"neutral-faded\" aspectRatio={16 / 9} width=\"200px\" />\n        </Example.Item>\n        <Example.Item title={[\"responsive ratio\", \"[s] 1/1\", \"[m+] 16/9\"]}>\n            <View backgroundColor=\"neutral-faded\" aspectRatio={{ s: 1, m: 16 / 9 }} width=\"200px\" />\n        </Example.Item>\n    </Example>\n);"},{"name":"maxSize","snippet":"const maxSize = () => (\n    <Example>\n        <Example.Item title=\"maxHeight: 150px, maxWidth: 150px, height: 300px\">\n            <View backgroundColor=\"neutral-faded\" maxHeight=\"150px\" maxWidth=\"150px\" height=\"300px\" />\n        </Example.Item>\n        <Example.Item title=\"maxHeight: 25, maxWidth: 25, height: 50\">\n            <View backgroundColor=\"neutral-faded\" maxHeight={25} maxWidth={25} height={50} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive maxHeight and maxWidth, height: 300\",\n                \"[s] maxHeight: 25, maxWidth: 25\",\n                \"[m+] maxHeight: 200px, maxWidth: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                maxHeight={{ s: 25, m: \"200px\" }}\n                maxWidth={{ s: 25, m: \"200px\" }}\n                height=\"300px\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"minSize","snippet":"const minSize = () => (\n    <Example>\n        <Example.Item title=\"minHeight: 150px, minWidth: 150px, height: 50px, width: 50px\">\n            <View\n                backgroundColor=\"neutral-faded\"\n                minHeight=\"150px\"\n                minWidth=\"150px\"\n                height=\"50px\"\n                width=\"50px\"\n            />\n        </Example.Item>\n        <Example.Item title=\"minHeight: 25, minWidth: 25, height: 5, width: 5\">\n            <View backgroundColor=\"neutral-faded\" minHeight={25} minWidth={25} height={5} width={5} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive minHeight and minWidth, height: 50px, width: 50px\",\n                \"[s] minHeight: 25, minWidth: 25\",\n                \"[m+] minHeight: 200px, minWidth: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                minHeight={{ s: 25, m: \"200px\" }}\n                minWidth={{ s: 25, m: \"200px\" }}\n                height=\"50px\"\n                width=\"50px\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"background","snippet":"const background = () => (\n    <Example title=\"border is used to highlight the backround value when it's similar to the page background, text color changes based on the background\">\n        <Example.Item title=\"bg: page\">\n            <View backgroundColor=\"page\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: page-faded\">\n            <View backgroundColor=\"page-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: disabled\">\n            <View backgroundColor=\"disabled\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: disabled-faded\">\n            <View backgroundColor=\"disabled-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-base\">\n            <View backgroundColor=\"elevation-base\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-raised\">\n            <View backgroundColor=\"elevation-raised\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-overlay\">\n            <View backgroundColor=\"elevation-overlay\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: neutral\">\n            <View backgroundColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: neutral-faded\">\n            <View backgroundColor=\"neutral-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: primary\">\n            <View backgroundColor=\"primary\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: primary-faded\">\n            <View backgroundColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: critical\">\n            <View backgroundColor=\"critical\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: critical-faded\">\n            <View backgroundColor=\"critical-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: warning\">\n            <View backgroundColor=\"warning\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: warning-faded\">\n            <View backgroundColor=\"warning-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: positive\">\n            <View backgroundColor=\"positive\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: positive-faded\">\n            <View backgroundColor=\"positive-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"borderColor","snippet":"const borderColor = () => (\n    <Example>\n        <Example.Item title=\"border: neutral\">\n            <View borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: neutral-faded\">\n            <View borderColor=\"neutral-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: primary\">\n            <View borderColor=\"primary\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: primary-faded\">\n            <View borderColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: critical\">\n            <View borderColor=\"critical\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: critical-faded\">\n            <View borderColor=\"critical-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: warning\">\n            <View borderColor=\"warning\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: warning-faded\">\n            <View borderColor=\"warning-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: positive\">\n            <View borderColor=\"positive\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: positive-faded\">\n            <View borderColor=\"positive-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: transparent, background: primary-faded\">\n            <View borderColor=\"transparent\" backgroundColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive\", \"[s] primary\", \"[m+] neutral\"]}>\n            <View borderColor={{ s: \"primary\", m: \"neutral\" }} padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"border","snippet":"const border = () => (\n    <Example>\n        <Example.Item title=\"border: true\">\n            <View border borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderTop: true\">\n            <View borderTop borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderBottom: true\">\n            <View borderBottom borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderStart: true\">\n            <View borderStart borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderEnd: true\">\n            <View borderEnd borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderInline: true\">\n            <View borderInline borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderBlock: true\">\n            <View borderBlock borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderTop: true, borderStart: true, \">\n            <View borderColor=\"neutral\" borderTop borderStart padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"responsive\",\n                \"[s] borderTop: true, borderStart: true\",\n                \"[m+] borderBottom: true, borderEnd: true\",\n            ]}\n        >\n            <View\n                borderColor=\"neutral\"\n                borderTop={{ s: true, m: false }}\n                borderStart={{ s: true, m: false }}\n                borderBottom={{ s: false, m: true }}\n                borderEnd={{ s: false, m: true }}\n                padding={4}\n            >\n                Content\n            </View>\n        </Example.Item>\n\n        <div style={{ height: 100 }} />\n    </Example>\n);"},{"name":"radius","snippet":"const radius = () => (\n    <Example>\n        <Example.Item title=\"radius: small\">\n            <View borderRadius=\"small\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: medium\">\n            <View borderRadius=\"medium\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: large\">\n            <View borderRadius=\"large\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: circular\">\n            <View borderRadius=\"circular\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"shadow","snippet":"const shadow = () => (\n    <Example>\n        <Example.Item title=\"shadow: raised, radius: medium\">\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                shadow=\"raised\"\n                borderRadius=\"medium\"\n                backgroundColor=\"elevation-raised\"\n            />\n        </Example.Item>\n        <Example.Item title=\"shadow: overlay, radius: medium\">\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                shadow=\"overlay\"\n                borderRadius=\"medium\"\n                backgroundColor=\"elevation-overlay\"\n            />\n        </Example.Item>\n    </Example>\n);"},{"name":"overflow","snippet":"const overflow = () => (\n    <Example>\n        <Example.Item\n            title={[\"overflow: hidden, radius: medium\", \"child background should have radius\"]}\n        >\n            <View height=\"100px\" width=\"100px\" shadow=\"raised\" borderRadius=\"medium\" overflow=\"hidden\">\n                <View backgroundColor=\"primary\" height=\"100%\" width=\"100%\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"positioning","snippet":"const positioning = () => (\n    <Example>\n        <Example.Item title=\"position: relative + absolute\">\n            <View borderColor=\"neutral\" position=\"relative\">\n                <Placeholder />\n                <View\n                    position=\"absolute\"\n                    insetTop={0}\n                    insetEnd={0}\n                    backgroundColor=\"critical\"\n                    zIndex={5}\n                    height={10}\n                    width={10}\n                />\n                <View\n                    position=\"absolute\"\n                    insetTop={0}\n                    insetEnd={0}\n                    backgroundColor=\"primary\"\n                    height={15}\n                    width={15}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: sticky\">\n            <div style={{ overflow: \"auto\", height: 100 }} tabIndex={0}>\n                <View position=\"sticky\" borderColor=\"primary\" insetTop={0}>\n                    Content\n                </View>\n                <Placeholder h={1000} />\n            </div>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive\", \"[s] position: absolute\", \"[m+]: position: relative\"]}>\n            <div style={{ overflow: \"auto\", height: 100, position: \"relative\" }} tabIndex={0}>\n                <View position={{ s: \"absolute\", m: \"relative\" }} borderColor=\"primary\" insetTop={0}>\n                    Content\n                </View>\n                <Placeholder h={1000} />\n            </div>\n        </Example.Item>\n    </Example>\n);"},{"name":"inset","snippet":"const inset = () => (\n    <Example>\n        <Example.Item title=\"inset: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" inset={4} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetTop: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" insetTop={4} height={10} width={10} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetStart: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetStart={4}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetEnd: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" insetEnd={4} height={10} width={10} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetBottom: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetBottom={4}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"responsive, [s] insetBottom: 4 [m+] insetEnd: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetBottom={{ s: 4, m: \"auto\" }}\n                    insetEnd={{ s: \"auto\", m: 4 }}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"animated","snippet":"const animated = () => {\n    const [background, setBackground] = React.useState<ViewProps[\"backgroundColor\"]>(\"neutral\");\n\n    return (\n        <View gap={3} align=\"start\">\n            <Button\n                onClick={() => setBackground((prev) => (prev === \"neutral\" ? \"primary\" : \"neutral\"))}\n            >\n                Change background\n            </Button>\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                backgroundColor={background}\n                align=\"center\"\n                justify=\"center\"\n                animated\n            >\n                Content\n            </View>\n        </View>\n    );\n};"},{"name":"itemGapBefore","snippet":"const itemGapBefore = () => (\n    <Example>\n        <Example.Item title={[\"gap: 4, 3rd item gapBefore: 10, direction: row\", \"increased gap\"]}>\n            <View direction=\"row\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={10}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 4, direction: row\", \"reduced gap\"]}>\n            <View direction=\"row\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={4}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 0, direction: row\", \"removed gap\"]}>\n            <View direction=\"row\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={0}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"gap: 4, direction: row, 2nd item gap: auto\">\n            <View direction=\"row\" gap={4}>\n                <Placeholder w={200} />\n                <View.Item gapBefore=\"auto\">\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"gap: 4, 3rd item gapBefore: 10, direction: column\", \"increased gap\"]}>\n            <View direction=\"column\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={10}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 4, direction: column\", \"reduced gap\"]}>\n            <View direction=\"column\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={4}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 0, direction: column\", \"removed gap\"]}>\n            <View direction=\"column\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={0}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"gap: 4, direction: column, height: 200px, 2nd item gap: auto\">\n            <View height=\"200px\" gap={4}>\n                <Placeholder />\n                <View.Item gapBefore=\"auto\">\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"responsive item gap\",\n                \"gap: 4, direction: row\",\n                \"[s] 3rd item gapBefore: 10\",\n                \"[m+] 3rd item gapBefore: 0\",\n            ]}\n        >\n            <View direction=\"row\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={{ s: 10, m: 0 }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"itemGrow","snippet":"const itemGrow = () => (\n    <Example>\n        <Example.Item title=\"direction: row, 2nd item grow\">\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column, height: 200px, 2nd item grow\">\n            <View direction=\"column\" gap={3} height=\"200px\">\n                <Placeholder />\n                <View.Item grow>\n                    <Placeholder h=\"100%\" />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row, 2nd item grow, applied to View\">\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View grow>\n                    <Placeholder />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive item grow, direction: row\",\n                \"[s] 2nd item grow\",\n                \"[m+] 2nd item doesn't grow\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View.Item grow={{ s: true, m: false }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive item grow, direction: column, height: 200px\",\n                \"[s] 2nd item grow\",\n                \"[m+] 2nd item doesn't grow\",\n            ]}\n        >\n            <View direction=\"column\" gap={3} height=\"200px\">\n                <Placeholder />\n                <View.Item grow={{ s: true, m: false }}>\n                    <Placeholder h=\"100%\" />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"itemColumns","snippet":"const itemColumns = () => (\n    <Example>\n        <Example.Item title=\"columns 6, 6, gap: 0\">\n            <View direction=\"row\">\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 3, 9, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={3}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, 9, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive columns\", \"[s] columns 6, 6, 12, gap: 4\", \"[m+]: 4, 4, 4\"]}>\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={{ s: 6, m: 4 }}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 6, m: 4 }}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 12, m: 4 }}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, 9, gap: 4, 2nd item gapBefore: 20\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6} gapBefore={20}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"itemOrder","snippet":"const itemOrder = () => (\n    <Example>\n        <Example.Item title=\"order: 1 3 2\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={4}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={4} order={1}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={4}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive order\", \"[s] 1 2 3\", \"[m+] 1 3 2\"]}>\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={4}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={4} order={{ s: 0, m: 1 }}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={4}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive order\",\n                \"[s]: 1 3 2, 2 is full width on second row\",\n                \"[m+]: 1 2 3, 2 has grow in the center of the first row\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <View.Item columns={{ s: 6, m: \"auto\" }}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item\n                    grow={{ s: false, m: true }}\n                    order={{ s: 1, m: 0 }}\n                    columns={{ s: 12, m: \"auto\" }}\n                >\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 6, m: \"auto\" }}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"hiddenItem","snippet":"const hiddenItem = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"[s] 2nd item: visible, grow, 3rd item: !grow\",\n                \"[m+] 2nd item: hidden, 2nd item divider: hidden, 3rd item: grow\",\n            ]}\n        >\n            <View direction=\"row\" divided gap={3}>\n                <Placeholder />\n                <Hidden hide={{ s: false, m: true }}>\n                    <View.Item grow key=\"3\">\n                        <Placeholder />\n                    </View.Item>\n                </Hidden>\n                <View.Item grow={{ s: false, m: true }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"[s] 2nd item: visible, grow, 3rd item: !grow\",\n                \"[m+] 2nd item: hidden, 2nd item: grow doesn't push 3rd item, 3rd item: grow\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Placeholder />\n                <Hidden hide={{ s: false, m: true }}>\n                    <View.Item grow>\n                        <Placeholder />\n                    </View.Item>\n                </Hidden>\n                <View.Item grow={{ s: false, m: true }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"keys","snippet":"const keys = () => {\n    const toggle = useToggle();\n\n    return (\n        <View gap={2}>\n            <Button onClick={() => toggle.toggle()}>Toggle</Button>\n            <View.Item>Item 1</View.Item>\n            {toggle.active && <KeyItem>Item 2</KeyItem>}\n            <KeyItem>Item 3</KeyItem>\n        </View>\n    );\n};"},{"name":"nestedGaps","snippet":"const nestedGaps = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"direction: column, gap: 10\",\n                \"Child 1: direction: column, gap: 2\",\n                \"Child 2: direction column, gap: 6\",\n                \"Child 3: gapBefore: 0\",\n                \"Child 3 view: direction: row, gap: 2\",\n            ]}\n        >\n            <View gap={10}>\n                <View gap={2}>\n                    <Placeholder>Child 1</Placeholder>\n                    <Placeholder>Child 1</Placeholder>\n                </View>\n\n                <View gap={6}>\n                    <Placeholder>Child 2</Placeholder>\n                    <Placeholder>Child 2</Placeholder>\n                </View>\n\n                <View.Item gapBefore={0}>\n                    <View direction=\"row\" gap={2}>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"testComposition","snippet":"const testComposition = () => (\n    <Example>\n        <Example.Item>\n            <View direction=\"row\" align=\"center\" gap={4} padding={4}>\n                <View width=\"80px\" height=\"60px\" backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n\n                <View direction=\"row\" align=\"center\" gap={1} grow>\n                    <View.Item shrink>\n                        <Text>Text (like Jeff's Puzzles)</Text>\n                    </View.Item>\n\n                    <View minWidth=\"auto\" grow>\n                        <Button size=\"small\" color=\"neutral\" icon={IconPlus} />\n                    </View>\n                </View>\n\n                <Button color=\"primary\" rounded>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"View.Item, MenuItem, Aspect ratio\",\n                \"ratio should increase height on viewport change\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <View.Item>\n                    <Placeholder />\n                </View.Item>\n                <MenuItem selected roundedCorners>\n                    Menu\n                </MenuItem>\n                <View.Item grow>\n                    <View aspectRatio={16 / 9}>\n                        <Placeholder h=\"100%\" />\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"Scrollable tabs inside View.Item with grow\">\n            <View direction=\"row\" align=\"center\" gap={3}>\n                <Placeholder />\n                <View.Item grow>\n                    <View padding={0} align=\"center\">\n                        <Tabs variant=\"pills\">\n                            <Tabs.List>\n                                <Tabs.Item value=\"1\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"2\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"3\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"4\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"5\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"6\">Very long item</Tabs.Item>\n                            </Tabs.List>\n                            {[1, 2, 3, 5, 6].map((i) => (\n                                <Tabs.Panel key={i} value={i.toString()} />\n                            ))}\n                        </Tabs>\n                    </View>\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"2nd item has grow, Avatar stays circle\">\n            <View direction=\"row\" gap={3}>\n                <Avatar initials=\"DB\" />\n                <View.Item grow>\n                    Veggies sunt bona vobis, proinde vos postulo esse magis grape pea sprouts horseradish\n                    courgette maize spinach prairie turnip jícama coriander quandong gourd broccoli seakale\n                    gumbo. Parsley corn lentil zucchini radicchio maize burdock avocado sea lettuce.\n                    Garbanzo tigernut earthnut pea fennel.\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"item gapBefore from parent doesn't affect the child view\",\n                \"columns should take full width\",\n            ]}\n        >\n            <View>\n                <View.Item gapBefore={20}>\n                    <View direction=\"row\" gap={4}>\n                        <View.Item columns={6}>\n                            <Placeholder />\n                        </View.Item>\n                        <View.Item columns={6}>\n                            <Placeholder />\n                        </View.Item>\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"View becomes flexbox if there is a child with grow\">\n            <View height=\"300px\" borderColor=\"neutral-faded\">\n                <View height=\"50px\" />\n                <View grow backgroundColor=\"neutral-faded\" padding={4}>\n                    Grow\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"},{"name":"asProp","snippet":"const asProp = () => (\n    <View as=\"ul\">\n        <View.Item as=\"li\">Content</View.Item>\n    </View>\n);"},{"name":"className","snippet":"const className = () => (\n    <div data-testid=\"root\">\n        <View className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </View>\n    </div>\n);"},{"name":"itemClassName","snippet":"const itemClassName = () => (\n    <div data-testid=\"root\">\n        <View.Item className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </View.Item>\n    </div>\n);"}],"import":"import { Avatar, Button, Example, Hidden, MenuItem, Placeholder, Tabs, Text, View } from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"View","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/View/View.tsx","actualName":"View","exportName":"default"}},"hooks-useelementid":{"id":"hooks-useelementid","name":"useElementId","path":"./src/hooks/tests/useElementId.stories.tsx","stories":[{"name":"id","snippet":"const id = () => {\n    return <Component id=\"hey\" />;\n};"}],"import":"","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  3 | import useElementId from \"hooks/useElementId\";\n  4 |\n> 5 | export default {\n    | ^\n  6 | \ttitle: \"Hooks/useElementId\",\n  7 | \tparameters: {\n  8 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useElementId.stories.tsx:\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, waitFor } from \"storybook/test\";\nimport useElementId from \"hooks/useElementId\";\n\nexport default {\n\ttitle: \"Hooks/useElementId\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component: React.FC<{ id?: string }> = (props) => {\n\tconst id = useElementId(props.id);\n\n\treturn <div id={id}>{id}</div>;\n};\n\nexport const id: StoryObj = {\n\tname: \"passed id\",\n\trender: () => {\n\t\treturn <Component id=\"hey\" />;\n\t},\n\tplay: async () => {\n\t\twaitFor(() => {\n\t\t\texpect(document.querySelector(\"#hey\")).toBeTruthy();\n\t\t});\n\t},\n};\n"}},"hooks-usehandlerref":{"id":"hooks-usehandlerref","name":"useHandlerRef","path":"./src/hooks/tests/useHandlerRef.stories.tsx","stories":[{"name":"base","snippet":"const base = (args) => {\n    const [count, setCount] = React.useState(0);\n\n    // Creating a new handler on each render\n    const handleEffect = () => {\n        args.handleEffect(0);\n    };\n\n    return (\n        <View gap={4}>\n            <Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>\n            <Component onEffect={handleEffect} count={count} />\n        </View>\n    );\n};"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   6 | import useHandlerRef from \"hooks/useHandlerRef\";\n   7 |\n>  8 | export default {\n     | ^\n   9 | \ttitle: \"Hooks/useHandlerRef\",\n  10 | \tparameters: {\n  11 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useHandlerRef.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, fn, Mock, userEvent } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport View from \"components/View\";\nimport useHandlerRef from \"hooks/useHandlerRef\";\n\nexport default {\n\ttitle: \"Hooks/useHandlerRef\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component: React.FC<{ onEffect: () => void; count: number }> = (props) => {\n\tconst { onEffect, count } = props;\n\tconst onEffectRef = useHandlerRef(onEffect);\n\n\tReact.useEffect(() => {\n\t\tonEffectRef.current();\n\t}, [onEffectRef]);\n\n\treturn <>Counter: {count}</>;\n};\n\nexport const base: StoryObj<{ handleEffect: Mock }> = {\n\tname: \"base\",\n\targs: {\n\t\thandleEffect: fn(),\n\t},\n\trender: (args) => {\n\t\tconst [count, setCount] = React.useState(0);\n\n\t\t// Creating a new handler on each render\n\t\tconst handleEffect = () => {\n\t\t\targs.handleEffect(0);\n\t\t};\n\n\t\treturn (\n\t\t\t<View gap={4}>\n\t\t\t\t<Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>\n\t\t\t\t<Component onEffect={handleEffect} count={count} />\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\t// mount, triggerred twice in dev mode\n\t\texpect(args.handleEffect).toHaveBeenCalledTimes(2);\n\n\t\tawait userEvent.click(button);\n\n\t\t// Rerendering the component doesn't re-trigger the effect\n\t\texpect(args.handleEffect).toHaveBeenCalledTimes(2);\n\t},\n};\n"}},"hooks-usehotkeys":{"id":"hooks-usehotkeys","name":"useHotkeys","path":"./src/hooks/tests/useHotkeys.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const { checkHotkeyState } = useHotkeys({\n        \"shift + b + n\": () => console.log(\"pressed\"),\n        \"c + v\": () => console.log(\"c + v\"),\n        \"Meta + k\": () => console.log(\"meta + k\"),\n        \"Meta + f\": () => console.log(\"meta + f\"),\n        \"Meta + v\": () => console.log(\"meta + v\"),\n        \"Meta + b\": () => console.log(\"meta + b\"),\n        \"control + enter\": () => console.log(\"control + enter\"),\n        \"meta + enter\": () => console.log(\"meta + enter\"),\n        \"mod + enter\": () => console.log(\"mod + enter\"),\n        \"mod + ArrowRight\": () => console.log(\"right\"),\n        \"mod + ArrowUp\": () => console.log(\"top\"),\n        \"shift + ArrowRight\": () => console.log(\"right\"),\n        \"shift + ArrowUp\": () => console.log(\"top\"),\n        \"alt+shift+n\": () => console.log(\"alt+shift+n\"),\n        \"shift+alt+n\": () => console.log(\"shift+alt+n\"),\n        \"alt+shiftLeft+n\": () => console.log(\"alt+shiftLeft+n\"),\n    });\n    const active = checkHotkeyState(\"shift + b + n\");\n    const shiftActive = checkHotkeyState(\"shift\");\n    const bActive = checkHotkeyState(\"b\");\n    const nActive = checkHotkeyState(\"n\");\n\n    return (\n        <View\n            animated\n            gap={2}\n            direction=\"row\"\n            backgroundColor={active ? \"positive-faded\" : undefined}\n            padding={2}\n            borderRadius=\"small\"\n        >\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={shiftActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={shiftActive ? undefined : \"raised\"}\n            >\n                Shift\n            </View>\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={bActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={bActive ? undefined : \"raised\"}\n            >\n                b\n            </View>\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={nActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={nActive ? undefined : \"raised\"}\n            >\n                n\n            </View>\n        </View>\n    );\n};"},{"name":"singleKey","snippet":"const singleKey = (args) => <Component hotkeys={{ a: args.handleHotkey }} />;"},{"name":"modKey","snippet":"const modKey = (args) => <Component hotkeys={{ mod: args.handleHotkey }} />;"},{"name":"modKeyHold","snippet":"const modKeyHold = (args) => <Component hotkeys={{ \"Meta + b\": args.handleHotkey }} />;"},{"name":"keyList","snippet":"const keyList = (args) => <Component hotkeys={{ \"a,b\": args.handleHotkey }} />;"},{"name":"keyCombination","snippet":"const keyCombination = (args) => <Component hotkeys={{ \"a+b\": args.handleHotkey }} />;"},{"name":"keyCombinationFormat","snippet":"const keyCombinationFormat = (args) => <Component hotkeys={{ \"A  + b\": args.handleHotkey }} />;"},{"name":"keyCombinationOrder","snippet":"const keyCombinationOrder = (args) => <Component hotkeys={{ \"b+a\": args.handleHotkey }} />;"},{"name":"keyCombinationMoreThanRequired","snippet":"const keyCombinationMoreThanRequired = (args) => <Component hotkeys={{ \"z + x\": args.handleHotkey }} />;"},{"name":"optionModified","snippet":"const optionModified = (args) => (\n    <Component hotkeys={{ \"alt+n\": args.handleHotkeyModified, \"alt+shift\": args.handleHotkey }} />\n);"}],"import":"import { View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  4 | import useHotkeys from \"hooks/useHotkeys\";\n  5 |\n> 6 | export default {\n    | ^\n  7 | \ttitle: \"Hooks/useHotkeys\",\n  8 | \tparameters: {\n  9 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useHotkeys.stories.tsx:\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, fn, userEvent } from \"storybook/test\";\nimport View from \"components/View\";\nimport useHotkeys from \"hooks/useHotkeys\";\n\nexport default {\n\ttitle: \"Hooks/useHotkeys\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst { checkHotkeyState } = useHotkeys({\n\t\t\t\"shift + b + n\": () => console.log(\"pressed\"),\n\t\t\t\"c + v\": () => console.log(\"c + v\"),\n\t\t\t\"Meta + k\": () => console.log(\"meta + k\"),\n\t\t\t\"Meta + f\": () => console.log(\"meta + f\"),\n\t\t\t\"Meta + v\": () => console.log(\"meta + v\"),\n\t\t\t\"Meta + b\": () => console.log(\"meta + b\"),\n\t\t\t\"control + enter\": () => console.log(\"control + enter\"),\n\t\t\t\"meta + enter\": () => console.log(\"meta + enter\"),\n\t\t\t\"mod + enter\": () => console.log(\"mod + enter\"),\n\t\t\t\"mod + ArrowRight\": () => console.log(\"right\"),\n\t\t\t\"mod + ArrowUp\": () => console.log(\"top\"),\n\t\t\t\"shift + ArrowRight\": () => console.log(\"right\"),\n\t\t\t\"shift + ArrowUp\": () => console.log(\"top\"),\n\t\t\t\"alt+shift+n\": () => console.log(\"alt+shift+n\"),\n\t\t\t\"shift+alt+n\": () => console.log(\"shift+alt+n\"),\n\t\t\t\"alt+shiftLeft+n\": () => console.log(\"alt+shiftLeft+n\"),\n\t\t});\n\t\tconst active = checkHotkeyState(\"shift + b + n\");\n\t\tconst shiftActive = checkHotkeyState(\"shift\");\n\t\tconst bActive = checkHotkeyState(\"b\");\n\t\tconst nActive = checkHotkeyState(\"n\");\n\n\t\treturn (\n\t\t\t<View\n\t\t\t\tanimated\n\t\t\t\tgap={2}\n\t\t\t\tdirection=\"row\"\n\t\t\t\tbackgroundColor={active ? \"positive-faded\" : undefined}\n\t\t\t\tpadding={2}\n\t\t\t\tborderRadius=\"small\"\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\tpaddingInline={4}\n\t\t\t\t\tpaddingBlock={2}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tborderColor=\"neutral-faded\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={shiftActive ? \"neutral-faded\" : \"elevation-raised\"}\n\t\t\t\t\tshadow={shiftActive ? undefined : \"raised\"}\n\t\t\t\t>\n\t\t\t\t\tShift\n\t\t\t\t</View>\n\t\t\t\t<View\n\t\t\t\t\tpaddingInline={4}\n\t\t\t\t\tpaddingBlock={2}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tborderColor=\"neutral-faded\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={bActive ? \"neutral-faded\" : \"elevation-raised\"}\n\t\t\t\t\tshadow={bActive ? undefined : \"raised\"}\n\t\t\t\t>\n\t\t\t\t\tb\n\t\t\t\t</View>\n\t\t\t\t<View\n\t\t\t\t\tpaddingInline={4}\n\t\t\t\t\tpaddingBlock={2}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tborderColor=\"neutral-faded\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={nActive ? \"neutral-faded\" : \"elevation-raised\"}\n\t\t\t\t\tshadow={nActive ? undefined : \"raised\"}\n\t\t\t\t>\n\t\t\t\t\tn\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t},\n};\n\nconst Component: React.FC<{ hotkeys: Record<string, (() => void) | null> }> = (props) => {\n\tconst { hotkeys } = props;\n\tuseHotkeys(hotkeys);\n\n\treturn <div />;\n};\n\nexport const singleKey: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"single key\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ a: args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"a\");\n\t\tawait userEvent.keyboard(\"b\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const modKey: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"mod key\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ mod: args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{Meta/}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const modKeyHold: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"mod key on hold\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"Meta + b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{Meta>}bb{/Meta}\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(2);\n\t},\n};\n\nexport const keyList: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key list\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"a,b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"a\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\n\t\tawait userEvent.keyboard(\"b\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(2);\n\t},\n};\n\nexport const keyCombination: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"a+b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{a>}b{/a}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const keyCombinationFormat: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination without formatting\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"A  + b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{a>}b{/a}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const keyCombinationOrder: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination without order\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"b+a\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{a>}b{/a}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const keyCombinationMoreThanRequired: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination, more keys pressed\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"z + x\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{z>}{x>}c{/x}{/z}\");\n\t\t// When c is pressed, it doesn't trigger a+b for the second time\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const optionModified: StoryObj<{\n\thandleHotkey: ReturnType<typeof fn>;\n\thandleHotkeyModified: ReturnType<typeof fn>;\n}> = {\n\tname: \"modified with alt/option\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t\thandleHotkeyModified: fn(),\n\t},\n\trender: (args) => (\n\t\t<Component hotkeys={{ \"alt+n\": args.handleHotkeyModified, \"alt+shift\": args.handleHotkey }} />\n\t),\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{Alt>}n{/Alt}\");\n\t\texpect(args.handleHotkeyModified).toHaveBeenCalledTimes(1);\n\n\t\tawait userEvent.keyboard(\"{Alt>}{Shift}{/Alt}\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n"}},"hooks-usekeyboardarrownavigation":{"id":"hooks-usekeyboardarrownavigation","name":"useKeyboardArrowNavigation","path":"./src/hooks/tests/useKeyboardArrowNavigation.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"},{"name":"horizontal","snippet":"const horizontal = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, orientation: \"horizontal\" });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"},{"name":"vertical","snippet":"const vertical = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, orientation: \"vertical\" });\n\n    return (\n        <View gap={2} direction=\"column\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"},{"name":"circular","snippet":"const circular = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, circular: true });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"},{"name":"disabled","snippet":"const disabled = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, disabled: true });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   7 | import useKeyboardArrowNavigation from \"hooks/useKeyboardArrowNavigation\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Hooks/useKeyboardArrowNavigation\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useKeyboardArrowNavigation.stories.tsx:\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport useRTL from \"hooks/useRTL\";\nimport View from \"components/View\";\nimport Button from \"components/Button\";\nimport useKeyboardArrowNavigation from \"hooks/useKeyboardArrowNavigation\";\n\nexport default {\n\ttitle: \"Hooks/useKeyboardArrowNavigation\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(buttons[2]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t},\n};\n\nexport const horizontal: StoryObj = {\n\tname: \"orientation: horizontal\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, orientation: \"horizontal\" });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\texpect(buttons[0]).toHaveAttribute(\"tabindex\", \"0\");\n\t\texpect(buttons[1]).toHaveAttribute(\"tabindex\", \"-1\");\n\t\texpect(buttons[2]).toHaveAttribute(\"tabindex\", \"-1\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t},\n};\n\nexport const vertical: StoryObj = {\n\tname: \"orientation: vertical\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, orientation: \"vertical\" });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"column\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t},\n};\n\nexport const circular: StoryObj = {\n\tname: \"circular\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, circular: true });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[2]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[2]);\n\t},\n};\n\nexport const disabled: StoryObj = {\n\tname: \"disabled\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, disabled: true });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t\texpect(buttons[0]).not.toHaveAttribute(\"tabindex\");\n\t},\n};\n"}},"hooks-usekeyboardmode":{"id":"hooks-usekeyboardmode","name":"useKeyboardMode","path":"./src/hooks/tests/useKeyboardMode.stories.tsx","stories":[{"name":"base","snippet":"const base = () => <Component />;"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   5 | import useKeyboardMode from \"hooks/useKeyboardMode\";\n   6 |\n>  7 | export default {\n     | ^\n   8 | \ttitle: \"Hooks/useKeyboardMode\",\n   9 | \tparameters: {\n  10 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useKeyboardMode.stories.tsx:\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport View from \"components/View\";\nimport useKeyboardMode from \"hooks/useKeyboardMode\";\n\nexport default {\n\ttitle: \"Hooks/useKeyboardMode\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component = () => {\n\tconst { activate, deactivate, disable, enable } = useKeyboardMode();\n\n\treturn (\n\t\t<View direction=\"row\" gap={2}>\n\t\t\t<Button onClick={activate}>Activate</Button>\n\t\t\t<Button onClick={deactivate}>Deactivate</Button>\n\t\t\t<Button onClick={disable}>Disable</Button>\n\t\t\t<Button onClick={enable}>Enable</Button>\n\t\t</View>\n\t);\n};\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => <Component />,\n\tplay: async ({ canvas }) => {\n\t\tconst attribute = \"data-rs-keyboard\";\n\t\tconst root = document.documentElement;\n\t\tconst activateTrigger = canvas.getAllByRole(\"button\")[0];\n\t\tconst deactivateTrigger = canvas.getAllByRole(\"button\")[1];\n\t\tconst disableTrigger = canvas.getAllByRole(\"button\")[2];\n\t\tconst enableTrigger = canvas.getAllByRole(\"button\")[3];\n\n\t\texpect(root).not.toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(activateTrigger);\n\t\texpect(root).toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(deactivateTrigger);\n\t\texpect(root).not.toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(disableTrigger);\n\t\tawait userEvent.click(activateTrigger);\n\t\texpect(root).not.toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(enableTrigger);\n\t\tawait userEvent.click(activateTrigger);\n\t\texpect(root).toHaveAttribute(attribute);\n\t},\n};\n"}},"hooks-useonclickoutside":{"id":"hooks-useonclickoutside","name":"useOnClickOutside","path":"./src/hooks/tests/useOnClickOutside.stories.tsx","stories":[{"name":"base","snippet":"const base = (args) => {\n    const ref = React.useRef(null);\n    const [target, setTarget] = React.useState<\"inside\" | \"outside\" | null>(null);\n\n    useOnClickOutside([ref], () => {\n        args.handleOutsideClick();\n        setTarget(\"outside\");\n    });\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }} onClick={() => setTarget(\"inside\")}>\n                Trigger\n            </Button>\n            {target && `Clicked ${target}`}\n        </View>\n    );\n};"},{"name":"refs","snippet":"const refs = (args) => {\n    const ref = React.useRef(null);\n    const ref2 = React.useRef(null);\n\n    useOnClickOutside([ref, ref2], () => {\n        args.handleOutsideClick();\n    });\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }}>Trigger</Button>\n            <Button attributes={{ ref: ref2 }}>Trigger 2</Button>\n        </View>\n    );\n};"},{"name":"disabled","snippet":"const disabled = (args) => {\n    const ref = React.useRef(null);\n\n    useOnClickOutside(\n        [ref],\n        () => {\n            args.handleOutsideClick();\n        },\n        {\n            disabled: true,\n        }\n    );\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }}>Trigger</Button>\n        </View>\n    );\n};"},{"name":"deps","snippet":"const deps = (args) => {\n    const ref = React.useRef(null);\n    const [count, setCount] = React.useState(0);\n\n    useOnClickOutside([ref], () => {\n        args.handleOutsideClick({ count });\n    });\n\n    return (\n        <Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>\n            Trigger\n        </Button>\n    );\n};"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   6 | import View from \"components/View\";\n   7 |\n>  8 | export default {\n     | ^\n   9 | \ttitle: \"Hooks/useOnClickOutside\",\n  10 | \tparameters: {\n  11 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useOnClickOutside.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, fn, userEvent, type Mock } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport useOnClickOutside from \"hooks/useOnClickOutside\";\nimport View from \"components/View\";\n\nexport default {\n\ttitle: \"Hooks/useOnClickOutside\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"base\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\t\tconst [target, setTarget] = React.useState<\"inside\" | \"outside\" | null>(null);\n\n\t\tuseOnClickOutside([ref], () => {\n\t\t\targs.handleOutsideClick();\n\t\t\tsetTarget(\"outside\");\n\t\t});\n\n\t\treturn (\n\t\t\t<View gap={4} align=\"start\">\n\t\t\t\t<Button attributes={{ ref }} onClick={() => setTarget(\"inside\")}>\n\t\t\t\t\tTrigger\n\t\t\t\t</Button>\n\t\t\t\t{target && `Clicked ${target}`}\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledWith();\n\t},\n};\n\nexport const refs: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"multiple refs\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\t\tconst ref2 = React.useRef(null);\n\n\t\tuseOnClickOutside([ref, ref2], () => {\n\t\t\targs.handleOutsideClick();\n\t\t});\n\n\t\treturn (\n\t\t\t<View gap={4} align=\"start\">\n\t\t\t\t<Button attributes={{ ref }}>Trigger</Button>\n\t\t\t\t<Button attributes={{ ref: ref2 }}>Trigger 2</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst [button, button2] = canvas.getAllByRole(\"button\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\n\t\tawait userEvent.click(button2);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledWith();\n\t},\n};\n\nexport const disabled: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"disabled\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\n\t\tuseOnClickOutside(\n\t\t\t[ref],\n\t\t\t() => {\n\t\t\t\targs.handleOutsideClick();\n\t\t\t},\n\t\t\t{\n\t\t\t\tdisabled: true,\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<View gap={4} align=\"start\">\n\t\t\t\t<Button attributes={{ ref }}>Trigger</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ args }) => {\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\t},\n};\n\nexport const deps: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"test: handler uses latest state\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\t\tconst [count, setCount] = React.useState(0);\n\n\t\tuseOnClickOutside([ref], () => {\n\t\t\targs.handleOutsideClick({ count });\n\t\t});\n\n\t\treturn (\n\t\t\t<Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>\n\t\t\t\tTrigger\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 0 });\n\n\t\tawait userEvent.click(button);\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 1 });\n\t},\n};\n"}},"hooks-usertl":{"id":"hooks-usertl","name":"useRTL","path":"./src/hooks/tests/useRTL.stories.tsx","stories":[{"name":"setRTL","snippet":"const setRTL = () => <Component />;"}],"import":"","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  4 | import useRTL from \"hooks/useRTL\";\n  5 |\n> 6 | export default {\n    | ^\n  7 | \ttitle: \"Hooks/useRTL\",\n  8 | \tparameters: {\n  9 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useRTL.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect } from \"storybook/test\";\nimport useRTL from \"hooks/useRTL\";\n\nexport default {\n\ttitle: \"Hooks/useRTL\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component = () => {\n\tconst [rtl, setRTL] = useRTL();\n\n\tReact.useEffect(() => {\n\t\tsetRTL(true);\n\t}, [setRTL]);\n\n\treturn <div>{rtl ? \"RTL\" : \"LTR\"}</div>;\n};\n\nexport const setRTL: StoryObj = {\n\tname: \"setRTL\",\n\trender: () => <Component />,\n\tplay: async () => {\n\t\texpect(document.documentElement).toHaveAttribute(\"dir\", \"rtl\");\n\t},\n};\n"}},"hooks-useresponsiveclientvalue":{"id":"hooks-useresponsiveclientvalue","name":"useResponsiveClientValue","path":"./src/hooks/tests/useResponsiveClientValue.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const value = useResponsiveClientValue<ViewProps[\"backgroundColor\"]>({\n        s: \"neutral\",\n        m: \"critical\",\n        l: \"positive\",\n    });\n\n    return <View width={25} height={25} backgroundColor={value} />;\n};"},{"name":"boolean","snippet":"const boolean = () => {\n    const value = useResponsiveClientValue<boolean>({\n        s: true,\n        l: false,\n    });\n\n    return <div>{value?.toString()}</div>;\n};"}],"import":"import { View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  2 | import View, { type ViewProps } from \"components/View\";\n  3 |\n> 4 | export default {\n    | ^\n  5 | \ttitle: \"Hooks/useResponsiveClientValue\",\n  6 | \tparameters: {\n  7 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useResponsiveClientValue.stories.tsx:\nimport useResponsiveClientValue from \"hooks/useResponsiveClientValue\";\nimport View, { type ViewProps } from \"components/View\";\n\nexport default {\n\ttitle: \"Hooks/useResponsiveClientValue\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst value = useResponsiveClientValue<ViewProps[\"backgroundColor\"]>({\n\t\t\ts: \"neutral\",\n\t\t\tm: \"critical\",\n\t\t\tl: \"positive\",\n\t\t});\n\n\t\treturn <View width={25} height={25} backgroundColor={value} />;\n\t},\n};\n\nexport const boolean = {\n\tname: \"boolean\",\n\tdescribe: \"works with boolean properties\",\n\trender: () => {\n\t\tconst value = useResponsiveClientValue<boolean>({\n\t\t\ts: true,\n\t\t\tl: false,\n\t\t});\n\n\t\treturn <div>{value?.toString()}</div>;\n\t},\n};\n"}},"hooks-usescrolllock":{"id":"hooks-usescrolllock","name":"useScrollLock","path":"./src/hooks/tests/useScrollLock.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock();\n\n    return (\n        <React.Fragment>\n            <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n            <div style={{ height: \"150vh\" }} />\n        </React.Fragment>\n    );\n};"},{"name":"origin","snippet":"const origin = () => {\n    const originRef = React.useRef<HTMLDivElement>(null);\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });\n\n    return (\n        <View overflow=\"auto\" height={25} attributes={{ ref: originRef, \"data-testid\": \"root\" }}>\n            <View height={50} padding={4} backgroundColor=\"neutral-faded\" borderRadius=\"medium\">\n                <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n            </View>\n        </View>\n    );\n};"},{"name":"container","snippet":"const container = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });\n\n    return (\n        <View height={25} attributes={{ ref: containerRef, \"data-testid\": \"root\" }}>\n            <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n        </View>\n    );\n};"},{"name":"testContainerAsync","snippet":"const testContainerAsync = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const globalLock = useScrollLock();\n    const scopedLock = useScrollLock({ containerRef });\n\n    return (\n        <Example>\n            <Example.Item title=\"calling regular lock and lock with a container only requires a single unlock to remove overflow\">\n                <View attributes={{ ref: containerRef }} gap={4} direction=\"row\">\n                    <Button\n                        onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}\n                    >\n                        Toggle\n                    </Button>\n                    <Button\n                        onClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}\n                    >\n                        Toggle\n                    </Button>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import { Button, Example, View } from \"reshaped\";\nimport React from \"react\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   7 | import View from \"components/View\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Hooks/useScrollLock\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useScrollLock.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport { Example } from \"utilities/storybook\";\nimport Button from \"components/Button\";\nimport useScrollLock from \"hooks/useScrollLock\";\nimport View from \"components/View\";\n\nexport default {\n\ttitle: \"Hooks/useScrollLock\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst { lockScroll, unlockScroll, scrollLocked } = useScrollLock();\n\n\t\treturn (\n\t\t\t<React.Fragment>\n\t\t\t\t<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n\t\t\t\t<div style={{ height: \"150vh\" }} />\n\t\t\t</React.Fragment>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n\nexport const origin: StoryObj = {\n\tname: \"originRef\",\n\trender: () => {\n\t\tconst originRef = React.useRef<HTMLDivElement>(null);\n\t\tconst { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });\n\n\t\treturn (\n\t\t\t<View overflow=\"auto\" height={25} attributes={{ ref: originRef, \"data-testid\": \"root\" }}>\n\t\t\t\t<View height={50} padding={4} backgroundColor=\"neutral-faded\" borderRadius=\"medium\">\n\t\t\t\t\t<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\t\tconst root = canvas.getByTestId(\"root\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t\texpect(root).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(root).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n\nexport const container: StoryObj = {\n\tname: \"containerRef\",\n\trender: () => {\n\t\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\t\tconst { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });\n\n\t\treturn (\n\t\t\t<View height={25} attributes={{ ref: containerRef, \"data-testid\": \"root\" }}>\n\t\t\t\t<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\t\tconst root = canvas.getByTestId(\"root\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t\texpect(root).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(root).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n\nexport const testContainerAsync: StoryObj = {\n\tname: \"test: containerRef locked count\",\n\trender: () => {\n\t\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\t\tconst globalLock = useScrollLock();\n\t\tconst scopedLock = useScrollLock({ containerRef });\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title=\"calling regular lock and lock with a container only requires a single unlock to remove overflow\">\n\t\t\t\t\t<View attributes={{ ref: containerRef }} gap={4} direction=\"row\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tToggle\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tToggle\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst [buttonGlobal, buttonScoped] = canvas.getAllByRole(\"button\");\n\n\t\tawait userEvent.click(buttonGlobal);\n\t\texpect(document.body).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(buttonScoped);\n\t\tawait userEvent.click(buttonGlobal);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n"}},"hooks-usetoggle":{"id":"hooks-usetoggle","name":"useToggle","path":"./src/hooks/tests/useToggle.stories.tsx","stories":[{"name":"toggle","snippet":"const toggle = () => {\n    const { toggle, active } = useToggle();\n\n    return (\n        <Button onClick={() => toggle()} attributes={{ \"data-active\": active }}>\n            {active ? \"Deactivate\" : \"Activate\"}\n        </Button>\n    );\n};"},{"name":"activate","snippet":"const activate = () => {\n    const { activate, active } = useToggle();\n\n    return (\n        <React.Fragment>\n            <Button onClick={activate} attributes={{ \"data-active\": active }}>\n                Activate\n            </Button>\n        </React.Fragment>\n    );\n};"},{"name":"deactivate","snippet":"const deactivate = () => {\n    const { deactivate, active } = useToggle(true);\n\n    return (\n        <Button onClick={deactivate} attributes={{ \"data-active\": active }}>\n            Deactivate\n        </Button>\n    );\n};"}],"import":"import { Button } from \"reshaped\";\nimport React from \"react\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   5 | import useToggle from \"hooks/useToggle\";\n   6 |\n>  7 | export default {\n     | ^\n   8 | \ttitle: \"Hooks/useToggle\",\n   9 | \tparameters: {\n  10 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useToggle.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport useToggle from \"hooks/useToggle\";\n\nexport default {\n\ttitle: \"Hooks/useToggle\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const toggle: StoryObj = {\n\tname: \"toggle\",\n\trender: () => {\n\t\tconst { toggle, active } = useToggle();\n\n\t\treturn (\n\t\t\t<Button onClick={() => toggle()} attributes={{ \"data-active\": active }}>\n\t\t\t\t{active ? \"Deactivate\" : \"Activate\"}\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"true\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\t},\n};\n\nexport const activate: StoryObj = {\n\tname: \"activate\",\n\trender: () => {\n\t\tconst { activate, active } = useToggle();\n\n\t\treturn (\n\t\t\t<React.Fragment>\n\t\t\t\t<Button onClick={activate} attributes={{ \"data-active\": active }}>\n\t\t\t\t\tActivate\n\t\t\t\t</Button>\n\t\t\t</React.Fragment>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"true\");\n\t},\n};\n\nexport const deactivate: StoryObj = {\n\tname: \"deactivate\",\n\trender: () => {\n\t\tconst { deactivate, active } = useToggle(true);\n\n\t\treturn (\n\t\t\t<Button onClick={deactivate} attributes={{ \"data-active\": active }}>\n\t\t\t\tDeactivate\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"true\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\t},\n};\n"}},"utilities-trapfocus":{"id":"utilities-trapfocus","name":"TrapFocus","path":"./src/utilities/a11y/tests/TrapFocus.stories.tsx","stories":[{"name":"modeDialog","snippet":"const modeDialog = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, { mode: \"dialog\" });\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\"mode: dialog\", \"tab navigation, always stays inside until released\"]}\n            >\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View.Item>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"modeActionMenu","snippet":"const modeActionMenu = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"action-menu\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: action-menu\",\n                    \"up/down arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"modeActionBar","snippet":"const modeActionBar = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"action-bar\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: action-bar\",\n                    \"left/right arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"modeContentMenu","snippet":"const modeContentMenu = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"content-menu\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: content-menu\",\n                    \"tab navigation, tabbing outside the content will trigger the release\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"includeTrigger","snippet":"const includeTrigger = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n            includeTrigger: true,\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"initialFocusEl","snippet":"const initialFocusEl = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const initialFocusRef = React.useRef<HTMLButtonElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n            initialFocusEl: initialFocusRef.current,\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View\n                            gap={4}\n                            direction=\"row\"\n                            padding={4}\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            attributes={{ ref: rootRef }}\n                        >\n                            <Button onClick={() => {}}>Action 1</Button>\n                            <Button onClick={() => {}} attributes={{ ref: initialFocusRef }}>\n                                Action 2\n                            </Button>\n                            <Button onClick={() => {}}>Action 3</Button>\n                            <Button onClick={trapToggle.deactivate}>Release</Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"focusableElements","snippet":"const focusableElements = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current);\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title=\"test with all types of focusable elements\">\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={trapToggle.activate}>Activate</Button>\n                    </View.Item>\n\n                    {trapToggle.active && (\n                        <View\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            padding={4}\n                            gap={4}\n                            attributes={{ ref: rootRef }}\n                            align=\"start\"\n                        >\n                            <Link href=\"#\" attributes={{ \"data-testid\": \"test-link\" }}>\n                                Link\n                            </Link>\n\n                            <TextField\n                                name=\"input\"\n                                placeholder=\"Input\"\n                                inputAttributes={{ \"data-testid\": \"test-text-field\" }}\n                            />\n\n                            <TextArea name=\"textarea\" inputAttributes={{ \"data-testid\": \"test-text-area\" }} />\n\n                            <Select\n                                name=\"select\"\n                                options={[\n                                    { label: \"Option 1\", value: \"1\" },\n                                    { label: \"Option 2\", value: \"2\" },\n                                ]}\n                                inputAttributes={{ \"data-testid\": \"test-select\" }}\n                            />\n\n                            <RadioGroup name=\"radio\">\n                                <Radio value=\"1\" inputAttributes={{ \"data-testid\": \"test-radio-1\" }}>\n                                    Option 1\n                                </Radio>\n                                <Radio value=\"2\" inputAttributes={{ \"data-testid\": \"test-radio-2\" }}>\n                                    Option 2\n                                </Radio>\n                            </RadioGroup>\n\n                            <Editor />\n\n                            <div tabIndex={0} role=\"button\" data-testid=\"test-tabindex\">\n                                div with tabIndex\n                            </div>\n\n                            <div style={{ display: \"none\" }}>\n                                <Button onClick={() => {}} attributes={{ \"data-testid\": \"test-hidden-button\" }}>\n                                    Hidden\n                                </Button>\n                            </div>\n\n                            <Button\n                                onClick={() => {}}\n                                attributes={{ tabIndex: -1, \"data-testid\": \"test-button-negative-tabindex\" }}\n                            >\n                                Excluded\n                            </Button>\n\n                            <input type=\"hidden\" data-testid=\"test-input-hidden\" />\n\n                            <Button\n                                onClick={trapToggle.deactivate}\n                                attributes={{ \"data-testid\": \"test-button\" }}\n                            >\n                                Release button\n                            </Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"nested","snippet":"const nested = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const innerRootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n    const innerTrapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    React.useEffect(() => {\n        if (!innerTrapToggle.active) return;\n        if (!innerRootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(innerRootRef.current, {\n            mode: \"dialog\",\n        });\n\n        return () => trapFocus.release();\n    }, [innerTrapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"nested, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View gap={4}>\n                            <View\n                                gap={4}\n                                direction=\"row\"\n                                padding={4}\n                                backgroundColor=\"neutral-faded\"\n                                borderRadius=\"medium\"\n                                attributes={{ ref: rootRef }}\n                            >\n                                <Button onClick={() => {}}>Action</Button>\n                                <Button onClick={innerTrapToggle.activate}>Inner trap focus</Button>\n                                <Button onClick={trapToggle.deactivate}>Release</Button>\n                            </View>\n\n                            {innerTrapToggle.active && (\n                                <View\n                                    gap={4}\n                                    direction=\"row\"\n                                    padding={4}\n                                    backgroundColor=\"neutral-faded\"\n                                    borderRadius=\"medium\"\n                                    attributes={{ ref: innerRootRef }}\n                                >\n                                    <Button onClick={() => {}}>Action</Button>\n                                    <Button onClick={innerTrapToggle.deactivate}>Release</Button>\n                                </View>\n                            )}\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"},{"name":"mutationObserver","snippet":"const mutationObserver = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n    const [mutated, setMutated] = React.useState(false);\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n        });\n\n        setTimeout(() => {\n            setMutated(true);\n        }, 50);\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View\n                            gap={4}\n                            direction=\"row\"\n                            padding={4}\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            attributes={{ ref: rootRef }}\n                        >\n                            {!mutated && (\n                                <>\n                                    <Button onClick={() => {}}>Action 1</Button>\n                                    <Button onClick={() => {}}>Action 2</Button>\n                                </>\n                            )}\n                            <Button onClick={() => {}}>Action 3</Button>\n                            <Button onClick={trapToggle.deactivate}>Release</Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"}],"import":"import {\n    Button,\n    Example,\n    Link,\n    Radio,\n    RadioGroup,\n    Select,\n    TextArea,\n    TextField,\n    View,\n} from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  16 | import { sleep } from \"utilities/helpers\";\n  17 |\n> 18 | export default {\n     | ^\n  19 | \ttitle: \"Utilities/TrapFocus\",\n  20 | };\n  21 |\n\n./src/utilities/a11y/tests/TrapFocus.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport { Example } from \"utilities/storybook\";\nimport Button from \"components/Button\";\nimport useToggle from \"hooks/useToggle\";\nimport View from \"components/View\";\nimport TextField from \"components/TextField\";\nimport RadioGroup from \"components/RadioGroup\";\nimport Radio from \"components/Radio\";\nimport * as keys from \"constants/keys\";\nimport TrapFocus from \"../TrapFocus\";\nimport Link from \"components/Link\";\nimport TextArea from \"components/TextArea\";\nimport Select from \"components/Select\";\nimport { sleep } from \"utilities/helpers\";\n\nexport default {\n\ttitle: \"Utilities/TrapFocus\",\n};\n\nconst TrapContent: React.FC<{\n\trootRef: React.RefObject<HTMLDivElement | null>;\n\tonRelease: () => void;\n}> = (props) => {\n\treturn (\n\t\t<View\n\t\t\tgap={4}\n\t\t\tdirection=\"row\"\n\t\t\tpadding={4}\n\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\tborderRadius=\"medium\"\n\t\t\tattributes={{ ref: props.rootRef }}\n\t\t>\n\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t<Button onClick={props.onRelease}>Release</Button>\n\t\t</View>\n\t);\n};\n\nexport const modeDialog: StoryObj = {\n\tname: \"mode: dialog\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, { mode: \"dialog\" });\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\"mode: dialog\", \"tab navigation, always stays inside until released\"]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View.Item>\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View.Item>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\t\tconst releaseTrigger = canvas.getAllByRole(\"button\")[3];\n\n\t\t// Test screen reader trap\n\t\t// All elements outside have aria-hidden so they're ignored\n\t\texpect(trapContentActions.includes(trigger)).toBeFalsy();\n\t\texpect(trapContentActions[0].parentNode?.previousSibling).toHaveAttribute(\"aria-hidden\");\n\n\t\texpect(releaseTrigger).toBeInTheDocument();\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\t// Doesn't use arrow keys\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Enter/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n\nexport const modeActionMenu: StoryObj = {\n\tname: \"mode: action-menu\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"action-menu\",\n\t\t\t\tonRelease: () => {\n\t\t\t\t\ttrapToggle.deactivate();\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\n\t\t\t\t\t\t\"mode: action-menu\",\n\t\t\t\t\t\t\"up/down arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t\t<Button onClick={() => {}}>Next trigger</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\t\t// const nextTrigger = canvas.getAllByRole(\"button\")[1];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\").slice(2);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.click(trigger);\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\n\t\tconsole.log(document.activeElement);\n\n\t\t// FIXME: Storybook moves focus to body\n\t\t// expect(document.activeElement).toBe(nextTrigger);\n\t},\n};\n\nexport const modeActionBar: StoryObj = {\n\tname: \"mode: action-bar\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"action-bar\",\n\t\t\t\tonRelease: () => {\n\t\t\t\t\ttrapToggle.deactivate();\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\n\t\t\t\t\t\t\"mode: action-bar\",\n\t\t\t\t\t\t\"left/right arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t\t<Button onClick={() => {}}>Next trigger</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\t\t// const nextTrigger = canvas.getAllByRole(\"button\")[1];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\").slice(2);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.click(trigger);\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\n\t\tconsole.log(document.activeElement);\n\n\t\t// FIXME: Storybook moves focus to body\n\t\t// expect(document.activeElement).toBe(nextTrigger);\n\t},\n};\n\nexport const modeContentMenu: StoryObj = {\n\tname: \"mode: content-menu\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"content-menu\",\n\t\t\t\tonRelease: () => {\n\t\t\t\t\ttrapToggle.deactivate();\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\n\t\t\t\t\t\t\"mode: content-menu\",\n\t\t\t\t\t\t\"tab navigation, tabbing outside the content will trigger the release\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t\t<Button onClick={() => {}}>Next trigger</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\t\t// const nextTrigger = canvas.getAllByRole(\"button\")[1];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\").slice(2);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\t// await userEvent.keyboard(\"{Tab/}\");\n\t\t// await userEvent.keyboard(\"{Tab/}\");\n\n\t\t// FIXME: Storybook moves focus to body\n\t\t// expect(document.activeElement).toBe(nextTrigger);\n\t},\n};\n\nexport const includeTrigger: StoryObj = {\n\tname: \"includeTrigger\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t\tincludeTrigger: true,\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n\nexport const initialFocusEl: StoryObj = {\n\tname: \"initialFocusEl\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst initialFocusRef = React.useRef<HTMLButtonElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t\tinitialFocusEl: initialFocusRef.current,\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t\t\t\t\t<Button onClick={() => {}} attributes={{ ref: initialFocusRef }}>\n\t\t\t\t\t\t\t\t\tAction 2\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t\t\t\t\t\t<Button onClick={trapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\t},\n};\n\n/**\n * Testing edge cases\n */\n\nconst Editor = () => {\n\tconst pressedCountRef = React.useRef(0);\n\n\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tif (e.key !== keys.TAB) return;\n\n\t\tpressedCountRef.current += 1;\n\t\tif (pressedCountRef.current % 2) e.preventDefault();\n\t};\n\n\treturn (\n\t\t<View\n\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\tborderColor=\"neutral-faded\"\n\t\t\tborderRadius=\"medium\"\n\t\t\tpadding={4}\n\t\t\tattributes={{\n\t\t\t\tcontentEditable: true,\n\t\t\t\tonKeyDown: handleKeyDown,\n\t\t\t\t\"data-testid\": \"test-contenteditable\",\n\t\t\t}}\n\t\t/>\n\t);\n};\n\nexport const focusableElements: StoryObj = {\n\tname: \"test: focusable elements\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current);\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title=\"test with all types of focusable elements\">\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View.Item>\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Activate</Button>\n\t\t\t\t\t\t</View.Item>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t\talign=\"start\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Link href=\"#\" attributes={{ \"data-testid\": \"test-link\" }}>\n\t\t\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\t</Link>\n\n\t\t\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\t\t\tname=\"input\"\n\t\t\t\t\t\t\t\t\tplaceholder=\"Input\"\n\t\t\t\t\t\t\t\t\tinputAttributes={{ \"data-testid\": \"test-text-field\" }}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<TextArea name=\"textarea\" inputAttributes={{ \"data-testid\": \"test-text-area\" }} />\n\n\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\tname=\"select\"\n\t\t\t\t\t\t\t\t\toptions={[\n\t\t\t\t\t\t\t\t\t\t{ label: \"Option 1\", value: \"1\" },\n\t\t\t\t\t\t\t\t\t\t{ label: \"Option 2\", value: \"2\" },\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\tinputAttributes={{ \"data-testid\": \"test-select\" }}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<RadioGroup name=\"radio\">\n\t\t\t\t\t\t\t\t\t<Radio value=\"1\" inputAttributes={{ \"data-testid\": \"test-radio-1\" }}>\n\t\t\t\t\t\t\t\t\t\tOption 1\n\t\t\t\t\t\t\t\t\t</Radio>\n\t\t\t\t\t\t\t\t\t<Radio value=\"2\" inputAttributes={{ \"data-testid\": \"test-radio-2\" }}>\n\t\t\t\t\t\t\t\t\t\tOption 2\n\t\t\t\t\t\t\t\t\t</Radio>\n\t\t\t\t\t\t\t\t</RadioGroup>\n\n\t\t\t\t\t\t\t\t<Editor />\n\n\t\t\t\t\t\t\t\t<div tabIndex={0} role=\"button\" data-testid=\"test-tabindex\">\n\t\t\t\t\t\t\t\t\tdiv with tabIndex\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div style={{ display: \"none\" }}>\n\t\t\t\t\t\t\t\t\t<Button onClick={() => {}} attributes={{ \"data-testid\": \"test-hidden-button\" }}>\n\t\t\t\t\t\t\t\t\t\tHidden\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={() => {}}\n\t\t\t\t\t\t\t\t\tattributes={{ tabIndex: -1, \"data-testid\": \"test-button-negative-tabindex\" }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tExcluded\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<input type=\"hidden\" data-testid=\"test-input-hidden\" />\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={trapToggle.deactivate}\n\t\t\t\t\t\t\t\t\tattributes={{ \"data-testid\": \"test-button\" }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tRelease button\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst link = canvas.getByTestId(\"test-link\");\n\t\tconst textField = canvas.getByTestId(\"test-text-field\");\n\t\tconst textArea = canvas.getByTestId(\"test-text-area\");\n\t\tconst select = canvas.getByTestId(\"test-select\");\n\t\tconst radio1 = canvas.getByTestId(\"test-radio-1\");\n\t\tconst radio2 = canvas.getByTestId(\"test-radio-2\");\n\t\tconst contentEditable = canvas.getByTestId(\"test-contenteditable\");\n\t\tconst tabIndex = canvas.getByTestId(\"test-tabindex\");\n\t\tconst negativeTabIndex = canvas.getByTestId(\"test-button-negative-tabindex\");\n\t\tconst hiddenButton = canvas.getByTestId(\"test-hidden-button\");\n\t\tconst button = canvas.getByTestId(\"test-button\");\n\n\t\texpect(document.activeElement).toBe(link);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(textField);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(textArea);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(select);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(radio1);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(radio2);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(contentEditable);\n\n\t\t// Stays for the first tab press\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(contentEditable);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(tabIndex);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).not.toBe(negativeTabIndex);\n\t\texpect(document.activeElement).not.toBe(hiddenButton);\n\t\texpect(document.activeElement).toBe(button);\n\t},\n};\n\nexport const nested: StoryObj = {\n\tname: \"test: nested\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst innerRootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\t\tconst innerTrapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!innerTrapToggle.active) return;\n\t\t\tif (!innerRootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(innerRootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [innerTrapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"nested, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action</Button>\n\t\t\t\t\t\t\t\t\t<Button onClick={innerTrapToggle.activate}>Inner trap focus</Button>\n\t\t\t\t\t\t\t\t\t<Button onClick={trapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t\t\t{innerTrapToggle.active && (\n\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\t\t\tattributes={{ ref: innerRootRef }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action</Button>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={innerTrapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\n\t\tawait userEvent.click(trapContentActions[1]);\n\n\t\tconst innerTrapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(innerTrapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.click(innerTrapContentActions[1]);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.click(trapContentActions[2]);\n\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n\nexport const mutationObserver: StoryObj = {\n\tname: \"test: mutation observer\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\t\tconst [mutated, setMutated] = React.useState(false);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t});\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetMutated(true);\n\t\t\t}, 50);\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{!mutated && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t\t\t\t\t\t<Button onClick={trapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tlet trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait sleep(100);\n\n\t\ttrapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\t// Check that trap still works after mutation\n\t\tawait userEvent.keyboard(\"{Tab}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\n\t\tawait userEvent.keyboard(\"{Tab}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\t// Check that it still knows about the original trigger\n\t\tawait userEvent.click(trapContentActions[1]);\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n"}},"internal-portal":{"id":"internal-portal","name":"Portal","path":"./src/components/_private/Portal/tests/Portal.stories.tsx","stories":[{"name":"base","snippet":"const base = () => {\n\tconst ref = React.useRef<HTMLDivElement>(null);\n\tconst [mounted, setMounted] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tsetMounted(true);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<div style={{ border: \"2px solid #333\", padding: 16 }}>\n\t\t\t\tApp\n\t\t\t\t{mounted && <Portal targetRef={ref}>Ported to green</Portal>}\n\t\t\t</div>\n\t\t\t<div ref={ref} style={{ border: \"2px solid green\", padding: 16 }} />\n\t\t</>\n\t);\n};"}],"import":"import { Portal } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component definition found","message":"File: /Users/shilman/projects/design-systems/reshaped/src/components/_private/Portal/index.ts\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport Portal, { PortalScope } from \"./Portal\";\n\nconst PortalRoot = Portal as typeof Portal & {\n\tScope: typeof PortalScope;\n};\n\nPortalRoot.Scope = PortalScope;\n\nexport default PortalRoot;\nexport type { Props as PortalProps } from \"./Portal.types\";\n\n\nFile: /Users/shilman/projects/design-systems/reshaped/src/components/_private/Portal/Portal.types.ts\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport React from \"react\";\n\nexport type Props = {\n\tchildren?: React.ReactNode;\n\ttargetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;\n};\n\nexport type ScopeProps<T extends HTMLElement> = {\n\tchildren: (ref: React.RefObject<T | null>) => React.ReactNode;\n};\n\nexport type Context = {\n\tscopeRef: React.RefObject<HTMLElement | null>;\n};\n"}},"internal-usedrag":{"id":"internal-usedrag","name":"useDrag","path":"./src/hooks/tests/useDrag.stories.tsx","stories":[{"name":"base","snippet":"const base = () => <Example />;"},{"name":"mouseEvents","snippet":"const mouseEvents = () => {\n    return <Demo onDrag={fn()} />;\n};"},{"name":"touchEvents","snippet":"const touchEvents = () => {\n    return <Demo onDrag={fn()} />;\n};"},{"name":"orientationHorizontal","snippet":"const orientationHorizontal = () => {\n    return <Demo onDrag={fn()} orientation=\"horizontal\" />;\n};"},{"name":"orientationVertical","snippet":"const orientationVertical = () => {\n    return <Demo onDrag={fn()} orientation=\"vertical\" />;\n};"},{"name":"disabled","snippet":"const disabled = () => {\n    return <Demo onDrag={fn()} disabled />;\n};"}],"import":"import { Button, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   7 | import Button from \"components/Button\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Internal/useDrag\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useDrag.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { fireEvent, fn, expect } from \"storybook/test\";\nimport View from \"components/View\";\nimport useDrag from \"hooks/_private/useDrag\";\nimport useToggle from \"hooks/useToggle\";\nimport Button from \"components/Button\";\n\nexport default {\n\ttitle: \"Internal/useDrag\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nfunction Example() {\n\tconst [state, setState] = React.useState({ x: 0, y: 0 });\n\tconst disabledToggle = useToggle();\n\n\tconst { ref, containerRef, active } = useDrag<HTMLDivElement>(\n\t\t(args) => {\n\t\t\tsetState(args);\n\t\t},\n\t\t{\n\t\t\tdisabled: disabledToggle.active,\n\t\t}\n\t);\n\n\treturn (\n\t\t<View direction=\"row\" gap={4}>\n\t\t\t<View\n\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\tborderRadius=\"medium\"\n\t\t\t\twidth=\"200px\"\n\t\t\t\theight=\"200px\"\n\t\t\t\tattributes={{ ref: containerRef }}\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\theight={8}\n\t\t\t\t\twidth={8}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={active ? \"primary\" : \"neutral\"}\n\t\t\t\t\tattributes={{\n\t\t\t\t\t\trole: \"button\",\n\t\t\t\t\t\ttabIndex: 0,\n\t\t\t\t\t\t\"aria-label\": \"Drag\",\n\t\t\t\t\t\tref,\n\t\t\t\t\t\tstyle: { translate: `${state.x}px ${state.y}px`, cursor: active ? \"grabbing\" : \"grab\" },\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</View>\n\t\t\t<Button onClick={() => disabledToggle.toggle()}>\n\t\t\t\t{disabledToggle.active ? \"Enable\" : \"Disable\"}\n\t\t\t</Button>\n\t\t</View>\n\t);\n}\n\nexport const base = { name: \"base\", render: () => <Example /> };\n\nconst Demo: React.FC<{\n\tonDrag: ReturnType<typeof fn>;\n\tdisabled?: boolean;\n\torientation?: \"horizontal\" | \"vertical\";\n}> = (props) => {\n\tconst { ref, containerRef } = useDrag<HTMLDivElement>(\n\t\t(options) => {\n\t\t\tprops.onDrag(options);\n\t\t},\n\t\t{\n\t\t\torientation: props.orientation,\n\t\t\tdisabled: props.disabled,\n\t\t}\n\t);\n\n\treturn (\n\t\t<View\n\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\twidth=\"200px\"\n\t\t\theight=\"200px\"\n\t\t\tattributes={{ ref: containerRef, \"data-testid\": \"test-id\" }}\n\t\t>\n\t\t\t<View\n\t\t\t\theight={8}\n\t\t\t\twidth={8}\n\t\t\t\tbackgroundColor=\"primary\"\n\t\t\t\tattributes={{\n\t\t\t\t\t\"data-testid\": \"test-handle-id\",\n\t\t\t\t\tref,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport const mouseEvents: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"onDrag, mouse events\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));\n\n\t\tfireEvent.mouseUp(trigger);\n\t\tfireEvent.mouseUp(document.body, { clientX: 50, clientY: 100 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const touchEvents: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"onDrag, touch events\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst createTouch = (target: HTMLElement, x: number, y: number) => {\n\t\t\treturn new Touch({\n\t\t\t\tidentifier: Date.now(),\n\t\t\t\ttarget,\n\t\t\t\tclientX: x,\n\t\t\t\tclientY: y,\n\t\t\t\tscreenX: x,\n\t\t\t\tscreenY: y,\n\t\t\t\tpageX: x,\n\t\t\t\tpageY: y,\n\t\t\t});\n\t\t};\n\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.touchStart(trigger, { changedTouches: [createTouch(trigger, 0, 0)] });\n\t\tfireEvent.touchMove(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));\n\n\t\tfireEvent.touchEnd(trigger);\n\t\tfireEvent.touchEnd(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const orientationHorizontal: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"orientation horizontal\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} orientation=\"horizontal\" />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 0 }));\n\t},\n};\n\nexport const orientationVertical: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"orientation vertical\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} orientation=\"vertical\" />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 0, y: 50 }));\n\t},\n};\n\nexport const disabled: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"disabled\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} disabled />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(0);\n\t},\n};\n"}},"internal-shadowdom":{"id":"internal-shadowdom","name":"ShadowDOM","path":"./src/tests/ShadowDOM.stories.tsx","stories":[{"name":"behavior","snippet":"const behavior = () => (\n\t<Example>\n\t\t<Example.Item title=\"base\">\n\t\t\t<Component />\n\t\t</Example.Item>\n\t</Example>\n);"}],"import":"import {\n    Autocomplete,\n    Button,\n    DropdownMenu,\n    Example,\n    Reshaped,\n    Select,\n    Tooltip,\n    View,\n} from \"reshaped\";\nimport root from \"react-shadow\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n  10 | import Tooltip from \"components/Tooltip\";\n  11 |\n> 12 | export default {\n     | ^\n  13 | \ttitle: \"Internal/ShadowDOM\",\n  14 | };\n  15 |\n\n./src/tests/ShadowDOM.stories.tsx:\nimport React, { useEffect, useState, useRef, forwardRef } from \"react\";\nimport root from \"react-shadow\";\nimport { Example } from \"utilities/storybook\";\nimport Autocomplete, { type AutocompleteProps } from \"components/Autocomplete\";\nimport View from \"components/View\";\nimport DropdownMenu from \"components/DropdownMenu\";\nimport Reshaped from \"components/Reshaped\";\nimport Select from \"components/Select\";\nimport Button from \"components/Button\";\nimport Tooltip from \"components/Tooltip\";\n\nexport default {\n\ttitle: \"Internal/ShadowDOM\",\n};\n\nconst getStylesData = () => {\n\tconst sourceStylesContainer = document.head;\n\n\treturn Array.from(sourceStylesContainer.children).filter((x) => x instanceof HTMLStyleElement);\n};\n\n// Create a component to render inside the Shadow DOM\nconst ShadowDiv = forwardRef<HTMLDivElement, React.PropsWithChildren>((props, ref) => {\n\tconst shadowRef = useRef<HTMLDivElement>(null);\n\n\t// Load styles\n\tuseEffect(() => {\n\t\tif (!shadowRef?.current) return;\n\n\t\t// Add styles to the shadow DOM\n\t\t// const shadowEl = shadowRef?.current.shadowRoot;\n\t\tconst shadowEl = shadowRef?.current.shadowRoot;\n\n\t\tif (!shadowEl) return;\n\n\t\tconst sourceStylesContainer = document.head;\n\n\t\tconst observer = new MutationObserver(getStylesData);\n\t\tobserver.observe(sourceStylesContainer, {\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\n\t\tlet styleBlock = shadowEl.getElementById(\"custom-outer-style\");\n\n\t\tif (!styleBlock) {\n\t\t\tstyleBlock = document.createElement(\"span\");\n\t\t\tstyleBlock.id = \"custom-outer-style\";\n\t\t\tshadowEl.appendChild(styleBlock);\n\t\t} else {\n\t\t\tstyleBlock.innerHTML = \"\";\n\t\t}\n\n\t\tstyleBlock.append(\n\t\t\t...getStylesData() // finds all <style> tags containing your web component ID\n\t\t\t\t.map((x) => x.cloneNode(true)) // copies styles into the current instance of your web component. You might need to have multiple instances, so all of them need to track the styles.\n\t\t);\n\n\t\treturn () => observer.disconnect();\n\t}, []);\n\n\treturn (\n\t\t<Reshaped>\n\t\t\t<root.div className=\"quote\" ref={shadowRef}>\n\t\t\t\t<div ref={ref}>\n\t\t\t\t\t{/* \n\t\t\t\t\t\tAdding padding here since otherwise mouseenter won't trigger on contents \n\t\t\t\t\t\twhen mouse is switching from outside the shadow dom\n\t\t\t\t\t*/}\n\t\t\t\t\t<View padding={4}>{props.children}</View>\n\t\t\t\t</div>\n\t\t\t</root.div>\n\t\t</Reshaped>\n\t);\n});\n\n// Main Component\nconst Component: React.FC = () => {\n\tconst [valueAutoShadow, setValueAutoShadow] = useState(\"\");\n\tconst [valueDropdownShadow, setValueDropdownShadow] = useState(\"\");\n\n\tconst optionsAuto = [\"Pizza\", \"Pie\", \"Ice-cream\"];\n\tconst optionsDropdown = [\"Turtle\", \"Cat\", \"Long-necked giraffe\"];\n\n\tconst handleChangeAutoShadow: AutocompleteProps[\"onChange\"] = (args) => {\n\t\tconsole.log(\"Autocomlete shadow value=\", args);\n\t\tsetValueAutoShadow(args.value);\n\t};\n\n\tconst handleChangeDropdownShadow = (val: string) => {\n\t\tconsole.log(\"Dropdown shadow value=\", val);\n\t\tsetValueDropdownShadow(val);\n\t};\n\n\treturn (\n\t\t<View paddingBottom={50}>\n\t\t\t<ShadowDiv>\n\t\t\t\t<View gap={4} direction=\"row\" wrap={false}>\n\t\t\t\t\t<Autocomplete\n\t\t\t\t\t\tname=\"fruit-shadow\"\n\t\t\t\t\t\tplaceholder=\"Pick your food\"\n\t\t\t\t\t\tvalue={valueAutoShadow}\n\t\t\t\t\t\tonChange={handleChangeAutoShadow}\n\t\t\t\t\t\tinputAttributes={{ \"aria-label\": \"Label\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{optionsAuto.map((option) => (\n\t\t\t\t\t\t\t<Autocomplete.Item\n\t\t\t\t\t\t\t\tkey={option}\n\t\t\t\t\t\t\t\tvalue={option}\n\t\t\t\t\t\t\t\tonClick={() => handleChangeAutoShadow({ value: option, name: \"fruit-auto\" })}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t</Autocomplete.Item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Autocomplete>\n\n\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t<DropdownMenu.Trigger>\n\t\t\t\t\t\t\t{(attributes) => (\n\t\t\t\t\t\t\t\t<Select placeholder=\"Pick your animal\" name=\"font\" inputAttributes={attributes}>\n\t\t\t\t\t\t\t\t\t{valueDropdownShadow}\n\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</DropdownMenu.Trigger>\n\t\t\t\t\t\t<DropdownMenu.Content>\n\t\t\t\t\t\t\t{optionsDropdown.map((option) => (\n\t\t\t\t\t\t\t\t<DropdownMenu.Item onClick={() => handleChangeDropdownShadow(option)} key={option}>\n\t\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t\t</DropdownMenu.Item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</DropdownMenu.Content>\n\t\t\t\t\t</DropdownMenu>\n\n\t\t\t\t\t<Tooltip text=\"Tooltip for button\">\n\t\t\t\t\t\t{(attributes) => <Button attributes={attributes}>Hover me</Button>}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</View>\n\t\t\t</ShadowDiv>\n\t\t</View>\n\t);\n};\n\nexport const behavior = () => (\n\t<Example>\n\t\t<Example.Item title=\"base\">\n\t\t\t<Component />\n\t\t</Example.Item>\n\t</Example>\n);\n"}},"internal-themes":{"id":"internal-themes","name":"Themes","path":"./src/tests/themes.stories.tsx","stories":[{"name":"test","snippet":"const test = () => {\n\tconst { colorMode } = useTheme();\n\tconst [activeColor, setColor] = useState(colors[0]);\n\tconst [theme, setTheme] = useState(\"\");\n\tconst [algo, setAlgo] = useState<\"wcag\" | \"apca\">(\"wcag\");\n\n\tuseLayoutEffect(() => {\n\t\tsetTheme(\n\t\t\tgetThemeCSS(\n\t\t\t\t\"test\",\n\t\t\t\t{\n\t\t\t\t\tcolor: generateThemeColors({\n\t\t\t\t\t\tprimary: activeColor === colors[0] ? undefined : activeColor,\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcolorContrastAlgorithm: algo,\n\t\t\t\t}\n\t\t\t)\n\t\t);\n\t}, [activeColor, algo]);\n\n\treturn (\n\t\t<>\n\t\t\t<style>{theme}</style>\n\t\t\t<Theme name=\"test\">\n\t\t\t\t<View gap={4}>\n\t\t\t\t\t<View direction=\"row\" align=\"center\" gap={4}>\n\t\t\t\t\t\t{colors.map((color) => {\n\t\t\t\t\t\t\tconst hex = colorMode === \"dark\" && color === \"#000000\" ? \"#ffffff\" : color;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Actionable key={color} onClick={() => setColor(color)} borderRadius=\"inherit\">\n\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\twidth={5}\n\t\t\t\t\t\t\t\t\t\theight={5}\n\t\t\t\t\t\t\t\t\t\tborderRadius=\"circular\"\n\t\t\t\t\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t\t\ttransition: `box-shadow var(--rs-duration-fast) var(--rs-easing-standard)`,\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: hex,\n\t\t\t\t\t\t\t\t\t\t\t\tboxShadow:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor === activeColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? `0 0 0 3px var(--rs-color-background-elevation-base), 0 0 0 5px ${hex}`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Actionable>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t<View.Item gapBefore=\"auto\">\n\t\t\t\t\t\t\t<Switch name=\"algo\" onChange={(args) => setAlgo(args.checked ? \"apca\" : \"wcag\")}>\n\t\t\t\t\t\t\t\tUse APCA\n\t\t\t\t\t\t\t</Switch>\n\t\t\t\t\t\t</View.Item>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<ThemePlayground />\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</>\n\t);\n};"},{"name":"base","snippet":"const base = () => (\n\t<Example>\n\t\t<Example.Item title=\"custom runtime theme\">\n\t\t\t<style>{css}</style>\n\t\t\t<Theme name=\"green\">\n\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"on colors generation\">\n\t\t\t<style>{css2}</style>\n\t\t\t<Theme name=\"peach\">\n\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t</Example>\n);"},{"name":"generation","snippet":"const generation = () => (\n\t<div>\n\t\t<style>{cssGenerated}</style>\n\t\t<Theme name=\"generated\">{componentExamples}</Theme>\n\t</div>\n);"},{"name":"onColors","snippet":"const onColors = () => (\n\t<Example>\n\t\t<Example.Item title=\"custom on color values\">\n\t\t\t<style>{onColorsCss}</style>\n\t\t\t<Theme name=\"on-color\">\n\t\t\t\t<View gap={2} direction=\"row\">\n\t\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t\t\t<Button color=\"critical\">Critical button</Button>\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"custom on color values, apca\">\n\t\t\t<style>{onColorsCssApca}</style>\n\t\t\t<Theme name=\"on-color-apca\">\n\t\t\t\t<View gap={2} direction=\"row\">\n\t\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t\t\t<Button color=\"critical\">Critical button</Button>\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t</Example>\n);"}],"import":"import {\n    Actionable,\n    Alert,\n    Avatar,\n    Badge,\n    Button,\n    Card,\n    DropdownMenu,\n    Example,\n    Link,\n    Switch,\n    Text,\n    TextField,\n    Theme,\n    ThemePlayground,\n    View,\n} from \"reshaped\";","jsDocTags":{},"reactDocgen":{"description":"","methods":[],"displayName":"Theme","definedInFile":"/Users/shilman/projects/design-systems/reshaped/src/components/Theme/Theme.tsx","actualName":"Theme","exportName":"default"}},"sandbox":{"id":"sandbox","name":"Sandbox","path":"./src/Sandbox.stories.tsx","stories":[{"name":"preview","snippet":"const preview = () => {\n\treturn (\n\t\t<Preview>\n\t\t\t<Component />\n\t\t</Preview>\n\t);\n};"}],"import":"import { Image, MenuItem, Modal, Select, View } from \"reshaped\";","jsDocTags":{},"error":{"name":"No component found","message":"We could not detect the component from your story file. Specify meta.component.\n   7 | import MenuItem from \"components/MenuItem\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Sandbox\",\n  11 | \tchromatic: { disableSnapshot: true },\n  12 | };\n\n./src/Sandbox.stories.tsx:\nimport View from \"components/View\";\nimport Image from \"components/Image\";\nimport React from \"react\";\nimport Select from \"components/Select\";\nimport useToggle from \"hooks/useToggle\";\nimport Modal from \"components/Modal\";\nimport MenuItem from \"components/MenuItem\";\n\nexport default {\n\ttitle: \"Sandbox\",\n\tchromatic: { disableSnapshot: true },\n};\n\nconst Preview: React.FC<{ children: React.ReactNode }> = (props) => {\n\treturn (\n\t\t<View padding={20} gap={6}>\n\t\t\t<View position=\"absolute\" insetTop={0} insetStart={0}>\n\t\t\t\t<Image src=\"./logo.svg\" />\n\t\t\t</View>\n\n\t\t\t{props.children}\n\t\t</View>\n\t);\n};\n\nexport const preview = () => {\n\treturn (\n\t\t<Preview>\n\t\t\t<Component />\n\t\t</Preview>\n\t);\n};\n\nconst Component = () => {\n\tconst toggle = useToggle();\n\tconst [value, setValue] = React.useState(\"Dog\");\n\n\tconst handleClick = () => {\n\t\ttoggle.toggle();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Select name=\"animal\" placeholder=\"Select an animal\" onClick={handleClick}>\n\t\t\t\t{value}\n\t\t\t</Select>\n\t\t\t<Modal active={toggle.active} onClose={toggle.deactivate} position=\"bottom\" padding={2}>\n\t\t\t\t<MenuItem\n\t\t\t\t\troundedCorners\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetValue(\"Dog\");\n\t\t\t\t\t\ttoggle.deactivate();\n\t\t\t\t\t}}\n\t\t\t\t\tattributes={{\n\t\t\t\t\t\trole: \"option\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tDog\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem\n\t\t\t\t\troundedCorners\n\t\t\t\t\tattributes={{\n\t\t\t\t\t\trole: \"option\",\n\t\t\t\t\t}}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetValue(\"Turtle\");\n\t\t\t\t\t\ttoggle.deactivate();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tTurtle\n\t\t\t\t</MenuItem>\n\t\t\t</Modal>\n\t\t</>\n\t);\n};\n"}}}}
\ No newline at end of file
+{
+	"v": 0,
+	"components": {
+		"components-actionbar": {
+			"id": "components-actionbar",
+			"name": "ActionBar",
+			"path": "./src/components/ActionBar/tests/ActionBar.stories.tsx",
+			"stories": [
+				{
+					"name": "positionRelative",
+					"snippet": "const positionRelative = () => (\n    <Example>\n        <Example.Item title=\"position: top\">\n            <ActionBar position=\"top\">\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <ActionBar position=\"bottom\">\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "positionAbsolute",
+					"snippet": "const positionAbsolute = () => (\n    <Example>\n        <Example.Item title=\"position: top-start\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top-start\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: top\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: top-end\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"top-end\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom-start\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom-start\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar padding={2} position=\"bottom-end\" positionType=\"absolute\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "positionFixed",
+					"snippet": "const positionFixed = () => (\n    <>\n        <ActionBar padding={2} position=\"top-start\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"top\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"top-end\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom-start\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <ActionBar padding={2} position=\"bottom-end\" positionType=\"fixed\">\n            <Fixtures.Actions />\n        </ActionBar>\n\n        <div style={{ height: 2000 }} />\n    </>\n);"
+				},
+				{
+					"name": "elevated",
+					"snippet": "const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated, position: top\">\n            <ActionBar position=\"top\" elevated>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"elevated, position: bottom\">\n            <ActionBar elevated>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"auto elevated, position: bottom\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\">\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "offset",
+					"snippet": "const offset = () => (\n    <Example>\n        <Example.Item title=\"offset 2, position: top\">\n            <Fixtures.Container>\n                <ActionBar position=\"top\" positionType=\"absolute\" offset={2}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"offset 2, position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\" offset={2}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n\n        <Example.Item title=\"offset s: 2, m: 4, position: bottom-end\">\n            <Fixtures.Container>\n                <ActionBar position=\"bottom-end\" offset={{ s: 2, m: 4 }}>\n                    <Fixtures.Actions />\n                </ActionBar>\n            </Fixtures.Container>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "active",
+					"snippet": "const active = () => {\n    const barToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => barToggle.toggle()}>Toggle</Button>\n            <ActionBar active={barToggle.active} positionType=\"fixed\" position=\"top-end\">\n                <Fixtures.Actions />\n            </ActionBar>\n        </>\n    );\n};"
+				},
+				{
+					"name": "padding",
+					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 6\">\n            <ActionBar padding={6}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"paddingBlock: 2, paddingInline: 4\">\n            <ActionBar paddingBlock={2} paddingInline={4}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n\n        <Example.Item title=\"padding: [s] 4, [m+] 6\">\n            <ActionBar padding={{ s: 4, m: 6 }}>\n                <Placeholder />\n            </ActionBar>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <ActionBar className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </ActionBar>\n    </div>\n);"
+				}
+			],
+			"import": "import { ActionBar, Button, Example, Placeholder, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "ActionBar",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/ActionBar/ActionBar.tsx",
+				"actualName": "ActionBar",
+				"exportName": "default"
+			}
+		},
+		"components-alert": {
+			"id": "components-alert",
+			"name": "Alert",
+			"path": "./src/components/Alert/tests/Alert.stories.tsx",
+			"stories": [
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        {([\"neutral\", \"primary\", \"critical\", \"positive\", \"warning\"] as const).map((color) => (\n            <Example.Item title={`color: ${color}`} key={color}>\n                <Alert\n                    color={color}\n                    title=\"Alert title goes here\"\n                    icon={IconZap}\n                    actionsSlot={\n                        <>\n                            <Link\n                                variant=\"plain\"\n                                color={color === \"neutral\" ? \"primary\" : color}\n                                onClick={() => {}}\n                            >\n                                View now\n                            </Link>\n                            <Link\n                                variant=\"plain\"\n                                color={color === \"neutral\" ? \"primary\" : color}\n                                onClick={() => {}}\n                            >\n                                Dismiss\n                            </Link>\n                        </>\n                    }\n                >\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard\n                </Alert>\n            </Example.Item>\n        ))}\n    </Example>\n);"
+				},
+				{
+					"name": "inline",
+					"snippet": "const inline = () => (\n    <Example>\n        <Example.Item title=\"inline: true\">\n            <Alert\n                inline\n                title=\"Alert title goes here\"\n                icon={IconZap}\n                actionsSlot={\n                    <>\n                        <Link variant=\"plain\" onClick={() => {}}>\n                            View now\n                        </Link>\n                        <Link variant=\"plain\" onClick={() => {}}>\n                            Dismiss\n                        </Link>\n                    </>\n                }\n            >\n                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n                been the industry's standard\n            </Alert>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "bleed",
+					"snippet": "const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4\">\n            <Alert bleed={4} icon={IconZap}>\n                Content\n            </Alert>\n        </Example.Item>\n        <Example.Item title=\"bleed: [s] 4, [m+] 0\">\n            <Alert bleed={{ s: 4, m: 0 }} icon={IconZap}>\n                Content\n            </Alert>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Alert className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </Alert>\n    </div>\n);"
+				}
+			],
+			"import": "import { Alert, Example, Link, Placeholder } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Alert",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Alert/Alert.tsx",
+				"actualName": "Alert",
+				"exportName": "default"
+			}
+		},
+		"components-autocomplete": {
+			"id": "components-autocomplete",
+			"name": "Autocomplete",
+			"path": "./src/components/Autocomplete/tests/Autocomplete.stories.tsx",
+			"stories": [
+				{
+					"name": "active",
+					"snippet": "const active = (args) => {\n    const toggle = useToggle(true);\n\n    return (\n        <Example>\n            <Example.Item title=\"active, onOpen, onClose\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete\n                        name=\"fruit\"\n                        placeholder=\"Pick your food\"\n                        active={toggle.active}\n                        onOpen={() => {\n                            args.handleOpen();\n                            toggle.activate();\n                        }}\n                        onClose={() => {\n                            args.handleClose();\n                            toggle.deactivate();\n                        }}\n                        onChange={(args) => console.log(args)}\n                    >\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "base",
+					"snippet": "const base = () => {\n    const [value, setValue] = React.useState(\"\");\n\n    return (\n        <Example>\n            <Example.Item title=\"Base\">\n                <FormControl>\n                    <FormControl.Label>Food</FormControl.Label>\n                    <Autocomplete\n                        name=\"fruit\"\n                        placeholder=\"Pick your food\"\n                        value={value}\n                        onChange={(args) => setValue(args.value)}\n                        onBackspace={fn()}\n                        onItemSelect={fn()}>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "itemData",
+					"snippet": "const itemData = () => {\n    return (\n        <Example>\n            <Example.Item title=\"item data\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete name=\"fruit\" placeholder=\"Pick your food\" onItemSelect={fn()} active>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v} data={i === 1 ? { foo: true } : undefined}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "itemDisabled",
+					"snippet": "const itemDisabled = () => {\n    return (\n        <Example>\n            <Example.Item title=\"item disabled\">\n                <FormControl>\n                    <FormControl.Label>Label</FormControl.Label>\n                    <Autocomplete name=\"fruit\" placeholder=\"Pick your food\" active>\n                        {[\"Pizza\", \"Pie\", \"Ice-cream\"].map((v, i) => {\n                            return (\n                                <Autocomplete.Item key={v} value={v} disabled={i === 1}>\n                                    {v}\n                                </Autocomplete.Item>\n                            );\n                        })}\n                    </Autocomplete>\n                </FormControl>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "multiselect",
+					"snippet": "const multiselect = () => {\n    const options = [\n        \"Pizza\",\n        \"Pie\",\n        \"Ice-cream\",\n        \"Fries\",\n        \"Salad\",\n        \"Option 4\",\n        \"Option 5\",\n        \"Option 6\",\n    ];\n\n    const inputRef = React.useRef<HTMLInputElement>(null);\n    const [values, setValues] = React.useState<string[]>([\n        \"Option 4\",\n        \"Option 5\",\n        \"Option 6\",\n        \"Pizza\",\n        \"Ice-cream\",\n    ]);\n    const [query, setQuery] = React.useState(\"\");\n\n    const handleDismiss = (dismissedValue: string) => {\n        const nextValues = values.filter((value) => value !== dismissedValue);\n        setValues(nextValues);\n        inputRef.current?.focus();\n    };\n\n    const valuesNode = values.map((value) => (\n        <Badge dismissAriaLabel=\"Dismiss value\" onDismiss={() => handleDismiss(value)} key={value}>\n            {value}\n        </Badge>\n    ));\n\n    return (\n        <FormControl>\n            <FormControl.Label>Food</FormControl.Label>\n            <Autocomplete\n                name=\"fruit\"\n                value={query}\n                placeholder=\"Pick your food\"\n                startSlot={valuesNode}\n                multiline\n                inputAttributes={{ ref: inputRef }}\n                onChange={(args) => setQuery(args.value)}\n                onBackspace={() => {\n                    if (query.length === 0) {\n                        setValues((prev) => prev.slice(0, -1));\n                    }\n                }}\n                onItemSelect={(args) => {\n                    setQuery(\"\");\n                    setValues((prev) => [...prev, args.value]);\n                }}\n            >\n                {options.map((v) => {\n                    if (!v.toLowerCase().includes(query.toLowerCase())) return;\n                    if (values.includes(v)) return;\n\n                    return (\n                        <Autocomplete.Item key={v} value={v}>\n                            {v}\n                        </Autocomplete.Item>\n                    );\n                })}\n            </Autocomplete>\n        </FormControl>\n    );\n};"
+				}
+			],
+			"import": "import { Autocomplete, Badge, Example, FormControl } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Autocomplete",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Autocomplete/Autocomplete.tsx",
+				"actualName": "Autocomplete",
+				"exportName": "default"
+			}
+		},
+		"components-avatar": {
+			"id": "components-avatar",
+			"name": "Avatar",
+			"path": "./src/components/Avatar/tests/Avatar.stories.tsx",
+			"stories": [
+				{
+					"name": "src",
+					"snippet": "const src = () => (\n    <Example>\n        <Example.Item title=\"src, alt\">\n            <Avatar\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n                alt=\"Amsterdam canal\"\n                size={12}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"src\">\n            <Avatar src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "initials",
+					"snippet": "const initials = () => (\n    <Example>\n        <Example.Item title=\"initials\">\n            <Avatar initials=\"RS\" />\n        </Example.Item>\n\n        <Example.Item title=\"icon\">\n            <Avatar icon={IconZap} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: 6\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={6} icon={IconZap} />\n                <Avatar size={6} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: 15\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={15} icon={IconZap} />\n                <Avatar size={15} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: 40\">\n            <View direction=\"row\" gap={3}>\n                <Avatar size={40} icon={IconZap} />\n                <Avatar size={40} initials=\"RS\" squared />\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] 10\", \"[m+] 20\"]}>\n            <View direction=\"row\" gap={3}>\n                <Avatar size={{ s: 10, m: 20 }} icon={IconZap} />\n                <Avatar size={{ s: 10, m: 20 }} icon={IconZap} squared />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "squared",
+					"snippet": "const squared = () => (\n    <Example>\n        <Example.Item title=\"squared, with image\">\n            <Avatar\n                squared\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n            />\n        </Example.Item>\n        <Example.Item title=\"squared, with initials\">\n            <Avatar squared initials=\"RS\" />\n        </Example.Item>\n        <Example.Item title=\"squared, with initials\">\n            <Avatar squared icon={IconZap} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "colors",
+					"snippet": "const colors = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"neutral\" icon={IconZap} />\n                <Avatar color=\"neutral\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"primary\" icon={IconZap} />\n                <Avatar color=\"primary\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"positive\" icon={IconZap} />\n                <Avatar color=\"positive\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"warning\" icon={IconZap} />\n                <Avatar color=\"warning\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <View gap={4} direction=\"row\">\n                <Avatar color=\"critical\" icon={IconZap} />\n                <Avatar color=\"critical\" variant=\"faded\" icon={IconZap} />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "fallback",
+					"snippet": "const fallback = (args) => {\n    const [error, setError] = useState(false);\n\n    return (\n        <Avatar\n            src={error ? undefined : \"/foo\"}\n            icon={IconZap}\n            imageAttributes={{\n                onError: () => {\n                    setError(true);\n                    args.handleError();\n                },\n            }}\n        />\n    );\n};"
+				},
+				{
+					"name": "renderImage",
+					"snippet": "const renderImage = () => (\n    <Example>\n        <Example.Item title=\"renderImage\">\n            <Avatar\n                src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n                alt=\"Amsterdam canal\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image\" />}\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Avatar\n            src=\"https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            imageAttributes={{ id: \"test-image-id\", alt: \"test image\" }}\n        />\n    </div>\n);"
+				}
+			],
+			"import": "import { Avatar, Example, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Avatar",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Avatar/Avatar.tsx",
+				"actualName": "Avatar",
+				"exportName": "default"
+			}
+		},
+		"components-badge": {
+			"id": "components-badge",
+			"name": "Badge",
+			"path": "./src/components/Badge/tests/Badge.stories.tsx",
+			"stories": [
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Badge>Badge</Badge>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <Badge variant=\"faded\">Badge</Badge>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <Badge variant=\"outline\">Badge</Badge>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"primary\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"primary\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"primary\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: positive, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"positive\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"positive\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"positive\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: critical, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"critical\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"critical\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"critical\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"color: warning, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge color=\"warning\">Badge</Badge>\n                <Badge variant=\"faded\" color=\"warning\">\n                    Badge\n                </Badge>\n                <Badge variant=\"outline\" color=\"warning\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"small\">Badge</Badge>\n                <Badge rounded size=\"small\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge>Badge</Badge>\n                <Badge rounded>Badge</Badge>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large, not rounded and rounded\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"large\">Badge</Badge>\n                <Badge rounded size=\"large\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "icon",
+					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={3} direction=\"row\">\n                <Badge icon={IconCheckmark} endIcon={IconChevronRight} size=\"small\">\n                    Badge\n                </Badge>\n                <Badge icon={IconCheckmark} size=\"small\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={3} direction=\"row\">\n                <Badge icon={IconCheckmark} endIcon={IconChevronRight}>\n                    Badge\n                </Badge>\n                <Badge icon={IconCheckmark} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={3} direction=\"row\">\n                <Badge size=\"large\" icon={IconCheckmark} endIcon={IconChevronRight}>\n                    Badge\n                </Badge>\n\n                <Badge icon={IconCheckmark} size=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "onDismiss",
+					"snippet": "const onDismiss = () => <Example>\n    <Example.Item title=\"onDismiss\">\n        <Badge onDismiss={fn()} dismissAriaLabel=\"Dismiss\">Badge\n                            </Badge>\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "rounded",
+					"snippet": "const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded, all variants\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded>Badge</Badge>\n                <Badge rounded variant=\"faded\">\n                    Badge\n                </Badge>\n                <Badge rounded variant=\"outline\">\n                    Badge\n                </Badge>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"rounded, all sizes, color: critical\", \"one character, renders as circle\"]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Badge rounded color=\"critical\" size=\"small\">\n                    2\n                </Badge>\n                <Badge rounded color=\"critical\">\n                    2\n                </Badge>\n                <Badge rounded color=\"critical\" size=\"large\">\n                    2\n                </Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "empty",
+					"snippet": "const empty = () => (\n    <Example>\n        <Example.Item title=\"empty, not rounded, all sizes, color: critical\">\n            <View direction=\"row\" gap={3}>\n                <Badge size=\"small\" color=\"critical\" />\n                <Badge color=\"critical\" />\n                <Badge size=\"large\" color=\"critical\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"empty, rounded, all sizes, color: critical\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded size=\"small\" color=\"critical\" />\n                <Badge rounded color=\"critical\" />\n                <Badge rounded size=\"large\" color=\"critical\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"empty, rounded, all sizes, color: neutral\">\n            <View direction=\"row\" gap={3}>\n                <Badge rounded size=\"small\" color=\"neutral\" />\n                <Badge rounded />\n                <Badge rounded size=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "highlighted",
+					"snippet": "const highlighted = () => (\n    <Example>\n        <Example.Item title=\"highlighted, color: neutral\">\n            <View gap={3} direction=\"row\">\n                <Badge highlighted>Badge</Badge>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "container",
+					"snippet": "const container = () => {\n    const [hidden, setHidden] = React.useState(false);\n\n    return (\n        <Example title={<Button onClick={() => setHidden(!hidden)}>Toggle badges</Button>}>\n            <Example.Item title=\"position: top-end\">\n                <Badge.Container>\n                    <Badge color=\"primary\" hidden={hidden}>\n                        5\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: bottom-end\">\n                <Badge.Container position=\"bottom-end\">\n                    <Badge color=\"primary\" hidden={hidden}>\n                        5\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: top-end, rounded, multiple digits\">\n                <Badge.Container>\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        123\n                    </Badge>\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title=\"position: top-end, rounded, empty\">\n                <Badge.Container>\n                    <Badge color=\"primary\" rounded hidden={hidden} />\n                    <Avatar initials=\"A\" squared />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: top-end, overlap\", \"should cover the circular avatar\"]}>\n                <Badge.Container overlap>\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        2\n                    </Badge>\n                    <Avatar initials=\"A\" />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: bottom-end, overlap\", \"should cover the circular avatar\"]}>\n                <Badge.Container overlap position=\"bottom-end\">\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden}>\n                        2\n                    </Badge>\n                    <Avatar initials=\"A\" />\n                </Badge.Container>\n            </Example.Item>\n\n            <Example.Item title={[\"position: top-end, overlap\", \"should cover the icon\"]}>\n                <Badge.Container overlap position=\"top-end\">\n                    <Badge size=\"small\" color=\"primary\" rounded hidden={hidden} />\n                    <Icon svg={IconCheckmark} size={5} />\n                </Badge.Container>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "href",
+					"snippet": "const href = () => (\n    <Badge href=\"https://reshaped.so\" dismissAriaLabel=\"Dismiss\">\n        Badge\n    </Badge>\n);"
+				},
+				{
+					"name": "onClick",
+					"snippet": "const onClick = () => <Badge onClick={fn()}>Badge</Badge>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Badge color=\"primary\" className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
+				}
+			],
+			"import": "import { Avatar, Badge, Button, Example, Icon, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Badge",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Badge/Badge.tsx",
+				"actualName": "Badge",
+				"exportName": "default"
+			}
+		},
+		"components-breadcrumbs": {
+			"id": "components-breadcrumbs",
+			"name": "Breadcrumbs",
+			"path": "./src/components/Breadcrumbs/tests/Breadcrumbs.stories.tsx",
+			"stories": [
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <Breadcrumbs ariaLabel=\"breadcrumb neutral\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"color: primary\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb primary\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "item",
+					"snippet": "const item = () => (\n    <Example>\n        <Example.Item title=\"disabled item\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb disabled\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}} disabled>\n                    Disabled item 2\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "icon",
+					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"item with icon\">\n            <Breadcrumbs color=\"primary\" ariaLabel=\"breadcrumb with icon\">\n                <Breadcrumbs.Item icon={IconZap} onClick={() => {}}>\n                    Item 1\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "slots",
+					"snippet": "const slots = () => (\n    <Example>\n        <Example.Item title=\"slot: separator\">\n            <Breadcrumbs color=\"primary\" separator=\"/\" ariaLabel=\"breadcrumb with separator\">\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"custom child content\">\n            <Breadcrumbs ariaLabel=\"breadcrumb with custom children\">\n                <Breadcrumbs.Item onClick={() => {}}>\n                    <Badge>Item 1</Badge>\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>\n                    <Badge>Item 2</Badge>\n                </Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 3</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "collapsed",
+					"snippet": "const collapsed = () => (\n    <Example>\n        <Example.Item title=\"collapsed, 3 items shown by default\">\n            <Breadcrumbs\n                defaultVisibleItems={3}\n                ariaLabel=\"breadcrumbs one\"\n                expandAriaLabel=\"Expand items\"\n            >\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"collapsed, 4 items shown by default\">\n            <Breadcrumbs\n                defaultVisibleItems={4}\n                ariaLabel=\"breadcrumb two\"\n                expandAriaLabel=\"Expand items\"\n            >\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n\n        <Example.Item title=\"collapsed, 3 items shown by default, not expandable\">\n            <Breadcrumbs defaultVisibleItems={3} ariaLabel=\"breadcrumb three\" disableExpand>\n                <Breadcrumbs.Item onClick={() => {}}>Item 1</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 2</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 3</Breadcrumbs.Item>\n                <Breadcrumbs.Item onClick={() => {}}>Item 4</Breadcrumbs.Item>\n                <Breadcrumbs.Item>Item 5</Breadcrumbs.Item>\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "multiline",
+					"snippet": "const multiline = () => (\n    <Example>\n        <Example.Item title=\"wraps content when multiline\">\n            <Breadcrumbs ariaLabel=\"breadcrumb multiline\">\n                {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (\n                    <Breadcrumbs.Item onClick={() => {}} key={i}>\n                        Item {i}\n                    </Breadcrumbs.Item>\n                ))}\n            </Breadcrumbs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "onClick",
+					"snippet": "const onClick = () => <Breadcrumbs>\n    <Breadcrumbs.Item onClick={fn()}>Trigger</Breadcrumbs.Item>\n    <Breadcrumbs.Item onClick={fn()} disabled>Trigger\n                    </Breadcrumbs.Item>\n</Breadcrumbs>;"
+				},
+				{
+					"name": "href",
+					"snippet": "const href = () => (\n    <Breadcrumbs>\n        <Breadcrumbs.Item href=\"https://reshaped.so\">Trigger</Breadcrumbs.Item>\n    </Breadcrumbs>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Breadcrumbs className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Breadcrumbs.Item>Trigger</Breadcrumbs.Item>\n        </Breadcrumbs>\n    </div>\n);"
+				}
+			],
+			"import": "import { Badge, Breadcrumbs, Example } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Breadcrumbs",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Breadcrumbs/Breadcrumbs.tsx",
+				"actualName": "Breadcrumbs",
+				"exportName": "default"
+			}
+		},
+		"components-button": {
+			"id": "components-button",
+			"name": "Button",
+			"path": "./src/components/Button/tests/Button.stories.tsx",
+			"stories": [
+				{
+					"name": "variantAndColor",
+					"snippet": "const variantAndColor = () => (\n    <Example>\n        <Example.Item title=\"variant: solid\">\n            <View gap={4} direction=\"row\">\n                <Button onClick={() => {}}>Button</Button>\n                <Button onClick={() => {}} color=\"primary\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"faded\">\n                    Button\n                </Button>\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"faded\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"outline\">\n                    Button\n                </Button>\n\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"outline\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: ghost\">\n            <View direction=\"row\" gap={4}>\n                <Button onClick={() => {}} variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"primary\" variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"critical\" variant=\"ghost\">\n                    Button\n                </Button>\n                <Button onClick={() => {}} color=\"positive\" variant=\"ghost\">\n                    Button\n                </Button>\n                <View padding={4} borderRadius=\"medium\" attributes={{ style: { color: \"#029CFD\" } }}>\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n\n                <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n                <View padding={4} backgroundColor=\"white\" borderRadius=\"medium\">\n                    <Button onClick={() => {}} color=\"inherit\" variant=\"ghost\">\n                        Inherit\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"color: media\">\n            <View backgroundColor=\"primary\" borderRadius=\"medium\" padding={4} direction=\"row\" gap={4}>\n                <Button onClick={() => {}} color=\"media\">\n                    Button\n                </Button>\n\n                <Button onClick={() => {}} color=\"media\" variant=\"faded\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "icon",
+					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Button onClick={() => {}} icon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"endIcon\">\n            <Button onClick={() => {}} endIcon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"icon, endIcon\">\n            <Button onClick={() => {}} icon={IconZap} endIcon={IconZap}>\n                Button\n            </Button>\n        </Example.Item>\n\n        <Example.Item title=\"icon only\">\n            <Button onClick={() => {}} icon={IconZap} attributes={{ \"aria-label\": \"Action\" }} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"small\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"small\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Button icon={IconZap}>Button</Button>\n                <Button variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"large\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"large\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <View gap={4} direction=\"row\">\n                <Button size=\"xlarge\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"xlarge\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button size=\"xlarge\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large, [m+] medium\">\n            <Button size={{ s: \"large\", m: \"medium\" }} icon={IconZap}>\n                Responsive\n            </Button>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "elevated",
+					"snippet": "const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated, color: neutral\">\n            <View direction=\"row\" gap={4}>\n                <Button elevated onClick={() => {}}>\n                    Button\n                </Button>\n                <Button elevated variant=\"outline\" onClick={() => {}}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"elevated, color\">\n            <View direction=\"row\" gap={4}>\n                <Button elevated color=\"primary\">\n                    Button\n                </Button>\n                <Button elevated variant=\"outline\" color=\"primary\">\n                    Button\n                </Button>\n                <View backgroundColor=\"primary\" padding={4} borderRadius=\"medium\">\n                    <Button color=\"media\" elevated>\n                        Button\n                    </Button>\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "rounded",
+					"snippet": "const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded, size: small, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" size=\"small\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, size: medium, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, size: large, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"outline\" size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button rounded variant=\"ghost\" size=\"large\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"rounded, icon only, all sizes\">\n            <View gap={3} direction=\"row\">\n                <Button rounded size=\"small\" icon={IconZap} />\n                <Button rounded icon={IconZap} />\n                <Button rounded size=\"large\" icon={IconZap} />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "fullWidth",
+					"snippet": "const fullWidth = () => (\n    <Example>\n        <Example.Item title=\"fullWidth, all variants\">\n            <View gap={3}>\n                <Button fullWidth>Neutral</Button>\n                <Button fullWidth variant=\"faded\">\n                    Faded\n                </Button>\n                <Button fullWidth variant=\"outline\">\n                    Outline\n                </Button>\n                <Button fullWidth variant=\"ghost\">\n                    Ghost\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive fullWidth\", \"[s] true\", \"[m+] false\"]}>\n            <Button fullWidth={{ s: true, m: false }}>Button</Button>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "loading",
+					"snippet": "const loading = () => (\n    <Example>\n        <Example.Item title=\"loading, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"loading, color critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"critical\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"loading, color positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"faded\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"outline\">\n                    Button\n                </Button>\n                <Button loading loadingAriaLabel=\"Loading\" color=\"positive\" variant=\"ghost\">\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"loading, color: media\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n\n                <div style={{ position: \"absolute\", top: 16, left: 16 }}>\n                    <View gap={3} direction=\"row\">\n                        <Button color=\"media\" loading loadingAriaLabel=\"Loading\">\n                            Button\n                        </Button>\n                        <Button color=\"media\" variant=\"faded\" loading loadingAriaLabel=\"Loading\">\n                            Button\n                        </Button>\n                    </View>\n                </div>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"loading, long button text\", \"button size should stay the same\"]}>\n            <Button loading loadingAriaLabel=\"Loading\" color=\"primary\">\n                Long button text\n            </Button>\n        </Example.Item>\n\n        <Example.Item title={[\"loading, icon only\", \"button keep square 1/1 ratio\"]}>\n            <Button icon={IconZap} rounded loading loadingAriaLabel=\"Loading\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "highlighted",
+					"snippet": "const highlighted = () => (\n    <Example>\n        <Example.Item title=\"highlighted, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"highlighted, color: critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted color=\"critical\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"critical\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"highlighted, color: positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button highlighted color=\"positive\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button highlighted color=\"positive\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, color: neutral, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled icon={IconZap} onClick={() => {}}>\n                    Button\n                </Button>\n                <Button disabled variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"disabled, color: critical, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled color=\"critical\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"critical\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"disabled, color: positive, all variants\">\n            <View gap={3} direction=\"row\">\n                <Button disabled color=\"positive\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"faded\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"outline\" icon={IconZap}>\n                    Button\n                </Button>\n                <Button disabled color=\"positive\" variant=\"ghost\" icon={IconZap}>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"disabled, color: media\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n\n                <div style={{ position: \"absolute\", top: 16, left: 16 }}>\n                    <View gap={3} direction=\"row\">\n                        <Button color=\"media\" disabled>\n                            Button\n                        </Button>\n                        <Button color=\"media\" variant=\"faded\" disabled>\n                            Button\n                        </Button>\n                    </View>\n                </div>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "aligner",
+					"snippet": "const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner: all\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>Content</View.Item>\n                <Button.Aligner>\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: top\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"top\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: top and end\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side={[\"top\", \"end\"]}>\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: bottom\">\n            <View padding={4} borderColor=\"neutral-faded\" direction=\"row\" gap={2} align=\"end\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"bottom\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: start\">\n            <View padding={4} borderColor=\"neutral-faded\" gap={2} align=\"start\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"start\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"aligner: end\">\n            <View padding={4} borderColor=\"neutral-faded\" gap={2} align=\"end\">\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n                <Button.Aligner side=\"end\">\n                    <Button icon={IconZap} variant=\"ghost\" />\n                </Button.Aligner>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "composition",
+					"snippet": "const composition = () => (\n    <Example>\n        <Example.Item title=\"slot gap\">\n            <Button variant=\"outline\">\n                <Avatar size={6} initials=\"RS\" />\n                Label\n                <Hotkey>B</Hotkey>\n            </Button>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "href",
+					"snippet": "const href = () => <Button href=\"https://reshaped.so\">Trigger</Button>;"
+				},
+				{
+					"name": "onClick",
+					"snippet": "const onClick = () => <Button onClick={fn()}>Trigger</Button>;"
+				},
+				{
+					"name": "hrefOnClick",
+					"snippet": "const hrefOnClick = (args) => (\n    <Button\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </Button>\n);"
+				},
+				{
+					"name": "as",
+					"snippet": "const as = () => (\n    <Example>\n        <Example.Item title=\"as: span\">\n            <Button onClick={() => {}} as=\"span\">\n                Trigger\n            </Button>\n        </Example.Item>\n        <Example.Item title=\"render, disabled\">\n            <Button\n                disabled\n                onClick={() => {}}\n                render={(props) => <section {...props} />}\n                attributes={{ \"data-testid\": \"render-el\" }}\n            >\n                Trigger\n            </Button>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Button className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Button>\n    </div>\n);"
+				},
+				{
+					"name": "group",
+					"snippet": "const group = () => (\n    <Example>\n        <Example.Item title=\"with icon\">\n            <Button.Group>\n                <Button rounded>Submit</Button>\n                <Button rounded icon={IconZap} />\n            </Button.Group>\n        </Example.Item>\n        <Example.Item title=\"variant: solid\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\", \"media\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color}>One</Button>\n                        <Button color={color}>Two</Button>\n                        <Button color={color}>Three</Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: outline\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"outline\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"outline\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"outline\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n        <Example.Item title=\"variant: faded\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\", \"media\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"faded\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"faded\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"faded\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"variant: ghost\">\n            <View gap={2}>\n                {([\"neutral\", \"primary\", \"critical\", \"positive\"] as const).map((color) => (\n                    <Button.Group key={color}>\n                        <Button color={color} variant=\"ghost\">\n                            One\n                        </Button>\n                        <Button color={color} variant=\"ghost\">\n                            Two\n                        </Button>\n                        <Button color={color} variant=\"ghost\">\n                            Three\n                        </Button>\n                    </Button.Group>\n                ))}\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "groupClassName",
+					"snippet": "const groupClassName = () => (\n    <div data-testid=\"root\">\n        <Button.Group className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Button>Trigger</Button>\n        </Button.Group>\n    </div>\n);"
+				}
+			],
+			"import": "import { Avatar, Button, Example, Hotkey, Image, Placeholder, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Button",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Button/Button.tsx",
+				"actualName": "Button",
+				"exportName": "default"
+			}
+		},
+		"components-calendar": {
+			"id": "components-calendar",
+			"name": "Calendar",
+			"path": "./src/components/Calendar/tests/Calendar.stories.tsx",
+			"stories": [
+				{
+					"name": "defaultMonth",
+					"snippet": "const defaultMonth = () => (\n    <Example>\n        <Example.Item title=\"defaultMonth: 2020 January\">\n            <Calendar defaultMonth={new Date(2020, 0)} range />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "uncontrolled",
+					"snippet": "const uncontrolled = () => <Example>\n    <Example.Item title=\"defaultValue\">\n        <Calendar\n            defaultMonth={new Date(2020, 0)}\n            defaultValue={new Date(2020, 0, 10)}\n            onChange={fn()} />\n    </Example.Item>\n    <Example.Item title=\"defaultValue, range\">\n        <Calendar\n            range\n            defaultMonth={new Date(2020, 0)}\n            defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }}\n            onChange={fn()} />\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "controlled",
+					"snippet": "const controlled = () => <Example>\n    <Example.Item title=\"value\">\n        <Calendar\n            defaultMonth={new Date(2020, 0)}\n            value={new Date(2020, 0, 10)}\n            onChange={fn()} />\n    </Example.Item>\n    <Example.Item title=\"defaultValue, range\">\n        <Calendar\n            range\n            defaultMonth={new Date(2020, 0)}\n            value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }}\n            onChange={fn()} />\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "selectedDates",
+					"snippet": "const selectedDates = () => (\n    <Example>\n        <Example.Item title=\"selectedDates: [4,8]\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                value={null}\n                selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "minMax",
+					"snippet": "const minMax = () => (\n    <Example>\n        <Example.Item title=\"min: 4, max: 20\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                min={new Date(2020, 0, 4)}\n                max={new Date(2020, 0, 20)}\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "firstWeekDay",
+					"snippet": "const firstWeekDay = () => (\n    <Example>\n        <Example.Item title=\"firstWeekDay: 3 (Wed)\">\n            <Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "translation",
+					"snippet": "const translation = () => (\n    <Example>\n        <Example.Item title=\"translated to NL\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                renderMonthLabel={({ date }) => date.toLocaleDateString(\"nl\", { month: \"short\" })}\n                renderSelectedMonthLabel={({ date }) =>\n                    date.toLocaleDateString(\"nl\", { month: \"long\", year: \"numeric\" })\n                }\n                renderWeekDay={({ date }) => date.toLocaleDateString(\"nl\", { weekday: \"short\" })}\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "ariaLabels",
+					"snippet": "const ariaLabels = () => (\n    <Example>\n        <Example.Item title=\"aria labels\">\n            <Calendar\n                defaultMonth={new Date(2020, 0)}\n                nextYearAriaLabel=\"Test next year\"\n                nextMonthAriaLabel=\"Test next month\"\n                renderDateAriaLabel={() => \"Test date\"}\n                renderMonthAriaLabel={() => \"Test month\"}\n                previousYearAriaLabel=\"Test previous year\"\n                previousMonthAriaLabel=\"Test previous month\"\n                monthSelectionAriaLabel=\"Test month selection\"\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "monthSelection",
+					"snippet": "const monthSelection = () => (\n    <Example>\n        <Example.Item title=\"month selection\">\n            <Calendar defaultMonth={new Date(2020, 1)} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "keyboardNavigation",
+					"snippet": "const keyboardNavigation = () => (\n    <Example>\n        <Example.Item title=\"keyboard navigation\">\n            <Calendar defaultMonth={new Date(2020, 0)} />\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Calendar, Example } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Calendar",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Calendar/Calendar.tsx",
+				"actualName": "Calendar",
+				"exportName": "default"
+			}
+		},
+		"components-card": {
+			"id": "components-card",
+			"name": "Card",
+			"path": "./src/components/Card/tests/Card.stories.tsx",
+			"stories": [
+				{
+					"name": "padding",
+					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: default\">\n            <Card>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title=\"padding: 2\">\n            <Card padding={2}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title=\"padding: 0\">\n            <Card padding={0}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive padding\", \"[s] 4\", \"[m+] 8\"]}>\n            <Card padding={{ s: 4, m: 8 }}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "selected",
+					"snippet": "const selected = () => (\n    <Example>\n        <Example.Item title=\"selected\">\n            <Card selected>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "elevated",
+					"snippet": "const elevated = () => (\n    <Example>\n        <Example.Item title=\"elevated\">\n            <Card elevated>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "bleed",
+					"snippet": "const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4\">\n            <Card bleed={4}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n        <Example.Item title={[\"responsive bleed\", \"[s] 4\", \"[m+] 0\"]}>\n            <Card bleed={{ s: 4, m: 0 }}>\n                <Placeholder />\n            </Card>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "height",
+					"snippet": "const height = () => (\n    <Example>\n        <Example.Item title=\"height: 200px\">\n            <Card height=\"200px\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "onClick",
+					"snippet": "const onClick = () => <Card onClick={fn()}>Trigger</Card>;"
+				},
+				{
+					"name": "href",
+					"snippet": "const href = () => <Card href=\"https://reshaped.so\">Trigger</Card>;"
+				},
+				{
+					"name": "as",
+					"snippet": "const as = () => <Card as=\"span\" attributes={{ \"data-testid\": \"root\" }} />;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Card className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
+				}
+			],
+			"import": "import { Card, Example, Placeholder } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Card",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Card/Card.tsx",
+				"actualName": "Card",
+				"exportName": "default"
+			}
+		},
+		"components-carousel": {
+			"id": "components-carousel",
+			"name": "Carousel",
+			"path": "./src/components/Carousel/tests/Carousel.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n    <Carousel attributes={{ \"data-testid\": \"test-id\" }} visibleItems={3}>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n        <Placeholder h={100}>Content</Placeholder>\n    </Carousel>\n);"
+				},
+				{
+					"name": "visibleItems",
+					"snippet": "const visibleItems = () => (\n    <Example>\n        <Example.Item title=\"visibleItems: 3\">\n            <Carousel visibleItems={3}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive visibleItems\", \"s: 2, m+ 3\"]}>\n            <Carousel visibleItems={{ s: 2, m: 3 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title=\"visibleItems: auto\">\n            <Carousel>\n                <Placeholder h={100} />\n                <Placeholder h={100} w={200} />\n                <Placeholder h={100} w={300} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "gap",
+					"snippet": "const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 2, visibleItems 3\">\n            <Carousel visibleItems={3} gap={2}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"gap: responsive, visibleItems: 3\", \"s: 2, l: 8\"]}>\n            <Carousel visibleItems={3} gap={{ s: 2, l: 8 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "bleed",
+					"snippet": "const bleed = () => (\n    <Example>\n        <Example.Item title=\"bleed: 4, visibleItems: 3\">\n            <Carousel visibleItems={3} bleed={4}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive bleed, visibleItems: 3\", \"[s] 4, [l+] 0\"]}>\n            <Carousel visibleItems={3} bleed={{ s: 4, l: 0 }}>\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "navigationDisplay",
+					"snippet": "const navigationDisplay = () => (\n    <Example>\n        <Example.Item title=\"navigationDisplay: hidden\">\n            <Carousel\n                visibleItems={3}\n                navigationDisplay=\"hidden\"\n                attributes={{ \"data-testid\": \"test-id\" }}\n            >\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n                <Placeholder h={100} />\n            </Carousel>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "instanceRef",
+					"snippet": "const instanceRef = (args) => {\n    const carouselRef = React.useRef<CarouselInstanceRef>(null);\n    const [index, setIndex] = React.useState(0);\n\n    return (\n        <Example>\n            <Example.Item title=\"instanceRef, onChange\">\n                <View gap={3}>\n                    <View gap={3} direction=\"row\" align=\"center\">\n                        <Button onClick={() => carouselRef.current?.navigateBack()}>Back</Button>\n                        <Button onClick={() => carouselRef.current?.navigateForward()}>Forward</Button>\n                        <Button onClick={() => carouselRef.current?.navigateTo(3)}>To 3</Button>\n                        <View.Item>Index: {index}</View.Item>\n                    </View>\n                    <Carousel\n                        visibleItems={2}\n                        instanceRef={carouselRef}\n                        navigationDisplay=\"hidden\"\n                        onChange={(changeArgs) => {\n                            args.handleChange(changeArgs);\n                            setIndex(changeArgs.index);\n                        }}\n                    >\n                        <Placeholder h={100}>Item 0</Placeholder>\n                        <Placeholder h={100}>Item 1</Placeholder>\n                        <Placeholder h={100}>Item 2</Placeholder>\n                        <Placeholder h={100}>Item 3</Placeholder>\n                        <Placeholder h={100}>Item 4</Placeholder>\n                        <Placeholder h={100}>Item 5</Placeholder>\n                    </Carousel>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Carousel visibleItems={2} className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder h={100}>Item 0</Placeholder>\n            <Placeholder h={100}>Item 1</Placeholder>\n            <Placeholder h={100}>Item 2</Placeholder>\n            <Placeholder h={100}>Item 3</Placeholder>\n            <Placeholder h={100}>Item 4</Placeholder>\n            <Placeholder h={100}>Item 5</Placeholder>\n        </Carousel>\n    </div>\n);"
+				}
+			],
+			"import": "import { Button, Carousel, Example, Placeholder, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [
+					{
+						"name": "navigateTo",
+						"docblock": null,
+						"modifiers": [],
+						"params": [
+							{
+								"name": "index",
+								"optional": false,
+								"type": { "name": "number" }
+							}
+						],
+						"returns": null
+					}
+				],
+				"displayName": "Carousel",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Carousel/Carousel.tsx",
+				"actualName": "Carousel",
+				"exportName": "default"
+			}
+		},
+		"components-checkbox": {
+			"id": "components-checkbox",
+			"name": "Checkbox",
+			"path": "./src/components/Checkbox/tests/Checkbox.stories.tsx",
+			"stories": [
+				{
+					"name": "render",
+					"snippet": "const render = () => (\n    <Checkbox name=\"test-name\" value=\"test-value\">\n        Content\n    </Checkbox>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"small\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"small\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"medium\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"medium\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size=\"large\" defaultChecked>\n                    Checkbox\n                </Checkbox>\n                <Checkbox name=\"animal\" value=\"dog\" size=\"large\" indeterminate>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: responsive, s: small, m: large\">\n            <View gap={4} direction=\"row\">\n                <Checkbox name=\"animal\" value=\"dog\" size={{ s: \"small\", m: \"large\" }} defaultChecked>\n                    Checkbox\n                </Checkbox>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "error",
+					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Checkbox name=\"animal\" value=\"dog\" hasError>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n        <Example.Item title=\"disabled, checked\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled checked>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n        <Example.Item title=\"disabled, indeterminate\">\n            <Checkbox name=\"animal\" value=\"dog\" disabled indeterminate>\n                Checkbox\n            </Checkbox>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "checked",
+					"snippet": "const checked = () => <Checkbox name=\"test-name\" value=\"test-value\" checked onChange={fn()}>Content\n            </Checkbox>;"
+				},
+				{
+					"name": "defaultChecked",
+					"snippet": "const defaultChecked = () => <Checkbox name=\"test-name\" value=\"test-value\" defaultChecked onChange={fn()}>Content\n            </Checkbox>;"
+				},
+				{
+					"name": "indeterminate",
+					"snippet": "const indeterminate = () => (\n    <Checkbox name=\"test-name\" value=\"test-value\" indeterminate>\n        Content\n    </Checkbox>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Checkbox className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Checkbox>\n    </div>\n);"
+				}
+			],
+			"import": "import { Checkbox, Example, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Checkbox",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Checkbox/Checkbox.tsx",
+				"actualName": "Checkbox",
+				"exportName": "default"
+			}
+		},
+		"components-checkboxgroup": {
+			"id": "components-checkboxgroup",
+			"name": "CheckboxGroup",
+			"path": "./src/components/CheckboxGroup/tests/CheckboxGroup.stories.tsx",
+			"stories": [
+				{
+					"name": "value",
+					"snippet": "const value = () => <View gap={2}>\n    <CheckboxGroup name=\"test-name\" value={[\"1\"]} onChange={fn()}>\n        {/* checked should be ignored */}\n        <Checkbox value=\"1\" checked={false}>Content\n                            </Checkbox>\n        <Checkbox value=\"2\">Content 2</Checkbox>\n    </CheckboxGroup>\n</View>;"
+				},
+				{
+					"name": "defaultValue",
+					"snippet": "const defaultValue = () => <View gap={2}>\n    <CheckboxGroup name=\"test-name\" defaultValue={[\"1\"]} onChange={fn()}>\n        {/* checked should be ignored */}\n        <Checkbox value=\"1\" checked={false}>Content\n                            </Checkbox>\n        <Checkbox value=\"2\">Content 2</Checkbox>\n    </CheckboxGroup>\n</View>;"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <CheckboxGroup name=\"test-name\" disabled>\n        <Checkbox value=\"test-value\">Item 1</Checkbox>\n        <Checkbox value=\"test-value-2\">Item 2</Checkbox>\n    </CheckboxGroup>\n);"
+				}
+			],
+			"import": "import { Checkbox, CheckboxGroup, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "CheckboxGroup",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/CheckboxGroup/CheckboxGroup.tsx",
+				"actualName": "CheckboxGroup",
+				"exportName": "default"
+			}
+		},
+		"components-contextmenu": {
+			"id": "components-contextmenu",
+			"name": "ContextMenu",
+			"path": "./src/components/ContextMenu/tests/ContextMenu.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"base\">\n            <div style={{ height: 200, overflow: \"auto\" }}>\n                <ContextMenu>\n                    <View height=\"400px\" backgroundColor=\"neutral-faded\" borderRadius=\"medium\" />\n\n                    <ContextMenu.Content>\n                        <ContextMenu.Item>Item 1</ContextMenu.Item>\n                        <ContextMenu.Item>Item 2</ContextMenu.Item>\n                    </ContextMenu.Content>\n                </ContextMenu>\n            </div>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "handlers",
+					"snippet": "const handlers = () => <div style={{ height: 200, overflow: \"auto\" }} data-testid=\"scroll\">\n    <ContextMenu onOpen={fn()} onClose={fn()}>\n        <View\n            height=\"400px\"\n            backgroundColor=\"neutral-faded\"\n            borderRadius=\"medium\"\n            attributes={{ \"data-testid\": \"root\" }} />\n        <ContextMenu.Content>\n            <ContextMenu.Item>Item</ContextMenu.Item>\n        </ContextMenu.Content>\n    </ContextMenu>\n</div>;"
+				}
+			],
+			"import": "import { ContextMenu, Example, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "ContextMenu",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/ContextMenu/ContextMenu.tsx",
+				"actualName": "ContextMenu",
+				"exportName": "default"
+			}
+		},
+		"components-divider": {
+			"id": "components-divider",
+			"name": "Divider",
+			"path": "./src/components/Divider/tests/Divider.stories.tsx",
+			"stories": [
+				{
+					"name": "rendering",
+					"snippet": "const rendering = () => (\n    <Example>\n        <Example.Item title=\"default rendering\">\n            <Divider />\n        </Example.Item>\n\n        <Example.Item title={[\"blank rendering\", \"box should overlap with divider\"]}>\n            <View width=\"40px\" height=\"10px\" backgroundColor=\"primary\" />\n            <Divider blank />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "vertical",
+					"snippet": "const vertical = () => (\n    <Example>\n        <Example.Item title=\"vertical\">\n            <View gap={3} direction=\"row\" align=\"stretch\">\n                <Placeholder />\n                <View.Item>\n                    <Divider vertical />\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive vertical\", \"[s] true\", \"[m+]: false\"]}>\n            <View gap={3} direction={{ s: \"row\", m: \"column\" }} align=\"stretch\">\n                <Placeholder />\n                <View.Item>\n                    <Divider vertical={{ s: true, m: false }} />\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "label",
+					"snippet": "const label = () => {\n    return (\n        <Example>\n            <Example.Item title=\"alignment\">\n                <View gap={4}>\n                    <Divider>Centered label</Divider>\n                    <Divider contentPosition=\"start\">Start label</Divider>\n                    <Divider contentPosition=\"end\">End label</Divider>\n                </View>\n            </Example.Item>\n\n            <Example.Item title=\"responsive\">\n                <View gap={3} direction={{ s: \"column\", m: \"row\" }} align=\"stretch\">\n                    <Placeholder />\n                    <View.Item>\n                        <Divider vertical={{ s: false, m: true }}>or pick second option</Divider>\n                    </View.Item>\n                    <Placeholder />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Divider className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
+				}
+			],
+			"import": "import { Divider, Example, Placeholder, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Divider",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Divider/Divider.tsx",
+				"actualName": "Divider",
+				"exportName": "default"
+			}
+		},
+		"components-dropdownmenu": {
+			"id": "components-dropdownmenu",
+			"name": "DropdownMenu",
+			"path": "./src/components/DropdownMenu/tests/DropdownMenu.stories.tsx",
+			"stories": [
+				{
+					"name": "position",
+					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title=\"position: default\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <DropdownMenu position=\"end\">\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n\n        <Example.Item title={[\"position: top-start\", \"should change to top-start to fit viewport\"]}>\n            <DropdownMenu position=\"top-end\">\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item icon={IconCheckmark}>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n        <div style={{ height: 2000 }} />\n    </Example>\n);"
+				},
+				{
+					"name": "sections",
+					"snippet": "const sections = () => (\n    <Example>\n        <Example.Item title=\"2 sections\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Section>\n                        <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                    </DropdownMenu.Section>\n\n                    <DropdownMenu.Section>\n                        <DropdownMenu.Item>Item 3</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 4</DropdownMenu.Item>\n                    </DropdownMenu.Section>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "submenu",
+					"snippet": "const submenu = () => (\n    <Example>\n        <Example.Item title=\"submenu\">\n            <DropdownMenu>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item onClick={() => {}}>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger>Item 2</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger>Item 3</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2-1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 2-2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n\n                    <DropdownMenu.SubMenu>\n                        <DropdownMenu.SubTrigger disabled>Item 4, disabled</DropdownMenu.SubTrigger>\n                        <DropdownMenu.Content>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 3-1</DropdownMenu.Item>\n                            <DropdownMenu.Item onClick={() => {}}>SubItem 3-2</DropdownMenu.Item>\n                        </DropdownMenu.Content>\n                    </DropdownMenu.SubMenu>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "defaultActive",
+					"snippet": "const defaultActive = () => <DropdownMenu onOpen={fn()} onClose={fn()} defaultActive>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"
+				},
+				{
+					"name": "active",
+					"snippet": "const active = () => <DropdownMenu onOpen={fn()} onClose={fn()} active>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"
+				},
+				{
+					"name": "activeFalse",
+					"snippet": "const activeFalse = () => <DropdownMenu onOpen={fn()} onClose={fn()} active={false}>\n    <DropdownMenu.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </DropdownMenu.Trigger>\n    <DropdownMenu.Content>\n        <DropdownMenu.Item>Item</DropdownMenu.Item>\n    </DropdownMenu.Content>\n</DropdownMenu>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <DropdownMenu active>\n            <DropdownMenu.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </DropdownMenu.Trigger>\n            <DropdownMenu.Content className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n                <DropdownMenu.Item>Item</DropdownMenu.Item>\n            </DropdownMenu.Content>\n        </DropdownMenu>\n    </div>\n);"
+				},
+				{
+					"name": "testScroll",
+					"snippet": "const testScroll = () => (\n    <Example>\n        <Example.Item title=\"Scrolls on page mount to the dropdown\">\n            <div style={{ height: 1000 }} />\n            <DropdownMenu position=\"end\" key=\"scroll\" defaultActive>\n                <DropdownMenu.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </DropdownMenu.Trigger>\n                <DropdownMenu.Content>\n                    <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                    <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                </DropdownMenu.Content>\n            </DropdownMenu>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "testTheme",
+					"snippet": "const testTheme = () => (\n    <Example>\n        <Example.Item title=\"switch color mode while dropdown is active and check that it still works\">\n            <ThemeSwitching />\n        </Example.Item>\n        <Example.Item title=\"dropdown inherits multiple themes\">\n            <ThemeMultiple />\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Button, DropdownMenu, Example, Theme, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "DropdownMenu",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/DropdownMenu/DropdownMenu.tsx",
+				"actualName": "DropdownMenu",
+				"exportName": "default"
+			}
+		},
+		"components-fileupload": {
+			"id": "components-fileupload",
+			"name": "FileUpload",
+			"path": "./src/components/FileUpload/tests/FileUpload.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"Base upload with previews\">\n            <Demo />\n        </Example.Item>\n        <Example.Item title=\"With trigger\">\n            <FileUpload name=\"file\">\n                <div>\n                    Drop files to attach, or{\" \"}\n                    <FileUpload.Trigger>\n                        <Link variant=\"plain\">browse</Link>\n                    </FileUpload.Trigger>\n                </div>\n            </FileUpload>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "inline",
+					"snippet": "const inline = () => {\n    return (\n        <Example>\n            <Example.Item title=\"inline\">\n                <FileUpload name=\"file\" inline onChange={console.log}>\n                    <View padding={2} paddingInline={3}>\n                        Upload\n                    </View>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"variant headless\">\n                <FileUpload name=\"file2\" variant=\"headless\" onChange={console.log}>\n                    <Button variant=\"outline\" fullWidth>\n                        Upload\n                    </Button>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"variant headless, inline\">\n                <FileUpload name=\"file2\" variant=\"headless\" inline onChange={console.log}>\n                    <Button>Upload</Button>\n                </FileUpload>\n            </Example.Item>\n            <Example.Item title=\"inline, render props\">\n                <FileUpload name=\"file3\" variant=\"headless\" inline onChange={console.log}>\n                    {(props) => <Button highlighted={props.highlighted}>Upload</Button>}\n                </FileUpload>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "height",
+					"snippet": "const height = () => (\n    <Example>\n        <Example.Item title=\"Custom height\">\n            <FileUpload name=\"file\" height=\"300px\">\n                <View gap={3}>\n                    <Icon svg={IconMic} size={8} />\n                    Drop files to attach\n                </View>\n            </FileUpload>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "onChange",
+					"snippet": "const onChange = () => <div data-testid=\"root\">\n    <FileUpload name=\"test-name\" onChange={fn()}>Content\n                    </FileUpload>\n</div>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <FileUpload\n            name=\"name\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ id: \"test-input-id\" }}\n        >\n            Content\n        </FileUpload>\n    </div>\n);"
+				}
+			],
+			"import": "import { Button, Example, FileUpload, Icon, Image, Link, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "FileUpload",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/FileUpload/FileUpload.tsx",
+				"actualName": "FileUpload",
+				"exportName": "default"
+			}
+		},
+		"components-hotkey": {
+			"id": "components-hotkey",
+			"name": "Hotkey",
+			"path": "./src/components/Hotkey/tests/Hotkey.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n\t<Example>\n\t\t<Example.Item title=\"Base\">\n\t\t\t<Demo />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"Active\">\n\t\t\t<Hotkey active>⌘K</Hotkey>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"Inside input slot\">\n\t\t\t<View width=\"300px\">\n\t\t\t\t<TextField\n\t\t\t\t\tname=\"hey\"\n\t\t\t\t\tendSlot={<Demo />}\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"hotkey test\" }}\n\t\t\t\t/>\n\t\t\t</View>\n\t\t</Example.Item>\n\t</Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Hotkey className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            ⌘K\n        </Hotkey>\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Hotkey, TextField, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Hotkey",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Hotkey/Hotkey.tsx",
+				"actualName": "Hotkey",
+				"exportName": "default"
+			}
+		},
+		"components-link": {
+			"id": "components-link",
+			"name": "Link",
+			"path": "./src/components/Link/tests/Link.stories.tsx",
+			"stories": [
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: underline\">\n            <Link href=\"http://reshaped.so\" attributes={{ target: \"_blank\" }}>\n                Reshaped\n            </Link>\n        </Example.Item>\n        <Example.Item title=\"variant: plain\">\n            <Link onClick={() => {}} variant=\"plain\">\n                Link\n            </Link>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary\">\n            <Link color=\"primary\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Link color=\"critical\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Link color=\"positive\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <Link color=\"warning\">Link</Link>\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <Link color=\"inherit\">Link</Link>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "icon",
+					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"icon, variant: underline\">\n            <Link icon={IconZap}>Link</Link>\n        </Example.Item>\n        <Example.Item title=\"icon, variant: plain\">\n            <Link icon={IconZap} variant=\"plain\">\n                Link\n            </Link>\n        </Example.Item>\n        <Example.Item\n            title={[\"icon, variant: underline\", \"should inherit display-1 size from the parent\"]}\n        >\n            <Text variant=\"title-3\">\n                <Link icon={IconZap} variant=\"underline\">\n                    Instant delivery\n                </Link>\n            </Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "href",
+					"snippet": "const href = () => <Link href=\"https://reshaped.so\">Trigger</Link>;"
+				},
+				{
+					"name": "onClick",
+					"snippet": "const onClick = () => <Link onClick={fn()}>Trigger</Link>;"
+				},
+				{
+					"name": "hrefOnClick",
+					"snippet": "const hrefOnClick = (args) => (\n    <Link\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </Link>\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Link disabled onClick={() => {}}>\n        Trigger\n    </Link>\n);"
+				},
+				{
+					"name": "render",
+					"snippet": "const render = () => <Link render={(props) => <section {...props} />}>Trigger</Link>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Link className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Link>\n    </div>\n);"
+				},
+				{
+					"name": "testMultilineInText",
+					"snippet": "const testMultilineInText = () => (\n    <Example>\n        <Example.Item title=\"should wrap inside the text\">\n            <div>\n                Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;\n                <Link href=\"/\">this very very long link</Link> to it.\n            </div>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Example, Link, Text } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Link",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Link/Link.tsx",
+				"actualName": "Link",
+				"exportName": "default"
+			}
+		},
+		"components-loader": {
+			"id": "components-loader",
+			"name": "Loader",
+			"path": "./src/components/Loader/tests/Loader.stories.tsx",
+			"stories": [
+				{
+					"name": "size",
+					"snippet": "const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: medium\">\n                <Loader size=\"medium\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title=\"size: small\">\n                <Loader size=\"small\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title=\"size: large\">\n                <Loader size=\"large\" ariaLabel=\"Loading\" />\n            </Example.Item>\n            <Example.Item title={[\"responsive size\", \"[s] small\", \"[m+] medium\"]}>\n                <Loader size={{ s: \"small\", m: \"medium\" }} ariaLabel=\"Loading\" />\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: primary\">\n            <Loader ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Loader color=\"critical\" ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Loader color=\"positive\" ariaLabel=\"Loading\" />\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <Loader color=\"inherit\" ariaLabel=\"Loading\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "ariaLabel",
+					"snippet": "const ariaLabel = () => <Loader ariaLabel=\"Loading\" attributes={{ \"data-testid\": \"root\" }} />;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Loader className=\"test-classname\" attributes={{ id: \"test-id\" }} ariaLabel=\"Loading\" />\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Loader } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Loader",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Loader/Loader.tsx",
+				"actualName": "Loader",
+				"exportName": "default"
+			}
+		},
+		"components-menuitem": {
+			"id": "components-menuitem",
+			"name": "MenuItem",
+			"path": "./src/components/MenuItem/tests/MenuItem.stories.tsx",
+			"stories": [
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <MenuItem size=\"small\" icon={IconZap} onClick={() => {}} endSlot={<Hotkey>⌘K</Hotkey>}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <MenuItem icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <MenuItem size=\"large\" icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title={[\"responsive size\", \"[s] small\", \"[m] medium\", \"[l+] large\"]}>\n            <MenuItem size={{ s: \"small\", m: \"medium\", l: \"large\" }} icon={IconZap} onClick={() => {}}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <MenuItem color=\"neutral\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <MenuItem color=\"primary\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <MenuItem color=\"critical\" icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "selected",
+					"snippet": "const selected = () => (\n    <Example>\n        <Example.Item title=\"selected, color: neutral\">\n            <MenuItem color=\"neutral\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"selected, color: primary\">\n            <MenuItem color=\"primary\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n        <Example.Item title=\"selected, color: critical\">\n            <MenuItem color=\"critical\" selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "roundedCorners",
+					"snippet": "const roundedCorners = () => (\n    <Example>\n        <Example.Item title=\"roundedCorners\">\n            <MenuItem roundedCorners selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive roundedCorners\", \"[s]: false\", \"[m+]: true\"]}>\n            <MenuItem roundedCorners={{ s: false, m: true }} selected icon={IconZap}>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "slots",
+					"snippet": "const slots = () => (\n    <Example>\n        <Example.Item title=\"startSlot, endSlot, selected\">\n            <MenuItem startSlot={<Placeholder h={20} />} endSlot={<Placeholder h={20} />} selected>\n                Menu item\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "aligner",
+					"snippet": "const aligner = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem size=\"small\" selected onClick={() => {}}>\n                        Menu item\n                    </MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem selected>Menu item</MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <View gap={2}>\n                <Text variant=\"title-6\">Heading</Text>\n                <MenuItem.Aligner>\n                    <MenuItem size=\"large\" selected>\n                        Menu item\n                    </MenuItem>\n                </MenuItem.Aligner>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "href",
+					"snippet": "const href = () => <MenuItem href=\"https://reshaped.so\">Trigger</MenuItem>;"
+				},
+				{
+					"name": "onClick",
+					"snippet": "const onClick = () => <MenuItem onClick={fn()}>Trigger</MenuItem>;"
+				},
+				{
+					"name": "hrefOnClick",
+					"snippet": "const hrefOnClick = (args) => (\n    <MenuItem\n        onClick={(e) => {\n            e.preventDefault();\n            args.handleClick(e);\n        }}\n        href=\"https://reshaped.so\"\n    >\n        Trigger\n    </MenuItem>\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <MenuItem disabled onClick={() => {}}>\n        Trigger\n    </MenuItem>\n);"
+				},
+				{
+					"name": "as",
+					"snippet": "const as = () => (\n    <Example>\n        <Example.Item title=\"render, disabled\">\n            <MenuItem\n                disabled\n                onClick={() => {}}\n                render={(props) => <section {...props} />}\n                attributes={{ \"data-testid\": \"render-el\" }}\n            >\n                Trigger\n            </MenuItem>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <MenuItem className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </MenuItem>\n    </div>\n);"
+				},
+				{
+					"name": "alignerClassName",
+					"snippet": "const alignerClassName = () => (\n    <div data-testid=\"root\">\n        <MenuItem.Aligner className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <MenuItem>Trigger</MenuItem>\n        </MenuItem.Aligner>\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Hotkey, MenuItem, Placeholder, Text, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "MenuItem",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/MenuItem/MenuItem.tsx",
+				"actualName": "MenuItem",
+				"exportName": "default"
+			}
+		},
+		"components-modal": {
+			"id": "components-modal",
+			"name": "Modal",
+			"path": "./src/components/Modal/tests/Modal.stories.tsx",
+			"stories": [
+				{
+					"name": "position",
+					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title={[\"responsive position\", \"[s] full-screen\", \"[m] center\", \"[l] end\"]}>\n            <Demo position={{ s: \"full-screen\", m: \"center\", l: \"end\" }} />\n        </Example.Item>\n        <Example.Item title=\"position: center\">\n            <Demo position=\"center\" />\n        </Example.Item>\n        <Example.Item title=\"position: bottom\">\n            <Demo position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"position: start\">\n            <Demo position=\"start\" />\n        </Example.Item>\n        <Example.Item title=\"position: end\">\n            <Demo position=\"end\" />\n        </Example.Item>\n        <Example.Item title=\"position: full-screen\">\n            <Demo position=\"full-screen\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: default\">\n                <Demo />\n            </Example.Item>\n            <Example.Item title=\"size: 300px\">\n                <Demo size=\"300px\" />\n            </Example.Item>\n            <Example.Item\n                title={[\"size: 800px\", \"should have max width of 100% minus gaps on the sides\"]}\n            >\n                <Demo size=\"800px\" />\n            </Example.Item>\n            <Example.Item\n                title={[\n                    \"responsive size, responsive position\",\n                    \"[s] auto\",\n                    \"[m+] 600px\",\n                    \"bottom position changes height instead of width\",\n                ]}\n            >\n                <Demo\n                    position={{ s: \"bottom\", m: \"center\", l: \"end\" }}\n                    size={{ s: \"auto\", m: \"600px\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "padding",
+					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 0\">\n            <Demo padding={0} />\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <Demo padding={6} />\n        </Example.Item>\n        <Example.Item title={[\"responsive padding\", \"[s] 2\", \"[m+]: 6\"]}>\n            <Demo padding={{ s: 2, m: 6 }} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "overflow",
+					"snippet": "const overflow = () => (\n    <Example>\n        <Example.Item title=\"default overflow\">\n            <Demo>\n                <div\n                    style={{\n                        position: \"absolute\",\n                        top: -32,\n                        left: -32,\n                        height: 100,\n                        width: 100,\n                        background: \"tomato\",\n                    }}\n                />\n            </Demo>\n        </Example.Item>\n\n        <Example.Item title=\"overflow: visible\">\n            <Demo overflow=\"visible\">\n                <div\n                    style={{\n                        position: \"absolute\",\n                        top: -32,\n                        left: -32,\n                        height: 100,\n                        width: 100,\n                        background: \"tomato\",\n                    }}\n                />\n            </Demo>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "composition",
+					"snippet": "const composition = () => (\n    <Example>\n        <Example.Item title=\"title, subtitle, dismissible\">\n            <Demo title=\"Modal title\" subtitle=\"Modal subtitle\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "overlay",
+					"snippet": "const overlay = () => (\n    <Example>\n        <Example.Item title=\"transparentOverlay, doesn't lock scroll\">\n            <Demo transparentOverlay />\n        </Example.Item>\n        <Example.Item title=\"blurredOverlay\">\n            <Demo blurredOverlay />\n        </Example.Item>\n        <View height=\"1000px\" />\n    </Example>\n);"
+				},
+				{
+					"name": "flags",
+					"snippet": "const flags = () => {\n    return (\n        <Example>\n            <Example.Item title=\"disableCloseOnOutsideClick\">\n                <Demo disableCloseOnOutsideClick onClose={fn()} active />\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "containerRef",
+					"snippet": "const containerRef = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const containerRef2 = React.useRef<HTMLDivElement>(null);\n    const toggle = useToggle();\n    const toggle2 = useToggle();\n\n    return (\n        <Example>\n            <Example.Item title={[\"in scrollable container\", \"scroll and then open\"]}>\n                <View\n                    attributes={{ ref: containerRef2 }}\n                    borderRadius=\"medium\"\n                    height=\"400px\"\n                    overflow=\"auto\"\n                    backgroundColor=\"neutral-faded\"\n                    padding={4}\n                >\n                    <View gap={4} align=\"start\">\n                        <Button onClick={toggle2.activate}>Open modal</Button>\n                        <View height=\"500px\" backgroundColor=\"primary\" width=\"500px\" borderRadius=\"medium\" />\n                    </View>\n                    <Modal\n                        containerRef={containerRef2}\n                        active={toggle2.active}\n                        onClose={toggle2.deactivate}\n                        position=\"end\"\n                    >\n                        <Placeholder />\n                    </Modal>\n                </View>\n            </Example.Item>\n            <Example.Item title=\"in static container\">\n                <View\n                    attributes={{ ref: containerRef }}\n                    borderRadius=\"medium\"\n                    height=\"400px\"\n                    overflow=\"hidden\"\n                    backgroundColor=\"neutral-faded\"\n                    padding={4}\n                >\n                    <Button onClick={toggle.activate}>Open modal</Button>\n                    <Modal\n                        containerRef={containerRef}\n                        active={toggle.active}\n                        onClose={toggle.deactivate}\n                        position=\"end\"\n                    >\n                        <Placeholder />\n                    </Modal>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "renderProps",
+					"snippet": "const renderProps = () => (\n    <Modal active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        <Modal.Title>Title</Modal.Title>\n        Content\n    </Modal>\n);"
+				},
+				{
+					"name": "handlers",
+					"snippet": "const handlers = () => {\n    const overlayToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>\n            <Modal\n                active={overlayToggle.active}\n                onClose={(closeArgs) => {\n                    overlayToggle.deactivate();\n                    args.handleClose(closeArgs);\n                }}\n                onOpen={fn()}\n                onAfterOpen={fn()}\n                onAfterClose={fn()}>\n                <Modal.Title>Title</Modal.Title>Content\n                                </Modal>\n        </>\n    );\n};"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <Modal active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        <Modal.Title>Title</Modal.Title>\n        Content\n    </Modal>\n);"
+				},
+				{
+					"name": "edgeCases",
+					"snippet": "const edgeCases = () => {\n    const menuModalToggle = useToggle();\n    const menuModalToggleInner = useToggle();\n    const scrollModalToggle = useToggle();\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    return (\n        <Example>\n            <Example.Item title=\"Scrolls with long content on touch devices\">\n                <Demo position=\"center\">\n                    <Button onClick={() => {}}>Action</Button>\n                    <View height=\"2000px\" backgroundColor=\"primary-faded\" />\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"keyboard focus stays on the modal first\">\n                <Demo title=\"Modal title\" autoFocus={false} />\n            </Example.Item>\n            <Example.Item title=\"trap focus works with custom children components\">\n                <Demo title=\"Modal title\">\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <Switch name=\"switch\" />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"focus moves to the input\">\n                <Demo\n                    title=\"Modal title\"\n                    onOpen={() => {\n                        inputRef.current?.focus();\n                    }}\n                >\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <TextField name=\"name\" inputAttributes={{ ref: inputRef }} />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"Focus moves to the input with autoFocus\">\n                <Demo title=\"Modal title\">\n                    <View gap={3} direction=\"row\">\n                        <Button onClick={() => {}}>Button</Button>\n                        <TextField\n                            name=\"name\"\n                            placeholder=\"autofocus\"\n                            inputAttributes={{ autoFocus: true }}\n                        />\n                    </View>\n                </Demo>\n            </Example.Item>\n            <Example.Item title=\"scrollable area in modal ignores swipe-to-close\">\n                <View gap={3} direction=\"row\">\n                    <Button onClick={scrollModalToggle.activate}>Open</Button>\n                    <Modal\n                        active={scrollModalToggle.active}\n                        onClose={scrollModalToggle.deactivate}\n                        size=\"300px\"\n                        position=\"bottom\"\n                    >\n                        <View\n                            height=\"1000px\"\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            padding={4}\n                        >\n                            Content\n                        </View>\n                    </Modal>\n                </View>\n            </Example.Item>\n            <Example.Item\n                title={[\n                    \"trap focus works correctly when it was already trapped\",\n                    \"focus return back to the dropdown trigger on modal close\",\n                    \"closing dropdown inside the modal doesn't close the modal\",\n                ]}\n            >\n                <DropdownMenu>\n                    <DropdownMenu.Trigger>\n                        {(attributes) => <Button attributes={attributes}>Open menu</Button>}\n                    </DropdownMenu.Trigger>\n                    <DropdownMenu.Content>\n                        <DropdownMenu.Item onClick={menuModalToggle.activate}>Open dialog</DropdownMenu.Item>\n                        <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                    </DropdownMenu.Content>\n                </DropdownMenu>\n                <Modal active={menuModalToggle.active} onClose={menuModalToggle.deactivate}>\n                    <View gap={3}>\n                        <DropdownMenu>\n                            <DropdownMenu.Trigger>\n                                {(attributes) => <Button attributes={attributes}>Open menu</Button>}\n                            </DropdownMenu.Trigger>\n                            <DropdownMenu.Content>\n                                <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n                                <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n                            </DropdownMenu.Content>\n                        </DropdownMenu>\n                        <Button onClick={menuModalToggleInner.activate}>Open dialog</Button>\n                        <Button onClick={menuModalToggle.deactivate}>Close</Button>\n                        <Modal active={menuModalToggleInner.active} onClose={menuModalToggleInner.deactivate}>\n                            <Button onClick={menuModalToggleInner.deactivate}>Close</Button>\n                        </Modal>\n                    </View>\n                </Modal>\n            </Example.Item>\n\n            <Example.Item title=\"disableSwipeGesture\">\n                <Demo disableSwipeGesture position=\"start\" />\n            </Example.Item>\n\n            <Example.Item title=\"scroll locks on open\">\n                <Demo />\n                <View height=\"1000px\" />\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "trapFocusEdgeCases",
+					"snippet": "const trapFocusEdgeCases = () => {\n    const toggle = useToggle();\n\n    return (\n        <Example>\n            <Example.Item title=\"Radio should be navigatable with arrow keys\">\n                <Button onClick={toggle.activate}>Open modal</Button>\n                <Modal active={toggle.active} onClose={toggle.deactivate}>\n                    <View gap={2}>\n                        <Button onClick={() => {}}>Action 1</Button>\n                        <Radio name=\"radio\" value=\"1\">\n                            Option 1\n                        </Radio>\n                        <Radio name=\"radio\" value=\"2\">\n                            Option 2\n                        </Radio>\n                        <Button onClick={() => {}}>Action 2</Button>\n                    </View>\n                </Modal>\n            </Example.Item>\n        </Example>\n    );\n};"
+				}
+			],
+			"import": "import {\n    Button,\n    Dismissible,\n    DropdownMenu,\n    Example,\n    Modal,\n    Placeholder,\n    Radio,\n    Switch,\n    TextField,\n    View,\n} from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Modal",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Modal/Modal.tsx",
+				"actualName": "Modal",
+				"exportName": "default"
+			}
+		},
+		"components-numberfield": {
+			"id": "components-numberfield",
+			"name": "NumberField",
+			"path": "./src/components/NumberField/tests/NumberField.stories.tsx",
+			"stories": [
+				{
+					"name": "variant",
+					"snippet": "const variant = () => {\n    return (\n        <Example>\n            <Example.Item title=\"variant: outline\">\n                <NumberField\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"variant: faded\">\n                <NumberField\n                    variant=\"faded\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"variant: headless\">\n                <NumberField\n                    variant=\"headless\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => {\n    return (\n        <Example>\n            <Example.Item title=\"size: small\">\n                <NumberField\n                    size=\"small\"\n                    name=\"test-name\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    suffix=\"m2\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: medium\">\n                <NumberField\n                    size=\"medium\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: large\">\n                <NumberField\n                    size=\"large\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n            <Example.Item title=\"size: xlarge\">\n                <NumberField\n                    size=\"xlarge\"\n                    name=\"test-name\"\n                    suffix=\"m2\"\n                    increaseAriaLabel=\"Increase\"\n                    decreaseAriaLabel=\"Decrease\"\n                    inputAttributes={{ \"aria-label\": \"Label\" }}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => <NumberField\n    name=\"test-name\"\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    disabled\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "defaultValue",
+					"snippet": "const defaultValue = () => <NumberField\n    name=\"test-name\"\n    defaultValue={2}\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "value",
+					"snippet": "const value = () => <NumberField\n    name=\"test-name\"\n    value={2}\n    onChange={fn()}\n    increaseAriaLabel=\"Increase\"\n    decreaseAriaLabel=\"Decrease\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "minMax",
+					"snippet": "const minMax = () => (\n    <NumberField\n        name=\"test-name\"\n        defaultValue={6}\n        min={5}\n        max={10}\n        increaseAriaLabel=\"Increase\"\n        decreaseAriaLabel=\"Decrease\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"
+				},
+				{
+					"name": "step",
+					"snippet": "const step = () => (\n    <NumberField\n        name=\"test-name\"\n        defaultValue={6}\n        step={0.5}\n        increaseAriaLabel=\"Increase\"\n        decreaseAriaLabel=\"Decrease\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <NumberField\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n            increaseAriaLabel=\"Increase\"\n            decreaseAriaLabel=\"Decrease\"\n        />\n    </div>\n);"
+				},
+				{
+					"name": "formControl",
+					"snippet": "const formControl = () => (\n    <Example>\n        <Example.Item title=\"FormControl\">\n            <FormControl>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"FormControl, disabled\">\n            <FormControl disabled>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"FormControl, error\">\n            <FormControl hasError>\n                <FormControl.Label>Label</FormControl.Label>\n                <NumberField name=\"name\" increaseAriaLabel=\"Increase\" decreaseAriaLabel=\"Decrease\" />\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "valueChanges",
+					"snippet": "const valueChanges = () => (\n    <Example>\n        <Example.Item title=\"keyboard\">\n            <NumberField\n                name=\"name\"\n                increaseAriaLabel=\"Increase\"\n                decreaseAriaLabel=\"Decrease\"\n                inputAttributes={{ \"aria-label\": \"Label\" }}\n            />\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Example, FormControl, NumberField } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "NumberField",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/NumberField/NumberField.tsx",
+				"actualName": "NumberField",
+				"exportName": "default"
+			}
+		},
+		"components-pagination": {
+			"id": "components-pagination",
+			"name": "Pagination",
+			"path": "./src/components/Pagination/tests/Pagination.stories.tsx",
+			"stories": [
+				{
+					"name": "truncate",
+					"snippet": "const truncate = () => {\n    return (\n        <Example>\n            <Example.Item title=\"start\">\n                <Pagination\n                    total={10}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"middle\">\n                <Pagination\n                    total={10}\n                    defaultPage={5}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"end\">\n                <Pagination\n                    total={10}\n                    defaultPage={10}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n            <Example.Item title=\"no truncation\">\n                <Pagination\n                    total={4}\n                    previousAriaLabel=\"Previous page\"\n                    nextAriaLabel=\"Next page\"\n                    pageAriaLabel={(args) => `Page ${args.page}`}\n                />\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "render",
+					"snippet": "const render = () => (\n    <div data-testid=\"root\">\n        <Pagination\n            total={10}\n            previousAriaLabel=\"Previous\"\n            nextAriaLabel=\"Next\"\n            pageAriaLabel={(args) => `Page ${args.page}`}\n        />\n    </div>\n);"
+				},
+				{
+					"name": "defaultPage",
+					"snippet": "const defaultPage = () => <div data-testid=\"root\">\n    <Pagination\n        total={10}\n        defaultPage={2}\n        onChange={fn()}\n        previousAriaLabel=\"Previous\"\n        nextAriaLabel=\"Next\" />\n</div>;"
+				},
+				{
+					"name": "page",
+					"snippet": "const page = () => <div data-testid=\"root\">\n    <Pagination\n        total={10}\n        page={2}\n        onChange={fn()}\n        previousAriaLabel=\"Previous\"\n        nextAriaLabel=\"Next\" />\n</div>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Pagination\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            total={10}\n            previousAriaLabel=\"Previous\"\n            nextAriaLabel=\"Next\"\n        />\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Pagination } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Pagination",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Pagination/Pagination.tsx",
+				"actualName": "Pagination",
+				"exportName": "default"
+			}
+		},
+		"components-pinfield": {
+			"id": "components-pinfield",
+			"name": "PinField",
+			"path": "./src/components/PinField/tests/PinField.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => <PinField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <PinField name=\"pin\" variant=\"faded\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <PinField name=\"pin\" size=\"small\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <PinField name=\"pin\" size=\"medium\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <PinField name=\"pin\" size=\"large\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <PinField name=\"pin\" size=\"xlarge\" inputAttributes={{ \"aria-label\": \"Pin\" }} />\n        </Example.Item>\n\n        <Example.Item title=\"size: responsive, s: medium, m+: xlarge\">\n            <PinField\n                name=\"pin\"\n                size={{ s: \"medium\", m: \"xlarge\" }}\n                inputAttributes={{ \"aria-label\": \"Pin\" }}\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "valueLength",
+					"snippet": "const valueLength = () => (\n    <PinField name=\"test-name\" valueLength={6} inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"
+				},
+				{
+					"name": "defaultValue",
+					"snippet": "const defaultValue = () => <PinField\n    name=\"test-name\"\n    onChange={fn()}\n    defaultValue=\"12\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "value",
+					"snippet": "const value = () => <PinField\n    name=\"test-name\"\n    onChange={fn()}\n    value=\"12\"\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "pattern",
+					"snippet": "const pattern = () => <PinField\n    name=\"test-name\"\n    pattern=\"alphabetic\"\n    defaultValue=\"ab\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <PinField\n            name=\"test-name\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ \"aria-label\": \"Label\", id: \"test-input-id\" }}\n        />\n    </div>\n);"
+				},
+				{
+					"name": "formControl",
+					"snippet": "const formControl = () => (\n    <FormControl>\n        <FormControl.Label>Label</FormControl.Label>\n        <PinField name=\"test-name\" />\n    </FormControl>\n);"
+				},
+				{
+					"name": "keyboard",
+					"snippet": "const keyboard = () => <PinField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				}
+			],
+			"import": "import { Example, FormControl, PinField } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "PinField",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/PinField/PinField.tsx",
+				"actualName": "PinField",
+				"exportName": "default"
+			}
+		},
+		"components-popover": {
+			"id": "components-popover",
+			"name": "Popover",
+			"path": "./src/components/Popover/tests/Popover.stories.tsx",
+			"stories": [
+				{
+					"name": "position",
+					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title=\"position: bottom\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"bottom-start\" />\n                <Demo position=\"bottom\" />\n                <Demo position=\"bottom-end\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: top\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"top-start\" />\n                <Demo position=\"top\" />\n                <Demo position=\"top-end\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: start\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"start-top\" />\n                <Demo position=\"start\" />\n                <Demo position=\"start-bottom\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: end\">\n            <View align=\"center\" justify=\"center\" gap={8} direction=\"row\">\n                <Demo position=\"end-top\" />\n                <Demo position=\"end\" />\n                <Demo position=\"end-bottom\" defaultActive />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "widthNumber",
+					"snippet": "const widthNumber = () => <Demo width=\"400px\" defaultActive />;"
+				},
+				{
+					"name": "widthFull",
+					"snippet": "const widthFull = () => <Demo width=\"100%\" defaultActive />;"
+				},
+				{
+					"name": "padding",
+					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: 0\">\n            <Demo padding={0} />\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <Demo padding={6} defaultActive />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "elevation",
+					"snippet": "const elevation = () => (\n    <Example>\n        <Example.Item title=\"elevation: raised\">\n            <Demo elevation=\"raised\" defaultActive />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "defaultActive",
+					"snippet": "const defaultActive = () => <Popover onOpen={fn()} onClose={fn()} defaultActive>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"
+				},
+				{
+					"name": "active",
+					"snippet": "const active = () => <Popover onOpen={fn()} onClose={fn()} active>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"
+				},
+				{
+					"name": "activeFalse",
+					"snippet": "const activeFalse = () => <Popover onOpen={fn()} onClose={fn()} active={false}>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>Content</Popover.Content>\n</Popover>;"
+				},
+				{
+					"name": "dismissible",
+					"snippet": "const dismissible = () => <Popover onClose={fn()} defaultActive>\n    <Popover.Trigger>\n        {(attributes) => <Button attributes={attributes}>Open</Button>}\n    </Popover.Trigger>\n    <Popover.Content>\n        <Popover.Dismissible\n            closeAriaLabel=\"Close\"\n            attributes={{ \"data-testid\": \"test-id\" }}\n            className=\"test-classname\">Content\n                            </Popover.Dismissible>\n    </Popover.Content>\n</Popover>;"
+				},
+				{
+					"name": "autoFocus",
+					"snippet": "const autoFocus = () => (\n    <Example>\n        <Example.Item title=\"autoFocus=false\">\n            <Demo autoFocus={false} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Popover active>\n            <Popover.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </Popover.Trigger>\n            <Popover.Content className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n                Content\n            </Popover.Content>\n        </Popover>\n    </div>\n);"
+				},
+				{
+					"name": "testNested",
+					"snippet": "const testNested = () => (\n    <Popover position=\"bottom\">\n        <Popover.Trigger>\n            {(attributes) => <Button attributes={attributes}>Open</Button>}\n        </Popover.Trigger>\n        <Popover.Content>\n            <View gap={2} align=\"start\">\n                Popover content\n                <Popover>\n                    <Popover.Trigger>\n                        {(attributes) => <Button attributes={attributes}>Open</Button>}\n                    </Popover.Trigger>\n                    <Popover.Content>Hello</Popover.Content>\n                </Popover>\n            </View>\n        </Popover.Content>\n    </Popover>\n);"
+				},
+				{
+					"name": "testWithTooltip",
+					"snippet": "const testWithTooltip = () => (\n    <View paddingTop={10}>\n        <Tooltip position=\"top\" text=\"Hello\">\n            {(tooltipAttributes) => (\n                <Popover position=\"bottom\">\n                    <Popover.Trigger>\n                        {(attributes) => (\n                            <Button\n                                attributes={{\n                                    ...attributes,\n                                    ...tooltipAttributes,\n                                }}\n                            >\n                                Open\n                            </Button>\n                        )}\n                    </Popover.Trigger>\n                    <Popover.Content>\n                        <View gap={2} align=\"start\">\n                            Popover content\n                            <Button onClick={() => {}}>Button</Button>\n                        </View>\n                    </Popover.Content>\n                </Popover>\n            )}\n        </Tooltip>\n    </View>\n);"
+				},
+				{
+					"name": "testContentEditable",
+					"snippet": "const testContentEditable = () => {\n    const [active, setActive] = useState(false);\n\n    return (\n        <Popover>\n            <Popover.Trigger>\n                {(attributes) => <Button attributes={attributes}>Open</Button>}\n            </Popover.Trigger>\n            <Popover.Content>\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={() => {}}>Hello</Button>\n                    </View.Item>\n\n                    <ScrollArea height=\"100px\">\n                        <div\n                            style={{ height: \"200px\" }}\n                            contentEditable\n                            tabIndex={0}\n                            onInput={(e) => {\n                                setActive(e.currentTarget.innerText.startsWith(\"@\"));\n                            }}\n                            onKeyDown={(e) => {\n                                console.log(e.key);\n                                if (e.key === \"Enter\" && active) {\n                                    e.preventDefault();\n                                    e.currentTarget.innerText = \"@hello\";\n                                    setActive(false);\n                                }\n                            }}\n                        />\n                    </ScrollArea>\n\n                    <Popover\n                        active={active}\n                        onClose={() => setActive(false)}\n                        originCoordinates={{ x: 300, y: 300 }}\n                        trapFocusMode=\"selection-menu\"\n                    >\n                        <Popover.Content>\n                            <View gap={4}>\n                                <MenuItem onClick={() => {}}>Action</MenuItem>\n                                <MenuItem onClick={() => {}}>Close</MenuItem>\n                            </View>\n                        </Popover.Content>\n                    </Popover>\n                </View>\n            </Popover.Content>\n        </Popover>\n    );\n};"
+				},
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: headless\">\n            <Popover variant=\"headless\" defaultActive position=\"bottom-start\">\n                <Popover.Trigger>\n                    {(attributes) => <Button attributes={attributes}>Open</Button>}\n                </Popover.Trigger>\n                <Popover.Content>\n                    <View\n                        height=\"100px\"\n                        width=\"100px\"\n                        borderColor=\"primary\"\n                        borderRadius=\"medium\"\n                        backgroundColor=\"primary-faded\"\n                    />\n                </Popover.Content>\n            </Popover>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Button, Example, MenuItem, Popover, ScrollArea, Tooltip, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Popover",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Popover/Popover.tsx",
+				"actualName": "Popover",
+				"exportName": "default"
+			}
+		},
+		"components-progress": {
+			"id": "components-progress",
+			"name": "Progress",
+			"path": "./src/components/Progress/tests/Progress.stories.tsx",
+			"stories": [
+				{
+					"name": "value",
+					"snippet": "const value = () => (\n    <Example>\n        <Example.Item title=\"value: 50\">\n            <Progress value={50} ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"value: 20, min: 0, max: 40\">\n            <Progress value={20} min={0} max={40} ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"value: 50, min: 0, max: 40\">\n            <Progress value={50} min={0} max={40} ariaLabel=\"rating value\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small, value: 50\">\n            <Progress value={50} size=\"small\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"size: medium, value: 50\">\n            <Progress value={50} size=\"medium\" ariaLabel=\"rating value\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: critical, value: 50\">\n            <Progress value={50} color=\"critical\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: warning, value: 50\">\n            <Progress value={50} color=\"warning\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive, value: 50\">\n            <Progress value={50} color=\"positive\" ariaLabel=\"rating value\" />\n        </Example.Item>\n        <Example.Item title=\"color: media, value: 50\">\n            <View padding={4} backgroundColor=\"black\" borderRadius=\"medium\">\n                <Progress value={50} color=\"media\" ariaLabel=\"rating value\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "duration",
+					"snippet": "const duration = () => {\n    const [active, setActive] = React.useState(false);\n\n    const handleChange = () => {\n        setActive((state) => !state);\n    };\n\n    return (\n        <Example>\n            <Example.Item title=\"duration: 2000\">\n                <View gap={3}>\n                    <View.Item>\n                        <Button onClick={handleChange}>Change</Button>\n                    </View.Item>\n\n                    <Progress value={active ? 100 : 0} duration={2000} ariaLabel=\"rating value\" />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "render",
+					"snippet": "const render = () => <Progress value={75} min={50} max={100} ariaLabel=\"progress\" />;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Progress className=\"test-classname\" attributes={{ id: \"test-id\" }} ariaLabel=\"progress\" />\n    </div>\n);"
+				}
+			],
+			"import": "import { Button, Example, Progress, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Progress",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Progress/Progress.tsx",
+				"actualName": "Progress",
+				"exportName": "default"
+			}
+		},
+		"components-progressindicator": {
+			"id": "components-progressindicator",
+			"name": "ProgressIndicator",
+			"path": "./src/components/ProgressIndicator/tests/ProgressIndicator.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => {\n    const [activeIndex, setActiveIndex] = React.useState(0);\n    const total = 10;\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <View gap={4}>\n                    <View direction=\"row\" gap={2} align=\"center\">\n                        <Button\n                            onClick={() => {\n                                setActiveIndex((prev) => Math.max(0, prev - 1));\n                            }}\n                        >\n                            Previous\n                        </Button>\n                        <Button\n                            onClick={() => {\n                                setActiveIndex((prev) => Math.min(total - 1, prev + 1));\n                            }}\n                        >\n                            Next\n                        </Button>\n                        <Text weight=\"medium\">Index: {activeIndex}</Text>\n                    </View>\n\n                    <View borderRadius=\"medium\" overflow=\"hidden\" width=\"300px\">\n                        <Scrim\n                            position=\"bottom\"\n                            backgroundSlot={<View aspectRatio={16 / 9} backgroundColor=\"neutral-faded\" />}\n                        >\n                            <View align=\"center\">\n                                <ProgressIndicator total={total} activeIndex={activeIndex} color=\"media\" />\n                            </View>\n                        </Scrim>\n                    </View>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "color",
+					"snippet": "const color = () => {\n    return (\n        <Example>\n            <Example.Item title=\"color: primary\">\n                <ProgressIndicator total={10} activeIndex={5} color=\"primary\" />\n            </Example.Item>\n            <Example.Item title=\"color: media\">\n                <View borderRadius=\"medium\" overflow=\"hidden\" width=\"300px\">\n                    <Scrim\n                        position=\"bottom\"\n                        backgroundSlot={<View aspectRatio={16 / 9} backgroundColor=\"neutral-faded\" />}\n                    >\n                        <View align=\"center\">\n                            <ProgressIndicator total={10} activeIndex={5} color=\"media\" />\n                        </View>\n                    </Scrim>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "ariaLabel",
+					"snippet": "const ariaLabel = () => <ProgressIndicator total={10} className=\"test-classname\" ariaLabel=\"Progress\" />;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <ProgressIndicator total={10} className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
+				}
+			],
+			"import": "import { Button, Example, ProgressIndicator, Scrim, Text, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "ProgressIndicator",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/ProgressIndicator/ProgressIndicator.tsx",
+				"actualName": "ProgressIndicator",
+				"exportName": "default"
+			}
+		},
+		"components-radio": {
+			"id": "components-radio",
+			"name": "Radio",
+			"path": "./src/components/Radio/tests/Radio.stories.tsx",
+			"stories": [
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"small\" defaultChecked>\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"medium\">\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size=\"large\">\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"size: responsive, s: small, m: large\">\n            <View gap={4} direction=\"row\">\n                <Radio name=\"animal\" value=\"dog\" size={{ s: \"small\", m: \"large\" }}>\n                    Radio\n                </Radio>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "error",
+					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Radio name=\"error\" value=\"dog\" hasError>\n                Radio\n            </Radio>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "render",
+					"snippet": "const render = () => (\n    <Radio name=\"test-name\" value=\"test-value\">\n        Content\n    </Radio>\n);"
+				},
+				{
+					"name": "checked",
+					"snippet": "const checked = () => <Radio name=\"test-name\" value=\"test-value\" checked onChange={fn()}>Content\n            </Radio>;"
+				},
+				{
+					"name": "checkedFalse",
+					"snippet": "const checkedFalse = () => <Radio name=\"test-name\" value=\"test-value\" checked={false} onChange={fn()}>Content\n            </Radio>;"
+				},
+				{
+					"name": "defaultChecked",
+					"snippet": "const defaultChecked = () => <Radio name=\"test-name\" value=\"test-value\" defaultChecked onChange={fn()}>Content\n            </Radio>;"
+				},
+				{
+					"name": "defaultCheckedFalse",
+					"snippet": "const defaultCheckedFalse = () => <Radio name=\"test-name\" value=\"test-value\" onChange={fn()}>Content\n            </Radio>;"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Radio name=\"test-name\" value=\"test-value\" disabled>\n        Content\n    </Radio>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Radio className=\"test-classname\" attributes={{ id: \"test-id\" }} value=\"value\">\n            Content\n        </Radio>\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Radio, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Radio",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Radio/Radio.tsx",
+				"actualName": "Radio",
+				"exportName": "default"
+			}
+		},
+		"components-radiogroup": {
+			"id": "components-radiogroup",
+			"name": "RadioGroup",
+			"path": "./src/components/RadioGroup/tests/RadioGroup.stories.tsx",
+			"stories": [
+				{
+					"name": "value",
+					"snippet": "const value = () => <RadioGroup name=\"test-name\" value=\"1\" onChange={fn()}>\n    {/* checked should be ignored */}\n    <Radio value=\"1\" checked={false}>Content\n                    </Radio>\n    <Radio value=\"2\">Content 2</Radio>\n</RadioGroup>;"
+				},
+				{
+					"name": "defaultValue",
+					"snippet": "const defaultValue = () => <RadioGroup name=\"test-name\" defaultValue=\"1\" onChange={fn()}>\n    {/* checked should be ignored */}\n    <Radio value=\"1\" checked={false}>Content\n                    </Radio>\n    <Radio value=\"2\">Content 2</Radio>\n</RadioGroup>;"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <RadioGroup name=\"test-name\" disabled>\n        <Radio value=\"test-value\">Content</Radio>\n    </RadioGroup>\n);"
+				}
+			],
+			"import": "import { Radio, RadioGroup } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "RadioGroup",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/RadioGroup/RadioGroup.tsx",
+				"actualName": "RadioGroup",
+				"exportName": "default"
+			}
+		},
+		"components-resizable": {
+			"id": "components-resizable",
+			"name": "Resizable",
+			"path": "./src/components/Resizable/tests/Resizable.stories.tsx",
+			"stories": [
+				{
+					"name": "direction",
+					"snippet": "const direction = () => {\n    return (\n        <Example>\n            <Example.Item title=\"row\">\n                <Resizable height=\"200px\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n            <Example.Item title=\"column\">\n                <Resizable height=\"400px\" direction=\"column\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n\n            {/* Test that page doesn't scroll on dragging */}\n            <div style={{ height: 2000 }} />\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "children",
+					"snippet": "const children = () => {\n    return (\n        <Example>\n            <Example.Item title=\"render props, row\">\n                <Resizable height=\"200px\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n            <Example.Item title=\"render props, column\">\n                <Resizable height=\"400px\" direction=\"column\">\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Resizable.Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                    <Handle />\n                    <Resizable.Item>\n                        <Panel />\n                    </Resizable.Item>\n                </Resizable>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"bordered, row\">\n            <Resizable height=\"200px\" variant=\"bordered\">\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n            </Resizable>\n        </Example.Item>\n        <Example.Item title=\"bordered, column\">\n            <Resizable height=\"400px\" direction=\"column\" variant=\"bordered\">\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n                <Resizable.Handle />\n                <Resizable.Item>\n                    <Panel />\n                </Resizable.Item>\n            </Resizable>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Resizable className=\"test-classname\" attributes={{ id: \"test-id\" }} height=\"200px\">\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n        <Resizable.Handle />\n        <Resizable.Item minSize=\"200px\" maxSize=\"500px\" defaultSize=\"300px\">\n            <Panel />\n        </Resizable.Item>\n    </Resizable>\n);"
+				},
+				{
+					"name": "layout",
+					"snippet": "const layout = () => (\n    <Resizable height=\"100px\" gap={8}>\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n        <Resizable.Handle />\n        <Resizable.Item>\n            <Panel />\n        </Resizable.Item>\n    </Resizable>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Resizable className=\"test-classname\" attributes={{ id: \"test-id\" }} height=\"200px\">\n            <Resizable.Item>\n                <Panel />\n            </Resizable.Item>\n            <Resizable.Handle />\n            <Resizable.Item>\n                <Panel />\n            </Resizable.Item>\n        </Resizable>\n    </div>\n);"
+				}
+			],
+			"import": "import { Button, Example, Resizable, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Resizable",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Resizable/Resizable.tsx",
+				"actualName": "Resizable",
+				"exportName": "default"
+			}
+		},
+		"components-scrim": {
+			"id": "components-scrim",
+			"name": "Scrim",
+			"path": "./src/components/Scrim/tests/Scrim.stories.tsx",
+			"stories": [
+				{
+					"name": "position",
+					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title=\"position: center\">\n            <Scrim backgroundSlot={<Placeholder h={200} />}>Scrim</Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: bottom\">\n            <Scrim position=\"bottom\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: top\">\n            <Scrim position=\"top\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: start\">\n            <Scrim position=\"start\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <Scrim position=\"end\" backgroundSlot={<Placeholder h={200} />}>\n                Scrim\n            </Scrim>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Scrim className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Scrim>\n    </div>\n);"
+				},
+				{
+					"name": "composition",
+					"snippet": "const composition = () => (\n    <Example>\n        <Example.Item title=\"without backgroundSlot, size is based on the parent component\">\n            <div style={{ height: 300, position: \"relative\" }}>\n                <Scrim>Text</Scrim>\n            </div>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Example, Placeholder, Scrim } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Scrim",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Scrim/Scrim.tsx",
+				"actualName": "Scrim",
+				"exportName": "default"
+			}
+		},
+		"components-select": {
+			"id": "components-select",
+			"name": "Select",
+			"path": "./src/components/Select/tests/Select.stories.tsx",
+			"stories": [
+				{
+					"name": "nativeRender",
+					"snippet": "const nativeRender = () => (\n    <Example>\n        <Example.Item title=\"native with options prop\">\n            <Select\n                name=\"animal\"\n                id=\"animal-1\"\n                placeholder=\"Select an animal\"\n                options={[\n                    { label: \"Dog\", value: \"dog\" },\n                    { label: \"Turtle\", value: \"turtle\" },\n                ]}\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            />\n        </Example.Item>\n        <Example.Item title=\"native with option tags\">\n            <Select\n                name=\"animal\"\n                id=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "customRender",
+					"snippet": "const customRender = () => (\n    <Example>\n        <Example.Item title=\"custom with options\">\n            <Select.Custom\n                name=\"animal\"\n                id=\"animal-1\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"native with option tags\">\n            <Select.Custom\n                name=\"animal-2\"\n                id=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Group label=\"Birds\">\n                    <Select.Option value=\"pigeon\">Pigeon</Select.Option>\n                    <Select.Option value=\"parrot\">Parrot</Select.Option>\n                </Select.Group>\n                <Select.Group label=\"Sea Mammals\">\n                    <Select.Option value=\"whale\">Whale</Select.Option>\n                    <Select.Option value=\"dolphin\">Dolphin</Select.Option>\n                </Select.Group>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "nativeHandlers",
+					"snippet": "const nativeHandlers = () => <Example>\n    <Example.Item title=\"native, uncontrolled, onChange\">\n        <Select\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n    <Example.Item title=\"native, controlled, onChange\">\n        <Select\n            name=\"animal-2\"\n            placeholder=\"Select an animal\"\n            value=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n    <Example.Item title=\"native, onFocus, onBlur, onClick\">\n        <Select\n            name=\"animal-3\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onFocus={fn()}\n            onBlur={fn()}\n            onClick={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <option value=\"dog\">Dog</option>\n            <option value=\"turtle\">Turtle</option>\n        </Select>\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "customHandlers",
+					"snippet": "const customHandlers = () => <Example>\n    <Example.Item title=\"custom, uncontrolled, onChange\">\n        <Select.Custom\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n    <Example.Item title=\"custom, controlled, onChange\">\n        <Select.Custom\n            name=\"animal-2\"\n            placeholder=\"Select an animal\"\n            value=\"dog\"\n            onChange={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n    <Example.Item title=\"native, onFocus, onBlur, onClick\">\n        <Select.Custom\n            name=\"animal-3\"\n            placeholder=\"Select an animal\"\n            defaultValue=\"dog\"\n            onFocus={fn()}\n            onBlur={fn()}\n            onClick={fn()}\n            inputAttributes={{\n                \"aria-label\": \"Select an animal\",\n            }}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "triggerOnly",
+					"snippet": "const triggerOnly = (args) => {\n    const toggle = useToggle();\n    const [value, setValue] = React.useState(\"Dog\");\n\n    const handleClick: SelectProps[\"onClick\"] = (e) => {\n        args.handleClick(e);\n        toggle.toggle();\n    };\n\n    return (\n        <Example>\n            <Example.Item title=\"trigger only, onClick\">\n                <Select\n                    name=\"animal\"\n                    placeholder=\"Select an animal\"\n                    onClick={handleClick}\n                    value=\"dog\"\n                    inputAttributes={{\n                        \"aria-label\": \"Select an animal\",\n                    }}\n                >\n                    {value}\n                </Select>\n                <Modal\n                    active={toggle.active}\n                    onClose={toggle.deactivate}\n                    position=\"bottom\"\n                    padding={2}\n                    attributes={{ \"aria-label\": \"Select an animal\" }}\n                >\n                    <div role=\"listbox\" aria-label=\"Select an animal\">\n                        <MenuItem\n                            roundedCorners\n                            onClick={() => {\n                                setValue(\"Dog\");\n                                toggle.deactivate();\n                            }}\n                            attributes={{\n                                role: \"option\",\n                            }}\n                        >\n                            Dog\n                        </MenuItem>\n                        <MenuItem\n                            roundedCorners\n                            attributes={{\n                                role: \"option\",\n                            }}\n                            onClick={() => {\n                                setValue(\"Turtle\");\n                                toggle.deactivate();\n                            }}\n                        >\n                            Turtle\n                        </MenuItem>\n                    </div>\n                </Modal>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "multiple",
+					"snippet": "const multiple = () => <Example>\n    <Example.Item title=\"multiple\">\n        <Select.Custom\n            multiple\n            name=\"animal\"\n            placeholder=\"Select an animal\"\n            defaultValue={[\"dog\"]}\n            onChange={fn()}>\n            <Select.Option value=\"dog\">Dog</Select.Option>\n            <Select.Option value=\"turtle\">Turtle</Select.Option>\n        </Select.Custom>\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded, native\">\n            <Select\n                variant=\"faded\"\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n\n        <Example.Item title=\"variant: faded, custom\">\n            <Select.Custom\n                variant=\"faded\"\n                name=\"animal-2\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless, native\">\n            <Select\n                variant=\"headless\"\n                name=\"animal-3\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless, custom\">\n            <Select.Custom\n                variant=\"headless\"\n                name=\"animal-4\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <Select.Custom size=\"small\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: medium\">\n            <Select.Custom size=\"medium\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: large\">\n            <Select.Custom size=\"large\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n        <Example.Item title=\"size: xlarge\">\n            <Select.Custom size=\"xlarge\" name=\"animal\" placeholder=\"Select an animal\">\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "startSlot",
+					"snippet": "const startSlot = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Select.Custom name=\"animal\" placeholder=\"Select an animal\" icon={IconZap}>\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n\n        <Example.Item title=\"startSlot\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                startSlot={<Placeholder h={20} />}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "renderValue",
+					"snippet": "const renderValue = () => {\n    const options = [\n        {\n            value: \"1\",\n            label: \"Title 1\",\n            subtitle: \"Subtitle 1\",\n        },\n        {\n            value: \"2\",\n            label: \"Title 2\",\n            subtitle: \"Subtitle 2\",\n        },\n    ];\n\n    return (\n        <Example>\n            <Example.Item title=\"default renderer, single\">\n                <Select.Custom name=\"animal\" defaultValue=\"1\" placeholder=\"Nothing selected\">\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"default renderer, multiple\">\n                <Select.Custom name=\"animal\" defaultValue={[\"1\"]} multiple placeholder=\"Nothing selected\">\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"renderValue, single\">\n                <Select.Custom\n                    name=\"animal\"\n                    defaultValue=\"1\"\n                    placeholder=\"Nothing selected\"\n                    renderValue={(args) => <Badge>Title {args.value}</Badge>}\n                >\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n\n            <Example.Item title=\"renderValue, multiple\">\n                <Select.Custom\n                    name=\"animal\"\n                    defaultValue={[\"1\"]}\n                    multiple\n                    placeholder=\"Nothing selected\"\n                    renderValue={(args) => <Badge>Titles {args.value.join(\", \")}</Badge>}\n                >\n                    {options.map((option) => (\n                        <Select.Option key={option.value} value={option.value}>\n                            <Text weight=\"medium\">{option.label}</Text>\n                            <Text weight=\"regular\" color=\"neutral-faded\">\n                                {option.subtitle}\n                            </Text>\n                        </Select.Option>\n                    ))}\n                </Select.Custom>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "error",
+					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <Select.Custom name=\"animal\" placeholder=\"Select an animal\" hasError>\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, native\">\n            <Select\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                disabled\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n        <Example.Item title=\"disabled, custom\">\n            <Select.Custom\n                name=\"animal-2\"\n                placeholder=\"Select an animal\"\n                disabled\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <Example>\n        <Example.Item title=\"native, className, attributes, inputAttributes\">\n            <Select\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                className=\"native-class\"\n                attributes={{ id: \"test-id\" }}\n                inputAttributes={{ \"aria-label\": \"test-label\" }}\n            >\n                <option value=\"dog\">Dog</option>\n                <option value=\"turtle\">Turtle</option>\n            </Select>\n        </Example.Item>\n        <Example.Item title=\"custom, className, attributes, inputAttributes\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                className=\"custom-class\"\n                attributes={{ id: \"test-id\" }}\n                inputAttributes={{ \"aria-label\": \"test-label\" }}\n            >\n                <Select.Option value=\"dog\">Dog</Select.Option>\n                <Select.Option value=\"turtle\">Turtle</Select.Option>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "fallback",
+					"snippet": "const fallback = () => (\n    <Example>\n        <Example.Item title=\"fallback\">\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                {[...Array(100)].map((_, index) => (\n                    <Select.Option key={index} value={`item-${index}`}>\n                        Item {index + 1}\n                    </Select.Option>\n                ))}\n            </Select.Custom>\n            <div style={{ height: \"1000px\" }}></div>\n            <Select.Custom\n                name=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{ \"aria-label\": \"Select an animal\" }}\n            >\n                {[...Array(100)].map((_, index) => (\n                    <Select.Option key={index} value={`item-${index}`}>\n                        Item {index + 1}\n                    </Select.Option>\n                ))}\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "formControl",
+					"snippet": "const formControl = () => (\n    <Example>\n        <Example.Item title=\"FormControl\">\n            <FormControl hasError>\n                <FormControl.Label>Animal</FormControl.Label>\n                <Select.Custom name=\"animal\" placeholder=\"Select an animal\">\n                    <Select.Option value=\"dog\">Dog</Select.Option>\n                    <Select.Option value=\"turtle\">Turtle</Select.Option>\n                </Select.Custom>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "testComposition",
+					"snippet": "const testComposition = () => (\n    <Example>\n        <Example.Item title=\"custom with options\">\n            <Select.Custom\n                name=\"animal\"\n                id=\"animal\"\n                placeholder=\"Select an animal\"\n                inputAttributes={{\n                    \"aria-label\": \"Select an animal\",\n                }}\n            >\n                <Select.Group>\n                    <Select.Option value=\"dog\">Dog</Select.Option>\n                    <Select.Option value=\"turtle\">Turtle</Select.Option>\n                </Select.Group>\n                <Select.Group>Hello</Select.Group>\n            </Select.Custom>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Badge, Example, FormControl, MenuItem, Modal, Placeholder, Select, Text } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Select",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Select/Select.tsx",
+				"actualName": "Select",
+				"exportName": "default"
+			}
+		},
+		"components-skeleton": {
+			"id": "components-skeleton",
+			"name": "Skeleton",
+			"path": "./src/components/Skeleton/tests/Skeleton.stories.tsx",
+			"stories": [
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"text\">\n            <Skeleton />\n        </Example.Item>\n\n        <Example.Item title=\"view, rectangle\">\n            <Skeleton width=\"100px\" height=\"100px\" />\n        </Example.Item>\n\n        <Example.Item title=\"view, circle\">\n            <Skeleton width=\"100px\" height=\"100px\" borderRadius=\"circular\" />\n        </Example.Item>\n\n        <Example.Item title=\"view, rectangle, responsive\">\n            <Skeleton width={{ s: \"100px\", m: \"200px\" }} height={{ s: \"100px\", m: \"200px\" }} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "radius",
+					"snippet": "const radius = () => (\n    <Example>\n        <Example.Item title=\"radius=small\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"small\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=medium\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"medium\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=large\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"large\" />\n        </Example.Item>\n\n        <Example.Item title=\"radius=circular\">\n            <Skeleton width=\"60px\" height=\"60px\" borderRadius=\"circular\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Skeleton className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Skeleton } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Skeleton",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Skeleton/Skeleton.tsx",
+				"actualName": "Skeleton",
+				"exportName": "default"
+			}
+		},
+		"components-slider": {
+			"id": "components-slider",
+			"name": "Slider",
+			"path": "./src/components/Slider/tests/Slider.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"single, name\">\n            <Slider name=\"slider-single\" defaultValue={30} />\n        </Example.Item>\n        <Example.Item title=\"range, name\">\n            <Slider range name=\"slider-range\" defaultMinValue={30} defaultMaxValue={85} />\n        </Example.Item>\n        <Example.Item title=\"range, minName, maxName\">\n            <Slider\n                range\n                minName=\"slider-min\"\n                maxName=\"slider-max\"\n                defaultMinValue={30}\n                defaultMaxValue={85}\n            />\n        </Example.Item>\n        <div style={{ height: 2000 }} />\n    </Example>\n);"
+				},
+				{
+					"name": "orientation",
+					"snippet": "const orientation = () => (\n    <Example>\n        <Example.Item title=\"orientation: vertical\">\n            <View height=\"200px\">\n                <Slider\n                    range\n                    name=\"slider\"\n                    defaultMinValue={30}\n                    defaultMaxValue={85}\n                    orientation=\"vertical\"\n                />\n            </View>\n        </Example.Item>\n        <View height=\"2000px\" />\n    </Example>\n);"
+				},
+				{
+					"name": "minMax",
+					"snippet": "const minMax = () => (\n    <Example>\n        <Example.Item title=\"min, max\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={60} />\n        </Example.Item>\n        <Example.Item title=\"min, max, value < min\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={30} />\n        </Example.Item>\n        <Example.Item title=\"min, max, value > max\">\n            <Slider name=\"name\" min={50} max={70} defaultValue={80} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "step",
+					"snippet": "const step = () => (\n    <Example>\n        <Example.Item title=\"step: 5\">\n            <Slider name=\"slider\" defaultValue={30} step={5} />\n        </Example.Item>\n\n        <Example.Item title=\"step: 5, defaultValue: 31, rounded down to 30\">\n            <Slider name=\"slider\" defaultValue={31} step={5} />\n        </Example.Item>\n\n        <Example.Item title=\"step: 0.01, float\">\n            <Slider name=\"slider\" defaultValue={30} step={0.01} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <Slider name=\"slider\" defaultValue={30} disabled />\n        </Example.Item>\n\n        <Example.Item title=\"disabled, range\">\n            <Slider name=\"slider\" range defaultMinValue={30} defaultMaxValue={80} disabled />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "renderValue",
+					"snippet": "const renderValue = () => (\n    <Example>\n        <Example.Item title=\"renderValue: $\">\n            <Slider name=\"name\" defaultValue={50} renderValue={(args) => `$${args.value}`} />\n        </Example.Item>\n        <Example.Item title=\"renderValue: false\">\n            <Slider name=\"name\" defaultValue={50} renderValue={false} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "defaultValue",
+					"snippet": "const defaultValue = () => <View paddingTop={10}>\n    <Slider name=\"test-name\" defaultValue={50} onChange={fn()} onChangeCommit={fn()} />\n</View>;"
+				},
+				{
+					"name": "value",
+					"snippet": "const value = () => <View paddingTop={10}>\n    <Slider name=\"test-name\" value={50} onChange={fn()} onChangeCommit={fn()} />\n</View>;"
+				},
+				{
+					"name": "rangeDefaultValue",
+					"snippet": "const rangeDefaultValue = () => <View paddingTop={10}>\n    <Slider\n        range\n        name=\"test-name\"\n        defaultMinValue={50}\n        defaultMaxValue={70}\n        onChange={fn()}\n        onChangeCommit={fn()} />\n</View>;"
+				},
+				{
+					"name": "rangeValue",
+					"snippet": "const rangeValue = () => <View paddingTop={10}>\n    <Slider\n        range\n        minName=\"test-name-min\"\n        maxName=\"test-name-max\"\n        minValue={50}\n        maxValue={70}\n        onChange={fn()}\n        onChangeCommit={fn()} />\n</View>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Slider name=\"name\" className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
+				},
+				{
+					"name": "testForm",
+					"snippet": "const testForm = (args) => {\n    const formRef = React.useRef<HTMLFormElement>(null);\n    const [data, setData] = React.useState<[string, FormDataEntryValue][]>([]);\n\n    const handleChange = (e: React.FormEvent<HTMLFormElement>) => {\n        const formData = new FormData(e.currentTarget);\n        const nextState = [...formData.entries()];\n\n        args.handleFormChange({ formData: nextState });\n        setData(nextState);\n    };\n\n    return (\n        <View paddingTop={10} gap={4}>\n            <form onChange={handleChange} ref={formRef}>\n                <Slider\n                    range\n                    minName=\"slider-min\"\n                    maxName=\"slider-max\"\n                    defaultMinValue={30}\n                    defaultMaxValue={50}\n                />\n            </form>\n\n            {data.map((v) => v.join(\": \")).join(\", \")}\n        </View>\n    );\n};"
+				},
+				{
+					"name": "testSwipe",
+					"snippet": "const testSwipe = () => {\n    const toggle = useToggle(true);\n\n    return (\n        <Modal active={toggle.active} onClose={toggle.deactivate} position=\"end\">\n            <View gap={4}>\n                <Modal.Title>Modal</Modal.Title>\n                <Slider name=\"slider\" defaultValue={30} />\n            </View>\n        </Modal>\n    );\n};"
+				}
+			],
+			"import": "import { Example, Modal, Slider, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Slider",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Slider/Slider.tsx",
+				"actualName": "Slider",
+				"exportName": "default"
+			}
+		},
+		"components-stepper": {
+			"id": "components-stepper",
+			"name": "Stepper",
+			"path": "./src/components/Stepper/tests/Stepper.stories.tsx",
+			"stories": [
+				{
+					"name": "direction",
+					"snippet": "const direction = () => (\n    <Example>\n        <Example.Item title=\"direction: row\">\n            <Stepper activeId=\"1\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <Stepper activeId=\"1\" direction=\"column\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "labelDisplay",
+					"snippet": "const labelDisplay = () => (\n    <Example>\n        <Example.Item title=\"direction: row, labels hidden\">\n            <Stepper activeId=\"1\" labelDisplay=\"hidden\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: column, labels hiden\">\n            <Stepper activeId=\"1\" direction=\"column\" labelDisplay=\"hidden\">\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"direction: row, labels hidden on s\">\n            <Stepper activeId=\"1\" labelDisplay={{ s: \"hidden\", m: \"inline\" }}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "gap",
+					"snippet": "const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 6, direction: row\">\n            <Stepper activeId=\"1\" gap={6}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title=\"gap: 6, direction: column\">\n            <Stepper activeId=\"1\" direction=\"column\" gap={6}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap\", \"[s] 2\", \"[m+] 5\"]}>\n            <Stepper activeId=\"1\" gap={{ s: 2, m: 5 }}>\n                <Stepper.Item completed title=\"Step 1\" subtitle=\"Step subtitle\" />\n                <Stepper.Item title=\"Step 2\" />\n                <Stepper.Item title=\"Step 3 very long title\" />\n            </Stepper>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Stepper className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Stepper.Item attributes={{ id: \"test-item-id\" }} className=\"test-item-classname\" />\n        </Stepper>\n    </div>\n);"
+				},
+				{
+					"name": "edgeCases",
+					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"multiline subtitle\",\n                \"should wrap the text correctly\",\n                \"should display the connector correctly\",\n            ]}\n        >\n            <Demo\n                activeId={0}\n                subtitle=\"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy\"\n            />\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Button, Example, Placeholder, Stepper, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Stepper",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Stepper/Stepper.tsx",
+				"actualName": "Stepper",
+				"exportName": "default"
+			}
+		},
+		"components-switch": {
+			"id": "components-switch",
+			"name": "Switch",
+			"path": "./src/components/Switch/tests/Switch.stories.tsx",
+			"stories": [
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n\t<Example>\n\t\t<Example.Item title=\"size: medium\">\n\t\t\t<Switch name=\"active\" size=\"medium\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: small\">\n\t\t\t<Switch name=\"active\" size=\"small\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: large\">\n\t\t\t<Switch name=\"active\" size=\"large\" inputAttributes={{ \"aria-label\": \"test switch\" }} />\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: responsive, s: small, m: large\">\n\t\t\t<Switch\n\t\t\t\tname=\"active\"\n\t\t\t\tsize={{ s: \"small\", m: \"large\" }}\n\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t/>\n\t\t</Example.Item>\n\t</Example>\n);"
+				},
+				{
+					"name": "label",
+					"snippet": "const label = () => (\n\t<Example>\n\t\t<Example.Item title=\"size: medium\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch reversed name=\"active\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"size: small\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" size=\"small\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch\n\t\t\t\t\treversed\n\t\t\t\t\tname=\"active\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t\t>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\n\t\t<Example.Item title=\"size: large\">\n\t\t\t<View direction=\"row\" gap={8}>\n\t\t\t\t<Switch name=\"active\" size=\"large\" inputAttributes={{ \"aria-label\": \"test switch\" }}>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t\t<Switch\n\t\t\t\t\treversed\n\t\t\t\t\tname=\"active\"\n\t\t\t\t\tsize=\"large\"\n\t\t\t\t\tinputAttributes={{ \"aria-label\": \"test switch\" }}\n\t\t\t\t>\n\t\t\t\t\tWi-fi\n\t\t\t\t</Switch>\n\t\t\t</View>\n\t\t</Example.Item>\n\t</Example>\n);"
+				},
+				{
+					"name": "defaultChecked",
+					"snippet": "const defaultChecked = () => <Switch name=\"test-name\" defaultChecked onChange={fn()}>Label\n            </Switch>;"
+				},
+				{
+					"name": "checked",
+					"snippet": "const checked = () => <Switch name=\"test-name\" checked onChange={fn()}>Label\n            </Switch>;"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, unselected\">\n            <Switch name=\"active\" disabled inputAttributes={{ \"aria-label\": \"test switch\" }} />\n        </Example.Item>\n        <Example.Item title=\"disabled, selected\">\n            <Switch\n                name=\"active\"\n                disabled\n                defaultChecked\n                inputAttributes={{ \"aria-label\": \"test switch\" }}\n            />\n        </Example.Item>\n        <Example.Item title=\"disabled, with label\">\n            <Switch name=\"active\" disabled>\n                Switch\n            </Switch>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Switch\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            inputAttributes={{ \"aria-label\": \"test select\", id: \"test-input-id\" }}\n            name=\"name\"\n        >\n            Label\n        </Switch>\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Switch, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Switch",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Switch/Switch.tsx",
+				"actualName": "Switch",
+				"exportName": "default"
+			}
+		},
+		"components-table": {
+			"id": "components-table",
+			"name": "Table",
+			"path": "./src/components/Table/tests/Table.stories.tsx",
+			"stories": [
+				{
+					"name": "layout",
+					"snippet": "const layout = () => (\n    <Example>\n        <Example.Item title=\"base\">\n            <Table>\n                <Table.Head>\n                    <Table.Row>\n                        <Table.Heading>Column 1</Table.Heading>\n                        <Table.Heading>Column 2</Table.Heading>\n                    </Table.Row>\n                </Table.Head>\n                <Table.Body>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell>Cell 2</Table.Cell>\n                    </Table.Row>\n                </Table.Body>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"colspan: 2 for col 2, rowspan: 2 for cell 3\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading colSpan={2}>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                    <Table.Cell rowSpan={2}>Cell 3</Table.Cell>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"align: center for heading 1, align: end for heading 2\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading align=\"center\">Column 1</Table.Heading>\n                    <Table.Heading align=\"end\">Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"valign: center for cell 2, valign: end for cell 3\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>\n                        <View height={15} backgroundColor=\"neutral-faded\" />\n                    </Table.Cell>\n                    <Table.Cell verticalAlign=\"center\">Cell 2</Table.Cell>\n                    <Table.Cell verticalAlign=\"end\">Cell 3</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"width: 40%, minWidth: 200px for col 1\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"40%\" minWidth=\"200px\">\n                        Column 1\n                    </Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "border",
+					"snippet": "const border = () => (\n    <Example>\n        <Example.Item title=\"border: true\">\n            <Table border>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"columnBorder: true\">\n            <Table columnBorder>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"columnBorder: true, border: true\">\n            <Table columnBorder border>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "rows",
+					"snippet": "const rows = () => (\n    <Example>\n        <Example.Item title=\"highlighted for row 2\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row highlighted>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"clickable row 2, focus ring\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading>Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row onClick={() => {}}>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "render",
+					"snippet": "const render = () => (\n    <Table>\n        <Table.Head>\n            <Table.Row>\n                <Table.Heading>Heading</Table.Heading>\n                <Table.Heading>Heading</Table.Heading>\n            </Table.Row>\n        </Table.Head>\n        <Table.Body>\n            <Table.Row>\n                <Table.Cell>Content</Table.Cell>\n                <Table.Cell>Content</Table.Cell>\n            </Table.Row>\n        </Table.Body>\n    </Table>\n);"
+				},
+				{
+					"name": "tbody",
+					"snippet": "const tbody = () => (\n    <Table>\n        <Table.Row>\n            <Table.Heading>Heading</Table.Heading>\n            <Table.Heading>Heading</Table.Heading>\n        </Table.Row>\n    </Table>\n);"
+				},
+				{
+					"name": "tabIndex",
+					"snippet": "const tabIndex = () => (\n    <Table>\n        <Table.Row>\n            <Table.Cell />\n        </Table.Row>\n        <Table.Row onClick={() => {}}>\n            <Table.Cell />\n        </Table.Row>\n        <Table.Row attributes={{ onClick: () => {} }}>\n            <Table.Cell />\n        </Table.Row>\n    </Table>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Table className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Table.Row attributes={{ id: \"test-row-id\" }}>\n                <Table.Cell attributes={{ id: \"test-cell-id\" }}></Table.Cell>\n            </Table.Row>\n        </Table>\n    </div>\n);"
+				},
+				{
+					"name": "edgeCases",
+					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"scroll fade\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"500px\">Column 1</Table.Heading>\n                    <Table.Heading width=\"500px\">Column 2</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n        <Example.Item title=\"card with highlighted heading\">\n            <Card elevated padding={0}>\n                <Table>\n                    <Table.Row highlighted>\n                        <Table.Heading width=\"50%\" minWidth=\"200px\">\n                            Column 1\n                        </Table.Heading>\n                        <Table.Heading colSpan={2} align=\"end\">\n                            Column 2\n                        </Table.Heading>\n                    </Table.Row>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell align=\"center\">Cell 2</Table.Cell>\n                        <Table.Cell align=\"end\">Cell 3</Table.Cell>\n                    </Table.Row>\n                    <Table.Row>\n                        <Table.Cell>Cell 1</Table.Cell>\n                        <Table.Cell align=\"center\">Cell 2</Table.Cell>\n                        <Table.Cell align=\"end\">Cell 3</Table.Cell>\n                    </Table.Row>\n                </Table>\n            </Card>\n        </Example.Item>\n        <Example.Item title=\"width: auto, nowrap\">\n            <Table>\n                <Table.Row>\n                    <Table.Heading width=\"50%\">Column 1</Table.Heading>\n                    <Table.Heading>Column 2</Table.Heading>\n                    <Table.Heading>Column 3</Table.Heading>\n                    <Table.Heading width=\"auto\">Long heading title</Table.Heading>\n                </Table.Row>\n                <Table.Row>\n                    <Table.Cell>Cell 1</Table.Cell>\n                    <Table.Cell>Cell 2</Table.Cell>\n                    <Table.Cell>Cell 3</Table.Cell>\n                    <Table.Cell>Cell 4</Table.Cell>\n                </Table.Row>\n            </Table>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "examples",
+					"snippet": "const examples = () => (\n    <Example>\n        <Example.Item title=\"selectable\">\n            <SelectionDemo />\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Card, Checkbox, Example, Table, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Table",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Table/Table.tsx",
+				"actualName": "Table",
+				"exportName": "default"
+			}
+		},
+		"components-tabs": {
+			"id": "components-tabs",
+			"name": "Tabs",
+			"path": "./src/components/Tabs/tests/Tabs.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n    <Tabs>\n        <Tabs.List>\n            <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n            <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n        </Tabs.List>\n\n        <Tabs.Panel value=\"1\">\n            <View padding={4}>Content 1</View>\n        </Tabs.Panel>\n        <Tabs.Panel value=\"2\">\n            <View padding={4}>Content 2</View>\n        </Tabs.Panel>\n    </Tabs>\n);"
+				},
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Tabs defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills\">\n            <Tabs variant=\"pills\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills-elevated\">\n            <Tabs variant=\"pills-elevated\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: borderless\">\n            <Tabs variant=\"borderless\" defaultValue=\"0\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"variant: default, size: large\">\n            <Tabs size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills, size: large\">\n            <Tabs variant=\"pills\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: pills-elevated, size: large\">\n            <Tabs variant=\"pills-elevated\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"variant: borderless, size: large\">\n            <Tabs variant=\"borderless\" size=\"large\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "direction",
+					"snippet": "const direction = () => (\n    <Example>\n        <Example.Item title=\"direction: column, variant: underline\">\n            <Tabs direction=\"column\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: pills\">\n            <Tabs direction=\"column\" variant=\"pills\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: pills-elevated\">\n            <Tabs direction=\"column\" variant=\"pills-elevated\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"direction: column, variant: borderless\">\n            <Tabs direction=\"column\" variant=\"borderless\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "icon",
+					"snippet": "const icon = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <Tabs>\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"1\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"icon only\">\n            <Tabs variant=\"pills-elevated\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap} attributes={{ \"aria-label\": \"Tab 1\" }} />\n                    <Tabs.Item value=\"1\" icon={IconZap} attributes={{ \"aria-label\": \"Tab 2\" }} />\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "equalWidth",
+					"snippet": "const equalWidth = () => (\n    <Example>\n        <Example.Item title=\"equal width items\">\n            <Tabs onChange={console.log} itemWidth=\"equal\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"1\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                    <Tabs.Item value=\"2\" icon={IconZap}>\n                        Very long item 3\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "href",
+					"snippet": "const href = () => (\n    <Example>\n        <Example.Item title=\"href, no onChange\">\n            <Tabs value=\"2\">\n                <Tabs.List>\n                    <Tabs.Item value=\"1\" href=\"#item-1\" icon={IconZap}>\n                        Item 1\n                    </Tabs.Item>\n                    <Tabs.Item value=\"2\" href=\"#item-2\" icon={IconZap}>\n                        Long item 2\n                    </Tabs.Item>\n                    <Tabs.Item value=\"3\" href=\"#item-3\" icon={IconZap}>\n                        Very long item 3\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => {\n    return (\n        <Example>\n            <Example.Item title=\"disabled\">\n                <Tabs defaultValue=\"1\">\n                    <Tabs.List>\n                        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"2\" disabled icon={IconZap}>\n                            Item 2\n                        </Tabs.Item>\n                        <Tabs.Item value=\"3\">Item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"1\">\n                        <View padding={4}>Content 1</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <View padding={4}>Content 2</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"3\">\n                        <View padding={4}>Content 3</View>\n                    </Tabs.Panel>\n                </Tabs>\n            </Example.Item>\n\n            <Example.Item title=\"disabled, href\">\n                <Tabs defaultValue=\"1\">\n                    <Tabs.List>\n                        <Tabs.Item href=\"#item1\" value=\"1\">\n                            Item 1\n                        </Tabs.Item>\n                        <Tabs.Item href=\"#item2\" value=\"2\" disabled icon={IconZap}>\n                            Item 2\n                        </Tabs.Item>\n                        <Tabs.Item href=\"#item3\" value=\"3\">\n                            Item 3\n                        </Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"1\">\n                        <View padding={4}>Content 1</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <View padding={4}>Content 2</View>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"3\">\n                        <View padding={4}>Content 3</View>\n                    </Tabs.Panel>\n                </Tabs>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "defaultValue",
+					"snippet": "const defaultValue = () => <Tabs defaultValue=\"2\" onChange={fn()}>\n    <Tabs.List>\n        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n        <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n    </Tabs.List>\n    <Tabs.Panel value=\"1\">Content 1</Tabs.Panel>\n    <Tabs.Panel value=\"2\">Content 2</Tabs.Panel>\n</Tabs>;"
+				},
+				{
+					"name": "value",
+					"snippet": "const value = () => <Tabs value=\"2\" onChange={fn()}>\n    <Tabs.List>\n        <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n        <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n    </Tabs.List>\n    <Tabs.Panel value=\"1\">Content 1</Tabs.Panel>\n    <Tabs.Panel value=\"2\">Content 2</Tabs.Panel>\n</Tabs>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Tabs>\n            <Tabs.List attributes={{ id: \"test-list-id\" }} className=\"test-list-classname\">\n                <Tabs.Item attributes={{ id: \"test-item-id\" }} value=\"1\">\n                    Item\n                </Tabs.Item>\n            </Tabs.List>\n\n            <Tabs.Panel\n                attributes={{ \"data-testid\": \"test-panel-id\" }}\n                className=\"test-panel-classname\"\n                value=\"1\"\n            />\n        </Tabs>\n    </div>\n);"
+				},
+				{
+					"name": "testFocusableContent",
+					"snippet": "const testFocusableContent = () => (\n    <Example>\n        <Example.Item title=\"panels without focusable content\">\n            <Tabs>\n                <View gap={4}>\n                    <Tabs.List>\n                        <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                        <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"0\">Tab 1</Tabs.Panel>\n                    <Tabs.Panel value=\"1\">Tab 2</Tabs.Panel>\n                    <Tabs.Panel value=\"2\">Tab 3</Tabs.Panel>\n                </View>\n            </Tabs>\n        </Example.Item>\n\n        <Example.Item title=\"panels with focusable content\">\n            <Tabs>\n                <View gap={4}>\n                    <Tabs.List>\n                        <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                        <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                        <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                    </Tabs.List>\n\n                    <Tabs.Panel value=\"0\">\n                        <Button onClick={() => {}}>Tab 1 action</Button>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"1\">\n                        <Button onClick={() => {}}>Tab 2 action</Button>\n                    </Tabs.Panel>\n                    <Tabs.Panel value=\"2\">\n                        <Button onClick={() => {}}>Tab 3 action</Button>\n                    </Tabs.Panel>\n                </View>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "testComposition",
+					"snippet": "const testComposition = () => (\n    <Example>\n        <Example.Item title=\"Viewport overflow\">\n            <Tabs>\n                <Tabs.List>\n                    {[...Array(8)].map((_, i) => (\n                        <Tabs.Item value={`${i}`} key={i} icon={IconZap}>\n                            Very long item {i}\n                        </Tabs.Item>\n                    ))}\n                </Tabs.List>\n\n                {[...Array(8)].map((_, i) => (\n                    <Tabs.Panel value={`${i}`} key={i}>\n                        Tab {i}\n                    </Tabs.Panel>\n                ))}\n            </Tabs>\n        </Example.Item>\n        <Example.Item>\n            <Tabs onChange={console.log} variant=\"pills-elevated\" name=\"hey\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">\n                        <View borderColor=\"neutral-faded\" padding={5}>\n                            Item 3\n                        </View>\n                    </Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n        <Example.Item title=\"Custom non-interactive list children\">\n            <Tabs direction=\"column\">\n                <Tabs.List>\n                    <Tabs.Item value=\"0\">Item 1</Tabs.Item>\n                    <View height={6} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n                    <Tabs.Item value=\"1\">Long item 2</Tabs.Item>\n                    <Tabs.Item value=\"2\">Very long item 3</Tabs.Item>\n                </Tabs.List>\n            </Tabs>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "testEdgeCaseDom",
+					"snippet": "const testEdgeCaseDom = () => {\n    const [activeItem, setActiveItem] = React.useState(\"1\");\n    const sectionsRef = React.useRef(null);\n\n    return (\n        <Example>\n            <Example.Item title=\"active item changes on scroll\">\n                <View justify=\"center\" align=\"center\" padding={10}>\n                    <View width={60} gap={2}>\n                        <Tabs value={activeItem} onChange={(args) => setActiveItem(args.value)}>\n                            <Tabs.List>\n                                <Tabs.Item value=\"1\">Item 1</Tabs.Item>\n                                <Tabs.Item value=\"2\">Item 2</Tabs.Item>\n                                <Tabs.Item value=\"3\">Item 3</Tabs.Item>\n                                <Tabs.Item value=\"4\">Item 4</Tabs.Item>\n                            </Tabs.List>\n                        </Tabs>\n\n                        <ScrollArea\n                            attributes={{ ref: sectionsRef }}\n                            height={70}\n                            onScroll={(args) => {\n                                setActiveItem(Math.min(4, Math.floor(args.y * 10) + 1).toString());\n                            }}\n                        >\n                            <View gap={4}>\n                                <View gap={2}>\n                                    <Text>Section 1</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View grow height=\"100px\" backgroundColor=\"neutral-faded\" key={i} />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 2</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 3</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n\n                                <View gap={2}>\n                                    <Text>Section 4</Text>\n\n                                    <View gap={1} direction=\"row\">\n                                        {[...Array(4)].map((_, i) => (\n                                            <View key={i} grow height=\"100px\" backgroundColor=\"neutral-faded\" />\n                                        ))}\n                                    </View>\n                                </View>\n                            </View>\n                        </ScrollArea>\n                    </View>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				}
+			],
+			"import": "import { Button, Example, ScrollArea, Tabs, Text, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Tabs",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Tabs/Tabs.tsx",
+				"actualName": "Tabs",
+				"exportName": "default"
+			}
+		},
+		"components-textarea": {
+			"id": "components-textarea",
+			"name": "TextArea",
+			"path": "./src/components/TextArea/tests/TextArea.stories.tsx",
+			"stories": [
+				{
+					"name": "variants",
+					"snippet": "const variants = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <TextArea variant=\"faded\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless\">\n            <TextArea variant=\"headless\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: medium\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"medium\" />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"large\" />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size=\"xlarge\" />\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] large\", \"[m+] medium\"]}>\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" size={{ s: \"xlarge\", m: \"medium\" }} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "resize",
+					"snippet": "const resize = () => (\n    <Example>\n        <Example.Item title=\"resize: none\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" resize=\"none\" />\n        </Example.Item>\n        <Example.Item title=\"resize: auto\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" resize=\"auto\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "error",
+					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <TextArea name=\"Name\" placeholder=\"Enter your name\" hasError />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "aligner",
+					"snippet": "const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner\">\n            <View gap={2}>\n                <Text variant=\"featured-2\">What problem are you trying to solve?</Text>\n                <TextArea.Aligner>\n                    <TextArea\n                        variant=\"headless\"\n                        placeholder=\"Try something like 'I have a job'\"\n                        name=\"description\"\n                    />\n                </TextArea.Aligner>\n                <View.Item>\n                    <Button>Next</Button>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "edgeCases",
+					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"long value without breaks\">\n            <TextArea\n                name=\"hey\"\n                defaultValue={`<div style=\"position:relative;width:100%;padding-top:calc(150% + 72px)\">\n<iframe src=\"nskjdfdsdkjfsjkdfhbsjlhdfbsjlhfbs;jhbsdljfhsbljhfsbljhfbsjlfdhbsljhfbsdljhfbsljhfbslufbhsdlfds\" />\n</div>`}\n                resize=\"auto\"\n                placeholder=\"Placeholder\"\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "render",
+					"snippet": "const render = () => <TextArea name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "placeholder",
+					"snippet": "const placeholder = () => (\n    <TextArea\n        name=\"test-name\"\n        placeholder=\"Placeholder\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"
+				},
+				{
+					"name": "id",
+					"snippet": "const id = () => (\n    <TextArea name=\"test-name\" id=\"test-id\" inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => <TextArea name=\"test-name\" disabled inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "defaultValue",
+					"snippet": "const defaultValue = () => <TextArea\n    name=\"test-name\"\n    defaultValue=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "value",
+					"snippet": "const value = () => <TextArea\n    name=\"test-name\"\n    value=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <TextArea\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n        />\n    </div>\n);"
+				},
+				{
+					"name": "formControl",
+					"snippet": "const formControl = () => (\n    <Example>\n        <Example.Item title=\"with helper\">\n            <FormControl>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextArea name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n        <Example.Item title=\"with error\">\n            <FormControl hasError>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextArea name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Button, Example, FormControl, Text, TextArea, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "TextArea",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/TextArea/TextArea.tsx",
+				"actualName": "TextArea",
+				"exportName": "default"
+			}
+		},
+		"components-textfield": {
+			"id": "components-textfield",
+			"name": "TextField",
+			"path": "./src/components/TextField/tests/TextField.stories.tsx",
+			"stories": [
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: faded\">\n            <TextField variant=\"faded\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n\n        <Example.Item title=\"variant: headless\">\n            <TextField variant=\"headless\" name=\"Name\" placeholder=\"Enter your name\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "rounded",
+					"snippet": "const rounded = () => (\n    <Example>\n        <Example.Item title=\"rounded\">\n            <TextField\n                rounded\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                icon={IconZap}\n                prefix=\"+31\"\n                endSlot={<Button rounded size=\"small\" icon={IconZap} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"rounded, variant: faded\">\n            <View direction=\"row\" gap={2}>\n                <View.Item grow>\n                    <TextField\n                        rounded\n                        variant=\"faded\"\n                        name=\"Name\"\n                        placeholder=\"Enter your name\"\n                        startSlot={\n                            <Badge rounded size=\"small\">\n                                Hello\n                            </Badge>\n                        }\n                    />\n                </View.Item>\n                <Button rounded>Submit</Button>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "error",
+					"snippet": "const error = () => (\n    <Example>\n        <Example.Item title=\"error\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" hasError />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "attachments",
+					"snippet": "const attachments = () => (\n    <Example>\n        <Example.Item title=\"icon\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" value=\"Reshaped\" icon={IconZap} />\n        </Example.Item>\n        <Example.Item title=\"endIcon\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" value=\"Reshaped\" endIcon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title={[\"startSlot\", \"vertical and horizontal padding aligned\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title={[\"endSlot\", \"vertical and horizontal padding aligned\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                endSlot={\n                    <Button\n                        icon={IconZap}\n                        size=\"small\"\n                        onClick={() => {}}\n                        attributes={{ \"aria-label\": \"Action\" }}\n                    />\n                }\n            />\n        </Example.Item>\n\n        <Example.Item title=\"paddingSlotStart=4, paddingSlotEnd=2\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlotPadding={4}\n                endSlotPadding={2}\n                startSlot={<Placeholder h={20} />}\n                endSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"with all affixes\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                endIcon={IconZap}\n                icon={IconZap}\n                prefix=\"Estimated value\"\n                suffix=\"m2\"\n                startSlot={<Placeholder h={20} />}\n                endSlot={<Placeholder h={20} />}\n            />\n        </Example.Item>\n\n        <Example.Item title=\"multiline wrap\">\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                value=\"Reshaped\"\n                startSlot={[...Array(10).keys()].map((i) => (\n                    <Badge size=\"small\" key={i}>\n                        Item {i + 1}\n                    </Badge>\n                ))}\n                multiline\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: small\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"small\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: medium\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"medium\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"large\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title=\"size: xlarge\">\n            <TextField name=\"Name\" placeholder=\"Enter your name\" size=\"xlarge\" icon={IconZap} />\n        </Example.Item>\n\n        <Example.Item title={[\"responsive size\", \"[s] xlarge\", \"[m+] medium\"]}>\n            <TextField\n                name=\"Name\"\n                placeholder=\"Enter your name\"\n                size={{ s: \"xlarge\", m: \"medium\" }}\n                icon={IconZap}\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "aligner",
+					"snippet": "const aligner = () => (\n    <Example>\n        <Example.Item title=\"aligner\">\n            <View gap={2}>\n                <Text variant=\"featured-2\">What problem are you trying to solve?</Text>\n                <TextField.Aligner>\n                    <TextField\n                        variant=\"headless\"\n                        placeholder=\"Try something like 'I have a job'\"\n                        name=\"description\"\n                    />\n                </TextField.Aligner>\n                <View.Item>\n                    <Button>Next</Button>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "render",
+					"snippet": "const render = () => <TextField name=\"test-name\" inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "placeholder",
+					"snippet": "const placeholder = () => (\n    <TextField\n        name=\"test-name\"\n        placeholder=\"Placeholder\"\n        inputAttributes={{ \"aria-label\": \"Label\" }}\n    />\n);"
+				},
+				{
+					"name": "id",
+					"snippet": "const id = () => (\n    <TextField name=\"test-name\" id=\"test-id\" inputAttributes={{ \"aria-label\": \"Label\" }} />\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => <TextField name=\"test-name\" disabled inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "defaultValue",
+					"snippet": "const defaultValue = () => <TextField\n    name=\"test-name\"\n    defaultValue=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "value",
+					"snippet": "const value = () => <TextField\n    name=\"test-name\"\n    value=\"value\"\n    onChange={fn()}\n    inputAttributes={{ \"aria-label\": \"Label\" }} />;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <TextField\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            name=\"name\"\n            inputAttributes={{ id: \"test-input-id\", \"aria-label\": \"Label\" }}\n        />\n    </div>\n);"
+				},
+				{
+					"name": "formControl",
+					"snippet": "const formControl = () => (\n    <Example>\n        <Example.Item title=\"with helper\">\n            <FormControl>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextField name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Helper>Helper</FormControl.Helper>\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n        <Example.Item title=\"with error\">\n            <FormControl hasError>\n                <FormControl.Label>Name</FormControl.Label>\n                <TextField name=\"name\" placeholder=\"Enter your name\" />\n                <FormControl.Error>This field is required</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Badge, Button, Example, FormControl, Placeholder, Text, TextField, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "TextField",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/TextField/TextField.tsx",
+				"actualName": "TextField",
+				"exportName": "default"
+			}
+		},
+		"components-timeline": {
+			"id": "components-timeline",
+			"name": "Timeline",
+			"path": "./src/components/Timeline/tests/Timeline.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"children passed directly\">\n            <Timeline>\n                <Placeholder />\n                <Placeholder />\n                <Placeholder />\n            </Timeline>\n        </Example.Item>\n        <Example.Item title=\"children wrapped with Timeline.Item\">\n            <Timeline>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "marker",
+					"snippet": "const marker = () => (\n    <Example>\n        <Example.Item title=\"slot\">\n            <Timeline>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={<Placeholder h=\"20px\" w=\"20px\" />}>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n\n        <Example.Item title=\"null marker\">\n            <Timeline>\n                <Timeline.Item markerSlot={null}>\n                    <Placeholder />\n                </Timeline.Item>\n                <Timeline.Item markerSlot={null}>\n                    <Placeholder />\n                </Timeline.Item>\n            </Timeline>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Timeline className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Timeline.Item className=\"test-item-classname\" attributes={{ id: \"test-item-id\" }}>\n                Content\n            </Timeline.Item>\n            <Timeline.Item>Content</Timeline.Item>\n        </Timeline>\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Placeholder, Timeline } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Timeline",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Timeline/Timeline.tsx",
+				"actualName": "Timeline",
+				"exportName": "default"
+			}
+		},
+		"components-toast": {
+			"id": "components-toast",
+			"name": "Toast",
+			"path": "./src/components/Toast/tests/Toast.stories.tsx",
+			"stories": [
+				{ "name": "size", "snippet": "const size = () => <Size />;" },
+				{
+					"name": "position",
+					"snippet": "const position = () => <Position />;"
+				},
+				{ "name": "color", "snippet": "const color = () => <Color />;" },
+				{ "name": "timeout", "snippet": "const timeout = () => <Timeout />;" },
+				{
+					"name": "regionOptions",
+					"snippet": "const regionOptions = () => <Expanded />;"
+				},
+				{ "name": "slots", "snippet": "const slots = () => <Slots />;" },
+				{
+					"name": "base",
+					"snippet": "const base = () => {\n    const toast = useToast();\n\n    return (\n        <Button\n            onClick={() => {\n                const id = toast.show({\n                    title: \"Title\",\n                    text: \"Text\",\n                    children: \"Children\",\n                    startSlot: \"Slot\",\n                    actionsSlot: (\n                        <Button attributes={{ \"data-testid\": \"trigger-id\" }} onClick={() => toast.hide(id)}>\n                            Trigger\n                        </Button>\n                    ),\n                });\n            }}\n        >\n            Show toast\n        </Button>\n    );\n};"
+				},
+				{
+					"name": "nested",
+					"snippet": "const nested = () => {\n    return (\n        <div data-testid=\"test-container-id\">\n            <ToastProvider>\n                <NestedDemo />\n            </ToastProvider>\n        </div>\n    );\n};"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => {\n    const toast = useToast();\n\n    return (\n        <Button\n            onClick={() => {\n                const id = toast.show({\n                    text: \"Content\",\n                    attributes: { \"data-testid\": \"test-id\" },\n                    className: \"test-classname\",\n                });\n            }}\n        >\n            Show toast\n        </Button>\n    );\n};"
+				},
+				{
+					"name": "edgeCases",
+					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"Multiline, should support dynamic height\">\n            <Multiline />\n        </Example.Item>\n        <Example.Item title=\"Nested ToastProvider\">\n            <ToastProvider>\n                <Nested />\n            </ToastProvider>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Button, Dismissible, Example, Image, Text, ToastProvider, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n  11 | import { sleep } from \"utilities/helpers\";\n  12 |\n> 13 | export default {\n     | ^\n  14 | \ttitle: \"Components/Toast\",\n  15 | \tparameters: {\n  16 | \t\tiframe: {\n\n./src/components/Toast/tests/Toast.stories.tsx:\nimport { Example } from \"utilities/storybook\";\nimport { useToast, ToastProvider } from \"components/Toast\";\nimport Button from \"components/Button\";\nimport View from \"components/View\";\nimport Image from \"components/Image\";\nimport Text from \"components/Text\";\nimport Dismissible from \"components/Dismissible\";\nimport IconZap from \"icons/Zap\";\nimport { expect, userEvent, waitFor, within } from \"storybook/test\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { sleep } from \"utilities/helpers\";\n\nexport default {\n\ttitle: \"Components/Toast\",\n\tparameters: {\n\t\tiframe: {\n\t\t\turl: \"https://reshaped.so/docs/components/toast\",\n\t\t},\n\t},\n};\n\nconst Size = () => {\n\tconst toast = useToast();\n\tconst props = {\n\t\ticon: IconZap,\n\t\ttitle: \"Hey!\",\n\t\ttext: \"Event completed\",\n\t\tactionsSlot: [<Button>Action</Button>],\n\t};\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"size: small\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({ ...props });\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"size: medium\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({ ...props, size: \"medium\" });\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"large\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({ ...props, size: \"large\" });\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const size = { name: \"size\", render: () => <Size /> };\n\nconst Position = () => {\n\tconst toast = useToast();\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"position: bottom-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom-start\",\n\t\t\t\t\t\t\tactionsSlot: <Button onClick={() => toast.hide(id)}>Close</Button>,\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: bottom\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: bottom-end\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom-end\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: top-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"top-start\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: top\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"top\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"position: top-end\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"top-end\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const position = { name: \"position\", render: () => <Position /> };\n\nconst Color = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"color: inverted\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"inverted\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: neutral\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"neutral\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: primary\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"primary\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: positive\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"positive\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: critical\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"critical\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"color: warning\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tcolor: \"warning\",\n\t\t\t\t\t\t\ttitle: \"Hey!\",\n\t\t\t\t\t\t\ticon: IconZap,\n\t\t\t\t\t\t\tactionsSlot: [\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Undo</Button>,\n\t\t\t\t\t\t\t\t<Button onClick={() => toast.hide(id)}>Hide</Button>,\n\t\t\t\t\t\t\t],\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\n\nexport const color = { name: \"color\", render: () => <Color /> };\n\nconst Timeout = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"timeout: short\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\ttimeout: \"short\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"timeout: long\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\ttimeout: \"long\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"timeout: 0\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\ttimeout: 0,\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const timeout = { name: \"timeout\", render: () => <Timeout /> };\n\nconst Expanded = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"Custom width coming from Reshaped provider for bottom-start\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\ttoast.show({\n\t\t\t\t\t\t\ttext: \"Event completed\",\n\t\t\t\t\t\t\tposition: \"bottom-start\",\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const regionOptions = { name: \"expanded\", render: () => <Expanded /> };\n\nconst Slots = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Example>\n\t\t\t<Example.Item title=\"always expanded, promotion banner\">\n\t\t\t\t<Button\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\t\tchildren: (\n\t\t\t\t\t\t\t\t<View gap={3} direction=\"row\">\n\t\t\t\t\t\t\t\t\t<View aspectRatio={1}>\n\t\t\t\t\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\t\t\t\t\theight=\"100px\"\n\t\t\t\t\t\t\t\t\t\t\tsrc=\"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80\"\n\t\t\t\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t<View.Item grow>\n\t\t\t\t\t\t\t\t\t\t<View gap={1}>\n\t\t\t\t\t\t\t\t\t\t\t<Dismissible\n\t\t\t\t\t\t\t\t\t\t\t\tcloseAriaLabel=\"Close notification\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClose={() => toast.hide(id)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Text variant=\"body-2\" weight=\"bold\">\n\t\t\t\t\t\t\t\t\t\t\t\t\tLook at this gradient!\n\t\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t\t</Dismissible>\n\t\t\t\t\t\t\t\t\t\t\t<Text variant=\"body-3\">\n\t\t\t\t\t\t\t\t\t\t\t\tIf you start using more gradients, your product will become even more\n\t\t\t\t\t\t\t\t\t\t\t\tsuccesful.\n\t\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t\t</View.Item>\n\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tcolor: \"neutral\",\n\t\t\t\t\t\t\tposition: \"bottom-start\",\n\t\t\t\t\t\t\ttimeout: 0,\n\t\t\t\t\t\t});\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tShow toast\n\t\t\t\t</Button>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t);\n};\nexport const slots = { name: \"slots\", render: () => <Slots /> };\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst toast = useToast();\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\ttitle: \"Title\",\n\t\t\t\t\t\ttext: \"Text\",\n\t\t\t\t\t\tchildren: \"Children\",\n\t\t\t\t\t\tstartSlot: \"Slot\",\n\t\t\t\t\t\tactionsSlot: (\n\t\t\t\t\t\t\t<Button attributes={{ \"data-testid\": \"trigger-id\" }} onClick={() => toast.hide(id)}>\n\t\t\t\t\t\t\t\tTrigger\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t),\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tShow toast\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvasElement }) => {\n\t\tconst canvas = within(canvasElement.ownerDocument.body);\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\tconst title = canvas.getByText(\"Title\");\n\t\tconst text = canvas.getByText(\"Text\");\n\t\tconst children = canvas.getByText(\"Children\");\n\t\tconst slot = canvas.getByText(\"Slot\");\n\t\tconst action = canvas.getByTestId(\"trigger-id\");\n\n\t\texpect(title).toBeInTheDocument();\n\t\texpect(text).toBeInTheDocument();\n\t\texpect(children).toBeInTheDocument();\n\t\texpect(slot).toBeInTheDocument();\n\t\texpect(action).toBeInTheDocument();\n\n\t\tawait userEvent.click(action);\n\n\t\tawait sleep(600);\n\n\t\tawait waitFor(() => {\n\t\t\texpect(title).not.toBeInTheDocument();\n\t\t});\n\t},\n};\n\nconst NestedDemo = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={() => {\n\t\t\t\ttoast.show({\n\t\t\t\t\ttext: \"Content\",\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\tShow toast\n\t\t</Button>\n\t);\n};\n\nexport const nested: StoryObj = {\n\tname: \"ToastProvider\",\n\trender: () => {\n\t\treturn (\n\t\t\t<div data-testid=\"test-container-id\">\n\t\t\t\t<ToastProvider>\n\t\t\t\t\t<NestedDemo />\n\t\t\t\t</ToastProvider>\n\t\t\t</div>\n\t\t);\n\t},\n\tplay: async ({ canvasElement }) => {\n\t\tconst canvas = within(canvasElement.ownerDocument.body);\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\tconst container = canvas.getByTestId(\"test-container-id\");\n\t\tconst toast = within(container).getByText(\"Content\");\n\n\t\texpect(toast).toBeInTheDocument();\n\t},\n};\n\nexport const className: StoryObj = {\n\tname: \"className, attributes\",\n\trender: () => {\n\t\tconst toast = useToast();\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconst id = toast.show({\n\t\t\t\t\t\ttext: \"Content\",\n\t\t\t\t\t\tattributes: { \"data-testid\": \"test-id\" },\n\t\t\t\t\t\tclassName: \"test-classname\",\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tShow toast\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvasElement }) => {\n\t\tconst canvas = within(canvasElement.ownerDocument.body);\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\tconst toast = canvas.getByTestId(\"test-id\");\n\n\t\texpect(toast).toBeInTheDocument();\n\t\texpect(toast).toHaveClass(\"test-classname\");\n\t},\n};\n\nconst Multiline = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<Button\n\t\t\tonClick={() => {\n\t\t\t\ttoast.show({\n\t\t\t\t\ttext: \"Very long event completed notification message\",\n\t\t\t\t});\n\t\t\t}}\n\t\t>\n\t\t\tShow toast\n\t\t</Button>\n\t);\n};\n\nconst Nested = () => {\n\tconst toast = useToast();\n\n\treturn (\n\t\t<View height=\"300px\">\n\t\t\t<Button\n\t\t\t\tonClick={() => {\n\t\t\t\t\ttoast.show({\n\t\t\t\t\t\ttext: \"Notification sent\",\n\t\t\t\t\t});\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\tShow toast\n\t\t\t</Button>\n\t\t</View>\n\t);\n};\nexport const edgeCases = {\n\tname: \"test: edge cases\",\n\trender: () => (\n\t\t<Example>\n\t\t\t<Example.Item title=\"Multiline, should support dynamic height\">\n\t\t\t\t<Multiline />\n\t\t\t</Example.Item>\n\t\t\t<Example.Item title=\"Nested ToastProvider\">\n\t\t\t\t<ToastProvider>\n\t\t\t\t\t<Nested />\n\t\t\t\t</ToastProvider>\n\t\t\t</Example.Item>\n\t\t</Example>\n\t),\n};\n"
+			}
+		},
+		"components-togglebutton": {
+			"id": "components-togglebutton",
+			"name": "ToggleButton",
+			"path": "./src/components/ToggleButton/tests/ToggleButton.stories.tsx",
+			"stories": [
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"outline\">\n            <ToggleButton>Button</ToggleButton>\n        </Example.Item>\n        <Example.Item title=\"ghost\">\n            <ToggleButton variant=\"ghost\">Button</ToggleButton>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "selectedColor",
+					"snippet": "const selectedColor = () => (\n    <Example>\n        <Example.Item title=\"selectedColor: primary\">\n            <ToggleButton selectedColor=\"primary\" defaultChecked>\n                Button\n            </ToggleButton>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "onChange",
+					"snippet": "const onChange = () => <Example>\n    <Example.Item title=\"defaultChecked, onChange\">\n        <ToggleButton defaultChecked onChange={fn()} value=\"1\">Button\n                                </ToggleButton>\n    </Example.Item>\n    <Example.Item title=\"checked, onChange\">\n        <ToggleButton checked onChange={fn()} value=\"2\">Button\n                                </ToggleButton>\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "onClick",
+					"snippet": "const onClick = () => <ToggleButton onClick={fn()}>Button</ToggleButton>;"
+				}
+			],
+			"import": "import { Example, ToggleButton } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "ToggleButton",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/ToggleButton/ToggleButton.tsx",
+				"actualName": "ToggleButton",
+				"exportName": "default"
+			}
+		},
+		"components-togglebuttongroup": {
+			"id": "components-togglebuttongroup",
+			"name": "ToggleButtonGroup",
+			"path": "./src/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.tsx",
+			"stories": [
+				{
+					"name": "single",
+					"snippet": "const single = () => <Example>\n    <Example.Item title=\"single, uncontrolled, onChange\">\n        <ToggleButtonGroup onChange={fn()}>\n            <ToggleButton value=\"1\" onChange={fn()}>Button\n                                    </ToggleButton>\n            <ToggleButton value=\"2\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n    <Example.Item title=\"single, controlled, onChange\">\n        <ToggleButtonGroup onChange={fn()} value={[]}>\n            <ToggleButton value=\"3\" onChange={fn()}>Button\n                                    </ToggleButton>\n            <ToggleButton value=\"4\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "multiple",
+					"snippet": "const multiple = () => <Example>\n    <Example.Item title=\"multiple, uncontrolled, onChange\">\n        <ToggleButtonGroup onChange={fn()} selectionMode=\"multiple\">\n            <ToggleButton value=\"1\">Button</ToggleButton>\n            <ToggleButton value=\"2\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n    <Example.Item title=\"multiple, controlled, onChange\">\n        <ToggleButtonGroup onChange={fn()} value={[]} selectionMode=\"multiple\">\n            <ToggleButton value=\"3\">Button</ToggleButton>\n            <ToggleButton value=\"4\">Button</ToggleButton>\n        </ToggleButtonGroup>\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "selectedColor",
+					"snippet": "const selectedColor = () => (\n    <Example>\n        <Example.Item title=\"selectedColor: primary\">\n            <ToggleButtonGroup selectedColor=\"primary\" defaultValue={[\"2\"]}>\n                <ToggleButton value=\"1\">Button</ToggleButton>\n                <ToggleButton value=\"2\">Button</ToggleButton>\n                <ToggleButton value=\"3\">Button</ToggleButton>\n            </ToggleButtonGroup>\n        </Example.Item>\n        <Example.Item title=\"color: primary, selectedColor: critical\">\n            <ToggleButtonGroup color=\"primary\" selectedColor=\"critical\" defaultValue={[\"2\"]}>\n                <ToggleButton value=\"1\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n                <ToggleButton value=\"2\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n                <ToggleButton value=\"3\" variant=\"ghost\">\n                    Button\n                </ToggleButton>\n            </ToggleButtonGroup>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <ToggleButtonGroup className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <ToggleButton>Button 1</ToggleButton>\n            <ToggleButton>Button 1</ToggleButton>\n        </ToggleButtonGroup>\n    </div>\n);"
+				},
+				{
+					"name": "testIcon",
+					"snippet": "const testIcon = () => (\n    <Example>\n        <Example.Item title=\"icon only\">\n            <ToggleButtonGroup selectedColor=\"primary\">\n                <ToggleButton value=\"1\" icon={IconPlus} />\n                <ToggleButton value=\"2\" icon={IconMinus} />\n                <ToggleButton value=\"3\" icon={IconCheckmark} />\n            </ToggleButtonGroup>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Example, ToggleButton, ToggleButtonGroup } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "ToggleButtonGroup",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/ToggleButtonGroup/ToggleButtonGroup.tsx",
+				"actualName": "ToggleButtonGroup",
+				"exportName": "default"
+			}
+		},
+		"components-tooltip": {
+			"id": "components-tooltip",
+			"name": "Tooltip",
+			"path": "./src/components/Tooltip/tests/Tooltip.stories.tsx",
+			"stories": [
+				{
+					"name": "position",
+					"snippet": "const position = () => (\n    <Example>\n        <Example.Item title=\"position: bottom-start\">\n            <View direction=\"row\" gap={2}>\n                <Demo position=\"bottom-start\" text=\"Tooltip 1\" />\n                <Demo position=\"bottom-start\" text=\"Tooltip 2\" />\n                <Demo position=\"bottom-start\" text=\"Tooltip 3\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"position: bottom\">\n            <Demo position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"position: bottom-end\">\n            <Demo position=\"bottom-end\" />\n        </Example.Item>\n        <Example.Item title=\"position: top-start\">\n            <Demo position=\"top-start\" />\n        </Example.Item>\n        <Example.Item title=\"position: top\">\n            <Demo position=\"top\" />\n        </Example.Item>\n        <Example.Item title=\"position: top-end\">\n            <Demo position=\"top-end\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: start\">\n            <View align=\"end\">\n                <Demo position=\"start\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: start-top\">\n            <View align=\"end\">\n                <Demo position=\"start-top\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: start-bottom\">\n            <View align=\"end\">\n                <Demo position=\"start-bottom\" />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: end\">\n            <Demo position=\"end\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: end-top\">\n            <Demo position=\"end-top\" />\n        </Example.Item>\n\n        <Example.Item title=\"position: end-bottom\">\n            <Demo position=\"end-bottom\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: inverted\">\n            <Demo color=\"inverted\" position=\"bottom\" />\n        </Example.Item>\n        <Example.Item title=\"color: dark\">\n            <Demo color=\"dark\" position=\"bottom\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "defaultActive",
+					"snippet": "const defaultActive = () => <Tooltip text=\"Content\" onOpen={fn()} onClose={fn()}>\n    {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n</Tooltip>;"
+				},
+				{
+					"name": "edgeCases",
+					"snippet": "const edgeCases = () => (\n    <Example>\n        <Example.Item title=\"responsive visibility\">\n            <DemoResponsive text=\"Responsive\" />\n        </Example.Item>\n\n        <Example.Item title=\"without text\">\n            <Tooltip>{() => <Button>Button</Button>}</Tooltip>\n        </Example.Item>\n\n        <Example.Item title=\"tooltip with popover\">\n            <Tooltip text=\"Tooltip\" position=\"top\">\n                {(attributes) => (\n                    <Popover position=\"bottom\">\n                        <Popover.Trigger>\n                            {(popoverAttributes) => (\n                                <Button attributes={{ ...attributes, ...popoverAttributes }}>Action</Button>\n                            )}\n                        </Popover.Trigger>\n                        <Popover.Content>Popover</Popover.Content>\n                    </Popover>\n                )}\n            </Tooltip>\n        </Example.Item>\n\n        <Example.Item title=\"nested popovers inside a tooltip\">\n            <View direction=\"row\" gap={2}>\n                <Tooltip position=\"top\" text=\"Hello\">\n                    {(tooltipAttributes) => (\n                        <Popover position=\"bottom\" width=\"300px\">\n                            <Popover.Trigger>\n                                {(attributes) => (\n                                    <Button attributes={{ ...tooltipAttributes, ...attributes }}>\n                                        Tooltip with popover\n                                    </Button>\n                                )}\n                            </Popover.Trigger>\n                            <Popover.Content>\n                                <View gap={2} align=\"center\" direction=\"row\" justify=\"space-between\">\n                                    Popover content\n                                    <Popover position=\"bottom\" width=\"300px\">\n                                        <Popover.Trigger>\n                                            {(attributes) => <Button attributes={attributes}>Open</Button>}\n                                        </Popover.Trigger>\n                                        <Popover.Content>\n                                            <Popover.Dismissible align=\"center\" closeAriaLabel=\"Close\">\n                                                Another popover content\n                                            </Popover.Dismissible>\n                                        </Popover.Content>\n                                    </Popover>\n                                </View>\n                            </Popover.Content>\n                        </Popover>\n                    )}\n                </Tooltip>\n                <Tooltip position=\"top\" text=\"Hello\">\n                    {(tooltipAttributes) => <Button attributes={tooltipAttributes}>Just a tooltip</Button>}\n                </Tooltip>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Button, Example, Popover, Tooltip, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Tooltip",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Tooltip/Tooltip.tsx",
+				"actualName": "Tooltip",
+				"exportName": "default"
+			}
+		},
+		"utility-components-accordion": {
+			"id": "utility-components-accordion",
+			"name": "Accordion",
+			"path": "./src/components/Accordion/tests/Accordion.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n    <Accordion defaultActive>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"
+				},
+				{
+					"name": "iconSize",
+					"snippet": "const iconSize = () => (\n    <Accordion iconSize={6}>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"
+				},
+				{
+					"name": "iconPosition",
+					"snippet": "const iconPosition = () => (\n    <Accordion iconPosition=\"start\">\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <View paddingTop={2}>\n                <Placeholder />\n            </View>\n        </Accordion.Content>\n    </Accordion>\n);"
+				},
+				{
+					"name": "gap",
+					"snippet": "const gap = () => (\n    <Accordion defaultActive gap={4}>\n        <Accordion.Trigger>\n            <Placeholder>Trigger</Placeholder>\n        </Accordion.Trigger>\n        <Accordion.Content>\n            <Placeholder />\n        </Accordion.Content>\n    </Accordion>\n);"
+				},
+				{
+					"name": "onToggle",
+					"snippet": "const onToggle = () => <Accordion onToggle={fn()}>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"
+				},
+				{
+					"name": "active",
+					"snippet": "const active = () => <Accordion onToggle={fn()} active>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"
+				},
+				{
+					"name": "defaultActive",
+					"snippet": "const defaultActive = () => <Accordion onToggle={fn()} defaultActive>\n    <Accordion.Trigger>\n        <Placeholder>Trigger</Placeholder>\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"
+				},
+				{
+					"name": "renderProps",
+					"snippet": "const renderProps = () => <Accordion onToggle={fn()}>\n    <Accordion.Trigger>\n        {(attributes, { active }) => (\n            <Button attributes={{ ...attributes, \"data-active\": active }}>Trigger</Button>\n        )}\n    </Accordion.Trigger>\n    <Accordion.Content>\n        <View paddingTop={2}>\n            <Placeholder />\n        </View>\n    </Accordion.Content>\n</Accordion>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Accordion className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Accordion.Trigger>\n                <Placeholder>Trigger</Placeholder>\n            </Accordion.Trigger>\n            <Accordion.Content>\n                <View paddingTop={2}>\n                    <Placeholder />\n                </View>\n            </Accordion.Content>\n        </Accordion>\n    </div>\n);"
+				}
+			],
+			"import": "import { Accordion, Button, Placeholder, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Accordion",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Accordion/Accordion.tsx",
+				"actualName": "Accordion",
+				"exportName": "default"
+			}
+		},
+		"utility-components-actionable": {
+			"id": "utility-components-actionable",
+			"name": "Actionable",
+			"path": "./src/components/Actionable/tests/Actionable.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => <Example>\n    <Example.Item title=\"span\">\n        <Actionable>Span</Actionable>\n    </Example.Item>\n    <Example.Item title=\"onClick\">\n        <Actionable onClick={fn()}>Button</Actionable>\n    </Example.Item>\n    <Example.Item title=\"href\">\n        <Actionable href=\"https://reshaped.so\" attributes={{ target: \"_blank\" }}>Link\n                            </Actionable>\n    </Example.Item>\n    <Example.Item title=\"attributes.href\">\n        <Actionable attributes={{ href: \"https://reshaped.so\" }}>Link with attributes</Actionable>\n    </Example.Item>\n    <Example.Item title=\"href, onClick\">\n        <Actionable\n            onClick={(e) => {\n                e.preventDefault();\n                args.handleSecondClick(e);\n            }}\n            href=\"https://reshaped.so\">Link with onClick\n                            </Actionable>\n    </Example.Item>\n</Example>;"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled, button\">\n            <Actionable disabled onClick={() => {}}>\n                Button\n            </Actionable>\n        </Example.Item>\n        <Example.Item title=\"disabled, link\">\n            <Actionable disabled href=\"https://reshaped.so\">\n                Link\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "fullWidth",
+					"snippet": "const fullWidth = () => (\n    <Example>\n        <Example.Item title=\"fullWidth\">\n            <Actionable fullWidth href=\"https://reshaped.so\">\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "insetFocus",
+					"snippet": "const insetFocus = () => (\n    <Example>\n        <Example.Item title=\"insetFocus\">\n            <Actionable insetFocus onClick={() => {}}>\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "disableFocusRing",
+					"snippet": "const disableFocusRing = () => (\n    <Example>\n        <Example.Item title=\"disableFocusRing\">\n            <Actionable disableFocusRing onClick={() => {}}>\n                Actionable\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "borderRadius",
+					"snippet": "const borderRadius = () => (\n    <Example>\n        <Example.Item title=\"borderRadius: inherit\">\n            <Actionable borderRadius=\"inherit\" onClick={() => {}}>\n                <View borderRadius=\"large\">Actionable</View>\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "type",
+					"snippet": "const type = (args) => (\n    <Example>\n        <Example.Item title=\"type: submit\">\n            <form\n                onSubmit={(e) => {\n                    e.preventDefault();\n                    args.handleSubmit();\n                }}\n            >\n                <Actionable onClick={() => {}} type=\"submit\">\n                    Submit\n                </Actionable>\n            </form>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "as",
+					"snippet": "const as = () => (\n    <Example>\n        <Example.Item title=\"as: span\">\n            <Actionable onClick={() => {}} as=\"span\">\n                Trigger\n            </Actionable>\n        </Example.Item>\n        <Example.Item title=\"render, disabled\">\n            <Actionable disabled onClick={() => {}} render={(props) => <section {...props} />}>\n                Trigger\n            </Actionable>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "stopPropagation",
+					"snippet": "const stopPropagation = () => <div onClick={fn()}>\n    <Actionable stopPropagation onClick={() => {}}>Trigger\n                    </Actionable>\n</div>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Actionable className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Trigger\n        </Actionable>\n    </div>\n);"
+				}
+			],
+			"import": "import { Actionable, Example, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Actionable",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Actionable/Actionable.tsx",
+				"actualName": "Actionable",
+				"exportName": "default"
+			}
+		},
+		"utility-components-container": {
+			"id": "utility-components-container",
+			"name": "Container",
+			"path": "./src/components/Container/tests/Container.stories.tsx",
+			"stories": [
+				{
+					"name": "padding",
+					"snippet": "const padding = () => (\n    <Example>\n        <Example.Item title=\"padding: default\">\n            <Container>\n                <Placeholder />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"padding: 0\">\n            <Container padding={0}>\n                <Placeholder />\n            </Container>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"width: 200px, height: 200px\">\n            <Container width=\"200px\" height=\"200px\">\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width: 200px, height: 200px, maxHeight: 100px\">\n            <Container width=\"200px\" height=\"200px\" maxHeight=\"100px\">\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width, height: [s] 100px, [m+] 200px\">\n            <Container width={{ s: \"100px\", m: \"200px\" }} height={{ s: \"100px\", m: \"200px\" }}>\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n        <Example.Item title=\"width, height: [s] 100px, [m+] 200px, maxHeight: [s] 50px, [m+]: 100px\">\n            <Container\n                width={{ s: \"100px\", m: \"200px\" }}\n                height={{ s: \"100px\", m: \"200px\" }}\n                maxHeight={{ s: \"50px\", m: \"100px\" }}\n            >\n                <Placeholder h=\"100%\" />\n            </Container>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "flex",
+					"snippet": "const flex = () => (\n    <Example>\n        <Example.Item title=\"align: center, justify: center\">\n            <Container align=\"center\" justify=\"center\" height=\"200px\">\n                <Placeholder />\n            </Container>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Container className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            <Placeholder />\n        </Container>\n    </div>\n);"
+				}
+			],
+			"import": "import { Container, Example, Placeholder } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Container",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Container/Container.tsx",
+				"actualName": "Container",
+				"exportName": "default"
+			}
+		},
+		"utility-components-dismissible": {
+			"id": "utility-components-dismissible",
+			"name": "Dismissible",
+			"path": "./src/components/Dismissible/tests/Dismissible.stories.tsx",
+			"stories": [
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: default\">\n            <Dismissible closeAriaLabel=\"Close banner\" onClose={() => {}}>\n                <Placeholder />\n            </Dismissible>\n        </Example.Item>\n        <Example.Item title=\"variant: media\">\n            <View width=\"300px\">\n                <Dismissible variant=\"media\" closeAriaLabel=\"Close banner\" onClose={() => {}}>\n                    <View aspectRatio={16 / 9}>\n                        <Image\n                            height=\"100%\"\n                            src=\"https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)\"\n                        />\n                    </View>\n                </Dismissible>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "align",
+					"snippet": "const align = () => (\n    <Example>\n        <Example.Item title=\"align: center\">\n            <Dismissible align=\"center\" closeAriaLabel=\"Close\" onClose={() => {}}>\n                <Placeholder />\n            </Dismissible>\n        </Example.Item>\n\n        <Example.Item title=\"align: center, variant: media\">\n            <Dismissible align=\"center\" closeAriaLabel=\"Close\" variant=\"media\" onClose={() => {}}>\n                <View aspectRatio={16 / 9}>\n                    <Image\n                        height=\"100%\"\n                        src=\"https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)\"\n                    />\n                </View>\n            </Dismissible>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "hideCloseButton",
+					"snippet": "const hideCloseButton = () => (\n    <Example>\n        <Example.Item title=\"hide close button\">\n            <div id=\"root\">\n                <Dismissible hideCloseButton>\n                    <Placeholder />\n                </Dismissible>\n            </div>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "closeAriaLabel",
+					"snippet": "const closeAriaLabel = () => <Dismissible closeAriaLabel=\"Close\" onClose={fn()}>\n    <Placeholder />\n</Dismissible>;"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Dismissible\n            closeAriaLabel=\"Close\"\n            onClose={() => {}}\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n        >\n            <Placeholder />\n        </Dismissible>\n    </div>\n);"
+				}
+			],
+			"import": "import { Dismissible, Example, Image, Placeholder, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Dismissible",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Dismissible/Dismissible.tsx",
+				"actualName": "Dismissible",
+				"exportName": "default"
+			}
+		},
+		"utility-components-flyout": {
+			"id": "utility-components-flyout",
+			"name": "Flyout",
+			"path": "./src/components/Flyout/tests/Flyout.stories.tsx",
+			"stories": [
+				{
+					"name": "position",
+					"snippet": "const position = () => {\n    return (\n        <View gap={4} padding={50} align=\"center\" justify=\"center\" height=\"100vh\" width=\"120%\">\n            <View gap={4} direction=\"row\">\n                <Demo position=\"top-start\" defaultActive />\n                <Demo position=\"top\" />\n                <Demo position=\"top-end\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"end-top\" />\n                <Demo position=\"end\" />\n                <Demo position=\"end-bottom\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"start-top\" />\n                <Demo position=\"start\" />\n                <Demo position=\"start-bottom\" />\n            </View>\n\n            <View gap={4} direction=\"row\">\n                <Demo position=\"bottom-start\" />\n                <Demo position=\"bottom\" />\n                <Demo position=\"bottom-end\" />\n            </View>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "defaultActive",
+					"snippet": "const defaultActive = () => <Flyout onOpen={fn()} onClose={fn()} defaultActive>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"
+				},
+				{
+					"name": "active",
+					"snippet": "const active = () => <Flyout onOpen={fn()} onClose={fn()} active>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"
+				},
+				{
+					"name": "activeFalse",
+					"snippet": "const activeFalse = () => <Flyout onOpen={fn()} onClose={fn()} active={false}>\n    <Flyout.Trigger>\n        {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n    </Flyout.Trigger>\n    <Flyout.Content>\n        <Content />\n    </Flyout.Content>\n</Flyout>;"
+				},
+				{
+					"name": "modes",
+					"snippet": "const modes = () => {\n    return (\n        <Example>\n            <Example.Item title=\"triggerType: click\">\n                <View direction=\"row\" gap={4}>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"dialog\" text=\"dialog\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"action-menu\" text=\"action-menu\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"action-bar\" text=\"action-bar\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"content-menu\" text=\"content-menu\">\n                        {modeContent}\n                    </Demo>\n                    <Demo position=\"bottom-start\" trapFocusMode={false} text=\"false\">\n                        {modeContent}\n                    </Demo>\n                </View>\n            </Example.Item>\n\n            <Example.Item title=\"triggerType: hover\">\n                <View direction=\"row\" gap={4}>\n                    <Demo position=\"bottom-start\" trapFocusMode=\"dialog\" triggerType=\"hover\" text=\"dialog\">\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"action-menu\"\n                        triggerType=\"hover\"\n                        text=\"action-menu\"\n                    >\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"action-bar\"\n                        triggerType=\"hover\"\n                        text=\"action-bar\"\n                    >\n                        {modeContent}\n                    </Demo>\n                    <Demo\n                        position=\"bottom-start\"\n                        trapFocusMode=\"content-menu\"\n                        triggerType=\"hover\"\n                        text=\"content-menu\"\n                    >\n                        {modeContent}\n                    </Demo>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "positionFallbacks",
+					"snippet": "const positionFallbacks = () => {\n    return (\n        <Example>\n            <Example.Item title=\"position: top, default fallbacks\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" />\n                </View>\n            </Example.Item>\n            <Example.Item title=\"position: top, fallbackPositions: [start]\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" fallbackPositions={[\"start\"]} contentHeight={200} defaultActive />\n                </View>\n            </Example.Item>\n            <Example.Item title=\"position: top, fallbackPositions: false\">\n                <View justify=\"center\" align=\"center\">\n                    <Demo position=\"top\" fallbackPositions={false} contentHeight={400} />\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "fallbackAdjustLayout",
+					"snippet": "const fallbackAdjustLayout = () => {\n    return (\n        <Demo\n            contentHeight={false}\n            position=\"bottom-start\"\n            width=\"200px\"\n            fallbackAdjustLayout\n            defaultActive\n        >\n            <div style={{ height: \"600px\" }}>Content</div>\n        </Demo>\n    );\n};"
+				},
+				{
+					"name": "fallbackAdjustLayoutShift",
+					"snippet": "const fallbackAdjustLayoutShift = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={10}>\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    attributes={{ ref: containerRef }}\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls containerRef={containerRef} />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <FallbackAdjustLayoutControls />\n            <div style={{ height: \"100vh\", width: \"250%\" }} />\n        </View>\n    );\n};"
+				},
+				{
+					"name": "fallbackAdjustLayoutSize",
+					"snippet": "const fallbackAdjustLayoutSize = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={10}>\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls large />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <View height=\"95vh\" width=\"100%\" align=\"center\" justify=\"center\">\n                <View\n                    backgroundColor=\"neutral-faded\"\n                    borderRadius=\"medium\"\n                    height=\"1000px\"\n                    width=\"600px\"\n                    attributes={{ ref: containerRef }}\n                    padding={4}\n                    paddingBlock={15}\n                    overflow=\"auto\"\n                >\n                    <FallbackAdjustLayoutControls containerRef={containerRef} large />\n                    <View height=\"150%\" width=\"150%\" attributes={{ style: { pointerEvents: \"none\" } }} />\n                </View>\n            </View>\n\n            <FallbackAdjustLayoutControls large />\n            <div style={{ height: \"100vh\", width: \"250%\" }} />\n        </View>\n    );\n};"
+				},
+				{
+					"name": "originCoordinates",
+					"snippet": "const originCoordinates = () => {\n    return (\n        <View gap={4} direction=\"row\">\n            <Demo position=\"bottom-start\" originCoordinates={{ x: 150, y: 150 }} defaultActive />\n        </View>\n    );\n};"
+				},
+				{
+					"name": "width",
+					"snippet": "const width = () => (\n    <Example>\n        <Example.Item title=\"width: 300px\">\n            <Demo width=\"300px\" position=\"bottom\" />\n        </Example.Item>\n\n        <Example.Item title=\"width: trigger\">\n            <Demo width=\"trigger\" contentWidth={false} defaultActive />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "contentGap",
+					"snippet": "const contentGap = () => <Demo contentGap={10} defaultActive />;"
+				},
+				{
+					"name": "contentShift",
+					"snippet": "const contentShift = () => <Demo contentShift={10} defaultActive />;"
+				},
+				{
+					"name": "disableContentHover",
+					"snippet": "const disableContentHover = () => <Demo triggerType=\"hover\" disableContentHover />;"
+				},
+				{
+					"name": "disableCloseOnOutsideClick",
+					"snippet": "const disableCloseOnOutsideClick = () => <Demo disableCloseOnOutsideClick />;"
+				},
+				{
+					"name": "disableHideAnimation",
+					"snippet": "const disableHideAnimation = () => <Demo disableHideAnimation defaultActive />;"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Flyout disabled>\n        <Flyout.Trigger>\n            {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n        </Flyout.Trigger>\n        <Flyout.Content>\n            <Content />\n        </Flyout.Content>\n    </Flyout>\n);"
+				},
+				{
+					"name": "containerRef",
+					"snippet": "const containerRef = () => {\n    const portalRef = React.useRef<HTMLDivElement>(null);\n    const portalRef2 = React.useRef<HTMLDivElement>(null);\n    const portalRef3 = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={4} direction=\"row\">\n            <View\n                grow\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef, \"data-testid\": \"container\" }}\n                justify=\"end\"\n                align=\"start\"\n                padding={4}\n            >\n                <Demo containerRef={portalRef} position=\"bottom-start\" defaultActive />\n            </View>\n            <View\n                grow\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef2 }}\n                justify=\"start\"\n                align=\"end\"\n                padding={4}\n            >\n                <Demo containerRef={portalRef2} position=\"top-end\" />\n            </View>\n            <View\n                width={50}\n                backgroundColor=\"neutral-faded\"\n                borderRadius=\"small\"\n                height={80}\n                attributes={{ ref: portalRef3 }}\n                padding={4}\n                overflow=\"auto\"\n            >\n                <View height={120} width=\"120%\" justify=\"center\" align=\"center\">\n                    <Demo containerRef={portalRef3} position=\"bottom-end\" />\n                </View>\n            </View>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "initialFocusRef",
+					"snippet": "const initialFocusRef = () => {\n    const initialFocusRef = React.useRef<HTMLInputElement>(null);\n\n    return (\n        <Demo initialFocusRef={initialFocusRef}>\n            <View gap={4}>\n                <Button onClick={() => {}}>Action 1</Button>\n                <TextField name=\"foo\" inputAttributes={{ ref: initialFocusRef }} />\n            </View>\n        </Demo>\n    );\n};"
+				},
+				{
+					"name": "instanceRef",
+					"snippet": "const instanceRef = () => {\n    const flyoutRef = React.useRef<FlyoutInstance>(null);\n\n    return (\n        <View direction=\"row\" gap={4}>\n            <Demo\n                instanceRef={flyoutRef}\n                disableCloseOnOutsideClick\n                onOpen={fn()}\n                onClose={fn()} />\n            <Button onClick={() => flyoutRef.current?.open()}>Open</Button>\n            <Button onClick={() => flyoutRef.current?.close()}>Close</Button>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "contentAttributes",
+					"snippet": "const contentAttributes = () => {\n    return (\n        <Flyout position=\"bottom\" defaultActive>\n            <Flyout.Trigger>\n                {(attributes) => <Button attributes={attributes}>Trigger</Button>}\n            </Flyout.Trigger>\n            <Flyout.Content attributes={{ \"data-testid\": \"test-id\" }} className=\"test-classname\">\n                <Content />\n            </Flyout.Content>\n        </Flyout>\n    );\n};"
+				},
+				{
+					"name": "testShadowDom",
+					"snippet": "const testShadowDom = () => <custom-element-flyout />;"
+				},
+				{
+					"name": "testInsideFixed",
+					"snippet": "const testInsideFixed = () => (\n    <React.Fragment>\n        <View\n            position=\"fixed\"\n            insetBottom={2}\n            insetStart={2}\n            insetEnd={2}\n            backgroundColor=\"elevation-overlay\"\n            borderColor=\"neutral-faded\"\n            borderRadius=\"small\"\n            padding={4}\n            zIndex={10}\n            attributes={{ \"data-testid\": \"container\" }}\n            height={20}\n        >\n            <Demo defaultActive position=\"top-start\" />\n        </View>\n        <View paddingTop={18} gap={4}>\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n        </View>\n    </React.Fragment>\n);"
+				},
+				{
+					"name": "testInsideSticky",
+					"snippet": "const testInsideSticky = () => (\n    <React.Fragment>\n        <View\n            position=\"sticky\"\n            insetTop={4}\n            insetStart={0}\n            insetEnd={0}\n            backgroundColor=\"elevation-overlay\"\n            borderColor=\"neutral-faded\"\n            borderRadius=\"small\"\n            padding={4}\n            zIndex={10}\n            attributes={{ \"data-testid\": \"container\" }}\n        >\n            <Demo defaultActive />\n        </View>\n        <View gap={4} paddingTop={2}>\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n            <View height={200} backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n        </View>\n    </React.Fragment>\n);"
+				},
+				{
+					"name": "testInsideScrollable",
+					"snippet": "const testInsideScrollable = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View padding={20}>\n            <View height={30} overflow=\"auto\" backgroundColor=\"neutral-faded\" borderRadius=\"small\">\n                <View height={50} attributes={{ ref: containerRef }} padding={20} paddingBottom={30}>\n                    <Demo position=\"bottom\" />\n                </View>\n            </View>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "testInsideModal",
+					"snippet": "const testInsideModal = () => {\n    return (\n        <Modal active position=\"end\">\n            <View gap={4} align=\"start\">\n                <Modal.Title>Title</Modal.Title>\n                <Demo position=\"bottom-start\" />\n                <View height={300} width={25} backgroundColor=\"neutral-faded\" />\n                <Demo position=\"start\" />\n                <View height={300} width={25} backgroundColor=\"neutral-faded\" />\n                <Demo position=\"bottom-start\" />\n            </View>\n        </Modal>\n    );\n};"
+				},
+				{
+					"name": "testDynamicBounds",
+					"snippet": "const testDynamicBounds = () => {\n    const [left, setLeft] = React.useState(50);\n    const [top, setTop] = React.useState(50);\n    const [size, setSize] = React.useState<\"medium\" | \"large\">(\"medium\");\n    const flyoutRef = React.useRef<FlyoutInstance>(null);\n\n    React.useEffect(() => {\n        flyoutRef.current?.updatePosition();\n    }, [left, top]);\n\n    return (\n        <View gap={4}>\n            <View direction=\"row\" gap={2}>\n                <Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>\n                <Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>\n                <Button onClick={() => setTop((prev) => prev - 10)}>Up</Button>\n                <Button onClick={() => setTop((prev) => prev + 10)}>Down</Button>\n                <Button\n                    onClick={() => {\n                        setLeft(50);\n                        setTop(50);\n                    }}\n                >\n                    Center\n                </Button>\n                <Button onClick={() => setSize(\"large\")}>Large button</Button>\n                <Button onClick={() => setSize(\"medium\")}>Small button</Button>\n            </View>\n            <View height={100}>\n                <Flyout\n                    position=\"bottom\"\n                    instanceRef={flyoutRef}\n                    disableCloseOnOutsideClick\n                    defaultActive\n                >\n                    <Flyout.Trigger>\n                        {(attributes) => (\n                            <div style={{ position: \"absolute\", left: `${left}%`, top: `${top}%` }}>\n                                <Button color=\"primary\" attributes={attributes} size={size}>\n                                    Open\n                                </Button>\n                            </div>\n                        )}\n                    </Flyout.Trigger>\n                    <Flyout.Content>\n                        <Content />\n                    </Flyout.Content>\n                </Flyout>\n            </View>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "testScopedTheming",
+					"snippet": "const testScopedTheming = () => (\n    <View gap={3} align=\"start\">\n        <Button color=\"primary\">Slate button</Button>\n        <Theme name=\"reshaped\">\n            <Flyout triggerType=\"click\" active position=\"bottom-start\">\n                <Flyout.Trigger>\n                    {(attributes) => (\n                        <Button color=\"primary\" attributes={attributes}>\n                            Reshaped button\n                        </Button>\n                    )}\n                </Flyout.Trigger>\n                <Flyout.Content>\n                    <Content>\n                        <View gap={1}>\n                            <View.Item>Portal content, rendered in body</View.Item>\n                            <Button color=\"primary\">Reshaped button</Button>\n                        </View>\n                    </Content>\n                </Flyout.Content>\n            </Flyout>\n        </Theme>\n    </View>\n);"
+				},
+				{
+					"name": "testWithoutFocusable",
+					"snippet": "const testWithoutFocusable = () => <Demo position=\"bottom-start\" />;"
+				},
+				{
+					"name": "testChangeSize",
+					"snippet": "const testChangeSize = () => {\n    const [position, setPosition] = React.useState<FlyoutProps[\"position\"]>(\"bottom-start\");\n    const [updatedHeight, setUpdatedHeight] = React.useState(false);\n\n    return (\n        <>\n            <View direction=\"row\" gap={4} align=\"center\">\n                <Select\n                    name=\"position\"\n                    options={[\n                        \"bottom-start\",\n                        \"bottom\",\n                        \"bottom-end\",\n                        \"top-start\",\n                        \"top\",\n                        \"top-end\",\n                        \"start-top\",\n                        \"start\",\n                        \"start-bottom\",\n                        \"end-top\",\n                        \"end\",\n                        \"end-bottom\",\n                    ].map((p) => ({ label: p, value: p }))}\n                    onChange={(args) => setPosition(args.value as FlyoutProps[\"position\"])}\n                    value={position}\n                />\n                <Switch name=\"height\" onChange={(args) => setUpdatedHeight(args.checked)}>\n                    Change height\n                </Switch>\n            </View>\n            <div\n                style={{\n                    position: \"fixed\",\n                    top: \"50%\",\n                    left: \"50%\",\n                    transform: \"translate(-50%, -50%)\",\n                }}\n            >\n                <Demo position={position} disableCloseOnOutsideClick active contentHeight={false}>\n                    <View\n                        backgroundColor=\"neutral-faded\"\n                        borderRadius=\"small\"\n                        height={updatedHeight ? 50 : 25}\n                        attributes={{ style: { transition: \"0.2s ease-in-out\" } }}\n                    />\n                </Demo>\n            </div>\n        </>\n    );\n};"
+				}
+			],
+			"import": "import {\n    Button,\n    Example,\n    Flyout,\n    Modal,\n    Reshaped,\n    Select,\n    Switch,\n    TextField,\n    Theme,\n    View,\n} from \"reshaped\";\nimport React from \"react\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Flyout",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Flyout/Flyout.tsx",
+				"actualName": "Flyout",
+				"exportName": "default"
+			}
+		},
+		"utility-components-formcontrol": {
+			"id": "utility-components-formcontrol",
+			"name": "FormControl",
+			"path": "./src/components/FormControl/tests/FormControl.stories.tsx",
+			"stories": [
+				{
+					"name": "status",
+					"snippet": "const status = () => (\n    <Example>\n        <Example.Item title=\"status: default\">\n            <FormControl>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"status: error\">\n            <FormControl hasError>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n                <FormControl.Error>Error</FormControl.Error>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: medium\">\n            <FormControl size=\"medium\">\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n\n        <Example.Item title=\"size: large\">\n            <FormControl size=\"large\">\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" size=\"large\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => (\n    <Example>\n        <Example.Item title=\"disabled\">\n            <FormControl disabled>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "required",
+					"snippet": "const required = () => (\n    <Example>\n        <Example.Item title=\"required\">\n            <FormControl required>\n                <FormControl.Label>Label</FormControl.Label>\n                <TextField name=\"name\" />\n                <FormControl.Helper>Caption</FormControl.Helper>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "composition",
+					"snippet": "const composition = () => (\n    <Example>\n        <Example.Item title=\"horizontal\">\n            <FormControl>\n                <View direction=\"row\" gap={10} align=\"center\">\n                    <View width=\"100px\">\n                        <FormControl.Label>Label</FormControl.Label>\n                    </View>\n                    <View.Item grow>\n                        <TextField name=\"name\" placeholder=\"Enter value\" />\n                    </View.Item>\n                </View>\n            </FormControl>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <FormControl id=\"test-id\" hasError>\n        <FormControl.Label>Label</FormControl.Label>\n        <TextField name=\"name\" />\n        <FormControl.Helper>Caption</FormControl.Helper>\n        <FormControl.Error>Error</FormControl.Error>\n    </FormControl>\n);"
+				},
+				{
+					"name": "group",
+					"snippet": "const group = () => (\n    <FormControl group>\n        <FormControl.Label>Label</FormControl.Label>\n        <RadioGroup name=\"name\">\n            <View gap={2}>\n                <Radio value=\"1\">One</Radio>\n                <Radio value=\"2\">Two</Radio>\n            </View>\n        </RadioGroup>\n    </FormControl>\n);"
+				}
+			],
+			"import": "import { Example, FormControl, Radio, RadioGroup, TextField, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "FormControl",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/FormControl/FormControl.tsx",
+				"actualName": "FormControl",
+				"exportName": "default"
+			}
+		},
+		"utility-components-grid": {
+			"id": "utility-components-grid",
+			"name": "Grid",
+			"path": "./src/components/Grid/tests/Grid.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"gap: 2\">\n            <Grid gap={2} columns={2}>\n                {[1, 2].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"columnGap: 2, rowGap: 4\">\n            <Grid columnGap={2} rowGap={4} columns={2}>\n                {[1, 2, 3, 4].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"align: center\">\n            <Grid gap={2} columns={2} align=\"center\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={8}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"justify: center\">\n            <Grid gap={2} columns=\"200px 200px\" justify=\"center\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"maxWidth: 400px\">\n            <Grid gap={2} columns=\"200px 200px\" maxWidth=\"400px\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"width: 400px, height: 200px\">\n            <Grid gap={2} columns={2} width=\"400px\" height=\"200px\">\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    1\n                </View>\n                <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4}>\n                    2\n                </View>\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "layout",
+					"snippet": "const layout = () => (\n    <Example>\n        <Example.Item title=\"simple: 2 rows, 3 columns\">\n            <Grid gap={4} columns={3} rows={2}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"columns template, 1fr 2fr 1fr\">\n            <Grid gap={4} columns=\"1fr 2fr 1fr\" rows={2}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"rows template, 1fr 2fr\">\n            <Grid gap={4} columns={3} rows=\"1fr 2fr\">\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"responsive\">\n            <Grid gap={4} columns={{ s: 3, m: \"1fr 2fr 1fr\" }} rows={{ s: 2, m: \"1fr 2fr\" }}>\n                {[1, 2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "itemLayout",
+					"snippet": "const itemLayout = () => (\n    <Example>\n        <Example.Item title=\"column, start 1, end 3\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item colStart={1} colEnd={3}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"column, start 1, span 2\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item colStart={1} colSpan={2}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"row, start 1, end 3\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowEnd={3}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"row, start 1, span 2\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowSpan={2}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n\n        <Example.Item title=\"responsive\">\n            <Grid gap={4} columns={3} rows={2}>\n                <Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                        1\n                    </View>\n                </Grid.Item>\n                {[2, 3, 4, 5].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "areas",
+					"snippet": "const areas = () => (\n    <Example>\n        <Example.Item title=\"simple: 2 rows, 3 columns\">\n            <Grid gap={4} rows={2} areas={[\"a .\", \"a b\"]}>\n                {[\"a\", \"b\"].map((area) => (\n                    <Grid.Item area={area} key={area}>\n                        <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} height=\"100%\">\n                            {area}\n                        </View>\n                    </Grid.Item>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "auto",
+					"snippet": "const auto = () => (\n    <Example>\n        <Example.Item title=\"auto flow: column\">\n            <Grid gap={4} autoFlow=\"column\" rows={2} columns={2}>\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"auto rows\">\n            <Grid gap={4} autoRows=\"100px\" columns={2}>\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n        <Example.Item title=\"auto columns\">\n            <Grid gap={4} autoColumns=\"100px\" autoFlow=\"column\">\n                {[1, 2, 3].map((i) => (\n                    <View backgroundColor=\"neutral-faded\" borderRadius=\"medium\" padding={4} key={i}>\n                        {i}\n                    </View>\n                ))}\n            </Grid>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "as",
+					"snippet": "const as = () => (\n    <Grid as=\"ul\">\n        <Grid.Item as=\"li\">Content</Grid.Item>\n    </Grid>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Grid className=\"test-class\" attributes={{ id: \"test-id\" }}>\n            <Grid.Item className=\"test-item-class\" attributes={{ id: \"test-item-id\" }}>\n                Content\n            </Grid.Item>\n        </Grid>\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Grid, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Grid",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Grid/Grid.tsx",
+				"actualName": "Grid",
+				"exportName": "default"
+			}
+		},
+		"utility-components-hidden": {
+			"id": "utility-components-hidden",
+			"name": "Hidden",
+			"path": "./src/components/Hidden/tests/Hidden.stories.tsx",
+			"stories": [
+				{
+					"name": "visibility",
+					"snippet": "const visibility = () => (\n    <Example>\n        <Example.Item title=\"hide: always\">\n            <Hidden hide={true}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on s\">\n            <Hidden hide={{ s: false, m: true }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on l/xl\">\n            <Hidden hide={{ s: true, l: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on m/l/xl\">\n            <Hidden hide={{ s: true, m: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on m\">\n            <Hidden hide={{ s: true, m: false, l: true }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"shown on s/xl\">\n            <Hidden hide={{ s: false, m: true, xl: false }}>Content</Hidden>\n        </Example.Item>\n        <Example.Item title=\"hide: always, visibility\">\n            <Hidden hide visibility>\n                Content\n            </Hidden>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "as",
+					"snippet": "const as = () => <Hidden as=\"span\">Content</Hidden>;"
+				}
+			],
+			"import": "import { Example, Hidden } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Hidden",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Hidden/Hidden.tsx",
+				"actualName": "Hidden",
+				"exportName": "default"
+			}
+		},
+		"utility-components-hiddenvisually": {
+			"id": "utility-components-hiddenvisually",
+			"name": "HiddenVisually",
+			"path": "./src/components/HiddenVisually/tests/HiddenVisually.stories.tsx",
+			"stories": [
+				{
+					"name": "visibility",
+					"snippet": "const visibility = () => (\n    <Example>\n        <Example.Item title=\"pronounced by screen readers\">\n            <HiddenVisually>Screen-reader only</HiddenVisually>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "children",
+					"snippet": "const children = () => <HiddenVisually>Content</HiddenVisually>;"
+				}
+			],
+			"import": "import { Example, HiddenVisually } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "HiddenVisually",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/HiddenVisually/HiddenVisually.tsx",
+				"actualName": "HiddenVisually",
+				"exportName": "default"
+			}
+		},
+		"utility-components-icon": {
+			"id": "utility-components-icon",
+			"name": "Icon",
+			"path": "./src/components/Icon/tests/Icon.stories.tsx",
+			"stories": [
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"size: 4\">\n            <Icon svg={IconZap} size={4} />\n        </Example.Item>\n        <Example.Item title=\"size: 8\">\n            <Icon svg={IconZap} size={8} />\n        </Example.Item>\n        <Example.Item title=\"size: 100%\">\n            <View width={25} height={25}>\n                <Icon svg={IconZap} size=\"100%\" />\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive size\", \"[s] 5\", \"[m]: 10\"]}>\n            <Icon svg={IconZap} size={{ s: 5, m: 10 }} />\n        </Example.Item>\n        <Example.Item title=\"size: inherit from font\">\n            <Text variant=\"title-6\">\n                <View direction=\"row\" align=\"center\" gap={2}>\n                    <Icon svg={IconZap} />\n                    <View.Item>Reshaped</View.Item>\n                </View>\n            </Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: neutral\">\n            <Icon svg={IconZap} color=\"neutral\" />\n        </Example.Item>\n        <Example.Item title=\"color: neutral-faded\">\n            <Icon svg={IconZap} color=\"neutral-faded\" />\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <Icon svg={IconZap} color=\"primary\" />\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Icon svg={IconZap} color=\"critical\" />\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Icon svg={IconZap} color=\"positive\" />\n        </Example.Item>\n        <Example.Item title=\"color: disabled\">\n            <Icon svg={IconZap} color=\"disabled\" />\n        </Example.Item>\n        <Example.Item title=\"color: inherit\">\n            <div style={{ color: \"tomato\" }}>\n                <Icon svg={IconZap} />\n            </div>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "autoWidth",
+					"snippet": "const autoWidth = () => (\n    <Example>\n        <Example.Item title=\"square boundaries\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={IconMic} size={10} />\n            </div>\n        </Example.Item>\n        <Example.Item title=\"auto width boundaries\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={IconMic} size={10} autoWidth />\n            </div>\n        </Example.Item>\n        <Example.Item title=\"blank\">\n            <div style={{ background: \"var(--rs-color-background-neutral)\", display: \"inline-block\" }}>\n                <Icon svg={null} size={10} />\n            </div>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Icon svg={IconZap} className=\"test-classname\" attributes={{ id: \"test-id\" }} />\n    </div>\n);"
+				},
+				{
+					"name": "render",
+					"snippet": "const render = () => (\n    <div data-testid=\"root\">\n        <Icon svg={IconZap} />\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Icon, Text, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Icon",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Icon/Icon.tsx",
+				"actualName": "Icon",
+				"exportName": "default"
+			}
+		},
+		"utility-components-image": {
+			"id": "utility-components-image",
+			"name": "Image",
+			"path": "./src/components/Image/tests/Image.stories.tsx",
+			"stories": [
+				{
+					"name": "src",
+					"snippet": "const src = () => (\n    <Example>\n        <Example.Item title=\"src, alt\">\n            <Image src={imgUrl} alt=\"Image alt\" />\n        </Example.Item>\n\n        <Example.Item title=\"src\">\n            <Image src={imgUrl} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"width: 200px\">\n            <Image src={imgUrl} width=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"height: 200px\">\n            <Image src={imgUrl} height=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"maxWidth: 200px\">\n            <Image src={imgUrl} maxWidth=\"200px\" />\n        </Example.Item>\n        <Example.Item title=\"aspectRatio: 1/1\">\n            <Image src={imgUrl} aspectRatio={1 / 1} width=\"300px\" />\n        </Example.Item>\n        <Example.Item title={[\"responsive width\", \"[s] 200px\", \"[m+] 300px\"]}>\n            <Image src={imgUrl} width={{ s: \"200px\", m: \"300px\" }} />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "radius",
+					"snippet": "const radius = () => (\n    <Example>\n        <Example.Item title=\"radius: small\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"small\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"radius: medium\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"medium\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"radius: large\">\n            <View width=\"300px\">\n                <Image src={imgUrl} borderRadius=\"large\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "displayMode",
+					"snippet": "const displayMode = () => (\n    <Example>\n        <Example.Item title=\"mode: cover\">\n            <Image src={imgUrl} height=\"200px\" width=\"100%\" displayMode=\"cover\" />\n        </Example.Item>\n        <Example.Item title=\"mode: contain\">\n            <Image src={imgUrl} height=\"200px\" width=\"100%\" displayMode=\"contain\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "onLoad",
+					"snippet": "const onLoad = () => <Image src={imgUrl} alt=\"photo\" onLoad={fn()} />;"
+				},
+				{
+					"name": "onError",
+					"snippet": "const onError = () => <Image src=\"/invalid.png\" alt=\"photo\" onError={fn()} />;"
+				},
+				{
+					"name": "fallback",
+					"snippet": "const fallback = () => (\n    <Example>\n        <Example.Item title=\"fallback, background, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"fallback, image, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback={imgUrl} />\n                </View>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"fallback, icon, on error\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image src=\"error\" fallback={<Icon svg={IconZap} size={10} />} />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"fallback, icon, no url\">\n            <View width=\"300px\">\n                <View aspectRatio={16 / 9}>\n                    <Image fallback={<Icon svg={IconZap} size={10} />} />\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "renderImage",
+					"snippet": "const renderImage = () => (\n    <Example>\n        <Example.Item title=\"renderImage\">\n            <Image\n                src={imgUrl}\n                alt=\"Amsterdam canal\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image\" />}\n            />\n        </Example.Item>\n        <Example.Item title=\"renderImage, fallback\">\n            <Image\n                src=\"error\"\n                fallback={imgUrl}\n                alt=\"Amsterdam canal 2\"\n                renderImage={(attributes) => <img {...attributes} id=\"test-image-fallback\" />}\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "imageAttributes",
+					"snippet": "const imageAttributes = () => (\n    <div data-testid=\"root\">\n        <Image\n            src={imgUrl}\n            alt=\"photo\"\n            className=\"test-classname\"\n            attributes={{ id: \"test-id\" }}\n            imageAttributes={{ \"data-testid\": \"test-img-id\" }}\n        />\n    </div>\n);"
+				},
+				{
+					"name": "ratio",
+					"snippet": "const ratio = () => (\n    <Example>\n        <Example.Item title=\"ratio: 16/9\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"ratio: 16/9, displayMode: contain\">\n            <View aspectRatio={16 / 9}>\n                <Image src={imgUrl} displayMode=\"contain\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				}
+			],
+			"import": "import { Example, Icon, Image, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Image",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Image/Image.tsx",
+				"actualName": "Image",
+				"exportName": "default"
+			}
+		},
+		"utility-components-overlay": {
+			"id": "utility-components-overlay",
+			"name": "Overlay",
+			"path": "./src/components/Overlay/tests/Overlay.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate}>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "transparent",
+					"snippet": "const transparent = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} transparent>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "blurred",
+					"snippet": "const blurred = () => {\n    const overlayToggle = useToggle(false);\n\n    return (\n        <Example>\n            <Example.Item title=\"base\">\n                <Button onClick={overlayToggle.activate}>Open overlay</Button>\n                <Overlay active={overlayToggle.active} onClose={overlayToggle.deactivate} blurred>\n                    Overlay content\n                </Overlay>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "renderProps",
+					"snippet": "const renderProps = () => (\n    <Overlay active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        {(args) => (args.active ? \"Opened\" : \"Closed\")}\n    </Overlay>\n);"
+				},
+				{
+					"name": "handlers",
+					"snippet": "const handlers = () => {\n    const overlayToggle = useToggle();\n\n    return (\n        <>\n            <Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>\n            <Overlay\n                active={overlayToggle.active}\n                onClose={(closeArgs) => {\n                    overlayToggle.deactivate();\n                    args.handleClose(closeArgs);\n                }}\n                onOpen={fn()}\n                onAfterOpen={fn()}\n                onAfterClose={fn()}>Content\n                                </Overlay>\n        </>\n    );\n};"
+				},
+				{
+					"name": "disableCloseOnClick",
+					"snippet": "const disableCloseOnClick = (args) => (\n    <Overlay\n        active\n        disableCloseOnClick\n        onClose={(closeArgs) => {\n            args.handleClose(closeArgs);\n        }}\n    >\n        Content\n    </Overlay>\n);"
+				},
+				{
+					"name": "containerRef",
+					"snippet": "const containerRef = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <>\n            <div ref={containerRef} data-testid=\"test-id\" style={{ height: 200 }} />\n            <Overlay active containerRef={containerRef}>\n                Content\n            </Overlay>\n        </>\n    );\n};"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <Overlay active className=\"test-classname\" attributes={{ \"data-testid\": \"test-id\" }}>\n        Content\n    </Overlay>\n);"
+				}
+			],
+			"import": "import { Button, Example, Overlay } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Overlay",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Overlay/Overlay.tsx",
+				"actualName": "Overlay",
+				"exportName": "default"
+			}
+		},
+		"utility-components-reshaped": {
+			"id": "utility-components-reshaped",
+			"name": "Reshaped",
+			"path": "./src/components/Reshaped/tests/Reshaped.stories.tsx",
+			"stories": [
+				{
+					"name": "rtl",
+					"snippet": "const rtl = () => (\n    <Reshaped defaultRTL theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"
+				},
+				{
+					"name": "controlledMode",
+					"snippet": "const controlledMode = () => {\n    const [mode, setMode] = useState<G.ColorMode>(\"dark\");\n\n    return (\n        <Reshaped theme=\"reshaped\" colorMode={mode}>\n            <Button\n                onClick={() => {\n                    setMode(mode === \"dark\" ? \"light\" : \"dark\");\n                }}\n            >\n                Toggle color mode\n            </Button>\n        </Reshaped>\n    );\n};"
+				},
+				{
+					"name": "lightMode",
+					"snippet": "const lightMode = () => <Reshaped theme=\"reshaped\">Hello</Reshaped>;"
+				},
+				{
+					"name": "darkMode",
+					"snippet": "const darkMode = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"
+				},
+				{
+					"name": "scoped",
+					"snippet": "const scoped = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\" scoped>\n        Hello\n    </Reshaped>\n);"
+				},
+				{
+					"name": "testScoped",
+					"snippet": "const testScoped = () => (\n    <Reshaped theme=\"reshaped\">\n        <Reshaped theme=\"slate\" scoped>\n            <ScopedComponent />\n        </Reshaped>\n    </Reshaped>\n);"
+				},
+				{
+					"name": "keyboardMode",
+					"snippet": "const keyboardMode = () => (\n    <Reshaped theme=\"reshaped\" defaultColorMode=\"dark\">\n        Hello\n    </Reshaped>\n);"
+				}
+			],
+			"import": "import { Button, Reshaped } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Reshaped",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Reshaped/Reshaped.tsx",
+				"actualName": "Reshaped",
+				"exportName": "default"
+			}
+		},
+		"utility-components-scrollarea": {
+			"id": "utility-components-scrollarea",
+			"name": "ScrollArea",
+			"path": "./src/components/ScrollArea/tests/ScrollArea.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n    <Example>\n        <Example.Item title=\"vertical scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"horizontal scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\" height=\"100px\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"horizontal and vertical scroll\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "scrollbarDisplay",
+					"snippet": "const scrollbarDisplay = () => (\n    <Example>\n        <Example.Item title=\"scrollbarDisplay: hover\">\n            <ScrollArea height=\"100px\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"scrollbarDisplay: hidden\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"hidden\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"scrollbarDisplay: visible\">\n            <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n                <View backgroundColor=\"elevation-base\" padding={4} width=\"150%\">\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "height",
+					"snippet": "const height = () => (\n    <Example>\n        <Example.Item title=\"height: 80px\">\n            <ScrollArea height=\"80px\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"responsive height: s 80px, m: 120px\">\n            <ScrollArea height={{ s: \"80px\", m: \"120px\" }}>\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"maxHeight: 80px\">\n            <ScrollArea maxHeight=\"80px\">\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n\n        <Example.Item title=\"responsive max height: s 80px, m: 200px\">\n            <ScrollArea maxHeight={{ s: \"80px\", m: \"200px\" }}>\n                <View backgroundColor=\"elevation-base\" padding={4}>\n                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                    has been the industry's standard dummy text ever since the 1500s, when an unknown\n                    printer took a galley of type and scrambled it to make a type specimen book. It has\n                    survived not only five centuries, but also the leap into electronic typesetting,\n                    remaining essentially unchanged. It was popularised in the 1960s with the release of\n                    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                    publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                </View>\n            </ScrollArea>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "onScroll",
+					"snippet": "const onScroll = () => {\n    const ref = React.useRef<HTMLDivElement>(null);\n\n    return (\n        <View gap={4}>\n            <View.Item>\n                <Button onClick={() => ref.current?.scrollBy({ top: 50, left: 50 })}>Scroll</Button>\n            </View.Item>\n            <ScrollArea height=\"100px\" ref={ref} scrollbarDisplay=\"visible\" onScroll={fn()}>\n                <View backgroundColor=\"neutral-faded\" padding={4} width=\"1000px\" height=\"200px\">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum\n                                            has been the industry's standard dummy text ever since the 1500s, when an unknown\n                                            printer took a galley of type and scrambled it to make a type specimen book. It has\n                                            survived not only five centuries, but also the leap into electronic typesetting,\n                                            remaining essentially unchanged. It was popularised in the 1960s with the release of\n                                            Letraset sheets containing Lorem Ipsum passages, and more recently with desktop\n                                            publishing software like Aldus PageMaker including versions of Lorem Ipsum.\n                                        </View>\n            </ScrollArea>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <ScrollArea className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </ScrollArea>\n    </div>\n);"
+				},
+				{
+					"name": "testNested",
+					"snippet": "const testNested = () => (\n    <ScrollArea height=\"100px\" scrollbarDisplay=\"visible\">\n        <View padding={4} paddingInline={16}>\n            <ScrollArea height=\"200px\" scrollbarDisplay=\"visible\">\n                {Array(20)\n                    .fill(\"\")\n                    .map((_, index) => {\n                        return <div key={index}>Item {index + 1}</div>;\n                    })}\n            </ScrollArea>\n        </View>\n    </ScrollArea>\n);"
+				},
+				{
+					"name": "testDynamicHeight",
+					"snippet": "const testDynamicHeight = () => {\n    const [count, setCount] = React.useState(10);\n\n    return (\n        <View gap={4}>\n            <View.Item>\n                <Button onClick={() => setCount((prev) => prev + 10)}>Add more items</Button>\n            </View.Item>\n\n            <ScrollArea height=\"200px\" scrollbarDisplay=\"visible\">\n                <View gap={2}>\n                    {new Array(count).fill(\"\").map((_, i) => (\n                        <View.Item key={i}>Item {i + 1}</View.Item>\n                    ))}\n                </View>\n            </ScrollArea>\n        </View>\n    );\n};"
+				}
+			],
+			"import": "import { Button, Example, ScrollArea, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "ScrollArea",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/ScrollArea/ScrollArea.tsx",
+				"actualName": "ScrollArea",
+				"exportName": "default"
+			}
+		},
+		"utility-components-text": {
+			"id": "utility-components-text",
+			"name": "Text",
+			"path": "./src/components/Text/tests/Text.stories.tsx",
+			"stories": [
+				{
+					"name": "variant",
+					"snippet": "const variant = () => (\n    <Example>\n        <Example.Item title=\"variant: title-1\">\n            <Text variant=\"title-1\">Title 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-2\">\n            <Text variant=\"title-2\">Title 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-3\">\n            <Text variant=\"title-3\">Title 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-4\">\n            <Text variant=\"title-4\">Title 4</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-5\">\n            <Text variant=\"title-5\">Title 5</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: title-6\">\n            <Text variant=\"title-6\">Title 6</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-1\">\n            <Text variant=\"featured-1\">Featured 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-2\">\n            <Text variant=\"featured-2\">Featured 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: featured-3\">\n            <Text variant=\"featured-3\">Featured 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-1\">\n            <Text variant=\"body-1\">Body 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-2\">\n            <Text variant=\"body-2\">Body 2</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: body-3\">\n            <Text variant=\"body-3\">Body 3</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: caption-1\">\n            <Text variant=\"caption-1\">Caption 1</Text>\n        </Example.Item>\n        <Example.Item title=\"variant: caption-2\">\n            <Text variant=\"caption-2\">Caption 2</Text>\n        </Example.Item>\n        <Example.Item title={[\"responsive variant\", \"[s] body-3\", \"[m+] title-4\"]}>\n            <Text variant={{ s: \"body-3\", m: \"title-4\" }}>Responsive</Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "weight",
+					"snippet": "const weight = () => (\n    <Example>\n        <Example.Item title=\"weight: regular\">\n            <Text weight=\"regular\">Regular</Text>\n        </Example.Item>\n        <Example.Item title=\"weight: medium\">\n            <Text weight=\"medium\">Medium</Text>\n        </Example.Item>\n        <Example.Item title=\"weight: bold\">\n            <Text weight=\"bold\">Bold</Text>\n        </Example.Item>\n        <Example.Item title={[\"responsive\", \"[s] weight: regular\", \"[m+] bold\"]}>\n            <Text weight={{ s: \"regular\", m: \"bold\" }}>Responsive</Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "color",
+					"snippet": "const color = () => (\n    <Example>\n        <Example.Item title=\"color: inherit\">\n            <Text>Neutral</Text>\n        </Example.Item>\n        <Example.Item title=\"color: neutral-faded\">\n            <Text color=\"neutral-faded\">Faded</Text>\n        </Example.Item>\n        <Example.Item title=\"color: positive\">\n            <Text color=\"positive\">Positive</Text>\n        </Example.Item>\n        <Example.Item title=\"color: warning\">\n            <Text color=\"warning\">Warning</Text>\n        </Example.Item>\n        <Example.Item title=\"color: critical\">\n            <Text color=\"critical\">Critical</Text>\n        </Example.Item>\n        <Example.Item title=\"color: primary\">\n            <Text color=\"primary\">Primary</Text>\n        </Example.Item>\n        <Example.Item title=\"color: disabled\">\n            <Text color=\"disabled\" attributes={{ \"aria-disabled\": true }}>\n                Disabled\n            </Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "decoration",
+					"snippet": "const decoration = () => (\n    <Example>\n        <Example.Item title=\"decoration: line-through\">\n            <Text decoration=\"line-through\">Line through</Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "wrap",
+					"snippet": "const wrap = () => (\n    <Example>\n        <Example.Item title=\"wrap: balance\">\n            <Text wrap=\"balance\" variant=\"title-3\">\n                The design system you want to build\n            </Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "mono",
+					"snippet": "const mono = () => (\n    <Example>\n        <Example.Item title=\"monospace\">\n            <Text monospace>Content</Text>\n        </Example.Item>\n        <Example.Item title=\"monospace, variant, weight\">\n            <Text monospace variant=\"title-1\" weight=\"regular\">\n                Content\n            </Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "maxLines",
+					"snippet": "const maxLines = () => (\n    <Example>\n        <Example.Item title=\"maxLines: 2\">\n            <Text maxLines={2}>\n                There are many variations of passages of Lorem Ipsum available, but the majority have\n                suffered alteration in some form, by injected humour, or randomised words which don't look\n                even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be\n                sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum\n                generators on the Internet tend to repeat predefined chunks as necessary, making this the\n                first true generator on the Internet. It uses a dictionary of over 200 Latin words,\n                combined with a handful of model sentence structures, to generate Lorem Ipsum which looks\n                reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected\n                humour, or non-characteristic words etc.\n            </Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "align",
+					"snippet": "const align = () => (\n    <Example>\n        <Example.Item title=\"align: start\">\n            <Text align=\"start\">Text content</Text>\n        </Example.Item>\n        <Example.Item title=\"align: center\">\n            <Text align=\"center\">Text content</Text>\n        </Example.Item>\n        <Example.Item title=\"align: end\">\n            <Text align=\"end\">Text content</Text>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive alignment\", \"[s]: center\", \"[m+] start\"]}>\n            <Text align={{ s: \"center\", m: \"start\" }}>Text content</Text>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "asProp",
+					"snippet": "const asProp = () => (\n    <>\n        <Text as=\"h1\">Content</Text>\n        <Text variant=\"title-3\">Content</Text>\n        <Text variant={{ s: \"title-3\", m: \"title-4\" }}>Content</Text>\n    </>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <Text className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </Text>\n    </div>\n);"
+				}
+			],
+			"import": "import { Example, Text } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Text",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Text/Text.tsx",
+				"actualName": "Text",
+				"exportName": "default"
+			}
+		},
+		"utility-components-theme": {
+			"id": "utility-components-theme",
+			"name": "Theme",
+			"path": "./src/components/Theme/tests/Theme.stories.tsx",
+			"stories": [
+				{
+					"name": "scoped",
+					"snippet": "const scoped = () => (\n    <Example>\n        <Example.Item title=\"scoped, single\">\n            <Theme name=\"reshaped\">\n                <Card attributes={{ \"data-testid\": \"test-id\" }}>\n                    <Button color=\"primary\">Action</Button>\n                </Card>\n            </Theme>\n        </Example.Item>\n\n        <Example.Item title=\"scoped, multiple\">\n            <Theme name={[\"reshaped\", \"figma\"]}>\n                <Card attributes={{ \"data-testid\": \"test-id-multi\" }}>\n                    <View direction=\"row\" gap={4}>\n                        <Button color=\"primary\">Action</Button>\n\n                        <Popover>\n                            <Popover.Trigger>\n                                {(attributes) => <Button attributes={attributes}>Popover</Button>}\n                            </Popover.Trigger>\n                            <Popover.Content>Content</Popover.Content>\n                        </Popover>\n                    </View>\n                </Card>\n            </Theme>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "light",
+					"snippet": "const light = () => (\n    <Theme name=\"reshaped\" colorMode=\"light\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"
+				},
+				{
+					"name": "dark",
+					"snippet": "const dark = () => (\n    <Theme name=\"reshaped\" colorMode=\"dark\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"
+				},
+				{
+					"name": "inherited",
+					"snippet": "const inherited = () => (\n    <Theme name=\"reshaped\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"
+				},
+				{
+					"name": "inverted",
+					"snippet": "const inverted = () => (\n    <Theme name=\"reshaped\" colorMode=\"inverted\">\n        <Card attributes={{ \"data-testid\": \"test-id\" }}>Content</Card>\n    </Theme>\n);"
+				},
+				{
+					"name": "controlled",
+					"snippet": "const controlled = () => {\n    const Internal = () => {\n        const { setTheme, theme } = useTheme();\n\n        return (\n            <Button color=\"primary\" onClick={() => setTheme(\"slate\")}>\n                Switch to slate\n            </Button>\n        );\n    };\n\n    return (\n        <div data-testid=\"root\">\n            <Theme name=\"reshaped\">\n                <Internal />\n            </Theme>\n        </div>\n    );\n};"
+				},
+				{
+					"name": "uncontrolled",
+					"snippet": "const uncontrolled = () => {\n    const Internal = () => {\n        const { setTheme } = useTheme();\n\n        return (\n            <Button color=\"primary\" onClick={() => setTheme(\"slate\")}>\n                Switch to slate\n            </Button>\n        );\n    };\n\n    return (\n        <div data-testid=\"root\">\n            <Theme defaultName=\"reshaped\">\n                <Internal />\n            </Theme>\n        </div>\n    );\n};"
+				},
+				{
+					"name": "disabledTransition",
+					"snippet": "const disabledTransition = () => {\n    const { invertColorMode } = useTheme();\n\n    return (\n        <Example>\n            <Example.Item title=\"should have no transitions while switching color mode\">\n                <View gap={3}>\n                    <Button onClick={invertColorMode}>Invert mode</Button>\n\n                    <MenuItem selected>Test transition</MenuItem>\n\n                    <Card>Default card</Card>\n\n                    <Theme colorMode=\"inverted\">\n                        <Card>Inverted card</Card>\n                    </Theme>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				}
+			],
+			"import": "import { Button, Card, Example, MenuItem, Popover, Theme, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Theme",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Theme/Theme.tsx",
+				"actualName": "Theme",
+				"exportName": "default"
+			}
+		},
+		"utility-components-view": {
+			"id": "utility-components-view",
+			"name": "View",
+			"path": "./src/components/View/tests/View.stories.tsx",
+			"stories": [
+				{
+					"name": "padding",
+					"snippet": "const padding = () => (\n    <Example title=\"Border is used to highlight the padding value\">\n        <Example.Item title=\"padding: 4\">\n            <View padding={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: 6\">\n            <View padding={6} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: 0\">\n            <View padding={0} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"padding: vertical 2, horizontal 4\">\n            <View paddingInline={4} paddingBlock={2} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingTop: 4\">\n            <View paddingTop={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingBottom: 4\">\n            <View paddingBottom={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingStart: 4\">\n            <View paddingStart={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"paddingEnd: 4\">\n            <View paddingEnd={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive padding:\",\n                \"[s] vertical 2, horizontal 4\",\n                \"[m+] vertical 4, horizontal 8\",\n            ]}\n        >\n            <View paddingInline={{ s: 4, m: 8 }} paddingBlock={{ s: 2, m: 4 }} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"responsive padding:\", \"[s] top 2, bottom 4\", \"[m+] top 4, bottom 0, start: 8\"]}\n        >\n            <View\n                paddingTop={{ s: 2, m: 4 }}\n                paddingBottom={{ s: 4, m: 0 }}\n                paddingStart={{ s: 0, m: 8 }}\n                borderColor=\"neutral\"\n            >\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"nested padding, child view should have no horizontal padding\">\n            <View paddingStart={4} borderColor=\"neutral\">\n                <View borderColor=\"primary\" paddingBlock={4}>\n                    <Placeholder />\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "direction",
+					"snippet": "const direction = () => (\n    <Example title=\"Item 1 is another component, Item 2 is View.Item, Item 3 is text\">\n        <Example.Item title=\"direction: column as default\">\n            <View gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <View gap={3} direction=\"column\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column-reverse\">\n            <View gap={3} direction=\"column-reverse\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row\">\n            <View gap={3} direction=\"row\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row-reverse\">\n            <View gap={3} direction=\"row-reverse\">\n                <Placeholder>Item 1</Placeholder>\n                <View.Item>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                Text item 3\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\"responsive direction\", \"[s] column-reverse\", \"[m] row-reverse\", \"[l+] row\"]}\n        >\n            <View direction={{ s: \"column-reverse\", m: \"row-reverse\", l: \"row\" }} gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "gap",
+					"snippet": "const gap = () => (\n    <Example>\n        <Example.Item title=\"gap: 4, direction: row\">\n            <View direction=\"row\" gap={4} divided>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n                <Placeholder>Item 3</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 0, direction: row\">\n            <View direction=\"row\" gap={0}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap, direction: row\", \"[s] 4\", \"[m+] 8\"]}>\n            <View direction=\"row\" gap={{ s: 4, m: 8 }}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 4, direction: column\">\n            <View gap={4}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"gap: 0, direction: column\">\n            <View gap={0}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive gap, direction: column\", \"[s] 4\", \"[m+] 8\"]}>\n            <View gap={{ s: 4, m: 8 }}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "divided",
+					"snippet": "const divided = () => (\n    <Example>\n        <Example.Item title=\"direction: row\">\n            <View divided direction=\"row\" gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column\">\n            <View divided gap={3}>\n                <Placeholder>Item 1</Placeholder>\n                <Placeholder>Item 2</Placeholder>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive divided\", \"[s] direction: row\", \"[m+] direction: column\"]}>\n            <View divided direction={{ s: \"row\", m: \"column\" }} gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row, columns\">\n            <View divided gap={3} direction=\"row\">\n                <View.Item columns={2}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={8}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={2}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"with React.Fragment\">\n            <View direction=\"row\" gap={4} divided>\n                <Placeholder>Item 1</Placeholder>\n                <>\n                    <Placeholder>Item 2</Placeholder>\n                    <Placeholder>Item 3</Placeholder>\n                </>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "bleed",
+					"snippet": "const bleed = () => (\n    <Example title=\"Removes side borders and border radius when applied\">\n        <Example.Item title=\"bleed: 4\">\n            <View bleed={4} padding={4} borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive bleed\", \"[s] 4\", \"[m+] 0\"]}>\n            <View bleed={{ s: 4, m: 0 }} padding={4} borderRadius=\"small\" borderColor=\"neutral\">\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "wrap",
+					"snippet": "const wrap = () => (\n    <Example>\n        <Example.Item title=\"wrap: false\">\n            <View direction=\"row\" wrap={false} gap={3}>\n                <Placeholder w={600} h={100} />\n                <Placeholder w={600} h={100} />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "align",
+					"snippet": "const align = () => (\n    <Example>\n        <Example.Item title=\"align: start, direction: row\">\n            <View align=\"start\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: center, direction: row\">\n            <View align=\"center\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: end, direction: row\">\n            <View align=\"end\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder h={100} />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"align: stretch, direction: row\",\n                \"2nd item is stretched based on the 1st item height\",\n            ]}\n        >\n            <View align=\"stretch\" direction=\"row\" gap={3}>\n                <Placeholder h={100} />\n                <Placeholder h=\"auto\" />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: baseline, direction: row\">\n            <View align=\"baseline\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Text variant=\"title-6\">Content</Text>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"align: start, direction: column\">\n            <View align=\"start\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: center, direction: column\">\n            <View align=\"center\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"align: end, direction: row\">\n            <View align=\"end\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder w={100} />\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"align: stretch, direction: column\",\n                \"1st item uses its own width, 2nd item is stretched to full width\",\n            ]}\n        >\n            <View align=\"stretch\" direction=\"column\" gap={3}>\n                <Placeholder w={100} />\n                <Placeholder w=\"auto\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "justify",
+					"snippet": "const justify = () => (\n    <Example>\n        <Example.Item title=\"justify: start, direction: row\">\n            <View justify=\"start\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: center, direction: row\">\n            <View justify=\"center\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: end, direction: row\">\n            <View justify=\"end\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: space-between, direction: row\">\n            <View justify=\"space-between\" direction=\"row\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"justify: start, direction: column, height: 200px\">\n            <View height=\"200px\" justify=\"start\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: center, direction: column, height: 200px\">\n            <View height=\"200px\" justify=\"center\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: end, direction: column, height: 200px\">\n            <View justify=\"end\" height=\"200px\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"justify: space-between, direction: column, height: 200px\">\n            <View justify=\"space-between\" height=\"200px\" direction=\"column\" gap={3}>\n                <Placeholder />\n                <Placeholder />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "textAlign",
+					"snippet": "const textAlign = () => (\n    <Example>\n        <Example.Item title=\"textAlign: start\">\n            <View textAlign=\"start\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: center\">\n            <View textAlign=\"center\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: end\">\n            <View textAlign=\"end\">Content</View>\n        </Example.Item>\n\n        <Example.Item title=\"textAlign: [s] start, [m+] end\">\n            <View textAlign={{ s: \"start\", m: \"end\" }}>Content</View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "size",
+					"snippet": "const size = () => (\n    <Example>\n        <Example.Item title=\"height: 100px, width: 100px\">\n            <View backgroundColor=\"neutral-faded\" height=\"100px\" width=\"100px\" />\n        </Example.Item>\n        <Example.Item title=\"height: 25, width: 25\">\n            <View backgroundColor=\"neutral-faded\" height={25} width={25} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive height and width\",\n                \"[s] height: 25, width: 25\",\n                \"[m+] height: 200px, width: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                height={{ s: 25, m: \"200px\" }}\n                width={{ s: 25, m: \"200px\" }}\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "ratio",
+					"snippet": "const ratio = () => (\n    <Example>\n        <Example.Item title=\"ratio: 16 / 9\">\n            <View backgroundColor=\"neutral-faded\" aspectRatio={16 / 9} width=\"200px\" />\n        </Example.Item>\n        <Example.Item title={[\"responsive ratio\", \"[s] 1/1\", \"[m+] 16/9\"]}>\n            <View backgroundColor=\"neutral-faded\" aspectRatio={{ s: 1, m: 16 / 9 }} width=\"200px\" />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "maxSize",
+					"snippet": "const maxSize = () => (\n    <Example>\n        <Example.Item title=\"maxHeight: 150px, maxWidth: 150px, height: 300px\">\n            <View backgroundColor=\"neutral-faded\" maxHeight=\"150px\" maxWidth=\"150px\" height=\"300px\" />\n        </Example.Item>\n        <Example.Item title=\"maxHeight: 25, maxWidth: 25, height: 50\">\n            <View backgroundColor=\"neutral-faded\" maxHeight={25} maxWidth={25} height={50} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive maxHeight and maxWidth, height: 300\",\n                \"[s] maxHeight: 25, maxWidth: 25\",\n                \"[m+] maxHeight: 200px, maxWidth: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                maxHeight={{ s: 25, m: \"200px\" }}\n                maxWidth={{ s: 25, m: \"200px\" }}\n                height=\"300px\"\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "minSize",
+					"snippet": "const minSize = () => (\n    <Example>\n        <Example.Item title=\"minHeight: 150px, minWidth: 150px, height: 50px, width: 50px\">\n            <View\n                backgroundColor=\"neutral-faded\"\n                minHeight=\"150px\"\n                minWidth=\"150px\"\n                height=\"50px\"\n                width=\"50px\"\n            />\n        </Example.Item>\n        <Example.Item title=\"minHeight: 25, minWidth: 25, height: 5, width: 5\">\n            <View backgroundColor=\"neutral-faded\" minHeight={25} minWidth={25} height={5} width={5} />\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive minHeight and minWidth, height: 50px, width: 50px\",\n                \"[s] minHeight: 25, minWidth: 25\",\n                \"[m+] minHeight: 200px, minWidth: 200px\",\n            ]}\n        >\n            <View\n                backgroundColor=\"neutral-faded\"\n                minHeight={{ s: 25, m: \"200px\" }}\n                minWidth={{ s: 25, m: \"200px\" }}\n                height=\"50px\"\n                width=\"50px\"\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "background",
+					"snippet": "const background = () => (\n    <Example title=\"border is used to highlight the backround value when it's similar to the page background, text color changes based on the background\">\n        <Example.Item title=\"bg: page\">\n            <View backgroundColor=\"page\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: page-faded\">\n            <View backgroundColor=\"page-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: disabled\">\n            <View backgroundColor=\"disabled\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: disabled-faded\">\n            <View backgroundColor=\"disabled-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-base\">\n            <View backgroundColor=\"elevation-base\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-raised\">\n            <View backgroundColor=\"elevation-raised\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: elevation-overlay\">\n            <View backgroundColor=\"elevation-overlay\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: neutral\">\n            <View backgroundColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: neutral-faded\">\n            <View backgroundColor=\"neutral-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: primary\">\n            <View backgroundColor=\"primary\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: primary-faded\">\n            <View backgroundColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: critical\">\n            <View backgroundColor=\"critical\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: critical-faded\">\n            <View backgroundColor=\"critical-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: warning\">\n            <View backgroundColor=\"warning\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: warning-faded\">\n            <View backgroundColor=\"warning-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: positive\">\n            <View backgroundColor=\"positive\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n        <Example.Item title=\"bg: positive-faded\">\n            <View backgroundColor=\"positive-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "borderColor",
+					"snippet": "const borderColor = () => (\n    <Example>\n        <Example.Item title=\"border: neutral\">\n            <View borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: neutral-faded\">\n            <View borderColor=\"neutral-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: primary\">\n            <View borderColor=\"primary\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: primary-faded\">\n            <View borderColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: critical\">\n            <View borderColor=\"critical\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: critical-faded\">\n            <View borderColor=\"critical-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: warning\">\n            <View borderColor=\"warning\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: warning-faded\">\n            <View borderColor=\"warning-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: positive\">\n            <View borderColor=\"positive\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: positive-faded\">\n            <View borderColor=\"positive-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"border: transparent, background: primary-faded\">\n            <View borderColor=\"transparent\" backgroundColor=\"primary-faded\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive\", \"[s] primary\", \"[m+] neutral\"]}>\n            <View borderColor={{ s: \"primary\", m: \"neutral\" }} padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "border",
+					"snippet": "const border = () => (\n    <Example>\n        <Example.Item title=\"border: true\">\n            <View border borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderTop: true\">\n            <View borderTop borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderBottom: true\">\n            <View borderBottom borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderStart: true\">\n            <View borderStart borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderEnd: true\">\n            <View borderEnd borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderInline: true\">\n            <View borderInline borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderBlock: true\">\n            <View borderBlock borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"borderTop: true, borderStart: true, \">\n            <View borderColor=\"neutral\" borderTop borderStart padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"responsive\",\n                \"[s] borderTop: true, borderStart: true\",\n                \"[m+] borderBottom: true, borderEnd: true\",\n            ]}\n        >\n            <View\n                borderColor=\"neutral\"\n                borderTop={{ s: true, m: false }}\n                borderStart={{ s: true, m: false }}\n                borderBottom={{ s: false, m: true }}\n                borderEnd={{ s: false, m: true }}\n                padding={4}\n            >\n                Content\n            </View>\n        </Example.Item>\n\n        <div style={{ height: 100 }} />\n    </Example>\n);"
+				},
+				{
+					"name": "radius",
+					"snippet": "const radius = () => (\n    <Example>\n        <Example.Item title=\"radius: small\">\n            <View borderRadius=\"small\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: medium\">\n            <View borderRadius=\"medium\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: large\">\n            <View borderRadius=\"large\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"radius: circular\">\n            <View borderRadius=\"circular\" borderColor=\"neutral\" padding={4}>\n                Content\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "shadow",
+					"snippet": "const shadow = () => (\n    <Example>\n        <Example.Item title=\"shadow: raised, radius: medium\">\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                shadow=\"raised\"\n                borderRadius=\"medium\"\n                backgroundColor=\"elevation-raised\"\n            />\n        </Example.Item>\n        <Example.Item title=\"shadow: overlay, radius: medium\">\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                shadow=\"overlay\"\n                borderRadius=\"medium\"\n                backgroundColor=\"elevation-overlay\"\n            />\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "overflow",
+					"snippet": "const overflow = () => (\n    <Example>\n        <Example.Item\n            title={[\"overflow: hidden, radius: medium\", \"child background should have radius\"]}\n        >\n            <View height=\"100px\" width=\"100px\" shadow=\"raised\" borderRadius=\"medium\" overflow=\"hidden\">\n                <View backgroundColor=\"primary\" height=\"100%\" width=\"100%\" />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "positioning",
+					"snippet": "const positioning = () => (\n    <Example>\n        <Example.Item title=\"position: relative + absolute\">\n            <View borderColor=\"neutral\" position=\"relative\">\n                <Placeholder />\n                <View\n                    position=\"absolute\"\n                    insetTop={0}\n                    insetEnd={0}\n                    backgroundColor=\"critical\"\n                    zIndex={5}\n                    height={10}\n                    width={10}\n                />\n                <View\n                    position=\"absolute\"\n                    insetTop={0}\n                    insetEnd={0}\n                    backgroundColor=\"primary\"\n                    height={15}\n                    width={15}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"position: sticky\">\n            <div style={{ overflow: \"auto\", height: 100 }} tabIndex={0}>\n                <View position=\"sticky\" borderColor=\"primary\" insetTop={0}>\n                    Content\n                </View>\n                <Placeholder h={1000} />\n            </div>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive\", \"[s] position: absolute\", \"[m+]: position: relative\"]}>\n            <div style={{ overflow: \"auto\", height: 100, position: \"relative\" }} tabIndex={0}>\n                <View position={{ s: \"absolute\", m: \"relative\" }} borderColor=\"primary\" insetTop={0}>\n                    Content\n                </View>\n                <Placeholder h={1000} />\n            </div>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "inset",
+					"snippet": "const inset = () => (\n    <Example>\n        <Example.Item title=\"inset: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" inset={4} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetTop: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" insetTop={4} height={10} width={10} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetStart: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetStart={4}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetEnd: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View backgroundColor=\"neutral\" position=\"absolute\" insetEnd={4} height={10} width={10} />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"insetBottom: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetBottom={4}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"responsive, [s] insetBottom: 4 [m+] insetEnd: 4\">\n            <View backgroundColor=\"neutral-faded\" width={25} height={25}>\n                <View\n                    backgroundColor=\"neutral\"\n                    position=\"absolute\"\n                    insetBottom={{ s: 4, m: \"auto\" }}\n                    insetEnd={{ s: \"auto\", m: 4 }}\n                    height={10}\n                    width={10}\n                />\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "animated",
+					"snippet": "const animated = () => {\n    const [background, setBackground] = React.useState<ViewProps[\"backgroundColor\"]>(\"neutral\");\n\n    return (\n        <View gap={3} align=\"start\">\n            <Button\n                onClick={() => setBackground((prev) => (prev === \"neutral\" ? \"primary\" : \"neutral\"))}\n            >\n                Change background\n            </Button>\n            <View\n                height=\"100px\"\n                width=\"100px\"\n                backgroundColor={background}\n                align=\"center\"\n                justify=\"center\"\n                animated\n            >\n                Content\n            </View>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "itemGapBefore",
+					"snippet": "const itemGapBefore = () => (\n    <Example>\n        <Example.Item title={[\"gap: 4, 3rd item gapBefore: 10, direction: row\", \"increased gap\"]}>\n            <View direction=\"row\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={10}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 4, direction: row\", \"reduced gap\"]}>\n            <View direction=\"row\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={4}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 0, direction: row\", \"removed gap\"]}>\n            <View direction=\"row\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={0}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"gap: 4, direction: row, 2nd item gap: auto\">\n            <View direction=\"row\" gap={4}>\n                <Placeholder w={200} />\n                <View.Item gapBefore=\"auto\">\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"gap: 4, 3rd item gapBefore: 10, direction: column\", \"increased gap\"]}>\n            <View direction=\"column\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={10}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 4, direction: column\", \"reduced gap\"]}>\n            <View direction=\"column\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={4}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"gap: 10, 3rd item gapBefore: 0, direction: column\", \"removed gap\"]}>\n            <View direction=\"column\" gap={10}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={0}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"gap: 4, direction: column, height: 200px, 2nd item gap: auto\">\n            <View height=\"200px\" gap={4}>\n                <Placeholder />\n                <View.Item gapBefore=\"auto\">\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"responsive item gap\",\n                \"gap: 4, direction: row\",\n                \"[s] 3rd item gapBefore: 10\",\n                \"[m+] 3rd item gapBefore: 0\",\n            ]}\n        >\n            <View direction=\"row\" gap={4}>\n                <Placeholder />\n                <Placeholder />\n                <View.Item gapBefore={{ s: 10, m: 0 }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "itemGrow",
+					"snippet": "const itemGrow = () => (\n    <Example>\n        <Example.Item title=\"direction: row, 2nd item grow\">\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View.Item grow>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: column, height: 200px, 2nd item grow\">\n            <View direction=\"column\" gap={3} height=\"200px\">\n                <Placeholder />\n                <View.Item grow>\n                    <Placeholder h=\"100%\" />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"direction: row, 2nd item grow, applied to View\">\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View grow>\n                    <Placeholder />\n                </View>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive item grow, direction: row\",\n                \"[s] 2nd item grow\",\n                \"[m+] 2nd item doesn't grow\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Placeholder w={200} />\n                <View.Item grow={{ s: true, m: false }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive item grow, direction: column, height: 200px\",\n                \"[s] 2nd item grow\",\n                \"[m+] 2nd item doesn't grow\",\n            ]}\n        >\n            <View direction=\"column\" gap={3} height=\"200px\">\n                <Placeholder />\n                <View.Item grow={{ s: true, m: false }}>\n                    <Placeholder h=\"100%\" />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "itemColumns",
+					"snippet": "const itemColumns = () => (\n    <Example>\n        <Example.Item title=\"columns 6, 6, gap: 0\">\n            <View direction=\"row\">\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 3, 9, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={3}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, 9, gap: 4\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title={[\"responsive columns\", \"[s] columns 6, 6, 12, gap: 4\", \"[m+]: 4, 4, 4\"]}>\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={{ s: 6, m: 4 }}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 6, m: 4 }}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 12, m: 4 }}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item title=\"columns 6, 6, 9, gap: 4, 2nd item gapBefore: 20\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={6}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={6} gapBefore={20}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={9}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "itemOrder",
+					"snippet": "const itemOrder = () => (\n    <Example>\n        <Example.Item title=\"order: 1 3 2\">\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={4}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={4} order={1}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={4}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title={[\"responsive order\", \"[s] 1 2 3\", \"[m+] 1 3 2\"]}>\n            <View direction=\"row\" gap={4}>\n                <View.Item columns={4}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item columns={4} order={{ s: 0, m: 1 }}>\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={4}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"responsive order\",\n                \"[s]: 1 3 2, 2 is full width on second row\",\n                \"[m+]: 1 2 3, 2 has grow in the center of the first row\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <View.Item columns={{ s: 6, m: \"auto\" }}>\n                    <Placeholder>Item 1</Placeholder>\n                </View.Item>\n                <View.Item\n                    grow={{ s: false, m: true }}\n                    order={{ s: 1, m: 0 }}\n                    columns={{ s: 12, m: \"auto\" }}\n                >\n                    <Placeholder>Item 2</Placeholder>\n                </View.Item>\n                <View.Item columns={{ s: 6, m: \"auto\" }}>\n                    <Placeholder>Item 3</Placeholder>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "hiddenItem",
+					"snippet": "const hiddenItem = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"[s] 2nd item: visible, grow, 3rd item: !grow\",\n                \"[m+] 2nd item: hidden, 2nd item divider: hidden, 3rd item: grow\",\n            ]}\n        >\n            <View direction=\"row\" divided gap={3}>\n                <Placeholder />\n                <Hidden hide={{ s: false, m: true }}>\n                    <View.Item grow key=\"3\">\n                        <Placeholder />\n                    </View.Item>\n                </Hidden>\n                <View.Item grow={{ s: false, m: true }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n\n        <Example.Item\n            title={[\n                \"[s] 2nd item: visible, grow, 3rd item: !grow\",\n                \"[m+] 2nd item: hidden, 2nd item: grow doesn't push 3rd item, 3rd item: grow\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <Placeholder />\n                <Hidden hide={{ s: false, m: true }}>\n                    <View.Item grow>\n                        <Placeholder />\n                    </View.Item>\n                </Hidden>\n                <View.Item grow={{ s: false, m: true }}>\n                    <Placeholder />\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "keys",
+					"snippet": "const keys = () => {\n    const toggle = useToggle();\n\n    return (\n        <View gap={2}>\n            <Button onClick={() => toggle.toggle()}>Toggle</Button>\n            <View.Item>Item 1</View.Item>\n            {toggle.active && <KeyItem>Item 2</KeyItem>}\n            <KeyItem>Item 3</KeyItem>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "nestedGaps",
+					"snippet": "const nestedGaps = () => (\n    <Example>\n        <Example.Item\n            title={[\n                \"direction: column, gap: 10\",\n                \"Child 1: direction: column, gap: 2\",\n                \"Child 2: direction column, gap: 6\",\n                \"Child 3: gapBefore: 0\",\n                \"Child 3 view: direction: row, gap: 2\",\n            ]}\n        >\n            <View gap={10}>\n                <View gap={2}>\n                    <Placeholder>Child 1</Placeholder>\n                    <Placeholder>Child 1</Placeholder>\n                </View>\n\n                <View gap={6}>\n                    <Placeholder>Child 2</Placeholder>\n                    <Placeholder>Child 2</Placeholder>\n                </View>\n\n                <View.Item gapBefore={0}>\n                    <View direction=\"row\" gap={2}>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                        <Placeholder>Child 3, very long text</Placeholder>\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "testComposition",
+					"snippet": "const testComposition = () => (\n    <Example>\n        <Example.Item>\n            <View direction=\"row\" align=\"center\" gap={4} padding={4}>\n                <View width=\"80px\" height=\"60px\" backgroundColor=\"neutral-faded\" borderRadius=\"small\" />\n\n                <View direction=\"row\" align=\"center\" gap={1} grow>\n                    <View.Item shrink>\n                        <Text>Text (like Jeff's Puzzles)</Text>\n                    </View.Item>\n\n                    <View minWidth=\"auto\" grow>\n                        <Button size=\"small\" color=\"neutral\" icon={IconPlus} />\n                    </View>\n                </View>\n\n                <Button color=\"primary\" rounded>\n                    Button\n                </Button>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"View.Item, MenuItem, Aspect ratio\",\n                \"ratio should increase height on viewport change\",\n            ]}\n        >\n            <View direction=\"row\" gap={3}>\n                <View.Item>\n                    <Placeholder />\n                </View.Item>\n                <MenuItem selected roundedCorners>\n                    Menu\n                </MenuItem>\n                <View.Item grow>\n                    <View aspectRatio={16 / 9}>\n                        <Placeholder h=\"100%\" />\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"Scrollable tabs inside View.Item with grow\">\n            <View direction=\"row\" align=\"center\" gap={3}>\n                <Placeholder />\n                <View.Item grow>\n                    <View padding={0} align=\"center\">\n                        <Tabs variant=\"pills\">\n                            <Tabs.List>\n                                <Tabs.Item value=\"1\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"2\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"3\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"4\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"5\">Very long item</Tabs.Item>\n                                <Tabs.Item value=\"6\">Very long item</Tabs.Item>\n                            </Tabs.List>\n                            {[1, 2, 3, 5, 6].map((i) => (\n                                <Tabs.Panel key={i} value={i.toString()} />\n                            ))}\n                        </Tabs>\n                    </View>\n                </View.Item>\n                <Placeholder />\n            </View>\n        </Example.Item>\n        <Example.Item title=\"2nd item has grow, Avatar stays circle\">\n            <View direction=\"row\" gap={3}>\n                <Avatar initials=\"DB\" />\n                <View.Item grow>\n                    Veggies sunt bona vobis, proinde vos postulo esse magis grape pea sprouts horseradish\n                    courgette maize spinach prairie turnip jícama coriander quandong gourd broccoli seakale\n                    gumbo. Parsley corn lentil zucchini radicchio maize burdock avocado sea lettuce.\n                    Garbanzo tigernut earthnut pea fennel.\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item\n            title={[\n                \"item gapBefore from parent doesn't affect the child view\",\n                \"columns should take full width\",\n            ]}\n        >\n            <View>\n                <View.Item gapBefore={20}>\n                    <View direction=\"row\" gap={4}>\n                        <View.Item columns={6}>\n                            <Placeholder />\n                        </View.Item>\n                        <View.Item columns={6}>\n                            <Placeholder />\n                        </View.Item>\n                    </View>\n                </View.Item>\n            </View>\n        </Example.Item>\n        <Example.Item title=\"View becomes flexbox if there is a child with grow\">\n            <View height=\"300px\" borderColor=\"neutral-faded\">\n                <View height=\"50px\" />\n                <View grow backgroundColor=\"neutral-faded\" padding={4}>\n                    Grow\n                </View>\n            </View>\n        </Example.Item>\n    </Example>\n);"
+				},
+				{
+					"name": "asProp",
+					"snippet": "const asProp = () => (\n    <View as=\"ul\">\n        <View.Item as=\"li\">Content</View.Item>\n    </View>\n);"
+				},
+				{
+					"name": "className",
+					"snippet": "const className = () => (\n    <div data-testid=\"root\">\n        <View className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </View>\n    </div>\n);"
+				},
+				{
+					"name": "itemClassName",
+					"snippet": "const itemClassName = () => (\n    <div data-testid=\"root\">\n        <View.Item className=\"test-classname\" attributes={{ id: \"test-id\" }}>\n            Content\n        </View.Item>\n    </div>\n);"
+				}
+			],
+			"import": "import { Avatar, Button, Example, Hidden, MenuItem, Placeholder, Tabs, Text, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "View",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/View/View.tsx",
+				"actualName": "View",
+				"exportName": "default"
+			}
+		},
+		"hooks-useelementid": {
+			"id": "hooks-useelementid",
+			"name": "useElementId",
+			"path": "./src/hooks/tests/useElementId.stories.tsx",
+			"stories": [
+				{
+					"name": "id",
+					"snippet": "const id = () => {\n    return <Component id=\"hey\" />;\n};"
+				}
+			],
+			"import": "",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n  3 | import useElementId from \"hooks/useElementId\";\n  4 |\n> 5 | export default {\n    | ^\n  6 | \ttitle: \"Hooks/useElementId\",\n  7 | \tparameters: {\n  8 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useElementId.stories.tsx:\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, waitFor } from \"storybook/test\";\nimport useElementId from \"hooks/useElementId\";\n\nexport default {\n\ttitle: \"Hooks/useElementId\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component: React.FC<{ id?: string }> = (props) => {\n\tconst id = useElementId(props.id);\n\n\treturn <div id={id}>{id}</div>;\n};\n\nexport const id: StoryObj = {\n\tname: \"passed id\",\n\trender: () => {\n\t\treturn <Component id=\"hey\" />;\n\t},\n\tplay: async () => {\n\t\twaitFor(() => {\n\t\t\texpect(document.querySelector(\"#hey\")).toBeTruthy();\n\t\t});\n\t},\n};\n"
+			}
+		},
+		"hooks-usehandlerref": {
+			"id": "hooks-usehandlerref",
+			"name": "useHandlerRef",
+			"path": "./src/hooks/tests/useHandlerRef.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = (args) => {\n    const [count, setCount] = React.useState(0);\n\n    // Creating a new handler on each render\n    const handleEffect = () => {\n        args.handleEffect(0);\n    };\n\n    return (\n        <View gap={4}>\n            <Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>\n            <Component onEffect={handleEffect} count={count} />\n        </View>\n    );\n};"
+				}
+			],
+			"import": "import { Button, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n   6 | import useHandlerRef from \"hooks/useHandlerRef\";\n   7 |\n>  8 | export default {\n     | ^\n   9 | \ttitle: \"Hooks/useHandlerRef\",\n  10 | \tparameters: {\n  11 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useHandlerRef.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, fn, Mock, userEvent } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport View from \"components/View\";\nimport useHandlerRef from \"hooks/useHandlerRef\";\n\nexport default {\n\ttitle: \"Hooks/useHandlerRef\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component: React.FC<{ onEffect: () => void; count: number }> = (props) => {\n\tconst { onEffect, count } = props;\n\tconst onEffectRef = useHandlerRef(onEffect);\n\n\tReact.useEffect(() => {\n\t\tonEffectRef.current();\n\t}, [onEffectRef]);\n\n\treturn <>Counter: {count}</>;\n};\n\nexport const base: StoryObj<{ handleEffect: Mock }> = {\n\tname: \"base\",\n\targs: {\n\t\thandleEffect: fn(),\n\t},\n\trender: (args) => {\n\t\tconst [count, setCount] = React.useState(0);\n\n\t\t// Creating a new handler on each render\n\t\tconst handleEffect = () => {\n\t\t\targs.handleEffect(0);\n\t\t};\n\n\t\treturn (\n\t\t\t<View gap={4}>\n\t\t\t\t<Button onClick={() => setCount((prev) => prev + 1)}>Increase count</Button>\n\t\t\t\t<Component onEffect={handleEffect} count={count} />\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\t// mount, triggerred twice in dev mode\n\t\texpect(args.handleEffect).toHaveBeenCalledTimes(2);\n\n\t\tawait userEvent.click(button);\n\n\t\t// Rerendering the component doesn't re-trigger the effect\n\t\texpect(args.handleEffect).toHaveBeenCalledTimes(2);\n\t},\n};\n"
+			}
+		},
+		"hooks-usehotkeys": {
+			"id": "hooks-usehotkeys",
+			"name": "useHotkeys",
+			"path": "./src/hooks/tests/useHotkeys.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => {\n    const { checkHotkeyState } = useHotkeys({\n        \"shift + b + n\": () => console.log(\"pressed\"),\n        \"c + v\": () => console.log(\"c + v\"),\n        \"Meta + k\": () => console.log(\"meta + k\"),\n        \"Meta + f\": () => console.log(\"meta + f\"),\n        \"Meta + v\": () => console.log(\"meta + v\"),\n        \"Meta + b\": () => console.log(\"meta + b\"),\n        \"control + enter\": () => console.log(\"control + enter\"),\n        \"meta + enter\": () => console.log(\"meta + enter\"),\n        \"mod + enter\": () => console.log(\"mod + enter\"),\n        \"mod + ArrowRight\": () => console.log(\"right\"),\n        \"mod + ArrowUp\": () => console.log(\"top\"),\n        \"shift + ArrowRight\": () => console.log(\"right\"),\n        \"shift + ArrowUp\": () => console.log(\"top\"),\n        \"alt+shift+n\": () => console.log(\"alt+shift+n\"),\n        \"shift+alt+n\": () => console.log(\"shift+alt+n\"),\n        \"alt+shiftLeft+n\": () => console.log(\"alt+shiftLeft+n\"),\n    });\n    const active = checkHotkeyState(\"shift + b + n\");\n    const shiftActive = checkHotkeyState(\"shift\");\n    const bActive = checkHotkeyState(\"b\");\n    const nActive = checkHotkeyState(\"n\");\n\n    return (\n        <View\n            animated\n            gap={2}\n            direction=\"row\"\n            backgroundColor={active ? \"positive-faded\" : undefined}\n            padding={2}\n            borderRadius=\"small\"\n        >\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={shiftActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={shiftActive ? undefined : \"raised\"}\n            >\n                Shift\n            </View>\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={bActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={bActive ? undefined : \"raised\"}\n            >\n                b\n            </View>\n            <View\n                paddingInline={4}\n                paddingBlock={2}\n                borderRadius=\"small\"\n                borderColor=\"neutral-faded\"\n                animated\n                backgroundColor={nActive ? \"neutral-faded\" : \"elevation-raised\"}\n                shadow={nActive ? undefined : \"raised\"}\n            >\n                n\n            </View>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "singleKey",
+					"snippet": "const singleKey = (args) => <Component hotkeys={{ a: args.handleHotkey }} />;"
+				},
+				{
+					"name": "modKey",
+					"snippet": "const modKey = (args) => <Component hotkeys={{ mod: args.handleHotkey }} />;"
+				},
+				{
+					"name": "modKeyHold",
+					"snippet": "const modKeyHold = (args) => <Component hotkeys={{ \"Meta + b\": args.handleHotkey }} />;"
+				},
+				{
+					"name": "keyList",
+					"snippet": "const keyList = (args) => <Component hotkeys={{ \"a,b\": args.handleHotkey }} />;"
+				},
+				{
+					"name": "keyCombination",
+					"snippet": "const keyCombination = (args) => <Component hotkeys={{ \"a+b\": args.handleHotkey }} />;"
+				},
+				{
+					"name": "keyCombinationFormat",
+					"snippet": "const keyCombinationFormat = (args) => <Component hotkeys={{ \"A  + b\": args.handleHotkey }} />;"
+				},
+				{
+					"name": "keyCombinationOrder",
+					"snippet": "const keyCombinationOrder = (args) => <Component hotkeys={{ \"b+a\": args.handleHotkey }} />;"
+				},
+				{
+					"name": "keyCombinationMoreThanRequired",
+					"snippet": "const keyCombinationMoreThanRequired = (args) => <Component hotkeys={{ \"z + x\": args.handleHotkey }} />;"
+				},
+				{
+					"name": "optionModified",
+					"snippet": "const optionModified = (args) => (\n    <Component hotkeys={{ \"alt+n\": args.handleHotkeyModified, \"alt+shift\": args.handleHotkey }} />\n);"
+				}
+			],
+			"import": "import { View } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n  4 | import useHotkeys from \"hooks/useHotkeys\";\n  5 |\n> 6 | export default {\n    | ^\n  7 | \ttitle: \"Hooks/useHotkeys\",\n  8 | \tparameters: {\n  9 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useHotkeys.stories.tsx:\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, fn, userEvent } from \"storybook/test\";\nimport View from \"components/View\";\nimport useHotkeys from \"hooks/useHotkeys\";\n\nexport default {\n\ttitle: \"Hooks/useHotkeys\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst { checkHotkeyState } = useHotkeys({\n\t\t\t\"shift + b + n\": () => console.log(\"pressed\"),\n\t\t\t\"c + v\": () => console.log(\"c + v\"),\n\t\t\t\"Meta + k\": () => console.log(\"meta + k\"),\n\t\t\t\"Meta + f\": () => console.log(\"meta + f\"),\n\t\t\t\"Meta + v\": () => console.log(\"meta + v\"),\n\t\t\t\"Meta + b\": () => console.log(\"meta + b\"),\n\t\t\t\"control + enter\": () => console.log(\"control + enter\"),\n\t\t\t\"meta + enter\": () => console.log(\"meta + enter\"),\n\t\t\t\"mod + enter\": () => console.log(\"mod + enter\"),\n\t\t\t\"mod + ArrowRight\": () => console.log(\"right\"),\n\t\t\t\"mod + ArrowUp\": () => console.log(\"top\"),\n\t\t\t\"shift + ArrowRight\": () => console.log(\"right\"),\n\t\t\t\"shift + ArrowUp\": () => console.log(\"top\"),\n\t\t\t\"alt+shift+n\": () => console.log(\"alt+shift+n\"),\n\t\t\t\"shift+alt+n\": () => console.log(\"shift+alt+n\"),\n\t\t\t\"alt+shiftLeft+n\": () => console.log(\"alt+shiftLeft+n\"),\n\t\t});\n\t\tconst active = checkHotkeyState(\"shift + b + n\");\n\t\tconst shiftActive = checkHotkeyState(\"shift\");\n\t\tconst bActive = checkHotkeyState(\"b\");\n\t\tconst nActive = checkHotkeyState(\"n\");\n\n\t\treturn (\n\t\t\t<View\n\t\t\t\tanimated\n\t\t\t\tgap={2}\n\t\t\t\tdirection=\"row\"\n\t\t\t\tbackgroundColor={active ? \"positive-faded\" : undefined}\n\t\t\t\tpadding={2}\n\t\t\t\tborderRadius=\"small\"\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\tpaddingInline={4}\n\t\t\t\t\tpaddingBlock={2}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tborderColor=\"neutral-faded\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={shiftActive ? \"neutral-faded\" : \"elevation-raised\"}\n\t\t\t\t\tshadow={shiftActive ? undefined : \"raised\"}\n\t\t\t\t>\n\t\t\t\t\tShift\n\t\t\t\t</View>\n\t\t\t\t<View\n\t\t\t\t\tpaddingInline={4}\n\t\t\t\t\tpaddingBlock={2}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tborderColor=\"neutral-faded\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={bActive ? \"neutral-faded\" : \"elevation-raised\"}\n\t\t\t\t\tshadow={bActive ? undefined : \"raised\"}\n\t\t\t\t>\n\t\t\t\t\tb\n\t\t\t\t</View>\n\t\t\t\t<View\n\t\t\t\t\tpaddingInline={4}\n\t\t\t\t\tpaddingBlock={2}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tborderColor=\"neutral-faded\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={nActive ? \"neutral-faded\" : \"elevation-raised\"}\n\t\t\t\t\tshadow={nActive ? undefined : \"raised\"}\n\t\t\t\t>\n\t\t\t\t\tn\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t},\n};\n\nconst Component: React.FC<{ hotkeys: Record<string, (() => void) | null> }> = (props) => {\n\tconst { hotkeys } = props;\n\tuseHotkeys(hotkeys);\n\n\treturn <div />;\n};\n\nexport const singleKey: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"single key\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ a: args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"a\");\n\t\tawait userEvent.keyboard(\"b\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const modKey: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"mod key\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ mod: args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{Meta/}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const modKeyHold: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"mod key on hold\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"Meta + b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{Meta>}bb{/Meta}\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(2);\n\t},\n};\n\nexport const keyList: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key list\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"a,b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"a\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\n\t\tawait userEvent.keyboard(\"b\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(2);\n\t},\n};\n\nexport const keyCombination: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"a+b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{a>}b{/a}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const keyCombinationFormat: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination without formatting\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"A  + b\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{a>}b{/a}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const keyCombinationOrder: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination without order\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"b+a\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{a>}b{/a}\");\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const keyCombinationMoreThanRequired: StoryObj<{ handleHotkey: ReturnType<typeof fn> }> = {\n\tname: \"key combination, more keys pressed\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t},\n\trender: (args) => <Component hotkeys={{ \"z + x\": args.handleHotkey }} />,\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{z>}{x>}c{/x}{/z}\");\n\t\t// When c is pressed, it doesn't trigger a+b for the second time\n\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const optionModified: StoryObj<{\n\thandleHotkey: ReturnType<typeof fn>;\n\thandleHotkeyModified: ReturnType<typeof fn>;\n}> = {\n\tname: \"modified with alt/option\",\n\targs: {\n\t\thandleHotkey: fn(),\n\t\thandleHotkeyModified: fn(),\n\t},\n\trender: (args) => (\n\t\t<Component hotkeys={{ \"alt+n\": args.handleHotkeyModified, \"alt+shift\": args.handleHotkey }} />\n\t),\n\tplay: async ({ args }) => {\n\t\tawait userEvent.keyboard(\"{Alt>}n{/Alt}\");\n\t\texpect(args.handleHotkeyModified).toHaveBeenCalledTimes(1);\n\n\t\tawait userEvent.keyboard(\"{Alt>}{Shift}{/Alt}\");\n\t\texpect(args.handleHotkey).toHaveBeenCalledTimes(1);\n\t},\n};\n"
+			}
+		},
+		"hooks-usekeyboardarrownavigation": {
+			"id": "hooks-usekeyboardarrownavigation",
+			"name": "useKeyboardArrowNavigation",
+			"path": "./src/hooks/tests/useKeyboardArrowNavigation.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "horizontal",
+					"snippet": "const horizontal = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, orientation: \"horizontal\" });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "vertical",
+					"snippet": "const vertical = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, orientation: \"vertical\" });\n\n    return (\n        <View gap={2} direction=\"column\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "circular",
+					"snippet": "const circular = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, circular: true });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useKeyboardArrowNavigation({ ref, disabled: true });\n\n    return (\n        <View gap={2} direction=\"row\" attributes={{ ref }}>\n            <Button onClick={() => {}}>Action 1</Button>\n            <Button onClick={() => {}}>Action 2</Button>\n            <Button onClick={() => {}}>Action 3</Button>\n        </View>\n    );\n};"
+				}
+			],
+			"import": "import { Button, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n   7 | import useKeyboardArrowNavigation from \"hooks/useKeyboardArrowNavigation\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Hooks/useKeyboardArrowNavigation\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useKeyboardArrowNavigation.stories.tsx:\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport useRTL from \"hooks/useRTL\";\nimport View from \"components/View\";\nimport Button from \"components/Button\";\nimport useKeyboardArrowNavigation from \"hooks/useKeyboardArrowNavigation\";\n\nexport default {\n\ttitle: \"Hooks/useKeyboardArrowNavigation\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(buttons[2]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t},\n};\n\nexport const horizontal: StoryObj = {\n\tname: \"orientation: horizontal\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, orientation: \"horizontal\" });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\texpect(buttons[0]).toHaveAttribute(\"tabindex\", \"0\");\n\t\texpect(buttons[1]).toHaveAttribute(\"tabindex\", \"-1\");\n\t\texpect(buttons[2]).toHaveAttribute(\"tabindex\", \"-1\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t},\n};\n\nexport const vertical: StoryObj = {\n\tname: \"orientation: vertical\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, orientation: \"vertical\" });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"column\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\n\t\texpect(document.activeElement).toBe(buttons[1]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t},\n};\n\nexport const circular: StoryObj = {\n\tname: \"circular\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, circular: true });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[2]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(buttons[2]);\n\t},\n};\n\nexport const disabled: StoryObj = {\n\tname: \"disabled\",\n\trender: () => {\n\t\tconst ref = useRef<HTMLDivElement>(null);\n\n\t\tuseKeyboardArrowNavigation({ ref, disabled: true });\n\n\t\treturn (\n\t\t\t<View gap={2} direction=\"row\" attributes={{ ref }}>\n\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst buttons = canvas.getAllByRole(\"button\");\n\n\t\tbuttons[0].focus();\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(buttons[0]);\n\t\texpect(buttons[0]).not.toHaveAttribute(\"tabindex\");\n\t},\n};\n"
+			}
+		},
+		"hooks-usekeyboardmode": {
+			"id": "hooks-usekeyboardmode",
+			"name": "useKeyboardMode",
+			"path": "./src/hooks/tests/useKeyboardMode.stories.tsx",
+			"stories": [
+				{ "name": "base", "snippet": "const base = () => <Component />;" }
+			],
+			"import": "import { Button, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n   5 | import useKeyboardMode from \"hooks/useKeyboardMode\";\n   6 |\n>  7 | export default {\n     | ^\n   8 | \ttitle: \"Hooks/useKeyboardMode\",\n   9 | \tparameters: {\n  10 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useKeyboardMode.stories.tsx:\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport View from \"components/View\";\nimport useKeyboardMode from \"hooks/useKeyboardMode\";\n\nexport default {\n\ttitle: \"Hooks/useKeyboardMode\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component = () => {\n\tconst { activate, deactivate, disable, enable } = useKeyboardMode();\n\n\treturn (\n\t\t<View direction=\"row\" gap={2}>\n\t\t\t<Button onClick={activate}>Activate</Button>\n\t\t\t<Button onClick={deactivate}>Deactivate</Button>\n\t\t\t<Button onClick={disable}>Disable</Button>\n\t\t\t<Button onClick={enable}>Enable</Button>\n\t\t</View>\n\t);\n};\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => <Component />,\n\tplay: async ({ canvas }) => {\n\t\tconst attribute = \"data-rs-keyboard\";\n\t\tconst root = document.documentElement;\n\t\tconst activateTrigger = canvas.getAllByRole(\"button\")[0];\n\t\tconst deactivateTrigger = canvas.getAllByRole(\"button\")[1];\n\t\tconst disableTrigger = canvas.getAllByRole(\"button\")[2];\n\t\tconst enableTrigger = canvas.getAllByRole(\"button\")[3];\n\n\t\texpect(root).not.toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(activateTrigger);\n\t\texpect(root).toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(deactivateTrigger);\n\t\texpect(root).not.toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(disableTrigger);\n\t\tawait userEvent.click(activateTrigger);\n\t\texpect(root).not.toHaveAttribute(attribute);\n\n\t\tawait userEvent.click(enableTrigger);\n\t\tawait userEvent.click(activateTrigger);\n\t\texpect(root).toHaveAttribute(attribute);\n\t},\n};\n"
+			}
+		},
+		"hooks-useonclickoutside": {
+			"id": "hooks-useonclickoutside",
+			"name": "useOnClickOutside",
+			"path": "./src/hooks/tests/useOnClickOutside.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = (args) => {\n    const ref = React.useRef(null);\n    const [target, setTarget] = React.useState<\"inside\" | \"outside\" | null>(null);\n\n    useOnClickOutside([ref], () => {\n        args.handleOutsideClick();\n        setTarget(\"outside\");\n    });\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }} onClick={() => setTarget(\"inside\")}>\n                Trigger\n            </Button>\n            {target && `Clicked ${target}`}\n        </View>\n    );\n};"
+				},
+				{
+					"name": "refs",
+					"snippet": "const refs = (args) => {\n    const ref = React.useRef(null);\n    const ref2 = React.useRef(null);\n\n    useOnClickOutside([ref, ref2], () => {\n        args.handleOutsideClick();\n    });\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }}>Trigger</Button>\n            <Button attributes={{ ref: ref2 }}>Trigger 2</Button>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = (args) => {\n    const ref = React.useRef(null);\n\n    useOnClickOutside(\n        [ref],\n        () => {\n            args.handleOutsideClick();\n        },\n        {\n            disabled: true,\n        }\n    );\n\n    return (\n        <View gap={4} align=\"start\">\n            <Button attributes={{ ref }}>Trigger</Button>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "deps",
+					"snippet": "const deps = (args) => {\n    const ref = React.useRef(null);\n    const [count, setCount] = React.useState(0);\n\n    useOnClickOutside([ref], () => {\n        args.handleOutsideClick({ count });\n    });\n\n    return (\n        <Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>\n            Trigger\n        </Button>\n    );\n};"
+				}
+			],
+			"import": "import { Button, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n   6 | import View from \"components/View\";\n   7 |\n>  8 | export default {\n     | ^\n   9 | \ttitle: \"Hooks/useOnClickOutside\",\n  10 | \tparameters: {\n  11 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useOnClickOutside.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, fn, userEvent, type Mock } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport useOnClickOutside from \"hooks/useOnClickOutside\";\nimport View from \"components/View\";\n\nexport default {\n\ttitle: \"Hooks/useOnClickOutside\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"base\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\t\tconst [target, setTarget] = React.useState<\"inside\" | \"outside\" | null>(null);\n\n\t\tuseOnClickOutside([ref], () => {\n\t\t\targs.handleOutsideClick();\n\t\t\tsetTarget(\"outside\");\n\t\t});\n\n\t\treturn (\n\t\t\t<View gap={4} align=\"start\">\n\t\t\t\t<Button attributes={{ ref }} onClick={() => setTarget(\"inside\")}>\n\t\t\t\t\tTrigger\n\t\t\t\t</Button>\n\t\t\t\t{target && `Clicked ${target}`}\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledWith();\n\t},\n};\n\nexport const refs: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"multiple refs\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\t\tconst ref2 = React.useRef(null);\n\n\t\tuseOnClickOutside([ref, ref2], () => {\n\t\t\targs.handleOutsideClick();\n\t\t});\n\n\t\treturn (\n\t\t\t<View gap={4} align=\"start\">\n\t\t\t\t<Button attributes={{ ref }}>Trigger</Button>\n\t\t\t\t<Button attributes={{ ref: ref2 }}>Trigger 2</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst [button, button2] = canvas.getAllByRole(\"button\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\n\t\tawait userEvent.click(button2);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleOutsideClick).toHaveBeenCalledWith();\n\t},\n};\n\nexport const disabled: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"disabled\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\n\t\tuseOnClickOutside(\n\t\t\t[ref],\n\t\t\t() => {\n\t\t\t\targs.handleOutsideClick();\n\t\t\t},\n\t\t\t{\n\t\t\t\tdisabled: true,\n\t\t\t}\n\t\t);\n\n\t\treturn (\n\t\t\t<View gap={4} align=\"start\">\n\t\t\t\t<Button attributes={{ ref }}>Trigger</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ args }) => {\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).not.toHaveBeenCalled();\n\t},\n};\n\nexport const deps: StoryObj<{ handleOutsideClick: Mock }> = {\n\tname: \"test: handler uses latest state\",\n\targs: {\n\t\thandleOutsideClick: fn(),\n\t},\n\trender: (args) => {\n\t\tconst ref = React.useRef(null);\n\t\tconst [count, setCount] = React.useState(0);\n\n\t\tuseOnClickOutside([ref], () => {\n\t\t\targs.handleOutsideClick({ count });\n\t\t});\n\n\t\treturn (\n\t\t\t<Button attributes={{ ref }} onClick={() => setCount((prev) => prev + 1)}>\n\t\t\t\tTrigger\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvas, args }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 0 });\n\n\t\tawait userEvent.click(button);\n\t\tawait userEvent.click(document.body);\n\n\t\texpect(args.handleOutsideClick).toHaveBeenLastCalledWith({ count: 1 });\n\t},\n};\n"
+			}
+		},
+		"hooks-usertl": {
+			"id": "hooks-usertl",
+			"name": "useRTL",
+			"path": "./src/hooks/tests/useRTL.stories.tsx",
+			"stories": [
+				{ "name": "setRTL", "snippet": "const setRTL = () => <Component />;" }
+			],
+			"import": "",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n  4 | import useRTL from \"hooks/useRTL\";\n  5 |\n> 6 | export default {\n    | ^\n  7 | \ttitle: \"Hooks/useRTL\",\n  8 | \tparameters: {\n  9 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useRTL.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect } from \"storybook/test\";\nimport useRTL from \"hooks/useRTL\";\n\nexport default {\n\ttitle: \"Hooks/useRTL\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nconst Component = () => {\n\tconst [rtl, setRTL] = useRTL();\n\n\tReact.useEffect(() => {\n\t\tsetRTL(true);\n\t}, [setRTL]);\n\n\treturn <div>{rtl ? \"RTL\" : \"LTR\"}</div>;\n};\n\nexport const setRTL: StoryObj = {\n\tname: \"setRTL\",\n\trender: () => <Component />,\n\tplay: async () => {\n\t\texpect(document.documentElement).toHaveAttribute(\"dir\", \"rtl\");\n\t},\n};\n"
+			}
+		},
+		"hooks-useresponsiveclientvalue": {
+			"id": "hooks-useresponsiveclientvalue",
+			"name": "useResponsiveClientValue",
+			"path": "./src/hooks/tests/useResponsiveClientValue.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => {\n    const value = useResponsiveClientValue<ViewProps[\"backgroundColor\"]>({\n        s: \"neutral\",\n        m: \"critical\",\n        l: \"positive\",\n    });\n\n    return <View width={25} height={25} backgroundColor={value} />;\n};"
+				},
+				{
+					"name": "boolean",
+					"snippet": "const boolean = () => {\n    const value = useResponsiveClientValue<boolean>({\n        s: true,\n        l: false,\n    });\n\n    return <div>{value?.toString()}</div>;\n};"
+				}
+			],
+			"import": "import { View } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n  2 | import View, { type ViewProps } from \"components/View\";\n  3 |\n> 4 | export default {\n    | ^\n  5 | \ttitle: \"Hooks/useResponsiveClientValue\",\n  6 | \tparameters: {\n  7 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useResponsiveClientValue.stories.tsx:\nimport useResponsiveClientValue from \"hooks/useResponsiveClientValue\";\nimport View, { type ViewProps } from \"components/View\";\n\nexport default {\n\ttitle: \"Hooks/useResponsiveClientValue\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst value = useResponsiveClientValue<ViewProps[\"backgroundColor\"]>({\n\t\t\ts: \"neutral\",\n\t\t\tm: \"critical\",\n\t\t\tl: \"positive\",\n\t\t});\n\n\t\treturn <View width={25} height={25} backgroundColor={value} />;\n\t},\n};\n\nexport const boolean = {\n\tname: \"boolean\",\n\tdescribe: \"works with boolean properties\",\n\trender: () => {\n\t\tconst value = useResponsiveClientValue<boolean>({\n\t\t\ts: true,\n\t\t\tl: false,\n\t\t});\n\n\t\treturn <div>{value?.toString()}</div>;\n\t},\n};\n"
+			}
+		},
+		"hooks-usescrolllock": {
+			"id": "hooks-usescrolllock",
+			"name": "useScrollLock",
+			"path": "./src/hooks/tests/useScrollLock.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => {\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock();\n\n    return (\n        <React.Fragment>\n            <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n            <div style={{ height: \"150vh\" }} />\n        </React.Fragment>\n    );\n};"
+				},
+				{
+					"name": "origin",
+					"snippet": "const origin = () => {\n    const originRef = React.useRef<HTMLDivElement>(null);\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });\n\n    return (\n        <View overflow=\"auto\" height={25} attributes={{ ref: originRef, \"data-testid\": \"root\" }}>\n            <View height={50} padding={4} backgroundColor=\"neutral-faded\" borderRadius=\"medium\">\n                <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n            </View>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "container",
+					"snippet": "const container = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });\n\n    return (\n        <View height={25} attributes={{ ref: containerRef, \"data-testid\": \"root\" }}>\n            <Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n        </View>\n    );\n};"
+				},
+				{
+					"name": "testContainerAsync",
+					"snippet": "const testContainerAsync = () => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const globalLock = useScrollLock();\n    const scopedLock = useScrollLock({ containerRef });\n\n    return (\n        <Example>\n            <Example.Item title=\"calling regular lock and lock with a container only requires a single unlock to remove overflow\">\n                <View attributes={{ ref: containerRef }} gap={4} direction=\"row\">\n                    <Button\n                        onClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}\n                    >\n                        Toggle\n                    </Button>\n                    <Button\n                        onClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}\n                    >\n                        Toggle\n                    </Button>\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				}
+			],
+			"import": "import { Button, Example, View } from \"reshaped\";\nimport React from \"react\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n   7 | import View from \"components/View\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Hooks/useScrollLock\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useScrollLock.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport { Example } from \"utilities/storybook\";\nimport Button from \"components/Button\";\nimport useScrollLock from \"hooks/useScrollLock\";\nimport View from \"components/View\";\n\nexport default {\n\ttitle: \"Hooks/useScrollLock\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const base: StoryObj = {\n\tname: \"base\",\n\trender: () => {\n\t\tconst { lockScroll, unlockScroll, scrollLocked } = useScrollLock();\n\n\t\treturn (\n\t\t\t<React.Fragment>\n\t\t\t\t<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n\t\t\t\t<div style={{ height: \"150vh\" }} />\n\t\t\t</React.Fragment>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n\nexport const origin: StoryObj = {\n\tname: \"originRef\",\n\trender: () => {\n\t\tconst originRef = React.useRef<HTMLDivElement>(null);\n\t\tconst { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ originRef });\n\n\t\treturn (\n\t\t\t<View overflow=\"auto\" height={25} attributes={{ ref: originRef, \"data-testid\": \"root\" }}>\n\t\t\t\t<View height={50} padding={4} backgroundColor=\"neutral-faded\" borderRadius=\"medium\">\n\t\t\t\t\t<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n\t\t\t\t</View>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\t\tconst root = canvas.getByTestId(\"root\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t\texpect(root).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(root).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n\nexport const container: StoryObj = {\n\tname: \"containerRef\",\n\trender: () => {\n\t\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\t\tconst { lockScroll, unlockScroll, scrollLocked } = useScrollLock({ containerRef });\n\n\t\treturn (\n\t\t\t<View height={25} attributes={{ ref: containerRef, \"data-testid\": \"root\" }}>\n\t\t\t\t<Button onClick={scrollLocked ? unlockScroll : lockScroll}>Toggle</Button>\n\t\t\t</View>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\t\tconst root = canvas.getByTestId(\"root\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t\texpect(root).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(root).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n\nexport const testContainerAsync: StoryObj = {\n\tname: \"test: containerRef locked count\",\n\trender: () => {\n\t\tconst containerRef = React.useRef<HTMLDivElement>(null);\n\t\tconst globalLock = useScrollLock();\n\t\tconst scopedLock = useScrollLock({ containerRef });\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title=\"calling regular lock and lock with a container only requires a single unlock to remove overflow\">\n\t\t\t\t\t<View attributes={{ ref: containerRef }} gap={4} direction=\"row\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={globalLock.scrollLocked ? globalLock.unlockScroll : globalLock.lockScroll}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tToggle\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={scopedLock.scrollLocked ? scopedLock.unlockScroll : scopedLock.lockScroll}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tToggle\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst [buttonGlobal, buttonScoped] = canvas.getAllByRole(\"button\");\n\n\t\tawait userEvent.click(buttonGlobal);\n\t\texpect(document.body).toHaveStyle(\"overflow: hidden\");\n\n\t\tawait userEvent.click(buttonScoped);\n\t\tawait userEvent.click(buttonGlobal);\n\n\t\texpect(document.body).not.toHaveStyle(\"overflow: hidden\");\n\t},\n};\n"
+			}
+		},
+		"hooks-usetoggle": {
+			"id": "hooks-usetoggle",
+			"name": "useToggle",
+			"path": "./src/hooks/tests/useToggle.stories.tsx",
+			"stories": [
+				{
+					"name": "toggle",
+					"snippet": "const toggle = () => {\n    const { toggle, active } = useToggle();\n\n    return (\n        <Button onClick={() => toggle()} attributes={{ \"data-active\": active }}>\n            {active ? \"Deactivate\" : \"Activate\"}\n        </Button>\n    );\n};"
+				},
+				{
+					"name": "activate",
+					"snippet": "const activate = () => {\n    const { activate, active } = useToggle();\n\n    return (\n        <React.Fragment>\n            <Button onClick={activate} attributes={{ \"data-active\": active }}>\n                Activate\n            </Button>\n        </React.Fragment>\n    );\n};"
+				},
+				{
+					"name": "deactivate",
+					"snippet": "const deactivate = () => {\n    const { deactivate, active } = useToggle(true);\n\n    return (\n        <Button onClick={deactivate} attributes={{ \"data-active\": active }}>\n            Deactivate\n        </Button>\n    );\n};"
+				}
+			],
+			"import": "import { Button } from \"reshaped\";\nimport React from \"react\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n   5 | import useToggle from \"hooks/useToggle\";\n   6 |\n>  7 | export default {\n     | ^\n   8 | \ttitle: \"Hooks/useToggle\",\n   9 | \tparameters: {\n  10 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useToggle.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport Button from \"components/Button\";\nimport useToggle from \"hooks/useToggle\";\n\nexport default {\n\ttitle: \"Hooks/useToggle\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nexport const toggle: StoryObj = {\n\tname: \"toggle\",\n\trender: () => {\n\t\tconst { toggle, active } = useToggle();\n\n\t\treturn (\n\t\t\t<Button onClick={() => toggle()} attributes={{ \"data-active\": active }}>\n\t\t\t\t{active ? \"Deactivate\" : \"Activate\"}\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"true\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\t},\n};\n\nexport const activate: StoryObj = {\n\tname: \"activate\",\n\trender: () => {\n\t\tconst { activate, active } = useToggle();\n\n\t\treturn (\n\t\t\t<React.Fragment>\n\t\t\t\t<Button onClick={activate} attributes={{ \"data-active\": active }}>\n\t\t\t\t\tActivate\n\t\t\t\t</Button>\n\t\t\t</React.Fragment>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"true\");\n\t},\n};\n\nexport const deactivate: StoryObj = {\n\tname: \"deactivate\",\n\trender: () => {\n\t\tconst { deactivate, active } = useToggle(true);\n\n\t\treturn (\n\t\t\t<Button onClick={deactivate} attributes={{ \"data-active\": active }}>\n\t\t\t\tDeactivate\n\t\t\t</Button>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst button = canvas.getAllByRole(\"button\")[0];\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"true\");\n\n\t\tawait userEvent.click(button);\n\n\t\texpect(button.getAttribute(\"data-active\")).toBe(\"false\");\n\t},\n};\n"
+			}
+		},
+		"utilities-trapfocus": {
+			"id": "utilities-trapfocus",
+			"name": "TrapFocus",
+			"path": "./src/utilities/a11y/tests/TrapFocus.stories.tsx",
+			"stories": [
+				{
+					"name": "modeDialog",
+					"snippet": "const modeDialog = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, { mode: \"dialog\" });\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\"mode: dialog\", \"tab navigation, always stays inside until released\"]}\n            >\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View.Item>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "modeActionMenu",
+					"snippet": "const modeActionMenu = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"action-menu\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: action-menu\",\n                    \"up/down arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "modeActionBar",
+					"snippet": "const modeActionBar = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"action-bar\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: action-bar\",\n                    \"left/right arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "modeContentMenu",
+					"snippet": "const modeContentMenu = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"content-menu\",\n            onRelease: () => {\n                trapToggle.deactivate();\n            },\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item\n                title={[\n                    \"mode: content-menu\",\n                    \"tab navigation, tabbing outside the content will trigger the release\",\n                ]}\n            >\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                        <Button onClick={() => {}}>Next trigger</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "includeTrigger",
+					"snippet": "const includeTrigger = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n            includeTrigger: true,\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "initialFocusEl",
+					"snippet": "const initialFocusEl = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const initialFocusRef = React.useRef<HTMLButtonElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n            initialFocusEl: initialFocusRef.current,\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View\n                            gap={4}\n                            direction=\"row\"\n                            padding={4}\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            attributes={{ ref: rootRef }}\n                        >\n                            <Button onClick={() => {}}>Action 1</Button>\n                            <Button onClick={() => {}} attributes={{ ref: initialFocusRef }}>\n                                Action 2\n                            </Button>\n                            <Button onClick={() => {}}>Action 3</Button>\n                            <Button onClick={trapToggle.deactivate}>Release</Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "focusableElements",
+					"snippet": "const focusableElements = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current);\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title=\"test with all types of focusable elements\">\n                <View gap={4}>\n                    <View.Item>\n                        <Button onClick={trapToggle.activate}>Activate</Button>\n                    </View.Item>\n\n                    {trapToggle.active && (\n                        <View\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            padding={4}\n                            gap={4}\n                            attributes={{ ref: rootRef }}\n                            align=\"start\"\n                        >\n                            <Link href=\"#\" attributes={{ \"data-testid\": \"test-link\" }}>\n                                Link\n                            </Link>\n\n                            <TextField\n                                name=\"input\"\n                                placeholder=\"Input\"\n                                inputAttributes={{ \"data-testid\": \"test-text-field\" }}\n                            />\n\n                            <TextArea name=\"textarea\" inputAttributes={{ \"data-testid\": \"test-text-area\" }} />\n\n                            <Select\n                                name=\"select\"\n                                options={[\n                                    { label: \"Option 1\", value: \"1\" },\n                                    { label: \"Option 2\", value: \"2\" },\n                                ]}\n                                inputAttributes={{ \"data-testid\": \"test-select\" }}\n                            />\n\n                            <RadioGroup name=\"radio\">\n                                <Radio value=\"1\" inputAttributes={{ \"data-testid\": \"test-radio-1\" }}>\n                                    Option 1\n                                </Radio>\n                                <Radio value=\"2\" inputAttributes={{ \"data-testid\": \"test-radio-2\" }}>\n                                    Option 2\n                                </Radio>\n                            </RadioGroup>\n\n                            <Editor />\n\n                            <div tabIndex={0} role=\"button\" data-testid=\"test-tabindex\">\n                                div with tabIndex\n                            </div>\n\n                            <div style={{ display: \"none\" }}>\n                                <Button onClick={() => {}} attributes={{ \"data-testid\": \"test-hidden-button\" }}>\n                                    Hidden\n                                </Button>\n                            </div>\n\n                            <Button\n                                onClick={() => {}}\n                                attributes={{ tabIndex: -1, \"data-testid\": \"test-button-negative-tabindex\" }}\n                            >\n                                Excluded\n                            </Button>\n\n                            <input type=\"hidden\" data-testid=\"test-input-hidden\" />\n\n                            <Button\n                                onClick={trapToggle.deactivate}\n                                attributes={{ \"data-testid\": \"test-button\" }}\n                            >\n                                Release button\n                            </Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "nested",
+					"snippet": "const nested = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const innerRootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n    const innerTrapToggle = useToggle();\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n        });\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    React.useEffect(() => {\n        if (!innerTrapToggle.active) return;\n        if (!innerRootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(innerRootRef.current, {\n            mode: \"dialog\",\n        });\n\n        return () => trapFocus.release();\n    }, [innerTrapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"nested, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View gap={4}>\n                            <View\n                                gap={4}\n                                direction=\"row\"\n                                padding={4}\n                                backgroundColor=\"neutral-faded\"\n                                borderRadius=\"medium\"\n                                attributes={{ ref: rootRef }}\n                            >\n                                <Button onClick={() => {}}>Action</Button>\n                                <Button onClick={innerTrapToggle.activate}>Inner trap focus</Button>\n                                <Button onClick={trapToggle.deactivate}>Release</Button>\n                            </View>\n\n                            {innerTrapToggle.active && (\n                                <View\n                                    gap={4}\n                                    direction=\"row\"\n                                    padding={4}\n                                    backgroundColor=\"neutral-faded\"\n                                    borderRadius=\"medium\"\n                                    attributes={{ ref: innerRootRef }}\n                                >\n                                    <Button onClick={() => {}}>Action</Button>\n                                    <Button onClick={innerTrapToggle.deactivate}>Release</Button>\n                                </View>\n                            )}\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				},
+				{
+					"name": "mutationObserver",
+					"snippet": "const mutationObserver = () => {\n    const rootRef = React.useRef<HTMLDivElement>(null);\n    const trapToggle = useToggle();\n    const [mutated, setMutated] = React.useState(false);\n\n    React.useEffect(() => {\n        if (!trapToggle.active) return;\n        if (!rootRef.current) return;\n\n        const trapFocus = new TrapFocus();\n\n        trapFocus.trap(rootRef.current, {\n            mode: \"dialog\",\n        });\n\n        setTimeout(() => {\n            setMutated(true);\n        }, 50);\n\n        return () => trapFocus.release();\n    }, [trapToggle.active]);\n\n    return (\n        <Example>\n            <Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n                <View gap={4}>\n                    <View gap={4} direction=\"row\">\n                        <Button onClick={trapToggle.activate}>Trap focus</Button>\n                    </View>\n\n                    {trapToggle.active && (\n                        <View\n                            gap={4}\n                            direction=\"row\"\n                            padding={4}\n                            backgroundColor=\"neutral-faded\"\n                            borderRadius=\"medium\"\n                            attributes={{ ref: rootRef }}\n                        >\n                            {!mutated && (\n                                <>\n                                    <Button onClick={() => {}}>Action 1</Button>\n                                    <Button onClick={() => {}}>Action 2</Button>\n                                </>\n                            )}\n                            <Button onClick={() => {}}>Action 3</Button>\n                            <Button onClick={trapToggle.deactivate}>Release</Button>\n                        </View>\n                    )}\n                </View>\n            </Example.Item>\n        </Example>\n    );\n};"
+				}
+			],
+			"import": "import {\n    Button,\n    Example,\n    Link,\n    Radio,\n    RadioGroup,\n    Select,\n    TextArea,\n    TextField,\n    View,\n} from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n  16 | import { sleep } from \"utilities/helpers\";\n  17 |\n> 18 | export default {\n     | ^\n  19 | \ttitle: \"Utilities/TrapFocus\",\n  20 | };\n  21 |\n\n./src/utilities/a11y/tests/TrapFocus.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { expect, userEvent } from \"storybook/test\";\nimport { Example } from \"utilities/storybook\";\nimport Button from \"components/Button\";\nimport useToggle from \"hooks/useToggle\";\nimport View from \"components/View\";\nimport TextField from \"components/TextField\";\nimport RadioGroup from \"components/RadioGroup\";\nimport Radio from \"components/Radio\";\nimport * as keys from \"constants/keys\";\nimport TrapFocus from \"../TrapFocus\";\nimport Link from \"components/Link\";\nimport TextArea from \"components/TextArea\";\nimport Select from \"components/Select\";\nimport { sleep } from \"utilities/helpers\";\n\nexport default {\n\ttitle: \"Utilities/TrapFocus\",\n};\n\nconst TrapContent: React.FC<{\n\trootRef: React.RefObject<HTMLDivElement | null>;\n\tonRelease: () => void;\n}> = (props) => {\n\treturn (\n\t\t<View\n\t\t\tgap={4}\n\t\t\tdirection=\"row\"\n\t\t\tpadding={4}\n\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\tborderRadius=\"medium\"\n\t\t\tattributes={{ ref: props.rootRef }}\n\t\t>\n\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t<Button onClick={props.onRelease}>Release</Button>\n\t\t</View>\n\t);\n};\n\nexport const modeDialog: StoryObj = {\n\tname: \"mode: dialog\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, { mode: \"dialog\" });\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\"mode: dialog\", \"tab navigation, always stays inside until released\"]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View.Item>\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View.Item>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\t\tconst releaseTrigger = canvas.getAllByRole(\"button\")[3];\n\n\t\t// Test screen reader trap\n\t\t// All elements outside have aria-hidden so they're ignored\n\t\texpect(trapContentActions.includes(trigger)).toBeFalsy();\n\t\texpect(trapContentActions[0].parentNode?.previousSibling).toHaveAttribute(\"aria-hidden\");\n\n\t\texpect(releaseTrigger).toBeInTheDocument();\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\t// Doesn't use arrow keys\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Enter/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n\nexport const modeActionMenu: StoryObj = {\n\tname: \"mode: action-menu\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"action-menu\",\n\t\t\t\tonRelease: () => {\n\t\t\t\t\ttrapToggle.deactivate();\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\n\t\t\t\t\t\t\"mode: action-menu\",\n\t\t\t\t\t\t\"up/down arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t\t<Button onClick={() => {}}>Next trigger</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\t\t// const nextTrigger = canvas.getAllByRole(\"button\")[1];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\").slice(2);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.click(trigger);\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\n\t\tconsole.log(document.activeElement);\n\n\t\t// FIXME: Storybook moves focus to body\n\t\t// expect(document.activeElement).toBe(nextTrigger);\n\t},\n};\n\nexport const modeActionBar: StoryObj = {\n\tname: \"mode: action-bar\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"action-bar\",\n\t\t\t\tonRelease: () => {\n\t\t\t\t\ttrapToggle.deactivate();\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\n\t\t\t\t\t\t\"mode: action-bar\",\n\t\t\t\t\t\t\"left/right arrow navigation, tab and shift+tab release the focus and follows natural tab order\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t\t<Button onClick={() => {}}>Next trigger</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\t\t// const nextTrigger = canvas.getAllByRole(\"button\")[1];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\").slice(2);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.click(trigger);\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\n\t\tconsole.log(document.activeElement);\n\n\t\t// FIXME: Storybook moves focus to body\n\t\t// expect(document.activeElement).toBe(nextTrigger);\n\t},\n};\n\nexport const modeContentMenu: StoryObj = {\n\tname: \"mode: content-menu\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"content-menu\",\n\t\t\t\tonRelease: () => {\n\t\t\t\t\ttrapToggle.deactivate();\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item\n\t\t\t\t\ttitle={[\n\t\t\t\t\t\t\"mode: content-menu\",\n\t\t\t\t\t\t\"tab navigation, tabbing outside the content will trigger the release\",\n\t\t\t\t\t]}\n\t\t\t\t>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t\t<Button onClick={() => {}}>Next trigger</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\t\t// const nextTrigger = canvas.getAllByRole(\"button\")[1];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\").slice(2);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowRight/}\");\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{ArrowLeft/}\");\n\t\tawait userEvent.keyboard(\"{ArrowUp/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[3]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\t// await userEvent.keyboard(\"{Tab/}\");\n\t\t// await userEvent.keyboard(\"{Tab/}\");\n\n\t\t// FIXME: Storybook moves focus to body\n\t\t// expect(document.activeElement).toBe(nextTrigger);\n\t},\n};\n\nexport const includeTrigger: StoryObj = {\n\tname: \"includeTrigger\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t\tincludeTrigger: true,\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<TrapContent onRelease={trapToggle.deactivate} rootRef={rootRef} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Shift>}{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n\nexport const initialFocusEl: StoryObj = {\n\tname: \"initialFocusEl\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst initialFocusRef = React.useRef<HTMLButtonElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t\tinitialFocusEl: initialFocusRef.current,\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t\t\t\t\t<Button onClick={() => {}} attributes={{ ref: initialFocusRef }}>\n\t\t\t\t\t\t\t\t\tAction 2\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t\t\t\t\t\t<Button onClick={trapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\t},\n};\n\n/**\n * Testing edge cases\n */\n\nconst Editor = () => {\n\tconst pressedCountRef = React.useRef(0);\n\n\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n\t\tif (e.key !== keys.TAB) return;\n\n\t\tpressedCountRef.current += 1;\n\t\tif (pressedCountRef.current % 2) e.preventDefault();\n\t};\n\n\treturn (\n\t\t<View\n\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\tborderColor=\"neutral-faded\"\n\t\t\tborderRadius=\"medium\"\n\t\t\tpadding={4}\n\t\t\tattributes={{\n\t\t\t\tcontentEditable: true,\n\t\t\t\tonKeyDown: handleKeyDown,\n\t\t\t\t\"data-testid\": \"test-contenteditable\",\n\t\t\t}}\n\t\t/>\n\t);\n};\n\nexport const focusableElements: StoryObj = {\n\tname: \"test: focusable elements\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current);\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title=\"test with all types of focusable elements\">\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View.Item>\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Activate</Button>\n\t\t\t\t\t\t</View.Item>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t\talign=\"start\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Link href=\"#\" attributes={{ \"data-testid\": \"test-link\" }}>\n\t\t\t\t\t\t\t\t\tLink\n\t\t\t\t\t\t\t\t</Link>\n\n\t\t\t\t\t\t\t\t<TextField\n\t\t\t\t\t\t\t\t\tname=\"input\"\n\t\t\t\t\t\t\t\t\tplaceholder=\"Input\"\n\t\t\t\t\t\t\t\t\tinputAttributes={{ \"data-testid\": \"test-text-field\" }}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<TextArea name=\"textarea\" inputAttributes={{ \"data-testid\": \"test-text-area\" }} />\n\n\t\t\t\t\t\t\t\t<Select\n\t\t\t\t\t\t\t\t\tname=\"select\"\n\t\t\t\t\t\t\t\t\toptions={[\n\t\t\t\t\t\t\t\t\t\t{ label: \"Option 1\", value: \"1\" },\n\t\t\t\t\t\t\t\t\t\t{ label: \"Option 2\", value: \"2\" },\n\t\t\t\t\t\t\t\t\t]}\n\t\t\t\t\t\t\t\t\tinputAttributes={{ \"data-testid\": \"test-select\" }}\n\t\t\t\t\t\t\t\t/>\n\n\t\t\t\t\t\t\t\t<RadioGroup name=\"radio\">\n\t\t\t\t\t\t\t\t\t<Radio value=\"1\" inputAttributes={{ \"data-testid\": \"test-radio-1\" }}>\n\t\t\t\t\t\t\t\t\t\tOption 1\n\t\t\t\t\t\t\t\t\t</Radio>\n\t\t\t\t\t\t\t\t\t<Radio value=\"2\" inputAttributes={{ \"data-testid\": \"test-radio-2\" }}>\n\t\t\t\t\t\t\t\t\t\tOption 2\n\t\t\t\t\t\t\t\t\t</Radio>\n\t\t\t\t\t\t\t\t</RadioGroup>\n\n\t\t\t\t\t\t\t\t<Editor />\n\n\t\t\t\t\t\t\t\t<div tabIndex={0} role=\"button\" data-testid=\"test-tabindex\">\n\t\t\t\t\t\t\t\t\tdiv with tabIndex\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<div style={{ display: \"none\" }}>\n\t\t\t\t\t\t\t\t\t<Button onClick={() => {}} attributes={{ \"data-testid\": \"test-hidden-button\" }}>\n\t\t\t\t\t\t\t\t\t\tHidden\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={() => {}}\n\t\t\t\t\t\t\t\t\tattributes={{ tabIndex: -1, \"data-testid\": \"test-button-negative-tabindex\" }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tExcluded\n\t\t\t\t\t\t\t\t</Button>\n\n\t\t\t\t\t\t\t\t<input type=\"hidden\" data-testid=\"test-input-hidden\" />\n\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={trapToggle.deactivate}\n\t\t\t\t\t\t\t\t\tattributes={{ \"data-testid\": \"test-button\" }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tRelease button\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst link = canvas.getByTestId(\"test-link\");\n\t\tconst textField = canvas.getByTestId(\"test-text-field\");\n\t\tconst textArea = canvas.getByTestId(\"test-text-area\");\n\t\tconst select = canvas.getByTestId(\"test-select\");\n\t\tconst radio1 = canvas.getByTestId(\"test-radio-1\");\n\t\tconst radio2 = canvas.getByTestId(\"test-radio-2\");\n\t\tconst contentEditable = canvas.getByTestId(\"test-contenteditable\");\n\t\tconst tabIndex = canvas.getByTestId(\"test-tabindex\");\n\t\tconst negativeTabIndex = canvas.getByTestId(\"test-button-negative-tabindex\");\n\t\tconst hiddenButton = canvas.getByTestId(\"test-hidden-button\");\n\t\tconst button = canvas.getByTestId(\"test-button\");\n\n\t\texpect(document.activeElement).toBe(link);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(textField);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(textArea);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(select);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(radio1);\n\n\t\tawait userEvent.keyboard(\"{ArrowDown/}\");\n\t\texpect(document.activeElement).toBe(radio2);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(contentEditable);\n\n\t\t// Stays for the first tab press\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(contentEditable);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(tabIndex);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).not.toBe(negativeTabIndex);\n\t\texpect(document.activeElement).not.toBe(hiddenButton);\n\t\texpect(document.activeElement).toBe(button);\n\t},\n};\n\nexport const nested: StoryObj = {\n\tname: \"test: nested\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst innerRootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\t\tconst innerTrapToggle = useToggle();\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!innerTrapToggle.active) return;\n\t\t\tif (!innerRootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(innerRootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t});\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [innerTrapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"nested, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action</Button>\n\t\t\t\t\t\t\t\t\t<Button onClick={innerTrapToggle.activate}>Inner trap focus</Button>\n\t\t\t\t\t\t\t\t\t<Button onClick={trapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t\t\t{innerTrapToggle.active && (\n\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\t\t\tattributes={{ ref: innerRootRef }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action</Button>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={innerTrapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tconst trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\n\t\tawait userEvent.click(trapContentActions[1]);\n\n\t\tconst innerTrapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(innerTrapContentActions[0]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.click(innerTrapContentActions[1]);\n\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\n\t\tawait userEvent.keyboard(\"{Tab/}\");\n\t\tawait userEvent.click(trapContentActions[2]);\n\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n\nexport const mutationObserver: StoryObj = {\n\tname: \"test: mutation observer\",\n\trender: () => {\n\t\tconst rootRef = React.useRef<HTMLDivElement>(null);\n\t\tconst trapToggle = useToggle();\n\t\tconst [mutated, setMutated] = React.useState(false);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!trapToggle.active) return;\n\t\t\tif (!rootRef.current) return;\n\n\t\t\tconst trapFocus = new TrapFocus();\n\n\t\t\ttrapFocus.trap(rootRef.current, {\n\t\t\t\tmode: \"dialog\",\n\t\t\t});\n\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetMutated(true);\n\t\t\t}, 50);\n\n\t\t\treturn () => trapFocus.release();\n\t\t}, [trapToggle.active]);\n\n\t\treturn (\n\t\t\t<Example>\n\t\t\t\t<Example.Item title={[\"includeTrigger, mode: dialog\"]}>\n\t\t\t\t\t<View gap={4}>\n\t\t\t\t\t\t<View gap={4} direction=\"row\">\n\t\t\t\t\t\t\t<Button onClick={trapToggle.activate}>Trap focus</Button>\n\t\t\t\t\t\t</View>\n\n\t\t\t\t\t\t{trapToggle.active && (\n\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\tgap={4}\n\t\t\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\t\t\tpadding={4}\n\t\t\t\t\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\t\t\t\t\tborderRadius=\"medium\"\n\t\t\t\t\t\t\t\tattributes={{ ref: rootRef }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{!mutated && (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 1</Button>\n\t\t\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 2</Button>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<Button onClick={() => {}}>Action 3</Button>\n\t\t\t\t\t\t\t\t<Button onClick={trapToggle.deactivate}>Release</Button>\n\t\t\t\t\t\t\t</View>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</View>\n\t\t\t\t</Example.Item>\n\t\t\t</Example>\n\t\t);\n\t},\n\tplay: async ({ canvas }) => {\n\t\tconst trigger = canvas.getAllByRole(\"button\")[0];\n\n\t\tawait userEvent.click(trigger);\n\n\t\tlet trapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\tawait sleep(100);\n\n\t\ttrapContentActions = canvas.getAllByRole(\"button\");\n\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\t// Check that trap still works after mutation\n\t\tawait userEvent.keyboard(\"{Tab}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[1]);\n\n\t\tawait userEvent.keyboard(\"{Tab}\");\n\t\texpect(document.activeElement).toBe(trapContentActions[0]);\n\n\t\t// Check that it still knows about the original trigger\n\t\tawait userEvent.click(trapContentActions[1]);\n\t\texpect(document.activeElement).toBe(trigger);\n\t},\n};\n"
+			}
+		},
+		"internal-portal": {
+			"id": "internal-portal",
+			"name": "Portal",
+			"path": "./src/components/_private/Portal/tests/Portal.stories.tsx",
+			"stories": [
+				{
+					"name": "base",
+					"snippet": "const base = () => {\n\tconst ref = React.useRef<HTMLDivElement>(null);\n\tconst [mounted, setMounted] = React.useState(false);\n\n\tReact.useEffect(() => {\n\t\tsetMounted(true);\n\t}, []);\n\n\treturn (\n\t\t<>\n\t\t\t<div style={{ border: \"2px solid #333\", padding: 16 }}>\n\t\t\t\tApp\n\t\t\t\t{mounted && <Portal targetRef={ref}>Ported to green</Portal>}\n\t\t\t</div>\n\t\t\t<div ref={ref} style={{ border: \"2px solid green\", padding: 16 }} />\n\t\t</>\n\t);\n};"
+				}
+			],
+			"import": "import { Portal } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component definition found",
+				"message": "File: /Users/shilman/projects/design-systems/reshaped/src/components/_private/Portal/index.ts\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport Portal, { PortalScope } from \"./Portal\";\n\nconst PortalRoot = Portal as typeof Portal & {\n\tScope: typeof PortalScope;\n};\n\nPortalRoot.Scope = PortalScope;\n\nexport default PortalRoot;\nexport type { Props as PortalProps } from \"./Portal.types\";\n\n\nFile: /Users/shilman/projects/design-systems/reshaped/src/components/_private/Portal/Portal.types.ts\nError:\nNo suitable component definition found.\nYou can debug your component file in this playground: https://react-docgen.dev/playground\nCode:\nimport React from \"react\";\n\nexport type Props = {\n\tchildren?: React.ReactNode;\n\ttargetRef?: React.RefObject<HTMLElement | ShadowRoot | null>;\n};\n\nexport type ScopeProps<T extends HTMLElement> = {\n\tchildren: (ref: React.RefObject<T | null>) => React.ReactNode;\n};\n\nexport type Context = {\n\tscopeRef: React.RefObject<HTMLElement | null>;\n};\n"
+			}
+		},
+		"internal-usedrag": {
+			"id": "internal-usedrag",
+			"name": "useDrag",
+			"path": "./src/hooks/tests/useDrag.stories.tsx",
+			"stories": [
+				{ "name": "base", "snippet": "const base = () => <Example />;" },
+				{
+					"name": "mouseEvents",
+					"snippet": "const mouseEvents = () => {\n    return <Demo onDrag={fn()} />;\n};"
+				},
+				{
+					"name": "touchEvents",
+					"snippet": "const touchEvents = () => {\n    return <Demo onDrag={fn()} />;\n};"
+				},
+				{
+					"name": "orientationHorizontal",
+					"snippet": "const orientationHorizontal = () => {\n    return <Demo onDrag={fn()} orientation=\"horizontal\" />;\n};"
+				},
+				{
+					"name": "orientationVertical",
+					"snippet": "const orientationVertical = () => {\n    return <Demo onDrag={fn()} orientation=\"vertical\" />;\n};"
+				},
+				{
+					"name": "disabled",
+					"snippet": "const disabled = () => {\n    return <Demo onDrag={fn()} disabled />;\n};"
+				}
+			],
+			"import": "import { Button, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n   7 | import Button from \"components/Button\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Internal/useDrag\",\n  11 | \tparameters: {\n  12 | \t\tchromatic: { disableSnapshot: true },\n\n./src/hooks/tests/useDrag.stories.tsx:\nimport React from \"react\";\nimport { StoryObj } from \"@storybook/react-vite\";\nimport { fireEvent, fn, expect } from \"storybook/test\";\nimport View from \"components/View\";\nimport useDrag from \"hooks/_private/useDrag\";\nimport useToggle from \"hooks/useToggle\";\nimport Button from \"components/Button\";\n\nexport default {\n\ttitle: \"Internal/useDrag\",\n\tparameters: {\n\t\tchromatic: { disableSnapshot: true },\n\t},\n};\n\nfunction Example() {\n\tconst [state, setState] = React.useState({ x: 0, y: 0 });\n\tconst disabledToggle = useToggle();\n\n\tconst { ref, containerRef, active } = useDrag<HTMLDivElement>(\n\t\t(args) => {\n\t\t\tsetState(args);\n\t\t},\n\t\t{\n\t\t\tdisabled: disabledToggle.active,\n\t\t}\n\t);\n\n\treturn (\n\t\t<View direction=\"row\" gap={4}>\n\t\t\t<View\n\t\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\t\tborderRadius=\"medium\"\n\t\t\t\twidth=\"200px\"\n\t\t\t\theight=\"200px\"\n\t\t\t\tattributes={{ ref: containerRef }}\n\t\t\t>\n\t\t\t\t<View\n\t\t\t\t\theight={8}\n\t\t\t\t\twidth={8}\n\t\t\t\t\tborderRadius=\"small\"\n\t\t\t\t\tanimated\n\t\t\t\t\tbackgroundColor={active ? \"primary\" : \"neutral\"}\n\t\t\t\t\tattributes={{\n\t\t\t\t\t\trole: \"button\",\n\t\t\t\t\t\ttabIndex: 0,\n\t\t\t\t\t\t\"aria-label\": \"Drag\",\n\t\t\t\t\t\tref,\n\t\t\t\t\t\tstyle: { translate: `${state.x}px ${state.y}px`, cursor: active ? \"grabbing\" : \"grab\" },\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</View>\n\t\t\t<Button onClick={() => disabledToggle.toggle()}>\n\t\t\t\t{disabledToggle.active ? \"Enable\" : \"Disable\"}\n\t\t\t</Button>\n\t\t</View>\n\t);\n}\n\nexport const base = { name: \"base\", render: () => <Example /> };\n\nconst Demo: React.FC<{\n\tonDrag: ReturnType<typeof fn>;\n\tdisabled?: boolean;\n\torientation?: \"horizontal\" | \"vertical\";\n}> = (props) => {\n\tconst { ref, containerRef } = useDrag<HTMLDivElement>(\n\t\t(options) => {\n\t\t\tprops.onDrag(options);\n\t\t},\n\t\t{\n\t\t\torientation: props.orientation,\n\t\t\tdisabled: props.disabled,\n\t\t}\n\t);\n\n\treturn (\n\t\t<View\n\t\t\tbackgroundColor=\"neutral-faded\"\n\t\t\twidth=\"200px\"\n\t\t\theight=\"200px\"\n\t\t\tattributes={{ ref: containerRef, \"data-testid\": \"test-id\" }}\n\t\t>\n\t\t\t<View\n\t\t\t\theight={8}\n\t\t\t\twidth={8}\n\t\t\t\tbackgroundColor=\"primary\"\n\t\t\t\tattributes={{\n\t\t\t\t\t\"data-testid\": \"test-handle-id\",\n\t\t\t\t\tref,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</View>\n\t);\n};\n\nexport const mouseEvents: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"onDrag, mouse events\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));\n\n\t\tfireEvent.mouseUp(trigger);\n\t\tfireEvent.mouseUp(document.body, { clientX: 50, clientY: 100 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const touchEvents: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"onDrag, touch events\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst createTouch = (target: HTMLElement, x: number, y: number) => {\n\t\t\treturn new Touch({\n\t\t\t\tidentifier: Date.now(),\n\t\t\t\ttarget,\n\t\t\t\tclientX: x,\n\t\t\t\tclientY: y,\n\t\t\t\tscreenX: x,\n\t\t\t\tscreenY: y,\n\t\t\t\tpageX: x,\n\t\t\t\tpageY: y,\n\t\t\t});\n\t\t};\n\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.touchStart(trigger, { changedTouches: [createTouch(trigger, 0, 0)] });\n\t\tfireEvent.touchMove(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 50 }));\n\n\t\tfireEvent.touchEnd(trigger);\n\t\tfireEvent.touchEnd(document.body, { changedTouches: [createTouch(trigger, 100, 50)] });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t},\n};\n\nexport const orientationHorizontal: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"orientation horizontal\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} orientation=\"horizontal\" />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 100, y: 0 }));\n\t},\n};\n\nexport const orientationVertical: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"orientation vertical\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} orientation=\"vertical\" />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(1);\n\t\texpect(args.handleDrag).toHaveBeenCalledWith(expect.objectContaining({ x: 0, y: 50 }));\n\t},\n};\n\nexport const disabled: StoryObj<{ handleDrag: ReturnType<typeof fn> }> = {\n\tname: \"disabled\",\n\targs: {\n\t\thandleDrag: fn(),\n\t},\n\trender: (args) => {\n\t\treturn <Demo onDrag={args.handleDrag} disabled />;\n\t},\n\tplay: ({ canvas, args }) => {\n\t\tconst trigger = canvas.getByTestId(\"test-handle-id\");\n\n\t\tfireEvent.mouseDown(trigger);\n\t\tfireEvent.mouseMove(document.body, { clientX: 100, clientY: 50 });\n\n\t\texpect(args.handleDrag).toHaveBeenCalledTimes(0);\n\t},\n};\n"
+			}
+		},
+		"internal-shadowdom": {
+			"id": "internal-shadowdom",
+			"name": "ShadowDOM",
+			"path": "./src/tests/ShadowDOM.stories.tsx",
+			"stories": [
+				{
+					"name": "behavior",
+					"snippet": "const behavior = () => (\n\t<Example>\n\t\t<Example.Item title=\"base\">\n\t\t\t<Component />\n\t\t</Example.Item>\n\t</Example>\n);"
+				}
+			],
+			"import": "import {\n    Autocomplete,\n    Button,\n    DropdownMenu,\n    Example,\n    Reshaped,\n    Select,\n    Tooltip,\n    View,\n} from \"reshaped\";\nimport root from \"react-shadow\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n  10 | import Tooltip from \"components/Tooltip\";\n  11 |\n> 12 | export default {\n     | ^\n  13 | \ttitle: \"Internal/ShadowDOM\",\n  14 | };\n  15 |\n\n./src/tests/ShadowDOM.stories.tsx:\nimport React, { useEffect, useState, useRef, forwardRef } from \"react\";\nimport root from \"react-shadow\";\nimport { Example } from \"utilities/storybook\";\nimport Autocomplete, { type AutocompleteProps } from \"components/Autocomplete\";\nimport View from \"components/View\";\nimport DropdownMenu from \"components/DropdownMenu\";\nimport Reshaped from \"components/Reshaped\";\nimport Select from \"components/Select\";\nimport Button from \"components/Button\";\nimport Tooltip from \"components/Tooltip\";\n\nexport default {\n\ttitle: \"Internal/ShadowDOM\",\n};\n\nconst getStylesData = () => {\n\tconst sourceStylesContainer = document.head;\n\n\treturn Array.from(sourceStylesContainer.children).filter((x) => x instanceof HTMLStyleElement);\n};\n\n// Create a component to render inside the Shadow DOM\nconst ShadowDiv = forwardRef<HTMLDivElement, React.PropsWithChildren>((props, ref) => {\n\tconst shadowRef = useRef<HTMLDivElement>(null);\n\n\t// Load styles\n\tuseEffect(() => {\n\t\tif (!shadowRef?.current) return;\n\n\t\t// Add styles to the shadow DOM\n\t\t// const shadowEl = shadowRef?.current.shadowRoot;\n\t\tconst shadowEl = shadowRef?.current.shadowRoot;\n\n\t\tif (!shadowEl) return;\n\n\t\tconst sourceStylesContainer = document.head;\n\n\t\tconst observer = new MutationObserver(getStylesData);\n\t\tobserver.observe(sourceStylesContainer, {\n\t\t\tcharacterData: true,\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t});\n\n\t\tlet styleBlock = shadowEl.getElementById(\"custom-outer-style\");\n\n\t\tif (!styleBlock) {\n\t\t\tstyleBlock = document.createElement(\"span\");\n\t\t\tstyleBlock.id = \"custom-outer-style\";\n\t\t\tshadowEl.appendChild(styleBlock);\n\t\t} else {\n\t\t\tstyleBlock.innerHTML = \"\";\n\t\t}\n\n\t\tstyleBlock.append(\n\t\t\t...getStylesData() // finds all <style> tags containing your web component ID\n\t\t\t\t.map((x) => x.cloneNode(true)) // copies styles into the current instance of your web component. You might need to have multiple instances, so all of them need to track the styles.\n\t\t);\n\n\t\treturn () => observer.disconnect();\n\t}, []);\n\n\treturn (\n\t\t<Reshaped>\n\t\t\t<root.div className=\"quote\" ref={shadowRef}>\n\t\t\t\t<div ref={ref}>\n\t\t\t\t\t{/* \n\t\t\t\t\t\tAdding padding here since otherwise mouseenter won't trigger on contents \n\t\t\t\t\t\twhen mouse is switching from outside the shadow dom\n\t\t\t\t\t*/}\n\t\t\t\t\t<View padding={4}>{props.children}</View>\n\t\t\t\t</div>\n\t\t\t</root.div>\n\t\t</Reshaped>\n\t);\n});\n\n// Main Component\nconst Component: React.FC = () => {\n\tconst [valueAutoShadow, setValueAutoShadow] = useState(\"\");\n\tconst [valueDropdownShadow, setValueDropdownShadow] = useState(\"\");\n\n\tconst optionsAuto = [\"Pizza\", \"Pie\", \"Ice-cream\"];\n\tconst optionsDropdown = [\"Turtle\", \"Cat\", \"Long-necked giraffe\"];\n\n\tconst handleChangeAutoShadow: AutocompleteProps[\"onChange\"] = (args) => {\n\t\tconsole.log(\"Autocomlete shadow value=\", args);\n\t\tsetValueAutoShadow(args.value);\n\t};\n\n\tconst handleChangeDropdownShadow = (val: string) => {\n\t\tconsole.log(\"Dropdown shadow value=\", val);\n\t\tsetValueDropdownShadow(val);\n\t};\n\n\treturn (\n\t\t<View paddingBottom={50}>\n\t\t\t<ShadowDiv>\n\t\t\t\t<View gap={4} direction=\"row\" wrap={false}>\n\t\t\t\t\t<Autocomplete\n\t\t\t\t\t\tname=\"fruit-shadow\"\n\t\t\t\t\t\tplaceholder=\"Pick your food\"\n\t\t\t\t\t\tvalue={valueAutoShadow}\n\t\t\t\t\t\tonChange={handleChangeAutoShadow}\n\t\t\t\t\t\tinputAttributes={{ \"aria-label\": \"Label\" }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{optionsAuto.map((option) => (\n\t\t\t\t\t\t\t<Autocomplete.Item\n\t\t\t\t\t\t\t\tkey={option}\n\t\t\t\t\t\t\t\tvalue={option}\n\t\t\t\t\t\t\t\tonClick={() => handleChangeAutoShadow({ value: option, name: \"fruit-auto\" })}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t</Autocomplete.Item>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Autocomplete>\n\n\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t<DropdownMenu.Trigger>\n\t\t\t\t\t\t\t{(attributes) => (\n\t\t\t\t\t\t\t\t<Select placeholder=\"Pick your animal\" name=\"font\" inputAttributes={attributes}>\n\t\t\t\t\t\t\t\t\t{valueDropdownShadow}\n\t\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</DropdownMenu.Trigger>\n\t\t\t\t\t\t<DropdownMenu.Content>\n\t\t\t\t\t\t\t{optionsDropdown.map((option) => (\n\t\t\t\t\t\t\t\t<DropdownMenu.Item onClick={() => handleChangeDropdownShadow(option)} key={option}>\n\t\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t\t</DropdownMenu.Item>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</DropdownMenu.Content>\n\t\t\t\t\t</DropdownMenu>\n\n\t\t\t\t\t<Tooltip text=\"Tooltip for button\">\n\t\t\t\t\t\t{(attributes) => <Button attributes={attributes}>Hover me</Button>}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t</View>\n\t\t\t</ShadowDiv>\n\t\t</View>\n\t);\n};\n\nexport const behavior = () => (\n\t<Example>\n\t\t<Example.Item title=\"base\">\n\t\t\t<Component />\n\t\t</Example.Item>\n\t</Example>\n);\n"
+			}
+		},
+		"internal-themes": {
+			"id": "internal-themes",
+			"name": "Themes",
+			"path": "./src/tests/themes.stories.tsx",
+			"stories": [
+				{
+					"name": "test",
+					"snippet": "const test = () => {\n\tconst { colorMode } = useTheme();\n\tconst [activeColor, setColor] = useState(colors[0]);\n\tconst [theme, setTheme] = useState(\"\");\n\tconst [algo, setAlgo] = useState<\"wcag\" | \"apca\">(\"wcag\");\n\n\tuseLayoutEffect(() => {\n\t\tsetTheme(\n\t\t\tgetThemeCSS(\n\t\t\t\t\"test\",\n\t\t\t\t{\n\t\t\t\t\tcolor: generateThemeColors({\n\t\t\t\t\t\tprimary: activeColor === colors[0] ? undefined : activeColor,\n\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcolorContrastAlgorithm: algo,\n\t\t\t\t}\n\t\t\t)\n\t\t);\n\t}, [activeColor, algo]);\n\n\treturn (\n\t\t<>\n\t\t\t<style>{theme}</style>\n\t\t\t<Theme name=\"test\">\n\t\t\t\t<View gap={4}>\n\t\t\t\t\t<View direction=\"row\" align=\"center\" gap={4}>\n\t\t\t\t\t\t{colors.map((color) => {\n\t\t\t\t\t\t\tconst hex = colorMode === \"dark\" && color === \"#000000\" ? \"#ffffff\" : color;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Actionable key={color} onClick={() => setColor(color)} borderRadius=\"inherit\">\n\t\t\t\t\t\t\t\t\t<View\n\t\t\t\t\t\t\t\t\t\twidth={5}\n\t\t\t\t\t\t\t\t\t\theight={5}\n\t\t\t\t\t\t\t\t\t\tborderRadius=\"circular\"\n\t\t\t\t\t\t\t\t\t\tattributes={{\n\t\t\t\t\t\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t\t\t\t\t\ttransition: `box-shadow var(--rs-duration-fast) var(--rs-easing-standard)`,\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: hex,\n\t\t\t\t\t\t\t\t\t\t\t\tboxShadow:\n\t\t\t\t\t\t\t\t\t\t\t\t\tcolor === activeColor\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? `0 0 0 3px var(--rs-color-background-elevation-base), 0 0 0 5px ${hex}`\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Actionable>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t<View.Item gapBefore=\"auto\">\n\t\t\t\t\t\t\t<Switch name=\"algo\" onChange={(args) => setAlgo(args.checked ? \"apca\" : \"wcag\")}>\n\t\t\t\t\t\t\t\tUse APCA\n\t\t\t\t\t\t\t</Switch>\n\t\t\t\t\t\t</View.Item>\n\t\t\t\t\t</View>\n\n\t\t\t\t\t<ThemePlayground />\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</>\n\t);\n};"
+				},
+				{
+					"name": "base",
+					"snippet": "const base = () => (\n\t<Example>\n\t\t<Example.Item title=\"custom runtime theme\">\n\t\t\t<style>{css}</style>\n\t\t\t<Theme name=\"green\">\n\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"on colors generation\">\n\t\t\t<style>{css2}</style>\n\t\t\t<Theme name=\"peach\">\n\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t</Example>\n);"
+				},
+				{
+					"name": "generation",
+					"snippet": "const generation = () => (\n\t<div>\n\t\t<style>{cssGenerated}</style>\n\t\t<Theme name=\"generated\">{componentExamples}</Theme>\n\t</div>\n);"
+				},
+				{
+					"name": "onColors",
+					"snippet": "const onColors = () => (\n\t<Example>\n\t\t<Example.Item title=\"custom on color values\">\n\t\t\t<style>{onColorsCss}</style>\n\t\t\t<Theme name=\"on-color\">\n\t\t\t\t<View gap={2} direction=\"row\">\n\t\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t\t\t<Button color=\"critical\">Critical button</Button>\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t\t<Example.Item title=\"custom on color values, apca\">\n\t\t\t<style>{onColorsCssApca}</style>\n\t\t\t<Theme name=\"on-color-apca\">\n\t\t\t\t<View gap={2} direction=\"row\">\n\t\t\t\t\t<Button color=\"primary\">Primary button</Button>\n\t\t\t\t\t<Button color=\"critical\">Critical button</Button>\n\t\t\t\t</View>\n\t\t\t</Theme>\n\t\t</Example.Item>\n\t</Example>\n);"
+				}
+			],
+			"import": "import {\n    Actionable,\n    Alert,\n    Avatar,\n    Badge,\n    Button,\n    Card,\n    DropdownMenu,\n    Example,\n    Link,\n    Switch,\n    Text,\n    TextField,\n    Theme,\n    ThemePlayground,\n    View,\n} from \"reshaped\";",
+			"jsDocTags": {},
+			"reactDocgen": {
+				"description": "",
+				"methods": [],
+				"displayName": "Theme",
+				"definedInFile": "/Users/shilman/projects/design-systems/reshaped/src/components/Theme/Theme.tsx",
+				"actualName": "Theme",
+				"exportName": "default"
+			}
+		},
+		"sandbox": {
+			"id": "sandbox",
+			"name": "Sandbox",
+			"path": "./src/Sandbox.stories.tsx",
+			"stories": [
+				{
+					"name": "preview",
+					"snippet": "const preview = () => {\n\treturn (\n\t\t<Preview>\n\t\t\t<Component />\n\t\t</Preview>\n\t);\n};"
+				}
+			],
+			"import": "import { Image, MenuItem, Modal, Select, View } from \"reshaped\";",
+			"jsDocTags": {},
+			"error": {
+				"name": "No component found",
+				"message": "We could not detect the component from your story file. Specify meta.component.\n   7 | import MenuItem from \"components/MenuItem\";\n   8 |\n>  9 | export default {\n     | ^\n  10 | \ttitle: \"Sandbox\",\n  11 | \tchromatic: { disableSnapshot: true },\n  12 | };\n\n./src/Sandbox.stories.tsx:\nimport View from \"components/View\";\nimport Image from \"components/Image\";\nimport React from \"react\";\nimport Select from \"components/Select\";\nimport useToggle from \"hooks/useToggle\";\nimport Modal from \"components/Modal\";\nimport MenuItem from \"components/MenuItem\";\n\nexport default {\n\ttitle: \"Sandbox\",\n\tchromatic: { disableSnapshot: true },\n};\n\nconst Preview: React.FC<{ children: React.ReactNode }> = (props) => {\n\treturn (\n\t\t<View padding={20} gap={6}>\n\t\t\t<View position=\"absolute\" insetTop={0} insetStart={0}>\n\t\t\t\t<Image src=\"./logo.svg\" />\n\t\t\t</View>\n\n\t\t\t{props.children}\n\t\t</View>\n\t);\n};\n\nexport const preview = () => {\n\treturn (\n\t\t<Preview>\n\t\t\t<Component />\n\t\t</Preview>\n\t);\n};\n\nconst Component = () => {\n\tconst toggle = useToggle();\n\tconst [value, setValue] = React.useState(\"Dog\");\n\n\tconst handleClick = () => {\n\t\ttoggle.toggle();\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<Select name=\"animal\" placeholder=\"Select an animal\" onClick={handleClick}>\n\t\t\t\t{value}\n\t\t\t</Select>\n\t\t\t<Modal active={toggle.active} onClose={toggle.deactivate} position=\"bottom\" padding={2}>\n\t\t\t\t<MenuItem\n\t\t\t\t\troundedCorners\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetValue(\"Dog\");\n\t\t\t\t\t\ttoggle.deactivate();\n\t\t\t\t\t}}\n\t\t\t\t\tattributes={{\n\t\t\t\t\t\trole: \"option\",\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tDog\n\t\t\t\t</MenuItem>\n\t\t\t\t<MenuItem\n\t\t\t\t\troundedCorners\n\t\t\t\t\tattributes={{\n\t\t\t\t\t\trole: \"option\",\n\t\t\t\t\t}}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tsetValue(\"Turtle\");\n\t\t\t\t\t\ttoggle.deactivate();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\tTurtle\n\t\t\t\t</MenuItem>\n\t\t\t</Modal>\n\t\t</>\n\t);\n};\n"
+			}
+		}
+	}
+}