@nulogy/components 16.0.1 → 16.0.3

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

@@ -10,7 +10,11 @@ export interface IconProps extends SpaceProps {
     focusable?: boolean;
     style?: React.CSSProperties;
 }
-declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<IconProps & React.RefAttributes<SVGSVGElement>, IconProps>> & string & Omit<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>, keyof React.Component<any, {}, any>>;
+declare const Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<IconProps & React.RefAttributes<SVGSVGElement>, "ref"> & {
+    ref?: React.Ref<SVGSVGElement>;
+}, IconProps>> & string & Omit<React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>, keyof React.Component<any, {}, any>>;
 export declare const InlineIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
-export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<IconProps & React.RefAttributes<SVGSVGElement>, keyof IconProps> & IconProps, PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>>> & string;
+export declare const InputIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<Omit<IconProps & React.RefAttributes<SVGSVGElement>, "ref"> & {
+    ref?: React.Ref<SVGSVGElement>;
+}, keyof IconProps> & IconProps, PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>>> & string;
 export default Icon;

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",
 };

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(ReactRouterLink, { component: Link, 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.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 type ModalProps = {
+    children?: React.ReactNode;
     isOpen?: boolean;
     title?: string;
     ariaLabel?: string;
@@ -19,7 +20,8 @@ type ModalProps = {
     footerContent?: React.ReactNode;
     parentSelector?: (...args: any) => HTMLElement;
 };
-declare const Modal: React.FC<React.PropsWithChildren<ModalProps>> & {
-    setAppElement: (element: string | HTMLElement) => void;
-};
+declare function Modal({ isOpen, shouldFocusAfterRender, shouldReturnFocusAfterClose, maxWidth, ariaHideApp, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, portalClassName, overlayClassName, className, id, appElement, footerContent, closeAriaLabel, parentSelector, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Modal {
+    var setAppElement: any;
+}
 export default Modal;

package/dist/src/Modal/Modal.js

@@ -56,7 +56,7 @@ const StyledReactModal = styled(ReactModal)(({ maxWidth }) => ({
     WebkitFontSmoothing: "antialiased",
     MozOsxFontSmoothing: "grayscale",
 }));
-const Modal = ({ isOpen = true, shouldFocusAfterRender = true, shouldReturnFocusAfterClose = true, maxWidth = "624px", ariaHideApp = true, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, portalClassName, overlayClassName, className, id, appElement, footerContent, closeAriaLabel, parentSelector, }) => {
+function Modal({ isOpen = true, shouldFocusAfterRender = true, shouldReturnFocusAfterClose = true, maxWidth = "624px", ariaHideApp = true, children, title, onRequestClose, onAfterOpen, ariaLabel, ariaDescribedBy, portalClassName, overlayClassName, className, id, appElement, footerContent, closeAriaLabel, parentSelector, }) {
     const modalHasHeader = Boolean(onRequestClose || title);
     const themeContext = useContext(ThemeContext);
     return (_jsx(StyledReactModal, { maxWidth: maxWidth, contentLabel: ariaLabel, onRequestClose: onRequestClose, onAfterOpen: onAfterOpen, shouldFocusAfterRender: shouldFocusAfterRender, shouldReturnFocusAfterClose: shouldReturnFocusAfterClose, isOpen: isOpen, portalClassName: portalClassName, overlayClassName: overlayClassName, className: className, id: id, aria: {
@@ -65,7 +65,7 @@ const Modal = ({ isOpen = true, shouldFocusAfterRender = true, shouldReturnFocus
         }, shouldCloseOnOverlayClick: true, shouldCloseOnEsc: true, style: {
             overlay: overlayStyle(themeContext),
         }, appElement: appElement, ariaHideApp: ariaHideApp, parentSelector: parentSelector, children: _jsx(ModalWrapper, { closeAriaLabel: closeAriaLabel, modalHasHeader: modalHasHeader, title: title, onRequestClose: onRequestClose, footerContent: footerContent, children: children }) }));
-};
+}
 function ModalWrapper({ modalHasHeader, title, onRequestClose, closeAriaLabel, children, footerContent, }) {
     const theme = useTheme();
     useScrollLock();

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

@@ -1,30 +1,8 @@
-import type { StoryObj } from "@storybook/react";
-import React from "react";
+import type { StoryObj } from "@storybook/react-vite";
 import { Modal as NDSModal } from "../index";
 declare const _default: {
     title: string;
-    component: React.FC<React.PropsWithChildren<{
-        isOpen?: boolean;
-        title?: string;
-        ariaLabel?: string;
-        onRequestClose?: (...args: any[]) => any;
-        closeAriaLabel?: string;
-        onAfterOpen?: (...args: any[]) => any;
-        shouldFocusAfterRender?: boolean;
-        shouldReturnFocusAfterClose?: boolean;
-        ariaDescribedBy?: string;
-        maxWidth?: string;
-        portalClassName?: string;
-        overlayClassName?: string;
-        className?: string;
-        id?: string;
-        appElement?: JSX.Element;
-        ariaHideApp?: boolean;
-        footerContent?: React.ReactNode;
-        parentSelector?: (...args: any) => HTMLElement;
-    }>> & {
-        setAppElement: (element: string | HTMLElement) => void;
-    };
+    component: typeof NDSModal;
     args: {
         ariaHideApp: false;
     };