reshaped 2.8.4 → 2.9.1

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

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

package/components/Checkbox/tests/Checkbox.stories.js

@@ -1,7 +1,14 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Checkbox from "../index.js";
-export default { title: "Components/Checkbox" };
+export default {
+    title: "Components/Checkbox",
+    component: Checkbox,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/checkbox",
+        },
+    },
+};
 export const selection = () => (<Example>
 		<Example.Item title="unselected">
 			<Checkbox name="animal" value="dog">

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

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

package/components/CheckboxGroup/tests/CheckboxGroup.stories.js

@@ -1,9 +1,16 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import CheckboxGroup from "../index.js";
 import Checkbox from "../../Checkbox/index.js";
-export default { title: "Components/CheckboxGroup" };
+export default {
+    title: "Components/CheckboxGroup",
+    component: CheckboxGroup,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/checkbox",
+        },
+    },
+};
 export const selection = () => (<Example>
 		<Example.Item title="unselected">
 			<CheckboxGroup name="animal">

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

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

package/components/Container/tests/Container.stories.js

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

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

@@ -1,8 +1,13 @@
-import React from "react";
 declare const _default: {
     title: string;
+    components: (props: import("./..").DismissibleProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const variant: () => React.JSX.Element;
-export declare const align: () => React.JSX.Element;
-export declare const closeButton: () => React.JSX.Element;
+export declare const variant: () => import("react").JSX.Element;
+export declare const align: () => import("react").JSX.Element;
+export declare const closeButton: () => import("react").JSX.Element;

package/components/Dismissible/tests/Dismissible.stories.js

@@ -1,9 +1,16 @@
-import React from "react";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import Dismissible from "../index.js";
 import Image from "../../Image/index.js";
 import View from "../../View/index.js";
-export default { title: "Utilities/Dismissible" };
+export default {
+    title: "Utilities/Dismissible",
+    components: Dismissible,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/dismissible",
+        },
+    },
+};
 export const variant = () => (<Example>
 		<Example.Item title="variant: default">
 			<Dismissible closeAriaLabel="Close banner">

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

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

package/components/Divider/tests/Divider.stories.js

@@ -1,8 +1,15 @@
-import React from "react";
 import { Example, Placeholder } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Divider from "../index.js";
-export default { title: "Components/Divider" };
+export default {
+    title: "Components/Divider",
+    component: Divider,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/divider",
+        },
+    },
+};
 export const rendering = () => (<Example>
 		<Example.Item title="default rendering">
 			<Divider />

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

@@ -1,11 +1,24 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").DropdownMenuProps): import("react").JSX.Element;
+        Trigger: (props: import("../../_private/Flyout").FlyoutTriggerProps) => import("react").JSX.Element;
+        Content: (props: import("../DropdownMenu.types").ContentProps) => import("react").JSX.Element;
+        Section: (props: import("../DropdownMenu.types").SectionProps) => import("react").JSX.Element;
+        Item: (props: Omit<import("../../MenuItem").MenuItemProps, "roundedCorners">) => import("react").JSX.Element;
+        SubMenu: (props: import("../DropdownMenu.types").SubMenuProps) => import("react").JSX.Element;
+        SubTrigger: (props: import("../DropdownMenu.types").SubTriggerProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const position: () => React.JSX.Element;
-export declare const sections: () => React.JSX.Element;
-export declare const submenu: () => React.JSX.Element;
-export declare const state: () => React.JSX.Element;
-export declare const testScroll: () => React.JSX.Element;
-export declare const testThemeSwitching: () => React.JSX.Element;
+export declare const position: () => import("react").JSX.Element;
+export declare const sections: () => import("react").JSX.Element;
+export declare const submenu: () => import("react").JSX.Element;
+export declare const state: () => import("react").JSX.Element;
+export declare const testScroll: () => import("react").JSX.Element;
+export declare const testThemeSwitching: () => import("react").JSX.Element;

package/components/DropdownMenu/tests/DropdownMenu.stories.js

@@ -1,11 +1,18 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Button from "../../Button/index.js";
 import DropdownMenu from "../index.js";
 import View from "../../View/index.js";
 import { useTheme } from "../../Theme/useTheme.js";
 import IconCheckmark from "../../../icons/Checkmark.js";
-export default { title: "Components/DropdownMenu" };
+export default {
+    title: "Components/DropdownMenu",
+    component: DropdownMenu,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/dropdown-menu",
+        },
+    },
+};
 export const position = () => (<Example>
 		<Example.Item title="position: default">
 			<DropdownMenu>

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

@@ -1,6 +1,15 @@
 import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").FileUploadProps): React.JSX.Element;
+        Trigger: (props: import("../FileUpload.types").TriggerProps) => React.JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
 export declare const base: () => React.JSX.Element;

package/components/FileUpload/tests/FileUpload.stories.js

@@ -6,7 +6,15 @@ import Image from "../../Image/index.js";
 import Link from "../../Link/index.js";
 import Icon from "../../Icon/index.js";
 import IconMic from "../../../icons/Mic.js";
-export default { title: "Components/FileUpload" };
+export default {
+    title: "Components/FileUpload",
+    component: FileUpload,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/file-upload",
+        },
+    },
+};
 const Demo = () => {
     const [files, setFiles] = React.useState([]);
     return (<View gap={2}>

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

@@ -1,10 +1,20 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: {
+        (props: import("./..").FormControlProps): import("react").JSX.Element;
+        Label: (props: import("../FormControl.types").LabelProps) => import("react").JSX.Element;
+        Helper: (props: import("../FormControl.types").CaptionProps) => import("react").JSX.Element;
+        Error: (props: import("../FormControl.types").CaptionProps) => import("react").JSX.Element | null;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const status: () => React.JSX.Element;
-export declare const size: () => React.JSX.Element;
-export declare const disabled: () => React.JSX.Element;
-export declare const required: () => React.JSX.Element;
-export declare const group: () => React.JSX.Element;
+export declare const status: () => import("react").JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const disabled: () => import("react").JSX.Element;
+export declare const required: () => import("react").JSX.Element;
+export declare const group: () => import("react").JSX.Element;

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

@@ -1,10 +1,17 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import FormControl, { useFormControl } from "../index.js";
 import RadioGroup from "../../RadioGroup/index.js";
 import Radio from "../../Radio/index.js";
 import View from "../../View/index.js";
-export default { title: "Utilities/FormControl" };
+export default {
+    title: "Utilities/FormControl",
+    component: FormControl,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/form-control",
+        },
+    },
+};
 const Input = () => {
     const { attributes } = useFormControl();
     return <input {...attributes}/>;

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

@@ -1,5 +1,11 @@
 declare const _default: {
     title: string;
+    component: (props: import("./..").HiddenProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
 export declare const visibility: () => import("react").JSX.Element;

package/components/Hidden/tests/Hidden.stories.js

@@ -1,6 +1,14 @@
 import { Example } from "../../../utilities/storybook/index.js";
 import Hidden from "../index.js";
-export default { title: "Utilities/Hidden" };
+export default {
+    title: "Utilities/Hidden",
+    component: Hidden,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/hidden",
+        },
+    },
+};
 export const visibility = () => (<Example>
 		<Example.Item title="hide: always">
 			<Hidden hide={true}>Content</Hidden>

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

@@ -1,6 +1,11 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").HiddenVisuallyProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const visibility: () => React.JSX.Element;
+export declare const visibility: () => import("react").JSX.Element;

package/components/HiddenVisually/tests/HiddenVisually.stories.js

@@ -1,7 +1,14 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import HiddenVisually from "../index.js";
-export default { title: "Utilities/HiddenVisually" };
+export default {
+    title: "Utilities/HiddenVisually",
+    component: HiddenVisually,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/hidden-visually",
+        },
+    },
+};
 export const visibility = () => (<Example>
 		<Example.Item title="pronounced by screen readers">
 			<HiddenVisually>Screen-reader only</HiddenVisually>

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

@@ -1,6 +1,11 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("..").HotkeyProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const base: () => React.JSX.Element;
+export declare const base: () => import("react").JSX.Element;

package/components/Hotkey/tests/Hotkey.stories.js

@@ -1,10 +1,17 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import useHotkeys from "../../../hooks/useHotkeys.js";
 import View from "../../View/index.js";
 import TextField from "../../TextField/index.js";
 import Hotkey from "../Hotkey.js";
-export default { title: "Components/Hotkey" };
+export default {
+    title: "Components/Hotkey",
+    component: Hotkey,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/hotkey",
+        },
+    },
+};
 const Demo = () => {
     const { checkHotkeyState } = useHotkeys({
         "Meta+k": () => { },

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

@@ -1,8 +1,13 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("./..").IconProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const size: () => React.JSX.Element;
-export declare const color: () => React.JSX.Element;
-export declare const autoWidth: () => React.JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const color: () => import("react").JSX.Element;
+export declare const autoWidth: () => import("react").JSX.Element;

package/components/Icon/tests/Icon.stories.js

@@ -1,11 +1,18 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Icon from "../index.js";
 import Text from "../../Text/index.js";
 import IconZap from "../../../icons/Zap.js";
 import IconMic from "../../../icons/Mic.js";
-export default { title: "Utilities/Icon" };
+export default {
+    title: "Utilities/Icon",
+    component: Icon,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/icon",
+        },
+    },
+};
 export const size = () => (<Example>
 		<Example.Item title="size: 4">
 			<Icon svg={IconZap} size={4}/>

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

@@ -1,10 +1,15 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: (props: import("..").ImageProps) => import("react").JSX.Element;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const size: () => React.JSX.Element;
-export declare const radius: () => React.JSX.Element;
-export declare const displayMode: () => React.JSX.Element;
-export declare const ratio: () => React.JSX.Element;
-export declare const fallback: () => React.JSX.Element;
+export declare const size: () => import("react").JSX.Element;
+export declare const radius: () => import("react").JSX.Element;
+export declare const displayMode: () => import("react").JSX.Element;
+export declare const ratio: () => import("react").JSX.Element;
+export declare const fallback: () => import("react").JSX.Element;

package/components/Image/tests/Image.stories.js

@@ -1,10 +1,17 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import View from "../../View/index.js";
 import Icon from "../../Icon/index.js";
 import IconZap from "../../../icons/Zap.js";
 import Image from "../Image.js";
-export default { title: "Utilities/Image" };
+export default {
+    title: "Utilities/Image",
+    component: Image,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/utilities/image",
+        },
+    },
+};
 const imgUrl = "https://images.unsplash.com/photo-1536880756060-98a6a140f0a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&q=80";
 export const size = () => (<Example>
 		<Example.Item title="size: auto">

package/components/Link/Link.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
-declare const _default: React.ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "className" | "disabled" | "attributes" | "children" | "onClick" | "type" | "href"> & {
-    icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ComponentType<{}> | undefined;
+declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "className" | "disabled" | "attributes" | "children" | "onClick" | "type" | "href"> & {
+    icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ComponentType<{}> | undefined;
     color?: "inherit" | "positive" | "critical" | "primary" | undefined;
     variant?: "underline" | "plain" | undefined;
-} & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
-export default _default;
+} & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export default Link;

package/components/Link/Link.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { forwardRef } from "react";
 import { classNames } from "../../utilities/helpers.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import s from "./Link.module.css";
-const Link = (props, ref) => {
+const Link = forwardRef((props, ref) => {
     const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, } = props;
     const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], variant && s[`--variant-${variant}`], color && s[`--color-${color}`], icon && s["--with-icon"]);
     return (_jsxs(Actionable, { href: href, disabled: disabled, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref, children: [icon && _jsx(Icon, { svg: icon }), children] }));
-};
-export default React.forwardRef(Link);
+});
+export default Link;

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

@@ -1,10 +1,19 @@
-import React from "react";
 declare const _default: {
     title: string;
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "className" | "attributes" | "onClick" | "disabled" | "type" | "href"> & {
+        icon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ComponentType<{}> | undefined;
+        color?: "inherit" | "critical" | "positive" | "primary" | undefined;
+        variant?: "underline" | "plain" | undefined;
+    } & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+    parameters: {
+        iframe: {
+            url: string;
+        };
+    };
 };
 export default _default;
-export declare const variant: () => React.JSX.Element;
-export declare const color: () => React.JSX.Element;
-export declare const disabled: () => React.JSX.Element;
-export declare const withIcon: () => React.JSX.Element;
-export declare const testMultilineInText: () => React.JSX.Element;
+export declare const variant: () => import("react").JSX.Element;
+export declare const color: () => import("react").JSX.Element;
+export declare const disabled: () => import("react").JSX.Element;
+export declare const withIcon: () => import("react").JSX.Element;
+export declare const testMultilineInText: () => import("react").JSX.Element;

package/components/Link/tests/Link.stories.js

@@ -1,9 +1,16 @@
-import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Link from "../index.js";
 import Text from "../../Text/index.js";
 import IconZap from "../../../icons/Zap.js";
-export default { title: "Components/Link" };
+export default {
+    title: "Components/Link",
+    component: Link,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/breadcrumbs",
+        },
+    },
+};
 export const variant = () => (<Example>
 		<Example.Item title="variant: underline">
 			<Link href="http://reshaped.so" attributes={{ target: "_blank" }}>

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

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

package/components/Loader/tests/Loader.stories.js

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

package/components/MenuItem/MenuItem.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { forwardRef } from "react";
 import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/helpers.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import View from "../View/index.js";
 import MenuItemAligner from "./MenuItemAligner.js";
 import s from "./MenuItem.module.css";
-const MenuItemBase = (props, ref) => {
+const MenuItem = forwardRef((props, ref) => {
     const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"]);
     const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
     const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
     return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: Object.assign(Object.assign({}, attributes), { "data-rs-aligner-target": true }), onClick: onClick, href: href, ref: ref, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
-};
-const MenuItem = React.forwardRef(MenuItemBase);
+});
 MenuItem.Aligner = MenuItemAligner;
 export default MenuItem;