@nulogy/components 16.0.2 → 16.0.3

package/dist/src/DropdownMenu/DropdownMenu.story.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { DropdownMenu, DropdownLink, DropdownButton, DropdownItem, DropdownText, Button, Flex, Text, Icon, } from "../index";
 const customColors = {
     color: "white",
@@ -11,35 +12,76 @@ export default {
         diffThreshold: 0.4,
     },
 };
-export const _DropdownMenu = () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] }));
-_DropdownMenu.story = {
+export const _DropdownMenu = {
+    render: () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] })),
     name: "DropdownMenu",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens the menu on click", async () => {
+            await userEvent.click(canvas.getByLabelText("open dropdown"));
+            await waitFor(() => expect(screen.getByText("Dropdown Button")).toBeVisible());
+            await expect(canvas.getByLabelText("close dropdown")).toBeInTheDocument();
+        });
+        await step("closes the menu on click", async () => {
+            await userEvent.click(canvas.getByLabelText("close dropdown"));
+            await waitFor(() => expect(canvas.queryByLabelText("close dropdown")).not.toBeInTheDocument());
+        });
+    },
 };
-export const WithCustomTrigger = () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", trigger: () => _jsx(Button, { children: "Custom Trigger" }), children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] }));
-WithCustomTrigger.story = {
+export const WithCustomTrigger = {
+    render: () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", trigger: () => _jsx(Button, { children: "Custom Trigger" }), children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] })),
     name: "with custom trigger",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens the menu with a custom trigger", async () => {
+            await userEvent.click(canvas.getByLabelText("open dropdown"));
+            await waitFor(() => expect(screen.getByText("Dropdown Button")).toBeVisible());
+        });
+    },
 };
-export const WithCustomColors = () => (_jsxs(DropdownMenu, { defaultOpen: true, backgroundColor: "blackBlue", openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", ...customColors, children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, ...customColors, children: "Dropdown Button" })] }));
-WithCustomColors.story = {
+export const WithCustomColors = {
+    render: () => (_jsxs(DropdownMenu, { defaultOpen: true, backgroundColor: "blackBlue", openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", ...customColors, children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, ...customColors, children: "Dropdown Button" })] })),
     name: "with custom colors",
 };
-export const WithButtonClosingMenu = () => (_jsx(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: ({ closeMenu }) => _jsx(DropdownButton, { onClick: closeMenu, children: "Dropdown Button" }) }));
-WithButtonClosingMenu.story = {
+export const WithButtonClosingMenu = {
+    render: () => (_jsx(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: ({ closeMenu }) => _jsx(DropdownButton, { onClick: closeMenu, children: "Dropdown Button" }) })),
     name: "with button closing menu",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens the menu", async () => {
+            await userEvent.click(canvas.getByLabelText("open dropdown"));
+            await waitFor(() => expect(screen.getByText("Dropdown Button")).toBeVisible());
+        });
+        await step("closes the menu using the callback button", async () => {
+            await userEvent.click(screen.getByText("Dropdown Button"));
+            await waitFor(() => expect(canvas.queryByLabelText("close dropdown")).not.toBeInTheDocument());
+        });
+    },
 };
 export const WithCustomLink = () => (_jsx(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: _jsx(DropdownItem, { children: _jsx("a", { href: "/never_been", children: "Custom Link Component" }) }) }));
 export const WithCustomText = () => (_jsx(DropdownMenu, { defaultOpen: true, children: _jsx(DropdownText, { children: "Custom Text" }) }));
-export const SetToDefaultOpen = () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/never_been", style: { textDecoration: "none" }, children: "Custom Link Component" }) }), _jsx(DropdownText, { children: "Custom Text" })] }));
-SetToDefaultOpen.story = {
+export const SetToDefaultOpen = {
+    render: () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/never_been", style: { textDecoration: "none" }, children: "Custom Link Component" }) }), _jsx(DropdownText, { children: "Custom Text" })] })),
     name: "set to defaultOpen",
 };
-export const WithSubmenu = () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsxs(DropdownMenu, { trigger: () => (_jsx(DropdownButton, { children: _jsxs(Flex, { justifyContent: "space-between", children: [_jsx(Text, { children: "Submenu" }), _jsx(Icon, { icon: "rightArrow", title: "right arrow" })] }) })), placement: "left-start", showArrow: false, openOnHover: true, openAriaLabel: "open sub dropdown", closeAriaLabel: "close sub dropdown", children: [_jsx(DropdownButton, { onClick: () => { }, children: "Inner Dropdown Button" }), _jsx(DropdownText, { children: " Inner Custom Text" })] })] }));
-WithSubmenu.story = {
+export const WithSubmenu = {
+    render: () => (_jsxs(DropdownMenu, { openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" }), _jsxs(DropdownMenu, { trigger: () => (_jsx(DropdownButton, { children: _jsxs(Flex, { justifyContent: "space-between", children: [_jsx(Text, { children: "Submenu" }), _jsx(Icon, { icon: "rightArrow", title: "right arrow" })] }) })), placement: "left-start", showArrow: false, openOnHover: true, openAriaLabel: "open sub dropdown", closeAriaLabel: "close sub dropdown", children: [_jsx(DropdownButton, { onClick: () => { }, children: "Inner Dropdown Button" }), _jsx(DropdownText, { children: " Inner Custom Text" })] })] })),
     name: "with submenu",
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("opens the menu", async () => {
+            await userEvent.click(canvas.getByLabelText("open dropdown"));
+            await waitFor(() => expect(screen.getByText("Dropdown Button")).toBeVisible());
+        });
+        await step("opens the submenu on hover", async () => {
+            await userEvent.hover(screen.getByLabelText("open sub dropdown"));
+            await waitFor(() => expect(screen.getByText("Inner Dropdown Button")).toBeVisible());
+        });
+    },
 };
 export const WithVisitedLinks = () => (_jsxs(DropdownMenu, { defaultOpen: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/", children: "Dropdown Link" }), _jsx(DropdownItem, { children: _jsx("a", { href: "/", style: { textDecoration: "none" }, children: "Custom Link Component" }) })] }));
-export const SetToDisabled = () => (_jsxs(DropdownMenu, { disabled: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => (_jsxs(DropdownMenu, { disabled: true, openAriaLabel: "open dropdown", closeAriaLabel: "close dropdown", children: [_jsx(DropdownLink, { href: "/never_been", children: "Dropdown Link" }), _jsx(DropdownButton, { onClick: () => { }, children: "Dropdown Button" })] })),
     name: "Set to disabled",
 };
 export const WithConditionallyRenderedMenuItems = () => {
@@ -47,7 +89,7 @@ export const WithConditionallyRenderedMenuItems = () => {
     const showItemC = true;
     return (_jsxs(DropdownMenu, { children: [_jsx(DropdownButton, { onClick: () => { }, children: "Item A" }), showItemB && _jsx(DropdownButton, { onClick: () => { }, children: "Conditional Item B" }), showItemC && _jsx(DropdownButton, { onClick: () => { }, children: "Conditional Item C" })] }));
 };
-export const WithRenderProps = () => (_jsx(DropdownMenu, { children: ({ closeMenu, openMenu }) => (_jsxs(_Fragment, { children: [_jsx(DropdownButton, { onClick: (e) => closeMenu(e), children: "Close menu" }), _jsx(DropdownButton, { onClick: (e) => openMenu(e), children: "Open menu" })] })) }));
-WithRenderProps.story = {
+export const WithRenderProps = {
+    render: () => (_jsx(DropdownMenu, { children: ({ closeMenu, openMenu }) => (_jsxs(_Fragment, { children: [_jsx(DropdownButton, { onClick: (e) => closeMenu(e), children: "Close menu" }), _jsx(DropdownButton, { onClick: (e) => openMenu(e), children: "Open menu" })] })) })),
     name: "With render props",
 };

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

@@ -3,10 +3,8 @@ declare const _default: {
 };
 export default _default;
 export declare const _FieldLabel: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithHelpText: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithRequirementText: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/FieldLabel/FieldLabel.story.js

@@ -5,8 +5,8 @@ const helpTextWithLink = (_jsxs(_Fragment, { children: ["I am help text. I can b
 export default {
     title: "Components/FieldLabel",
 };
-export const _FieldLabel = () => _jsx(FieldLabel, { labelText: "Default label" });
-_FieldLabel.story = {
+export const _FieldLabel = {
+    render: () => _jsx(FieldLabel, { labelText: "Default label" }),
     name: "FieldLabel",
 };
 export const WithHelpText = () => _jsx(FieldLabel, { labelText: "Default label", helpText: helpTextWithLink });

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

@@ -4,104 +4,70 @@ declare const _default: {
 export default _default;
 export declare const _Flex: () => import("react/jsx-runtime").JSX.Element;
 export declare const FlexDirectionSetToRowReverse: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexDirectionSetToColumn: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexDirectionSetToColumnReverse: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexWrapSetToNoWrapDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexWrapSetToWrap: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const FlexWrapSetToWrapReverse: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToFlexStartDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToFlexEnd: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToCenter: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToSpaceBetween: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToSpaceAround: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const JustifyContentSetToSpaceEvenly: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AlignItemsSetToStretchDefault: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AlignItemsSetToFlexStart: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AlignItemsSetToCenter: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const AlignItemsSetToFlexEnd: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomOrder: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Flex/Flex.story.js

@@ -15,73 +15,73 @@ export default {
 export const _Flex = () => (_jsxs(Flex, { style: {
         boxSizing: "content-box",
     }, padding: "x3", bg: "whiteGrey", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-export const FlexDirectionSetToRowReverse = () => (_jsxs(Flex, { style: {
-        boxSizing: "content-box",
-    }, flexDirection: "row-reverse", padding: "x3", bg: "whiteGrey", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-FlexDirectionSetToRowReverse.story = {
+export const FlexDirectionSetToRowReverse = {
+    render: () => (_jsxs(Flex, { style: {
+            boxSizing: "content-box",
+        }, flexDirection: "row-reverse", padding: "x3", bg: "whiteGrey", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "flexDirection set to row-reverse",
 };
-export const FlexDirectionSetToColumn = () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-FlexDirectionSetToColumn.story = {
+export const FlexDirectionSetToColumn = {
+    render: () => (_jsxs(Flex, { flexDirection: "column", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "flexDirection set to column",
 };
-export const FlexDirectionSetToColumnReverse = () => (_jsxs(Flex, { flexDirection: "column-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-FlexDirectionSetToColumnReverse.story = {
+export const FlexDirectionSetToColumnReverse = {
+    render: () => (_jsxs(Flex, { flexDirection: "column-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "flexDirection set to column-reverse",
 };
-export const FlexWrapSetToNoWrapDefault = () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "nowrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) }));
-FlexWrapSetToNoWrapDefault.story = {
+export const FlexWrapSetToNoWrapDefault = {
+    render: () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "nowrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) })),
     name: "flexWrap set to no-wrap (default)",
 };
-export const FlexWrapSetToWrap = () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) }));
-FlexWrapSetToWrap.story = {
+export const FlexWrapSetToWrap = {
+    render: () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) })),
     name: "flexWrap set to wrap",
 };
-export const FlexWrapSetToWrapReverse = () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) }));
-FlexWrapSetToWrapReverse.story = {
+export const FlexWrapSetToWrapReverse = {
+    render: () => (_jsx(Box, { width: 500, children: _jsxs(Flex, { flexWrap: "wrap-reverse", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" }), _jsx(StyledBox, { children: "6" }), _jsx(StyledBox, { children: "7" })] }) })),
     name: "flexWrap set to wrap-reverse",
 };
-export const JustifyContentSetToFlexStartDefault = () => (_jsxs(Flex, { justifyContent: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToFlexStartDefault.story = {
+export const JustifyContentSetToFlexStartDefault = {
+    render: () => (_jsxs(Flex, { justifyContent: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to flex-start (default)",
 };
-export const JustifyContentSetToFlexEnd = () => (_jsxs(Flex, { justifyContent: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToFlexEnd.story = {
+export const JustifyContentSetToFlexEnd = {
+    render: () => (_jsxs(Flex, { justifyContent: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to flex-end",
 };
-export const JustifyContentSetToCenter = () => (_jsxs(Flex, { justifyContent: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToCenter.story = {
+export const JustifyContentSetToCenter = {
+    render: () => (_jsxs(Flex, { justifyContent: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to center",
 };
-export const JustifyContentSetToSpaceBetween = () => (_jsxs(Flex, { justifyContent: "space-between", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToSpaceBetween.story = {
+export const JustifyContentSetToSpaceBetween = {
+    render: () => (_jsxs(Flex, { justifyContent: "space-between", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to space-between",
 };
-export const JustifyContentSetToSpaceAround = () => (_jsxs(Flex, { justifyContent: "space-around", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToSpaceAround.story = {
+export const JustifyContentSetToSpaceAround = {
+    render: () => (_jsxs(Flex, { justifyContent: "space-around", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to space-around",
 };
-export const JustifyContentSetToSpaceEvenly = () => (_jsxs(Flex, { justifyContent: "space-evenly", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-JustifyContentSetToSpaceEvenly.story = {
+export const JustifyContentSetToSpaceEvenly = {
+    render: () => (_jsxs(Flex, { justifyContent: "space-evenly", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "justifyContent set to space-evenly",
 };
-export const AlignItemsSetToStretchDefault = () => (_jsxs(Flex, { alignItems: "stretch", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-AlignItemsSetToStretchDefault.story = {
+export const AlignItemsSetToStretchDefault = {
+    render: () => (_jsxs(Flex, { alignItems: "stretch", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "alignItems set to stretch (default)",
 };
-export const AlignItemsSetToFlexStart = () => (_jsxs(Flex, { alignItems: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-AlignItemsSetToFlexStart.story = {
+export const AlignItemsSetToFlexStart = {
+    render: () => (_jsxs(Flex, { alignItems: "flex-start", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "alignItems set to flex-start",
 };
-export const AlignItemsSetToCenter = () => (_jsxs(Flex, { alignItems: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-AlignItemsSetToCenter.story = {
+export const AlignItemsSetToCenter = {
+    render: () => (_jsxs(Flex, { alignItems: "center", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "alignItems set to center",
 };
-export const AlignItemsSetToFlexEnd = () => (_jsxs(Flex, { alignItems: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] }));
-AlignItemsSetToFlexEnd.story = {
+export const AlignItemsSetToFlexEnd = {
+    render: () => (_jsxs(Flex, { alignItems: "flex-end", children: [_jsx(StyledBox, { children: "1" }), _jsx(StyledBox, { children: "2" }), _jsx(StyledBox, { children: "3" }), _jsx(StyledBox, { children: "4" }), _jsx(StyledBox, { children: "5" })] })),
     name: "alignItems set to flex-end",
 };
-export const WithCustomOrder = () => (_jsxs(Flex, { children: [_jsx(StyledBox, { order: 1, children: "1" }), _jsx(StyledBox, { order: 3, children: "2" }), _jsx(StyledBox, { order: 2, children: "3" }), _jsx(StyledBox, { order: 5, children: "4" }), _jsx(StyledBox, { order: 4, children: "5" })] }));
-WithCustomOrder.story = {
+export const WithCustomOrder = {
+    render: () => (_jsxs(Flex, { children: [_jsx(StyledBox, { order: 1, children: "1" }), _jsx(StyledBox, { order: 3, children: "2" }), _jsx(StyledBox, { order: 2, children: "3" }), _jsx(StyledBox, { order: 5, children: "4" }), _jsx(StyledBox, { order: 4, children: "5" })] })),
     name: "With custom order",
 };

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

@@ -4,27 +4,19 @@ declare const _default: {
 export default _default;
 export declare const _Form: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutTitle: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithFormSections: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithFormSectionsWithoutTitles: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const DemoForm: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAnAction: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Form/Form.story.js

@@ -8,20 +8,20 @@ export default {
     title: "Components/Form",
 };
 export const _Form = () => (_jsxs(Form, { title: "New Profile", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }));
-export const WithoutTitle = () => (_jsxs(Form, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }));
-WithoutTitle.story = {
+export const WithoutTitle = {
+    render: () => (_jsxs(Form, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] })),
     name: "Without title",
 };
-export const WithFormSections = () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] }));
-WithFormSections.story = {
+export const WithFormSections = {
+    render: () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { title: "Personal Information", children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { title: "General Information", children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] })),
     name: "With form sections",
 };
-export const WithFormSectionsWithoutTitles = () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] }));
-WithFormSectionsWithoutTitles.story = {
+export const WithFormSectionsWithoutTitles = {
+    render: () => (_jsxs(Form, { title: "New Profile", children: [_jsxs(FormSection, { children: [_jsx(Input, { id: "name", labelText: "Name" }), _jsx(Input, { id: "birthdate", placeholder: "DD-MM-YYYY", labelText: "Date of birth", requirementText: "(Optional)", helpText: "Enter a date below" }), _jsx(Input, { id: "birthplace", labelText: "Place of birth", requirementText: "(Optional)" })] }), _jsxs(FormSection, { children: [_jsx(Input, { id: "gender", labelText: "Gender" }), _jsx(Input, { id: "occupation", labelText: "Occupation" })] })] })),
     name: "With form sections without titles",
 };
-export const DemoForm = () => (_jsx(_Fragment, { children: _jsxs(Form, { title: "Job 324400", children: [_jsxs(Alert, { type: "danger", title: "Errors have occured ...", children: [_jsx(Text, { children: "Instructions and description of errors" }), _jsxs(List, { compact: true, children: [_jsx(ListItem, { children: "Affected field" }), _jsx(ListItem, { children: "Unmet criteria" }), _jsx(ListItem, { children: _jsx("a", { href: "https://nulogy.design/", children: "Affected field" }) })] })] }), _jsxs(FormSection, { title: "Job Information", children: [_jsx(Input, { id: "project", labelText: "Project", placeholder: "Project 128703" }), _jsx(Input, { id: "project-description", labelText: "Project description", requirementText: "(Optional)", helpText: "Project description helps identify the project." }), _jsx(Select, { id: "project-status", labelText: "Project status", options: options }), _jsx(Input, { id: "item-code", labelText: "Item code", defaultValue: "WS2SB6", errorMessage: "Item WS2SB6 does not exist." }), _jsx(Input, { id: "eaches-expected", labelText: "Eaches expected on Job", placeholder: "2 000" }), _jsx(Input, { id: "eaches-remaining", labelText: "Eaches remaining on Project", defaultValue: "18 000", disabled: true }), _jsx(Input, { id: "scheduled-start", labelText: "Scheduled start", placeholder: "MMM-DD-YYYY" }), _jsx(Input, { id: "scheduled-end", labelText: "Scheduled end", placeholder: "MMM-DD-YYYY" }), _jsxs(CheckboxGroup, { labelText: "Line Lead", name: "linelead", requirementText: "(Optional)", children: [_jsx(Checkbox, { value: "christiaan", labelText: "Christiaan Oostenbrug" }), _jsx(Checkbox, { value: "matt", labelText: "Matt Dunn" }), _jsx(Checkbox, { value: "clemens", labelText: "Clemens Park", disabled: true, checked: true }), _jsx(Checkbox, { value: "nikola", labelText: "Nikola Pejcic", disabled: true })] }), _jsxs(RadioGroup, { errorMessage: "Only yes can be selected...", labelText: "Reconcile", name: "settingSelection", defaultValue: "yes", id: "reconcile", children: [_jsx(Radio, { value: "yes", labelText: "Yes" }), _jsx(Radio, { value: "no", labelText: "No" }), _jsx(Radio, { value: "maybe", labelText: "Maybe", disabled: true })] }), _jsx(Toggle, { id: "job-visibility", labelText: "Job Visibility", onText: "Visible", offText: "Hidden" })] }), _jsxs(FormSection, { title: "Rejects", children: [_jsx(Input, { defaultValue: "235432", id: "items", labelText: "Item", errorMessage: "Item 235432 is not a valid entry" }), _jsx(Input, { id: "quantity", labelText: "Quantity" }), _jsx(Toggle, { id: "reject-visibility", labelText: "Reject visibility", onText: "Visible", offText: "Hidden", disabled: true })] })] }) }));
-DemoForm.story = {
+export const DemoForm = {
+    render: () => (_jsx(_Fragment, { children: _jsxs(Form, { title: "Job 324400", children: [_jsxs(Alert, { type: "danger", title: "Errors have occured ...", children: [_jsx(Text, { children: "Instructions and description of errors" }), _jsxs(List, { compact: true, children: [_jsx(ListItem, { children: "Affected field" }), _jsx(ListItem, { children: "Unmet criteria" }), _jsx(ListItem, { children: _jsx("a", { href: "https://nulogy.design/", children: "Affected field" }) })] })] }), _jsxs(FormSection, { title: "Job Information", children: [_jsx(Input, { id: "project", labelText: "Project", placeholder: "Project 128703" }), _jsx(Input, { id: "project-description", labelText: "Project description", requirementText: "(Optional)", helpText: "Project description helps identify the project." }), _jsx(Select, { id: "project-status", labelText: "Project status", options: options }), _jsx(Input, { id: "item-code", labelText: "Item code", defaultValue: "WS2SB6", errorMessage: "Item WS2SB6 does not exist." }), _jsx(Input, { id: "eaches-expected", labelText: "Eaches expected on Job", placeholder: "2 000" }), _jsx(Input, { id: "eaches-remaining", labelText: "Eaches remaining on Project", defaultValue: "18 000", disabled: true }), _jsx(Input, { id: "scheduled-start", labelText: "Scheduled start", placeholder: "MMM-DD-YYYY" }), _jsx(Input, { id: "scheduled-end", labelText: "Scheduled end", placeholder: "MMM-DD-YYYY" }), _jsxs(CheckboxGroup, { labelText: "Line Lead", name: "linelead", requirementText: "(Optional)", children: [_jsx(Checkbox, { value: "christiaan", labelText: "Christiaan Oostenbrug" }), _jsx(Checkbox, { value: "matt", labelText: "Matt Dunn" }), _jsx(Checkbox, { value: "clemens", labelText: "Clemens Park", disabled: true, checked: true }), _jsx(Checkbox, { value: "nikola", labelText: "Nikola Pejcic", disabled: true })] }), _jsxs(RadioGroup, { errorMessage: "Only yes can be selected...", labelText: "Reconcile", name: "settingSelection", defaultValue: "yes", id: "reconcile", children: [_jsx(Radio, { value: "yes", labelText: "Yes" }), _jsx(Radio, { value: "no", labelText: "No" }), _jsx(Radio, { value: "maybe", labelText: "Maybe", disabled: true })] }), _jsx(Toggle, { id: "job-visibility", labelText: "Job Visibility", onText: "Visible", offText: "Hidden" })] }), _jsxs(FormSection, { title: "Rejects", children: [_jsx(Input, { defaultValue: "235432", id: "items", labelText: "Item", errorMessage: "Item 235432 is not a valid entry" }), _jsx(Input, { id: "quantity", labelText: "Quantity" }), _jsx(Toggle, { id: "reject-visibility", labelText: "Reject visibility", onText: "Visible", offText: "Hidden", disabled: true })] })] }) })),
     name: "Demo form",
 };
 export const WithAnAction = () => {

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

@@ -3,38 +3,26 @@ declare const _default: {
 };
 export default _default;
 export declare const BasicIcon: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const _InlineIcon: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAColor: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithASize: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAddedMargin: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAccessibilityTitle: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Icon/Icon.story.js

@@ -8,30 +8,30 @@ const IconCode = ({ icon }) => (_jsxs("code", { children: ["<Icon icon=\"", _jsx
 export default {
     title: "Components/Icon",
 };
-export const BasicIcon = () => (_jsx(_Fragment, { children: iconNames.map((iconName) => (_jsxs(Flex, { my: "x2", children: [_jsx(Icon, { mr: "20px", icon: iconName }), _jsx(IconCode, { icon: iconName })] }, iconName))) }));
-BasicIcon.story = {
+export const BasicIcon = {
+    render: () => (_jsx(_Fragment, { children: iconNames.map((iconName) => (_jsxs(Flex, { my: "x2", children: [_jsx(Icon, { mr: "20px", icon: iconName }), _jsx(IconCode, { icon: iconName })] }, iconName))) })),
     name: "Icon",
 };
-export const _InlineIcon = () => (_jsx(_Fragment, { children: [1, 2, 3, 4].map((size) => (_jsxs("p", { style: { fontSize: `${size}em` }, children: ["@", size, "em: \u00A0", iconSubset.map((iconName) => (_jsx(InlineIcon, { icon: iconName }, iconName)))] }, size))) }));
-_InlineIcon.story = {
+export const _InlineIcon = {
+    render: () => (_jsx(_Fragment, { children: [1, 2, 3, 4].map((size) => (_jsxs("p", { style: { fontSize: `${size}em` }, children: ["@", size, "em: \u00A0", iconSubset.map((iconName) => (_jsx(InlineIcon, { icon: iconName }, iconName)))] }, size))) })),
     name: "InlineIcon",
 };
-export const WithAColor = () => (_jsx(_Fragment, { children: ["red", "yellow", "green", "blue", "blackBlue"].map((color) => (_jsx(Box, { children: iconSubset.map((iconName) => (_jsx(Icon, { icon: iconName, color: color }, iconName))) }, color))) }));
-WithAColor.story = {
+export const WithAColor = {
+    render: () => (_jsx(_Fragment, { children: ["red", "yellow", "green", "blue", "blackBlue"].map((color) => (_jsx(Box, { children: iconSubset.map((iconName) => (_jsx(Icon, { icon: iconName, color: color }, iconName))) }, color))) })),
     name: "With a color",
 };
-export const WithASize = () => {
-    const theme = useTheme();
-    return (_jsx(_Fragment, { children: [theme.space.x1, theme.space.x2, theme.space.x3].map((size) => (_jsx(Box, { children: iconSubset.map((iconName) => (_jsx(Icon, { icon: iconName, size: size }, iconName))) }, size))) }));
-};
-WithASize.story = {
+export const WithASize = {
+    render: () => {
+        const theme = useTheme();
+        return (_jsx(_Fragment, { children: [theme.space.x1, theme.space.x2, theme.space.x3].map((size) => (_jsx(Box, { children: iconSubset.map((iconName) => (_jsx(Icon, { icon: iconName, size: size }, iconName))) }, size))) }));
+    },
     name: "With a size",
 };
-export const WithAddedMargin = () => (_jsxs(Box, { m: "x3", children: [_jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { m: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mt: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mr: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mb: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { ml: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mx: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { my: "x2", icon: "delete" }) })] }));
-WithAddedMargin.story = {
+export const WithAddedMargin = {
+    render: () => (_jsxs(Box, { m: "x3", children: [_jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { m: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mt: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mr: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mb: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { ml: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { mx: "x2", icon: "delete" }) }), _jsx(Box, { style: { display: "inline-block" }, m: "x3", bg: "lightGrey", children: _jsx(Icon, { my: "x2", icon: "delete" }) })] })),
     name: "With added margin",
 };
-export const WithAccessibilityTitle = () => (_jsxs(_Fragment, { children: [_jsxs(Flex, { p: "x2", children: [_jsx(Icon, { icon: "user", title: "User account" }), " This has a title attribute so it will be read by assistive devices."] }), _jsxs(Flex, { p: "x2", children: [_jsx(Icon, { icon: "user" }), " This doesn't have a title attribute, so it has aria-hidden set true instead."] })] }));
-WithAccessibilityTitle.story = {
+export const WithAccessibilityTitle = {
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(Flex, { p: "x2", children: [_jsx(Icon, { icon: "user", title: "User account" }), " This has a title attribute so it will be read by assistive devices."] }), _jsxs(Flex, { p: "x2", children: [_jsx(Icon, { icon: "user" }), " This doesn't have a title attribute, so it has aria-hidden set true instead."] })] })),
     name: "With accessibility title",
 };