reshaped 2.8.3 → 2.9.0

package/components/ScrollArea/tests/ScrollArea.stories.js

@@ -0,0 +1,115 @@
+import { useRef } from "react";
+import { Example } from "../../../utilities/storybook/index.js";
+import ScrollArea from "../index.js";
+import View from "../../View/index.js";
+import Button from "../../Button/index.js";
+export default {
+    title: "Utilities/ScrollArea",
+    component: ScrollArea,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/scroll-area",
+        },
+    },
+};
+const Demo = () => {
+    const ref = useRef(null);
+    return (<View gap={4}>
+			<Button onClick={() => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ top: 100, behavior: "smooth" }); }}>
+				Scroll
+			</Button>
+			<ScrollArea height="100px" scrollbarDisplay="visible" ref={ref}>
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</View>);
+};
+export const direction = () => (<Example>
+		<Example.Item title="vertical">
+			<ScrollArea height="100px" scrollbarDisplay="visible">
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+		<Example.Item title="horizontal">
+			<ScrollArea height="120px" scrollbarDisplay="visible">
+				<View backgroundColor="neutral-faded" padding={4} width="500px">
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s
+				</View>
+			</ScrollArea>
+		</Example.Item>
+		<Example.Item title="both directions">
+			<ScrollArea height="100px" scrollbarDisplay="visible">
+				<View backgroundColor="neutral-faded" padding={4} width="500px">
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+	</Example>);
+export const visibility = () => (<Example>
+		<Example.Item title="visibility: hover">
+			<ScrollArea height="100px">
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+		<Example.Item title="visibility: hidden">
+			<ScrollArea height="100px" scrollbarDisplay="hidden">
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+		<Example.Item title="visibility: visible">
+			<ScrollArea height="100px" scrollbarDisplay="visible">
+				<View backgroundColor="neutral-faded" padding={4}>
+					Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
+					been the industry's standard dummy text ever since the 1500s, when an unknown printer took
+					a galley of type and scrambled it to make a type specimen book. It has survived not only
+					five centuries, but also the leap into electronic typesetting, remaining essentially
+					unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+					Lorem Ipsum passages, and more recently with desktop publishing software like Aldus
+					PageMaker including versions of Lorem Ipsum.
+				</View>
+			</ScrollArea>
+		</Example.Item>
+	</Example>);
+export const ref = () => (<Example>
+		<Example.Item title="external ref">
+			<Demo />
+		</Example.Item>
+	</Example>);

package/components/Select/tests/Select.stories.d.ts

@@ -1,14 +1,19 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").SelectProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const selection: () => React.JSX.Element;
-export declare const variants: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const disabled: () => React.JSX.Element;
-export declare const error: () => React.JSX.Element;
-export declare const icon: () => React.JSX.Element;
-export declare const slots: () => React.JSX.Element;
-export declare const triggerComposition: () => React.JSX.Element;
-export declare const formControl: () => React.JSX.Element;
+export declare const selection: () => import("react").JSX.Element;
+export declare const variants: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const disabled: () => import("react").JSX.Element;
+export declare const error: () => import("react").JSX.Element;
+export declare const icon: () => import("react").JSX.Element;
+export declare const slots: () => import("react").JSX.Element;
+export declare const triggerComposition: () => import("react").JSX.Element;
+export declare const formControl: () => import("react").JSX.Element;

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

@@ -1,11 +1,18 @@
-import React from "react";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import IconZap from "../../../icons/Zap.js";
 import Select from "../index.js";
 import View from "../../View/index.js";
 import DropdownMenu from "../../DropdownMenu/DropdownMenu.js";
 import FormControl from "../../FormControl/index.js";
-export default { title: "Components/Select" };
+export default {
+    title: "Components/Select",
+    component: Select,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/select",
+        },
+    },
+};
 export const selection = () => (<Example>
 		<Example.Item title="unselected, placeholder">
 			<Select name="animal" placeholder="Select an animal" inputAttributes={{ "aria-label": "test select" }} options={[

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

@@ -1,7 +1,12 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").SkeletonProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const variant: () => React.JSX.Element;
-export declare const radius: () => React.JSX.Element;
+export declare const variant: () => import("react").JSX.Element;
+export declare const radius: () => import("react").JSX.Element;

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

@@ -1,7 +1,14 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Skeleton from "../index.js";
-export default { title: "Components/Skeleton" };
+export default {
+    title: "Components/Skeleton",
+    component: Skeleton,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/skeleton",
+        },
+    },
+};
 export const variant = () => (<Example>
 		<Example.Item title="text">
 			<Skeleton />

package/components/Slider/SliderControlled.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/helpers.js";
+import { enableUserSelect, disableUserSelect } from "../../utilities/dom.js";
 import useRTL from "../../hooks/useRTL.js";
 import useElementId from "../../hooks/useElementId.js";
 import { useFormControl } from "../FormControl/index.js";
@@ -94,6 +95,7 @@ const SliderControlled = (props) => {
             handleMinChange(nextValue);
         if (closestId === maxId)
             handleMaxChange(nextValue);
+        disableUserSelect();
         setDraggingId(closestId);
     };
     const handleMinDragStart = () => {
@@ -113,6 +115,7 @@ const SliderControlled = (props) => {
         if (draggingId === maxId) {
             handleMaxChange(maxValue, { commit: true });
         }
+        enableUserSelect();
         setDraggingId(null);
     }, [minValue, maxValue, handleMinChange, handleMaxChange, draggingId, minId, maxId]);
     const handleDrag = React.useCallback((e) => {

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

@@ -1,10 +1,15 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").SliderProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const base: () => React.JSX.Element;
-export declare const boundaries: () => React.JSX.Element;
-export declare const status: () => React.JSX.Element;
-export declare const customRender: () => React.JSX.Element;
-export declare const formControl: () => React.JSX.Element;
+export declare const base: () => import("react").JSX.Element;
+export declare const boundaries: () => import("react").JSX.Element;
+export declare const status: () => import("react").JSX.Element;
+export declare const customRender: () => import("react").JSX.Element;
+export declare const formControl: () => import("react").JSX.Element;

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

@@ -1,8 +1,15 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Slider from "../index.js";
 import FormControl from "../../FormControl/index.js";
-export default { title: "Components/Slider" };
+export default {
+    title: "Components/Slider",
+    component: Slider,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/slider",
+        },
+    },
+};
 export const base = () => (<Example>
 		<Example.Item title="single">
 			<Slider name="slider" defaultValue={30}/>

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

@@ -1,6 +1,15 @@
 import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").StepperProps): React.JSX.Element;
+        Item: (_: import("../Stepper.types").ItemProps) => null;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
 export declare const direction: () => React.JSX.Element;

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

@@ -3,7 +3,15 @@ import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Stepper from "../index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
-export default { title: "Components/Stepper" };
+export default {
+    title: "Components/Stepper",
+    component: Stepper,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/stepper",
+        },
+    },
+};
 const Demo = (props) => {
     var _a;
     const [activeId, setActiveId] = React.useState((_a = props.activeId) !== null && _a !== void 0 ? _a : 1);

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

@@ -1,9 +1,14 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").SwitchProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const selection: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const label: () => React.JSX.Element;
-export declare const disabled: () => React.JSX.Element;
+export declare const selection: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const label: () => import("react").JSX.Element;
+export declare const disabled: () => import("react").JSX.Element;

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

@@ -1,7 +1,14 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Switch from "../index.js";
-export default { title: "Components/Switch" };
+export default {
+    title: "Components/Switch",
+    component: Switch,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/switch",
+        },
+    },
+};
 export const selection = () => (<Example>
 		<Example.Item title="unselected">
 			<Switch name="active" inputAttributes={{ "aria-label": "test switch" }}/>

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

@@ -1,6 +1,19 @@
 import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").TableProps): React.JSX.Element;
+        Cell: (props: import("../Table.types").CellProps) => React.JSX.Element;
+        Heading: (props: import("../Table.types").HeadingProps) => React.JSX.Element;
+        Row: (props: import("../Table.types").RowProps) => React.JSX.Element;
+        Body: (props: import("../Table.types").BodyProps) => React.JSX.Element;
+        Head: (props: import("../Table.types").HeadProps) => React.JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
 export declare const layout: () => React.JSX.Element;

package/components/Table/tests/Table.stories.js

@@ -3,7 +3,15 @@ import { Example } from "../../../utilities/storybook/index.js";
 import Table from "../index.js";
 import Checkbox from "../../Checkbox/index.js";
 import Card from "../../Card/index.js";
-export default { title: "Components/Table" };
+export default {
+    title: "Components/Table",
+    component: Table,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/table",
+        },
+    },
+};
 export const layout = () => (<Example>
 		<Example.Item title="base">
 			<Table>

package/components/Tabs/tests/Tabs.stories.d.ts

@@ -1,14 +1,24 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").TabsProps): import("react").JSX.Element;
+        Item: import("react").ForwardRefExoticComponent<import("./..").TabsItemProps & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+        List: (props: import("../Tabs.types").ListProps) => import("react").JSX.Element;
+        Panel: (props: import("../Tabs.types").PanelProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const variant: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const direction: () => React.JSX.Element;
-export declare const composition: () => React.JSX.Element;
-export declare const icon: () => React.JSX.Element;
-export declare const equalWidth: () => React.JSX.Element;
-export declare const selection: () => React.JSX.Element;
-export declare const navigation: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
+export declare const variant: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const direction: () => import("react").JSX.Element;
+export declare const composition: () => import("react").JSX.Element;
+export declare const icon: () => import("react").JSX.Element;
+export declare const equalWidth: () => import("react").JSX.Element;
+export declare const selection: () => import("react").JSX.Element;
+export declare const navigation: () => import("react").JSX.Element;
+export declare const edgeCases: () => import("react").JSX.Element;

package/components/Tabs/tests/Tabs.stories.js

@@ -1,9 +1,16 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Tabs from "../index.js";
 import View from "../../View/index.js";
 import IconZap from "../../../icons/Zap.js";
-export default { title: "Components/Tabs" };
+export default {
+    title: "Components/Tabs",
+    component: Tabs,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/tabs",
+        },
+    },
+};
 export const variant = () => (<Example>
 		<Example.Item title="variant: default">
 			<Tabs>

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

@@ -1,11 +1,16 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: <As extends keyof JSX.IntrinsicElements>(props: import("./..").TextProps<As>) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const variant: () => React.JSX.Element;
-export declare const weight: () => React.JSX.Element;
-export declare const color: () => React.JSX.Element;
-export declare const decoration: () => React.JSX.Element;
-export declare const maxLines: () => React.JSX.Element;
-export declare const align: () => React.JSX.Element;
+export declare const variant: () => import("react").JSX.Element;
+export declare const weight: () => import("react").JSX.Element;
+export declare const color: () => import("react").JSX.Element;
+export declare const decoration: () => import("react").JSX.Element;
+export declare const maxLines: () => import("react").JSX.Element;
+export declare const align: () => import("react").JSX.Element;

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

@@ -1,7 +1,14 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Text from "../index.js";
-export default { title: "Utilities/Text" };
+export default {
+    title: "Utilities/Text",
+    component: Text,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/text",
+        },
+    },
+};
 export const variant = () => (<Example>
 		<Example.Item title="variant: title-1">
 			<Text variant="title-1">Title 1</Text>

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

@@ -1,12 +1,20 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").TextAreaProps): import("react").JSX.Element;
+        Aligner: (props: import("../../_private/Aligner").AlignerProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const value: () => React.JSX.Element;
-export declare const variants: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const disabled: () => React.JSX.Element;
-export declare const error: () => React.JSX.Element;
-export declare const formControl: () => React.JSX.Element;
-export declare const aligner: () => React.JSX.Element;
+export declare const value: () => import("react").JSX.Element;
+export declare const variants: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const disabled: () => import("react").JSX.Element;
+export declare const error: () => import("react").JSX.Element;
+export declare const formControl: () => import("react").JSX.Element;
+export declare const aligner: () => import("react").JSX.Element;

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

@@ -1,14 +1,25 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import TextArea from "../index.js";
 import FormControl from "../../FormControl/index.js";
 import View from "../../View/index.js";
 import Button from "../../Button/index.js";
 import Text from "../../Text/index.js";
-export default { title: "Components/TextArea" };
+import TextField from "../../TextField/index.js";
+export default {
+    title: "Components/TextArea",
+    component: TextArea,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/text-area",
+        },
+    },
+};
 export const value = () => (<Example>
 		<Example.Item title="no value, placeholder">
-			<TextArea name="Name" placeholder="Enter your name"/>
+			<View gap={4}>
+				<TextField placeholder="hello" name="22"/>
+				<TextArea name="Name" placeholder="Enter your name"/>
+			</View>
 		</Example.Item>
 		<Example.Item title="value, uncontrolled">
 			<TextArea name="Name" placeholder="Enter your name" defaultValue="Reshaped"/>

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

@@ -1,15 +1,23 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").TextFieldProps): import("react").JSX.Element;
+        Aligner: (props: import("../../_private/Aligner").AlignerProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const value: () => React.JSX.Element;
-export declare const variants: () => React.JSX.Element;
-export declare const disabled: () => React.JSX.Element;
-export declare const error: () => React.JSX.Element;
-export declare const icon: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const affixes: () => React.JSX.Element;
-export declare const slots: () => React.JSX.Element;
-export declare const formControl: () => React.JSX.Element;
-export declare const aligner: () => React.JSX.Element;
+export declare const value: () => import("react").JSX.Element;
+export declare const variants: () => import("react").JSX.Element;
+export declare const disabled: () => import("react").JSX.Element;
+export declare const error: () => import("react").JSX.Element;
+export declare const icon: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const affixes: () => import("react").JSX.Element;
+export declare const slots: () => import("react").JSX.Element;
+export declare const formControl: () => import("react").JSX.Element;
+export declare const aligner: () => import("react").JSX.Element;

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import IconZap from "../../../icons/Zap.js";
 import TextField from "../index.js";
@@ -6,7 +5,15 @@ import FormControl from "../../FormControl/index.js";
 import View from "../../View/index.js";
 import Text from "../../Text/index.js";
 import Button from "../../Button/index.js";
-export default { title: "Components/TextField" };
+export default {
+    title: "Components/TextField",
+    component: TextField,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/text-field",
+        },
+    },
+};
 export const value = () => (<Example>
 		<Example.Item title="no value, placeholder">
 			<TextField name="Name" placeholder="Enter your name" icon={IconZap}/>

package/components/Theme/tests/Theme.stories.d.ts

@@ -1,7 +1,12 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").ThemeProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const uncontrolled: () => React.JSX.Element;
-export declare const edgeCases: () => React.JSX.Element;
+export declare const uncontrolled: () => import("react").JSX.Element;
+export declare const edgeCases: () => import("react").JSX.Element;

package/components/Theme/tests/Theme.stories.js

@@ -1,11 +1,18 @@
-import React from "react";
 import Card from "../../Card/index.js";
 import Button from "../../Button/index.js";
 import View from "../../View/index.js";
 import MenuItem from "../../MenuItem/index.js";
 import Theme, { useTheme } from "../index.js";
 import { Example } from "../../../utilities/storybook/index.js";
-export default { title: "Utilities/Theme" };
+export default {
+    title: "Utilities/Theme",
+    component: Theme,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/theme",
+        },
+    },
+};
 const UncontrolledDemo = () => {
     const { setTheme, theme } = useTheme();
     return (<Button color="primary" onClick={() => setTheme(theme === "reshaped" ? "fake" : "reshaped")}>