@nulogy/components 16.0.1 → 16.0.3

package/dist/src/Button/Button.story.d.ts

@@ -4,45 +4,31 @@ declare const _default: {
 export default _default;
 export declare const _Button: () => import("react/jsx-runtime").JSX.Element;
 export declare const _PrimaryButton: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const _DangerButton: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const _QuietButton: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithDifferentSizes: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithASelectedIcon: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToFullWidth: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AsALink: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Button/Button.story.js

@@ -6,32 +6,32 @@ export default {
     title: "Components/Buttons",
 };
 export const _Button = () => _jsx(Button, { children: "Create project" });
-export const _PrimaryButton = () => _jsx(PrimaryButton, { children: "Create project" });
-_PrimaryButton.story = {
+export const _PrimaryButton = {
+    render: () => _jsx(PrimaryButton, { children: "Create project" }),
     name: "PrimaryButton",
 };
-export const _DangerButton = () => _jsx(DangerButton, { children: "Delete project" });
-_DangerButton.story = {
+export const _DangerButton = {
+    render: () => _jsx(DangerButton, { children: "Delete project" }),
     name: "DangerButton",
 };
-export const _QuietButton = () => _jsx(QuietButton, { children: "Create project" });
-_QuietButton.story = {
+export const _QuietButton = {
+    render: () => _jsx(QuietButton, { children: "Create project" }),
     name: "QuietButton",
 };
 export const WithDifferentSizes = () => (_jsxs(Flex, { flexDirection: "column", gap: "x3", children: [_jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading4, { children: "Medium size (default)" }), _jsxs(Flex, { gap: "x1", children: [_jsx(Button, { children: "Secondary Button" }), _jsx(PrimaryButton, { children: "Primary Button" }), _jsx(DangerButton, { children: "Danger Button" }), _jsx(QuietButton, { children: "Quiet Button" })] })] }), _jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsx(Heading4, { children: "Small size" }), _jsxs(Flex, { gap: "x1", children: [_jsx(Button, { size: "small", children: "Secondary Button" }), _jsx(PrimaryButton, { size: "small", children: "Primary Button" }), _jsx(DangerButton, { size: "small", children: "Danger Button" }), _jsx(QuietButton, { size: "small", children: "Quiet Button" })] })] })] }));
-export const WithASelectedIcon = () => (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "add", iconSide: "left", size: "small", onClick: () => { }, disabled: true, children: "Create project" }), _jsx(Button, { icon: "add", iconSide: "right", children: "Create project" })] }));
-WithASelectedIcon.story = {
+export const WithASelectedIcon = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "add", iconSide: "left", size: "small", onClick: () => { }, disabled: true, children: "Create project" }), _jsx(Button, { icon: "add", iconSide: "right", children: "Create project" })] })),
     name: "With a selected Icon",
 };
-export const SetToFullWidth = () => _jsx(PrimaryButton, { fullWidth: true, children: "Create project" });
-SetToFullWidth.story = {
+export const SetToFullWidth = {
+    render: () => _jsx(PrimaryButton, { fullWidth: true, children: "Create project" }),
     name: "Set to full width",
 };
-export const SetToDisabled = () => _jsx(PrimaryButton, { disabled: true, children: "Create project" });
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => _jsx(PrimaryButton, { disabled: true, children: "Create project" }),
     name: "Set to disabled",
 };
-export const AsALink = () => (_jsx(PrimaryButton, { asLink: true, href: "/", children: "Create project" }));
-AsALink.story = {
+export const AsALink = {
+    render: () => (_jsx(PrimaryButton, { asLink: true, href: "/", children: "Create project" })),
     name: "As a link",
 };

package/dist/src/Button/ControlIcon.story.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { ControlIcon } from "../index";
 export default {
     title: "Components/ControlIcon",

package/dist/src/Button/DangerButton.d.ts

@@ -1,3 +1,5 @@
 import { ButtonProps } from "./Button";
-declare const DangerButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+declare const DangerButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export default DangerButton;

package/dist/src/Button/IconicButton.story.d.ts

@@ -3,61 +3,43 @@ declare const _default: {
 };
 export default _default;
 export declare const WithoutALabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithALongLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAHiddenLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithACustomIconSize: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithACustomColor: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithATooltipAndLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAComplicatedTooltipAndLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const rightAligned: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         chromatic: {
             diffThreshold: number;
@@ -65,16 +47,12 @@ export declare const rightAligned: {
     };
 };
 export declare const WithACustomFontSize: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithNonTextChildren: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomHoverBackgroundThemeColor: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomHoverBackgroundNonThemeColor: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Button/IconicButton.story.js

@@ -6,52 +6,54 @@ import { Box } from "../Box";
 export default {
     title: "Components/IconicButton",
 };
-export const WithoutALabel = () => _jsx(IconicButton, { icon: "delete" });
-WithoutALabel.story = {
+export const WithoutALabel = {
+    render: () => _jsx(IconicButton, { icon: "delete" }),
     name: "without a label",
 };
-export const WithLabel = () => _jsx(IconicButton, { icon: "delete", children: "Delete" });
-WithLabel.story = {
+export const WithLabel = {
+    render: () => _jsx(IconicButton, { icon: "delete", children: "Delete" }),
     name: "with label",
 };
-export const WithALongLabel = () => (_jsx(IconicButton, { icon: "user", children: "I am an Iconic Button with a really really really long label" }));
-WithALongLabel.story = {
+export const WithALongLabel = {
+    render: () => _jsx(IconicButton, { icon: "user", children: "I am an Iconic Button with a really really really long label" }),
     name: "with a long label",
 };
-export const SetToDisabled = () => (_jsxs(_Fragment, { children: [_jsx(IconicButton, { icon: "cancel", disabled: true, children: "Cancel" }), _jsx(IconicButton, { icon: "lock", disabled: true, children: "Lock" })] }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(IconicButton, { icon: "cancel", disabled: true, children: "Cancel" }), _jsx(IconicButton, { icon: "lock", disabled: true, children: "Lock" })] })),
     name: "set to disabled",
 };
-export const WithAHiddenLabel = () => (_jsx(IconicButton, { ml: "x6", labelHidden: true, icon: "user", children: "Hidden Label" }));
-WithAHiddenLabel.story = {
+export const WithAHiddenLabel = {
+    render: () => (_jsx(IconicButton, { ml: "x6", labelHidden: true, icon: "user", children: "Hidden Label" })),
     name: "with a hidden label",
 };
-export const WithACustomIconSize = () => (_jsx(IconicButton, { icon: "user", iconSize: "50px", labelHidden: true, children: "I am an Iconic Button" }));
-WithACustomIconSize.story = {
+export const WithACustomIconSize = {
+    render: () => (_jsx(IconicButton, { icon: "user", iconSize: "50px", labelHidden: true, children: "I am an Iconic Button" })),
     name: "with a custom icon size",
 };
-export const WithACustomColor = () => (_jsx(IconicButton, { color: "red", icon: "close", children: "Close" }));
-WithACustomColor.story = {
+export const WithACustomColor = {
+    render: () => (_jsx(IconicButton, { color: "red", icon: "close", children: "Close" })),
     name: "with a custom color",
 };
-export const WithATooltipAndLabel = () => (_jsx(IconicButton, { tooltip: "Stop job", icon: "close", children: "Stop" }));
-WithATooltipAndLabel.story = {
+export const WithATooltipAndLabel = {
+    render: () => (_jsx(IconicButton, { tooltip: "Stop job", icon: "close", children: "Stop" })),
     name: "with a tooltip and label",
 };
-export const WithAComplicatedTooltipAndLabel = () => (_jsx(IconicButton, { tooltip: _jsx(Box, { children: "Hello" }), icon: "close", children: "Please stop" }));
-WithAComplicatedTooltipAndLabel.story = {
+export const WithAComplicatedTooltipAndLabel = {
+    render: () => (_jsx(IconicButton, { tooltip: _jsx(Box, { children: "Hello" }), icon: "close", children: "Please stop" })),
     name: "with a complicated tooltip and label",
 };
-export const rightAligned = () => (_jsx(Flex, { px: "x3", height: "150px", children: _jsxs(Flex, { justifyContent: "flex-end", alignItems: "flex-start", width: "100%", children: [_jsx(IconicButton, { icon: "rightArrow", labelHidden: true, children: "I am an Iconic Button" }), _jsx(IconicButton, { icon: "leftArrow", labelHidden: true, children: "I am an Iconic Button 2" })] }) }));
-rightAligned.parameters = {
-    chromatic: { diffThreshold: 0.3 },
+export const rightAligned = {
+    render: () => (_jsx(Flex, { px: "x3", height: "150px", children: _jsxs(Flex, { justifyContent: "flex-end", alignItems: "flex-start", width: "100%", children: [_jsx(IconicButton, { icon: "rightArrow", labelHidden: true, children: "I am an Iconic Button" }), _jsx(IconicButton, { icon: "leftArrow", labelHidden: true, children: "I am an Iconic Button 2" })] }) })),
+    parameters: {
+        chromatic: { diffThreshold: 0.3 },
+    },
 };
-export const WithACustomFontSize = () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(IconicButton, { fontSize: "small", tooltip: "Stop job", icon: "close", children: "This is an IconicButton with a small font size" }), _jsx(IconicButton, { fontSize: "large", tooltip: "Stop job", icon: "close", children: "This is an IconicButton with a large font size" }), _jsx(IconicButton, { fontSize: "48px", tooltip: "Stop job", icon: "close", children: "This is an IconicButton with 48px font size" })] }));
-WithACustomFontSize.story = {
+export const WithACustomFontSize = {
+    render: () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(IconicButton, { fontSize: "small", tooltip: "Stop job", icon: "close", children: "This is an IconicButton with a small font size" }), _jsx(IconicButton, { fontSize: "large", tooltip: "Stop job", icon: "close", children: "This is an IconicButton with a large font size" }), _jsx(IconicButton, { fontSize: "48px", tooltip: "Stop job", icon: "close", children: "This is an IconicButton with 48px font size" })] })),
     name: "with a custom font size",
 };
-export const WithNonTextChildren = () => (_jsx(IconicButton, { fontSize: "small", "aria-label": "warnings", icon: "warning", children: _jsxs(Flex, { children: [_jsx(Box, { as: "span", pr: "x1", children: "Warnings" }), _jsx(StatusIndicator, { type: "informative", children: "3" })] }) }));
-WithNonTextChildren.story = {
+export const WithNonTextChildren = {
+    render: () => (_jsx(IconicButton, { fontSize: "small", "aria-label": "warnings", icon: "warning", children: _jsxs(Flex, { children: [_jsx(Box, { as: "span", pr: "x1", children: "Warnings" }), _jsx(StatusIndicator, { type: "informative", children: "3" })] }) })),
     name: "with non text children",
 };
 export const WithCustomHoverBackgroundThemeColor = () => (_jsx(IconicButton, { hoverBackgroundColor: "lightYellow", fontSize: "small", "aria-label": "warnings", icon: "warning", children: _jsx(Flex, { children: _jsx(Box, { as: "span", pr: "x1", children: "Warnings" }) }) }));

package/dist/src/Button/PrimaryButton.d.ts

@@ -1,3 +1,5 @@
 import { ButtonProps } from "./Button";
-declare const PrimaryButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+declare const PrimaryButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export default PrimaryButton;

package/dist/src/Button/QuietButton.d.ts

@@ -1,3 +1,5 @@
 import { ButtonProps } from "./Button";
-declare const QuietButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+declare const QuietButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLButtonElement>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
 export default QuietButton;

package/dist/src/ButtonGroup/ButtonGroup.story.d.ts

@@ -3,37 +3,27 @@ declare const _default: {
 };
 export default _default;
 export declare const _ButtonGroup: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAlignmentRight: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAlignmentSpaced: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const MoreButtonTypes: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WrappingButtons: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            viewport: {
-                defaultViewport: string;
-            };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        viewport: {
+            defaultViewport: string;
         };
     };
 };

package/dist/src/ButtonGroup/ButtonGroup.story.js

@@ -3,24 +3,24 @@ import { Box, ButtonGroup, Button, PrimaryButton, DangerButton, QuietButton, Ico
 export default {
     title: "Components/ButtonGroup",
 };
-export const _ButtonGroup = () => (_jsx(Box, { bg: "whiteGrey", p: "x2", width: "500px", children: _jsxs(ButtonGroup, { children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] }) }));
-_ButtonGroup.story = {
+export const _ButtonGroup = {
+    render: () => (_jsx(Box, { bg: "whiteGrey", p: "x2", width: "500px", children: _jsxs(ButtonGroup, { children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] }) })),
     name: "ButtonGroup",
 };
-export const WithAlignmentRight = () => (_jsxs(ButtonGroup, { alignment: "right", p: "x2", bg: "whiteGrey", width: "500px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] }));
-WithAlignmentRight.story = {
+export const WithAlignmentRight = {
+    render: () => (_jsxs(ButtonGroup, { alignment: "right", p: "x2", bg: "whiteGrey", width: "500px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] })),
     name: "with alignment right",
 };
-export const WithAlignmentSpaced = () => (_jsxs(ButtonGroup, { alignment: "spaced", bg: "whiteGrey", p: "x2", width: "500px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" })] }));
-WithAlignmentSpaced.story = {
+export const WithAlignmentSpaced = {
+    render: () => (_jsxs(ButtonGroup, { alignment: "spaced", bg: "whiteGrey", p: "x2", width: "500px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(Button, { children: "Button" })] })),
     name: "with alignment spaced",
 };
-export const MoreButtonTypes = () => (_jsxs(ButtonGroup, { bg: "whiteGrey", p: "x2", width: "600px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(DangerButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(QuietButton, { children: "Button" }), _jsx(IconicButton, { icon: "menu" }), _jsx(IconicButton, { icon: "menu", children: "Button" })] }));
-MoreButtonTypes.story = {
+export const MoreButtonTypes = {
+    render: () => (_jsxs(ButtonGroup, { bg: "whiteGrey", p: "x2", width: "600px", children: [_jsx(PrimaryButton, { children: "Button" }), _jsx(DangerButton, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(QuietButton, { children: "Button" }), _jsx(IconicButton, { icon: "menu" }), _jsx(IconicButton, { icon: "menu", children: "Button" })] })),
     name: "more button types",
 };
-export const WrappingButtons = () => (_jsxs(_Fragment, { children: [_jsxs(ButtonGroup, { bg: "whiteGrey", p: "x2", children: [_jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] }), _jsxs(ButtonGroup, { alignment: "right", bg: "whiteGrey", p: "x2", mt: "x2", children: [_jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] })] }));
-WrappingButtons.story = {
+export const WrappingButtons = {
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(ButtonGroup, { bg: "whiteGrey", p: "x2", children: [_jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] }), _jsxs(ButtonGroup, { alignment: "right", bg: "whiteGrey", p: "x2", mt: "x2", children: [_jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" }), _jsx(Button, { children: "Button" })] })] })),
     name: "wrapping buttons",
     parameters: { viewport: { defaultViewport: "extraSmall" } },
 };

package/dist/src/Card/Card.story.d.ts

@@ -4,14 +4,12 @@ declare const _default: {
 export default _default;
 export declare const _Card: () => import("react/jsx-runtime").JSX.Element;
 export declare const CustomCard: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Cardset: () => import("react/jsx-runtime").JSX.Element;
 export declare const AdvancedUsage: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/src/Card/Card.story.js

@@ -7,17 +7,19 @@ export default {
     title: "Components/Card",
 };
 export const _Card = () => _jsx(Card, { children: "I am a card." });
-export const CustomCard = () => (_jsx(Card, { bg: "black", color: "white", borderRadius: "small", p: "x1", children: "I am a custom card." }));
-CustomCard.story = {
+export const CustomCard = {
+    render: () => (_jsx(Card, { bg: "black", color: "white", borderRadius: "small", p: "x1", children: "I am a custom card." })),
     name: "Custom card",
 };
 export const Cardset = () => (_jsxs(CardSet, { children: [_jsx(Card, { children: "I am a 1st card in a cardset." }), _jsx(Card, { children: "I am a 2nd card in a cardset." }), _jsx(Card, { children: "I am a 3rd card in a cardset." })] }));
 function AdvancedCard() {
     return (_jsxs(Card, { children: [_jsx(Heading4, { children: "POLI-2304" }), _jsxs(DescriptionList, { children: [_jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Customer" }), _jsx(DescriptionDetails, { children: "Nulogy" })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: _jsxs(Text, { display: "inline-flex", alignItems: "center", children: ["Order number", _jsx(Tooltip, { tooltip: "The unique identifier assigned to this order when it was placed by the customer.", children: _jsx(Icon, { icon: "info", size: "x3", paddingLeft: "half" }) })] }) }), _jsx(DescriptionDetails, { children: _jsx(Link, { href: "/customer-details", children: "P12-90381-2039" }) })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Status" }), _jsx(DescriptionDetails, { children: _jsx(StatusIndicator, { type: "success", children: "Paid" }) })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Amount" }), _jsx(DescriptionDetails, { children: "$202.12" })] }), _jsxs(DescriptionGroup, { children: [_jsx(DescriptionTerm, { children: "Notes" }), _jsx(DescriptionDetails, { children: _jsx(TruncatedText, { fontSize: "small", maxCharacters: 200, children: "Due to severe weather disruptions and unforeseen logistical challenges, this shipment has been significantly delayed. The warehouse manager reported that mechanical issues with the transport vehicles coupled with a shortage of available staff, have extended processing times at the loading dock. Additionally, mandatory safety inspections and inventory verifications required extra time, further postponing the dispatch schedule. His detailed notes also mention that alternate transportation arrangements are being evaluated and urge all stakeholders to stay in close communication for updated delivery timelines." }) })] })] })] }));
 }
-export const AdvancedUsage = () => {
-    return (_jsx(ApplicationFrame, { navBar: _jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }), children: _jsx(Page, { fullHeight: true, children: _jsx(CardSet, { children: [...Array(10)].map((_, i) => (_jsx(AdvancedCard, {}, i))) }) }) }));
-};
-AdvancedUsage.parameters = {
-    layout: "fullscreen",
+export const AdvancedUsage = {
+    render: () => {
+        return (_jsx(ApplicationFrame, { navBar: _jsxs(TopBar.Root, { children: [_jsx(TopBar.BackLink, { href: "/cycle-counts", children: "Cycle counts" }), _jsx(TopBar.PageTitle, { children: "Cycle count #3992" }), _jsx(TopBar.Menu, { children: menuItems.map((props) => (_jsx(TopBar.MenuItem, { children: _jsx(TopBar.MenuItemLink, { ...props }) }, props.title))) })] }), children: _jsx(Page, { fullHeight: true, children: _jsx(CardSet, { children: [...Array(10)].map((_, i) => (_jsx(AdvancedCard, {}, i))) }) }) }));
+    },
+    parameters: {
+        layout: "fullscreen",
+    },
 };

package/dist/src/Checkbox/Checkbox.story.d.ts

@@ -4,54 +4,38 @@ declare const _default: {
 export default _default;
 export declare const _Checkbox: () => import("react/jsx-runtime").JSX.Element;
 export declare const Multiline: {
-    (): import("react/jsx-runtime").JSX.Element;
-    decorators: ((story: any) => import("react/jsx-runtime").JSX.Element)[];
+    render: () => import("react/jsx-runtime").JSX.Element;
+    decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
 };
 export declare const SetToDefaultChecked: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToDisabled: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const CheckboxWithNoLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToError: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const SetToRequired: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const Indeterminate: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithState: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const UsingRefToControlFocus: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Checkbox/Checkbox.story.js

@@ -21,43 +21,47 @@ export default {
     title: "Components/Checkbox",
 };
 export const _Checkbox = () => _jsx(Checkbox, { p: "x3", id: "checkbox", labelText: "I am a checkbox" });
-export const Multiline = () => _jsx(Checkbox, { p: "x3", id: "checkbox", labelText: "Lorem ipsum dolor sit amet consecutor" });
-Multiline.decorators = [(story) => _jsx("div", { style: { width: "200px" }, children: story() })];
-export const SetToDefaultChecked = () => _jsx(Checkbox, { id: "checkbox", defaultChecked: true, labelText: "I am checked by default" });
-SetToDefaultChecked.story = {
+export const Multiline = {
+    render: () => _jsx(Checkbox, { p: "x3", id: "checkbox", labelText: "Lorem ipsum dolor sit amet consecutor" }),
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: "200px" }, children: _jsx(Story, {}) })),
+    ],
+};
+export const SetToDefaultChecked = {
+    render: () => _jsx(Checkbox, { id: "checkbox", defaultChecked: true, labelText: "I am checked by default" }),
     name: "Set to defaultChecked",
 };
-export const SetToDisabled = () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox-1", disabled: true, labelText: "I am disabled" }), _jsx(Checkbox, { id: "checkbox-2", checked: true, disabled: true, labelText: "I am disabled" })] }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox-1", disabled: true, labelText: "I am disabled" }), _jsx(Checkbox, { id: "checkbox-2", checked: true, disabled: true, labelText: "I am disabled" })] })),
     name: "Set to disabled",
 };
-export const CheckboxWithNoLabel = () => (_jsx(_Fragment, { children: _jsx(Checkbox, {}) }));
-CheckboxWithNoLabel.story = {
+export const CheckboxWithNoLabel = {
+    render: () => (_jsx(_Fragment, { children: _jsx(Checkbox, {}) })),
     name: "Checkbox with no label",
 };
-export const SetToError = () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox", error: true, labelText: "I am error" }), _jsx(Checkbox, { id: "checkbox", defaultChecked: true, error: true, labelText: "I am error" })] }));
-SetToError.story = {
+export const SetToError = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox", error: true, labelText: "I am error" }), _jsx(Checkbox, { id: "checkbox", defaultChecked: true, error: true, labelText: "I am error" })] })),
     name: "Set to error",
 };
-export const SetToRequired = () => (_jsx(_Fragment, { children: _jsx(Checkbox, { id: "checkbox", labelText: "I am a checkbox", required: true }) }));
-SetToRequired.story = {
+export const SetToRequired = {
+    render: () => (_jsx(_Fragment, { children: _jsx(Checkbox, { id: "checkbox", labelText: "I am a checkbox", required: true }) })),
     name: "Set to required",
 };
-export const Indeterminate = () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox", readOnly: true, checked: true, indeterminate: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox with an error", readOnly: true, checked: true, indeterminate: true, error: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am a disabled indeterminate checkbox", readOnly: true, checked: true, indeterminate: true, disabled: true })] }));
-Indeterminate.story = {
+export const Indeterminate = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox", readOnly: true, checked: true, indeterminate: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am an indeterminate checkbox with an error", readOnly: true, checked: true, indeterminate: true, error: true }), _jsx(Checkbox, { id: "checkbox", labelText: "I am a disabled indeterminate checkbox", readOnly: true, checked: true, indeterminate: true, disabled: true })] })),
     name: "indeterminate",
 };
-export const WithState = () => _jsx(CheckboxWithState, {});
-WithState.story = {
+export const WithState = {
+    render: () => _jsx(CheckboxWithState, {}),
     name: "With state",
 };
-export const UsingRefToControlFocus = () => {
-    const ref = useRef(null);
-    const handleClick = () => {
-        ref.current.focus();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { ref: ref, labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
-};
-UsingRefToControlFocus.story = {
+export const UsingRefToControlFocus = {
+    render: () => {
+        const ref = useRef(null);
+        const handleClick = () => {
+            ref.current.focus();
+        };
+        return (_jsxs(_Fragment, { children: [_jsx(Checkbox, { ref: ref, labelText: "I am a unchecked indeterminate checkbox", readOnly: true, checked: false, indeterminate: true }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
+    },
     name: "using ref to control focus",
 };