@nulogy/components 16.0.2 → 16.0.3

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

@@ -4,52 +4,36 @@ declare const _default: {
 export default _default;
 export declare const _Input: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAllProps: {
-    (): 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 WithErrorMessage: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithErrorList: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomId: {
-    (): 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 WithAAffixPrefixAndSuffix: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAnIcon: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithIconTooltips: () => import("react/jsx-runtime").JSX.Element;
 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/Input/Input.story.js

@@ -1,38 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef } from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Input, Form, FormSection, PrimaryButton, Button, Flex, Heading4 } from "../index";
 const errorList = ["Error message 1", "Error message 2"];
 export default {
     title: "Components/Input",
 };
 export const _Input = () => _jsx(Input, { labelText: "Input", onChange: action("value changed"), onBlur: action("blurred") });
-export const WithAllProps = () => (_jsx(Input, { placeholder: "Placeholder", p: "x3", labelText: "Input", helpText: "Additional help text", requirementText: "Required", onChange: action("value changed"), onBlur: action("blurred"), required: true }));
-WithAllProps.story = {
+export const WithAllProps = {
+    render: () => (_jsx(Input, { placeholder: "Placeholder", p: "x3", labelText: "Input", helpText: "Additional help text", requirementText: "Required", onChange: action("value changed"), onBlur: action("blurred"), required: true })),
     name: "with all props",
 };
-export const SetToDisabled = () => (_jsx(Input, { labelText: "Set to disabled", disabled: true, onBlur: action("blurred"), value: "Disabled" }));
-SetToDisabled.story = {
+export const SetToDisabled = {
+    render: () => _jsx(Input, { labelText: "Set to disabled", disabled: true, onBlur: action("blurred"), value: "Disabled" }),
     name: "set to disabled",
 };
-export const WithErrorMessage = () => (_jsx(Input, { labelText: "Label", errorMessage: "Error message", onChange: action("value changed"), onBlur: action("blurred") }));
-WithErrorMessage.story = {
+export const WithErrorMessage = {
+    render: () => (_jsx(Input, { labelText: "Label", errorMessage: "Error message", onChange: action("value changed"), onBlur: action("blurred") })),
     name: "with error message",
 };
-export const WithErrorList = () => (_jsx(Input, { labelText: "Label", errorMessage: "Error message", errorList: errorList, onChange: action("value changed"), onBlur: action("blurred") }));
-WithErrorList.story = {
+export const WithErrorList = {
+    render: () => (_jsx(Input, { labelText: "Label", errorMessage: "Error message", errorList: errorList, onChange: action("value changed"), onBlur: action("blurred") })),
     name: "with error list ",
 };
-export const WithCustomId = () => (_jsx(Input, { id: "my-own-id", labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }));
-WithCustomId.story = {
+export const WithCustomId = {
+    render: () => (_jsx(Input, { id: "my-own-id", labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") })),
     name: "with custom ID",
 };
-export const SetToRequired = () => (_jsx(_Fragment, { children: _jsxs(Form, { title: "Required field example", children: [_jsx(Input, { required: true, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }), _jsx(PrimaryButton, { children: "Send" })] }) }));
-SetToRequired.story = {
+export const SetToRequired = {
+    render: () => (_jsx(_Fragment, { children: _jsxs(Form, { title: "Required field example", children: [_jsx(Input, { required: true, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }), _jsx(PrimaryButton, { children: "Send" })] }) })),
     name: "set to required",
 };
-export const WithAAffixPrefixAndSuffix = () => (_jsxs(_Fragment, { children: [_jsxs(Form, { title: "Suffix", mb: "x6", children: [_jsxs(FormSection, { children: [_jsx(Input, { suffix: "Eaches" }), _jsx(Input, { suffix: "Pallets and boxes" })] }), _jsxs(FormSection, { title: "With Custom Width", children: [_jsx(Input, { suffix: "Eaches", suffixWidth: "360px", prefixAlignment: "right" }), _jsx(Input, { suffix: "Pallets and boxes", suffixWidth: "360px" })] })] }), _jsxs(Form, { title: "Prefix", mb: "x6", children: [_jsxs(FormSection, { children: [_jsx(Input, { prefix: "Eaches" }), _jsx(Input, { prefix: "Pallets and boxes" })] }), _jsxs(FormSection, { title: "With Custom Width", children: [_jsx(Input, { prefix: "Eaches", prefixWidth: "360px" }), _jsx(Input, { prefix: "Pallets and boxes", prefixWidth: "360px" })] }), _jsxs(FormSection, { title: "With right alignment", children: [_jsx(Input, { prefix: "Eaches", prefixWidth: "360px", prefixAlignment: "right" }), _jsx(Input, { prefix: "Pallets and boxes", prefixWidth: "360px", prefixAlignment: "right" })] })] }), _jsx(Form, { title: "Prefix and Suffix", mb: "x6", children: _jsx(Input, { prefix: "Quantity", suffix: "Eaches" }) })] }));
-WithAAffixPrefixAndSuffix.story = {
+export const WithAAffixPrefixAndSuffix = {
+    render: () => (_jsxs(_Fragment, { children: [_jsxs(Form, { title: "Suffix", mb: "x6", children: [_jsxs(FormSection, { children: [_jsx(Input, { suffix: "Eaches" }), _jsx(Input, { suffix: "Pallets and boxes" })] }), _jsxs(FormSection, { title: "With Custom Width", children: [_jsx(Input, { suffix: "Eaches", suffixWidth: "360px", prefixAlignment: "right" }), _jsx(Input, { suffix: "Pallets and boxes", suffixWidth: "360px" })] })] }), _jsxs(Form, { title: "Prefix", mb: "x6", children: [_jsxs(FormSection, { children: [_jsx(Input, { prefix: "Eaches" }), _jsx(Input, { prefix: "Pallets and boxes" })] }), _jsxs(FormSection, { title: "With Custom Width", children: [_jsx(Input, { prefix: "Eaches", prefixWidth: "360px" }), _jsx(Input, { prefix: "Pallets and boxes", prefixWidth: "360px" })] }), _jsxs(FormSection, { title: "With right alignment", children: [_jsx(Input, { prefix: "Eaches", prefixWidth: "360px", prefixAlignment: "right" }), _jsx(Input, { prefix: "Pallets and boxes", prefixWidth: "360px", prefixAlignment: "right" })] })] }), _jsx(Form, { title: "Prefix and Suffix", mb: "x6", children: _jsx(Input, { prefix: "Quantity", suffix: "Eaches" }) })] })),
     name: "with a affix (prefix and suffix)",
 };
 export const WithAnIcon = () => (_jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", placeholder: "Search by SKU", labelText: "Left Icon" }), _jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", placeholder: "Search by SKU", labelText: "Right Icon" }), _jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconRight: "barcode", iconLeft: "search", placeholder: "Search by SKU", labelText: "Left and right icons" }), _jsx(Input, { maxWidth: "320px", inputWidth: "320px", iconLeft: "search", iconLeftSize: "x2", placeholder: "Search by SKU", labelText: "Custom icon size" })] }));
@@ -48,13 +48,13 @@ export const WithIconTooltips = () => (_jsxs(Flex, { flexDirection: "column", ga
                 placement: "top",
                 maxWidth: "150px",
             }, placeholder: "Enter your access number", labelText: "Different placements (top and bottom)" })] }));
-export const UsingRefToControlFocus = () => {
-    const ref = useRef(null);
-    const handleClick = () => {
-        ref.current.focus();
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Input, { id: "my-own-id", ref: ref, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }), _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(Input, { id: "my-own-id", ref: ref, labelText: "Label", onChange: action("value changed"), onBlur: action("blurred") }), _jsx(Button, { onClick: handleClick, children: "Focus the Input" })] }));
+    },
     name: "using ref to control focus",
 };

package/dist/src/Layout/Page.applicationFrame.story.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { Page } from "..";
 declare const _default: {
     title: string;

package/dist/src/Layout/Page.story.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { Page } from "..";
 declare const _default: {
     title: string;

package/dist/src/Layout/Sidebar.story.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { Sidebar } from "..";
 declare const _default: {
     title: string;

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

@@ -3,52 +3,36 @@ declare const _default: {
 };
 export default _default;
 export declare const _Link: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomFontSize: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithoutUnderline: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithADifferentColor: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithADifferentFontSize: () => import("react/jsx-runtime").JSX.Element;
 export declare const AsAButton: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const _ReactRouterLink: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAppTag: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const OpenInNewTab: () => import("react/jsx-runtime").JSX.Element;
 export declare const OpenInNewTabWithAppTag: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Link/Link.story.js

@@ -4,38 +4,37 @@ import { Link } from "../index";
 export default {
     title: "Components/Link",
 };
-export const _Link = () => _jsx(Link, { href: "http://nulogy.design", children: "Link" });
-_Link.story = {
+export const _Link = {
+    render: () => _jsx(Link, { href: "http://nulogy.design", children: "Link" }),
     name: "Link ",
 };
-export const WithCustomFontSize = () => (_jsx(Link, { href: "http://nulogy.design", fontSize: "small", children: "Link" }));
-WithCustomFontSize.story = {
+export const WithCustomFontSize = {
+    render: () => (_jsx(Link, { href: "http://nulogy.design", fontSize: "small", children: "Link" })),
     name: "with custom font size",
 };
-export const WithoutUnderline = () => (_jsx(Link, { underline: false, href: "http://nulogy.design", children: "Link" }));
-WithoutUnderline.story = {
+export const WithoutUnderline = {
+    render: () => (_jsx(Link, { underline: false, href: "http://nulogy.design", children: "Link" })),
     name: "Without underline",
 };
-export const WithADifferentColor = () => (_jsx(Link, { color: "black", hover: "red", href: "http://nulogy.design", children: "Link" }));
-WithADifferentColor.story = {
+export const WithADifferentColor = {
+    render: () => (_jsx(Link, { color: "black", hover: "red", href: "http://nulogy.design", children: "Link" })),
     name: "With a different color",
 };
 export const WithADifferentFontSize = () => (_jsx(Link, { fontSize: "large", href: "http://nulogy.design", children: "Link" }));
-export const AsAButton = () => _jsx(Link, { as: "button", children: "Link" });
-AsAButton.story = {
+export const AsAButton = {
+    render: () => _jsx(Link, { as: "button", children: "Link" }),
     name: "As a <button>",
 };
-export const _ReactRouterLink = () => (_jsx(BrowserRouter, { children: _jsx(Link, { as: ReactRouterLink, to: "/place", children: "Link" }) }));
-_ReactRouterLink.story = {
+export const _ReactRouterLink = {
+    render: () => (_jsx(BrowserRouter, { children: _jsx(Link, { as: ReactRouterLink, to: "/place", children: "Link" }) })),
     name: "with react router",
 };
-export const WithAppTag = () => (_jsx(Link, { href: "#production-scheduling", forApp: "production-scheduling", children: "POLI-120392" }));
-WithAppTag.story = {
-    // This story is referenced in the AppTag story. If you change the name, update the URL in the AppTag story.
+export const WithAppTag = {
+    render: () => (_jsx(Link, { href: "#production-scheduling", forApp: "production-scheduling", children: "POLI-120392" })),
     name: "With AppTag",
 };
 export const OpenInNewTab = () => (_jsx(Link, { href: "#production-scheduling", openInNewTab: true, children: "POLI-120392" }));
-export const OpenInNewTabWithAppTag = () => (_jsx(Link, { href: "#production-scheduling", forApp: "production-scheduling", openInNewTab: true, children: "POLI-120392" }));
-OpenInNewTabWithAppTag.story = {
+export const OpenInNewTabWithAppTag = {
+    render: () => (_jsx(Link, { href: "#production-scheduling", forApp: "production-scheduling", openInNewTab: true, children: "POLI-120392" })),
     name: "Open in new tab with AppTag",
 };

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

@@ -4,26 +4,18 @@ declare const _default: {
 export default _default;
 export declare const _List: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomColour: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCustomFontSizeAndLineHeight: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithCompactSpacing: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithLeftAlignment: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/List/List.story.js

@@ -4,19 +4,19 @@ export default {
     title: "Components/List",
 };
 export const _List = () => (_jsxs(List, { children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] }));
-export const WithCustomColour = () => (_jsxs(List, { color: "red", children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] }));
-WithCustomColour.story = {
+export const WithCustomColour = {
+    render: () => (_jsxs(List, { color: "red", children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] })),
     name: "With custom colour",
 };
-export const WithCustomFontSizeAndLineHeight = () => (_jsxs(List, { fontSize: "small", lineHeight: "smallTextBase", children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { fontSize: "large", children: "Larger List Item 3" })] }));
-WithCustomFontSizeAndLineHeight.story = {
+export const WithCustomFontSizeAndLineHeight = {
+    render: () => (_jsxs(List, { fontSize: "small", lineHeight: "smallTextBase", children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { fontSize: "large", children: "Larger List Item 3" })] })),
     name: "With custom font size and line height",
 };
-export const WithCompactSpacing = () => (_jsxs(List, { compact: true, children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] }));
-WithCompactSpacing.story = {
+export const WithCompactSpacing = {
+    render: () => (_jsxs(List, { compact: true, children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] })),
     name: "With compact spacing",
 };
-export const WithLeftAlignment = () => (_jsxs(List, { leftAlign: true, children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] }));
-WithLeftAlignment.story = {
+export const WithLeftAlignment = {
+    render: () => (_jsxs(List, { leftAlign: true, children: [_jsx(ListItem, { children: "List Item 1" }), _jsx(ListItem, { children: "List Item 2 that is really really really really really really really really really long" }), _jsx(ListItem, { children: "List Item 3" })] })),
     name: "With left alignment",
 };

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

@@ -5,14 +5,10 @@ export default _default;
 export declare const Active: () => import("react/jsx-runtime").JSX.Element;
 export declare const Inactive: () => import("react/jsx-runtime").JSX.Element;
 export declare const PageExampleActive: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const PageExampleInactive: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/LoadingAnimation/LoadingAnimation.story.js

@@ -6,11 +6,11 @@ export default {
 };
 export const Active = () => _jsx(LoadingAnimation, { children: "Example" });
 export const Inactive = () => _jsx(LoadingAnimation, { inactive: true, children: "Example" });
-export const PageExampleActive = () => (_jsxs(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" }, children: [_jsxs(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4", children: [_jsx(Text, { mb: "x2", fontWeight: "medium", textAlign: "right", children: "1/4" }), _jsx(Box, { mb: "x1", children: _jsx(LoadingAnimation, {}) }), _jsx(Text, { fontSize: "small", color: "darkGrey", children: "Applying action ..." })] }), _jsxs(Flex, { justifyContent: "center", mb: "x1", children: [_jsx(ControlIcon, { icon: "refresh", disabled: true, mr: "x1", label: "Retry" }), _jsx(ControlIcon, { icon: "close", label: "Abort" })] })] }));
-PageExampleActive.story = {
+export const PageExampleActive = {
+    render: () => (_jsxs(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" }, children: [_jsxs(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4", children: [_jsx(Text, { mb: "x2", fontWeight: "medium", textAlign: "right", children: "1/4" }), _jsx(Box, { mb: "x1", children: _jsx(LoadingAnimation, {}) }), _jsx(Text, { fontSize: "small", color: "darkGrey", children: "Applying action ..." })] }), _jsxs(Flex, { justifyContent: "center", mb: "x1", children: [_jsx(ControlIcon, { icon: "refresh", disabled: true, mr: "x1", label: "Retry" }), _jsx(ControlIcon, { icon: "close", label: "Abort" })] })] })),
     name: "Page example - active",
 };
-export const PageExampleInactive = () => (_jsxs(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" }, children: [_jsxs(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4", children: [_jsx(Text, { mb: "x2", fontWeight: "medium", color: "grey", textAlign: "right", children: "1/4" }), _jsx(Box, { mb: "x1", children: _jsx(LoadingAnimation, { inactive: true }) }), _jsx(Text, { fontSize: "small", color: "grey", children: "Applying action ..." })] }), _jsx(Alert, { type: "warning", mb: "x2", position: "absolute", bottom: "x8", children: "This action takes longer than expected. Try again..." }), _jsxs(Flex, { justifyContent: "center", mb: "x1", children: [_jsx(ControlIcon, { icon: "refresh", mr: "x1", label: "Retry" }), _jsx(ControlIcon, { icon: "close", label: "Abort" })] })] }));
-PageExampleInactive.story = {
+export const PageExampleInactive = {
+    render: () => (_jsxs(Overlay, { flexDirection: "column", m: { extraSmall: "x2", small: "x3" }, children: [_jsxs(Flex, { flexGrow: 2, flexDirection: "column", justifyContent: "center", margin: "auto", mb: "x4", children: [_jsx(Text, { mb: "x2", fontWeight: "medium", color: "grey", textAlign: "right", children: "1/4" }), _jsx(Box, { mb: "x1", children: _jsx(LoadingAnimation, { inactive: true }) }), _jsx(Text, { fontSize: "small", color: "grey", children: "Applying action ..." })] }), _jsx(Alert, { type: "warning", mb: "x2", position: "absolute", bottom: "x8", children: "This action takes longer than expected. Try again..." }), _jsxs(Flex, { justifyContent: "center", mb: "x1", children: [_jsx(ControlIcon, { icon: "refresh", mr: "x1", label: "Retry" }), _jsx(ControlIcon, { icon: "close", label: "Abort" })] })] })),
     name: "Page example - inactive",
 };

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import MaybeTooltip from "./MaybeTooltip";
 declare const _default: {
     title: string;

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

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { Modal as NDSModal } from "../index";
 declare const _default: {
     title: string;

package/dist/src/Navigation/stories/Navigation.appSwitcher.story.d.ts

@@ -5,7 +5,14 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const AllApps: () => import("react/jsx-runtime").JSX.Element;
+export declare const AllApps: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
+    play: ({ canvasElement: _canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const OnlySelectApps: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithConditionallyVisibleApps: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithAnIndicator: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Navigation/stories/Navigation.appSwitcher.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
+import { expect, screen, waitFor } from "storybook/test";
 import useConditionalAutoClick from "../../utils/testing/useConditionalAutoClick";
 import Navigation from "../Navigation";
 import { ApplicationFrame, Page } from "../../Layout";
@@ -18,7 +19,7 @@ export default {
     },
 };
 const appSwitcherToggleSelector = 'button[aria-label="Toggle app switcher"]';
-export const AllApps = () => {
+const AllAppsComponent = () => {
     useConditionalAutoClick({
         selector: appSwitcherToggleSelector,
         condition: {
@@ -52,6 +53,23 @@ export const AllApps = () => {
             },
         } }));
 };
+export const AllApps = {
+    render: () => _jsx(AllAppsComponent, {}),
+    name: "All Apps",
+    play: async ({ canvasElement: _canvasElement, step }) => {
+        await step("auto-opens the app switcher", async () => {
+            await waitFor(() => expect(screen.getByText("Production Scheduling")).toBeVisible(), { timeout: 3000 });
+        });
+        await step("displays all available apps", async () => {
+            await expect(screen.getByText("Supplier Collaboration")).toBeVisible();
+            await expect(screen.getByText("Digital Quality Inspection")).toBeVisible();
+            await expect(screen.getByText(/Shop Floor/)).toBeVisible();
+            await expect(screen.getByText("Smart Factory")).toBeVisible();
+            await expect(screen.getByText("Connections")).toBeVisible();
+            await expect(screen.getByText("Data")).toBeVisible();
+        });
+    },
+};
 export const OnlySelectApps = () => {
     useConditionalAutoClick({
         selector: appSwitcherToggleSelector,

package/dist/src/Navigation/stories/Navigation.logos.story.d.ts

@@ -14,8 +14,6 @@ export declare const WithoutPassingAPrimaryLogo: () => import("react/jsx-runtime
 export declare const WithoutAPrimaryLogo: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithACustomPrimaryLogo: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithNavigationLogoWrapper: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Navigation/stories/Navigation.logos.story.js

@@ -49,9 +49,9 @@ export const WithoutAPrimaryLogo = () => {
 export const WithACustomPrimaryLogo = () => {
     return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { primaryLogo: _jsx(CustomLogo2, { style: { width: "auto", height: 24 } }) }), children: _jsx(Page, { fullHeight: true, children: _jsx(Alert, { type: "danger", children: "This is not a recommended usage of the Navigation component." }) }) }));
 };
-export const WithNavigationLogoWrapper = () => {
-    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { secondaryLogo: _jsx(NavigationLogoLink, { href: "/", "aria-label": "Custom Logo", children: _jsx(NavigationLogo, { children: _jsx(CustomLogo2, {}) }) }) }), children: _jsx(Page, { fullHeight: true, children: _jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Text, { children: ["Secondary logos are not styled, ensure setting an explicit ", _jsx(Code, { children: "width" }), " / ", _jsx(Code, { children: "height" }), " on the passed ", _jsx(Code, { children: "ReactNode" }), " to prevent overflow, or using the ", _jsx(Code, { children: "NavigationLogo" }), " helper."] }), _jsxs(Text, { children: [_jsx(Code, { children: "NavigationLogo" }), " component constrains logos to maximum ", _jsx(Code, { children: "184px" }), " width and", " ", _jsx(Code, { children: "36px" }), " height by default to prevent overflow in the Navigation."] }), _jsxs(Text, { children: ["You can adjust this by passing ", _jsx(Code, { children: "maxWidth" }), " and ", _jsx(Code, { children: "maxHeight" }), " props to the", " ", _jsx(Code, { children: "NavigationLogo" }), " component."] })] }) }) }));
-};
-WithNavigationLogoWrapper.story = {
+export const WithNavigationLogoWrapper = {
+    render: () => {
+        return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { secondaryLogo: _jsx(NavigationLogoLink, { href: "/", "aria-label": "Custom Logo", children: _jsx(NavigationLogo, { children: _jsx(CustomLogo2, {}) }) }) }), children: _jsx(Page, { fullHeight: true, children: _jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Text, { children: ["Secondary logos are not styled, ensure setting an explicit ", _jsx(Code, { children: "width" }), " / ", _jsx(Code, { children: "height" }), " on the passed ", _jsx(Code, { children: "ReactNode" }), " to prevent overflow, or using the ", _jsx(Code, { children: "NavigationLogo" }), " helper."] }), _jsxs(Text, { children: [_jsx(Code, { children: "NavigationLogo" }), " component constrains logos to maximum ", _jsx(Code, { children: "184px" }), " width and", " ", _jsx(Code, { children: "36px" }), " height by default to prevent overflow in the Navigation."] }), _jsxs(Text, { children: ["You can adjust this by passing ", _jsx(Code, { children: "maxWidth" }), " and ", _jsx(Code, { children: "maxHeight" }), " props to the", " ", _jsx(Code, { children: "NavigationLogo" }), " component."] })] }) }) }));
+    },
     name: "With NavigationLogo wrapper",
 };

package/dist/src/Navigation/stories/Navigation.story.d.ts

@@ -5,6 +5,12 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const BasicUsage: () => import("react/jsx-runtime").JSX.Element;
+export declare const BasicUsage: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+    play: ({ canvasElement: _canvasElement, step }: {
+        canvasElement: any;
+        step: any;
+    }) => Promise<void>;
+};
 export declare const WithACustomBreakpoint: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithBanners: () => import("react/jsx-runtime").JSX.Element;