@nulogy/components 16.0.2 → 16.0.3

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

@@ -4,68 +4,46 @@ declare const _default: {
 export default _default;
 export declare const _Box: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithATextColour: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithABackgroundColour: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithASetWidth: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAResponsiveWidth: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithPadding: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithMargin: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAShadow: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithABackgroundImage: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithHoverTransition: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithTransform: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAnimation: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Box/Box.story.js

@@ -8,36 +8,36 @@ export default {
     title: "Components/Box",
 };
 export const _Box = () => _jsx(Box, { p: "x3", children: "Hello World" });
-export const WithATextColour = () => (_jsx(Flex, { p: "x3", color: "blue", children: "Hello World" }));
-WithATextColour.story = {
+export const WithATextColour = {
+    render: () => (_jsx(Flex, { p: "x3", color: "blue", children: "Hello World" })),
     name: "With a text colour",
 };
-export const WithABackgroundColour = () => (_jsx(Box, { p: "x3", color: "white", bg: "blue", children: "Hello World" }));
-WithABackgroundColour.story = {
+export const WithABackgroundColour = {
+    render: () => (_jsx(Box, { p: "x3", color: "white", bg: "blue", children: "Hello World" })),
     name: "With a background colour",
 };
-export const WithASetWidth = () => (_jsx(Box, { p: "x3", width: 1 / 2, bg: "whiteGrey", children: "Half Width" }));
-WithASetWidth.story = {
+export const WithASetWidth = {
+    render: () => (_jsx(Box, { p: "x3", width: 1 / 2, bg: "whiteGrey", children: "Half Width" })),
     name: "With a set width",
 };
-export const WithAResponsiveWidth = () => (_jsx(Box, { p: "x3", width: { extraSmall: 1, small: 1 / 2, medium: 1 / 4 }, bg: "whiteGrey", children: "Full width on extra small screens, 1/2 width on small and 1/4 width on medium" }));
-WithAResponsiveWidth.story = {
+export const WithAResponsiveWidth = {
+    render: () => (_jsx(Box, { p: "x3", width: { extraSmall: 1, small: 1 / 2, medium: 1 / 4 }, bg: "whiteGrey", children: "Full width on extra small screens, 1/2 width on small and 1/4 width on medium" })),
     name: "With a responsive width",
 };
-export const WithPadding = () => (_jsxs(Box, { p: "x2", children: [_jsx(Box, { m: "x1", p: "x3", bg: "whiteGrey", children: "Padding" }), _jsx(Box, { m: "x1", p: "x3", bg: "whiteGrey", children: "Padding top" }), _jsx(Box, { m: "x1", pr: "x3", bg: "whiteGrey", children: "Padding right" }), _jsx(Box, { m: "x1", pb: "x3", bg: "whiteGrey", children: "Padding bottom" }), _jsx(Box, { m: "x1", pl: "x3", bg: "whiteGrey", children: "Padding left" }), _jsx(Box, { m: "x1", px: "x3", bg: "whiteGrey", children: "Padding x" }), _jsx(Box, { m: "x1", py: "x3", bg: "whiteGrey", children: "Padding y" })] }));
-WithPadding.story = {
+export const WithPadding = {
+    render: () => (_jsxs(Box, { p: "x2", children: [_jsx(Box, { m: "x1", p: "x3", bg: "whiteGrey", children: "Padding" }), _jsx(Box, { m: "x1", p: "x3", bg: "whiteGrey", children: "Padding top" }), _jsx(Box, { m: "x1", pr: "x3", bg: "whiteGrey", children: "Padding right" }), _jsx(Box, { m: "x1", pb: "x3", bg: "whiteGrey", children: "Padding bottom" }), _jsx(Box, { m: "x1", pl: "x3", bg: "whiteGrey", children: "Padding left" }), _jsx(Box, { m: "x1", px: "x3", bg: "whiteGrey", children: "Padding x" }), _jsx(Box, { m: "x1", py: "x3", bg: "whiteGrey", children: "Padding y" })] })),
     name: "With padding",
 };
-export const WithMargin = () => (_jsxs(Box, { p: "x3", children: [_jsx(Box, { m: "x3", bg: "whiteGrey", children: "Margin" }), _jsx(Box, { mt: "x3", bg: "whiteGrey", children: "Margin top" }), _jsx(Box, { mr: "x3", bg: "whiteGrey", children: "Margin right" }), _jsx(Box, { mb: "x3", bg: "whiteGrey", children: "Margin bottom" }), _jsx(Box, { ml: "x3", bg: "whiteGrey", children: "Margin left" }), _jsx(Box, { mx: "x3", bg: "whiteGrey", children: "Margin x" }), _jsx(Box, { my: "x3", bg: "whiteGrey", children: "Margin y" })] }));
-WithMargin.story = {
+export const WithMargin = {
+    render: () => (_jsxs(Box, { p: "x3", children: [_jsx(Box, { m: "x3", bg: "whiteGrey", children: "Margin" }), _jsx(Box, { mt: "x3", bg: "whiteGrey", children: "Margin top" }), _jsx(Box, { mr: "x3", bg: "whiteGrey", children: "Margin right" }), _jsx(Box, { mb: "x3", bg: "whiteGrey", children: "Margin bottom" }), _jsx(Box, { ml: "x3", bg: "whiteGrey", children: "Margin left" }), _jsx(Box, { mx: "x3", bg: "whiteGrey", children: "Margin x" }), _jsx(Box, { my: "x3", bg: "whiteGrey", children: "Margin y" })] })),
     name: "With margin",
 };
-export const WithAShadow = () => (_jsxs(_Fragment, { children: [_jsx(Box, { p: "x1", mb: "x2", boxShadow: "small", children: "Small shadow" }), _jsx(Box, { p: "x3", mb: "x2", boxShadow: "medium", children: "Medium shadow" }), _jsx(Box, { p: "x6", mb: "x2", boxShadow: "large", children: "Large shadow" })] }));
-WithAShadow.story = {
+export const WithAShadow = {
+    render: () => (_jsxs(_Fragment, { children: [_jsx(Box, { p: "x1", mb: "x2", boxShadow: "small", children: "Small shadow" }), _jsx(Box, { p: "x3", mb: "x2", boxShadow: "medium", children: "Medium shadow" }), _jsx(Box, { p: "x6", mb: "x2", boxShadow: "large", children: "Large shadow" })] })),
     name: "With a shadow",
 };
-export const WithABackgroundImage = () => (_jsx(Box, { p: "x1", mb: "x2", backgroundImage: "linear-gradient(0deg, #E1EBFA, #216BEB)", children: "Gradient" }));
-WithABackgroundImage.story = {
+export const WithABackgroundImage = {
+    render: () => (_jsx(Box, { p: "x1", mb: "x2", backgroundImage: "linear-gradient(0deg, #E1EBFA, #216BEB)", children: "Gradient" })),
     name: "With a background image",
 };
 const HoverableBox = styled(Box)({
@@ -45,23 +45,23 @@ const HoverableBox = styled(Box)({
         backgroundColor: "blue",
     },
 });
-export const WithHoverTransition = () => (_jsx(HoverableBox, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transition: "background-color 0.5s linear", children: "Transition" }));
-WithHoverTransition.story = {
+export const WithHoverTransition = {
+    render: () => (_jsx(HoverableBox, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transition: "background-color 0.5s linear", children: "Transition" })),
     name: "With hover transition",
 };
-export const WithTransform = () => (_jsx(Box, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transform: "rotate(90deg)", children: "Rotated" }));
-WithTransform.story = {
+export const WithTransform = {
+    render: () => (_jsx(Box, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transform: "rotate(90deg)", children: "Rotated" })),
     name: "with transform",
 };
-export const WithAnimation = () => {
-    const [isOpen, setIsOpen] = useState(true);
-    const variants = {
-        open: { opacity: 1, x: 0 },
-        closed: { opacity: 0, x: "-100%" },
-    };
-    const handleClick = () => setIsOpen(!isOpen);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleClick, children: "Animate!" }), _jsx(AnimatedBox, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", animate: isOpen ? "open" : "closed", variants: variants, transition: { duration: 2 }, children: "Animated" })] }));
-};
-WithAnimation.story = {
+export const WithAnimation = {
+    render: () => {
+        const [isOpen, setIsOpen] = useState(true);
+        const variants = {
+            open: { opacity: 1, x: 0 },
+            closed: { opacity: 0, x: "-100%" },
+        };
+        const handleClick = () => setIsOpen(!isOpen);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleClick, children: "Animate!" }), _jsx(AnimatedBox, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", animate: isOpen ? "open" : "closed", variants: variants, transition: { duration: 2 }, children: "Animated" })] }));
+    },
     name: "with animation",
 };

package/dist/src/BrandedNavBar/NavBar.story.d.ts

@@ -1,4 +1,4 @@
-import type { StoryObj } from "@storybook/react";
+import type { StoryObj } from "@storybook/react-vite";
 import { BrandedNavBar as NDSBrandedNavBar } from "./index";
 declare const _default: {
     title: string;
@@ -6,46 +6,34 @@ declare const _default: {
 export default _default;
 type Story = StoryObj<typeof NDSBrandedNavBar>;
 export declare const _BrandedNavBar: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithACompanyLogo: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithAppName: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithACompanyLogoAndAppName: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithEnvironmentBanner: Story;
 export declare const WithIcon: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithPrimaryAndSecondarySubMenus: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithExternalLinks: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithReactRouter: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithHamburgerMenu: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         viewport: {
             defaultViewport: string;
@@ -57,7 +45,7 @@ export declare const WithHamburgerMenu: {
 };
 export declare const CustomRendering: () => import("react/jsx-runtime").JSX.Element;
 export declare const CustomRenderingInHamburger: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         viewport: {
             defaultViewport: string;
@@ -69,7 +57,7 @@ export declare const CustomRenderingInHamburger: {
 };
 export declare const CustomMenuTriggers: () => import("react/jsx-runtime").JSX.Element;
 export declare const CustomMenuTriggersInHamburger: {
-    (): import("react/jsx-runtime").JSX.Element;
+    render: () => import("react/jsx-runtime").JSX.Element;
     parameters: {
         viewport: {
             defaultViewport: string;

package/dist/src/BrandedNavBar/NavBar.story.js

@@ -120,20 +120,20 @@ const secondaryMenuWithIcon = [
 export default {
     title: "Components/BrandedNavBar",
 };
-export const _BrandedNavBar = () => _jsx(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu } });
-_BrandedNavBar.story = {
+export const _BrandedNavBar = {
+    render: () => _jsx(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu } }),
     name: "BrandedNavBar",
 };
-export const WithACompanyLogo = () => _jsx(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, logoSrc: sampleLogo });
-WithACompanyLogo.story = {
+export const WithACompanyLogo = {
+    render: () => _jsx(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, logoSrc: sampleLogo }),
     name: "With a company logo",
 };
-export const WithAppName = () => _jsx(BrandedNavBar, { subtext: "Quality Control", menuData: { primaryMenu, secondaryMenu } });
-WithAppName.story = {
+export const WithAppName = {
+    render: () => _jsx(BrandedNavBar, { subtext: "Quality Control", menuData: { primaryMenu, secondaryMenu } }),
     name: "With app name",
 };
-export const WithACompanyLogoAndAppName = () => (_jsx(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", logoSrc: sampleLogo }));
-WithACompanyLogoAndAppName.story = {
+export const WithACompanyLogoAndAppName = {
+    render: () => (_jsx(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", logoSrc: sampleLogo })),
     name: "With a company logo and app name",
 };
 export const WithEnvironmentBanner = {
@@ -149,11 +149,11 @@ export const WithEnvironmentBanner = {
     },
     name: "with environment banner",
 };
-export const WithIcon = () => (_jsx(BrandedNavBar, { menuData: {
-        primaryMenu: primaryMenu,
-        secondaryMenu: secondaryMenuWithIcon,
-    } }));
-WithIcon.story = {
+export const WithIcon = {
+    render: () => (_jsx(BrandedNavBar, { menuData: {
+            primaryMenu: primaryMenu,
+            secondaryMenu: secondaryMenuWithIcon,
+        } })),
     name: "With icon",
 };
 export const WithPrimaryAndSecondarySubMenus = () => (_jsx(BrandedNavBar, { menuData: {
@@ -322,21 +322,23 @@ const primaryMenuReactRouter = [
     },
     { name: "Link", to: "/Link" },
 ];
-export const WithReactRouter = () => (_jsx(BrowserRouter, { basename: "/", children: _jsx(BrandedNavBar, { brandingLinkTo: "/Home", brandingLinkComponent: ReactRouterLink, menuData: {
-            primaryMenu: primaryMenuReactRouter,
-            secondaryMenu: secondaryMenuWithIcon,
-        } }) }));
-WithReactRouter.story = {
+export const WithReactRouter = {
+    render: () => (_jsx(BrowserRouter, { basename: "/", children: _jsx(BrandedNavBar, { brandingLinkTo: "/Home", brandingLinkComponent: ReactRouterLink, menuData: {
+                primaryMenu: primaryMenuReactRouter,
+                secondaryMenu: secondaryMenuWithIcon,
+            } }) })),
     name: "With react router",
 };
-export const WithHamburgerMenu = () => {
-    return _jsx(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, defaultOpen: true });
-};
-WithHamburgerMenu.parameters = {
-    viewport: {
-        defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+export const WithHamburgerMenu = {
+    render: () => {
+        return _jsx(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, defaultOpen: true });
+    },
+    parameters: {
+        viewport: {
+            defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+        },
+        chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
     },
-    chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
 };
 const customPrimaryMenu = [
     {
@@ -364,12 +366,14 @@ const customPrimaryMenu = [
     },
 ];
 export const CustomRendering = () => _jsx(BrandedNavBar, { menuData: { primaryMenu: customPrimaryMenu, secondaryMenu } });
-export const CustomRenderingInHamburger = () => (_jsx(BrandedNavBar, { menuData: { primaryMenu: customPrimaryMenu, secondaryMenu }, defaultOpen: true }));
-CustomRenderingInHamburger.parameters = {
-    viewport: {
-        defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+export const CustomRenderingInHamburger = {
+    render: () => _jsx(BrandedNavBar, { menuData: { primaryMenu: customPrimaryMenu, secondaryMenu }, defaultOpen: true }),
+    parameters: {
+        viewport: {
+            defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+        },
+        chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
     },
-    chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
 };
 const primaryMenuWithCustomTriggers = [
     {
@@ -400,10 +404,12 @@ const primaryMenuWithCustomTriggers = [
     },
 ];
 export const CustomMenuTriggers = () => (_jsx(BrandedNavBar, { menuData: { primaryMenu: primaryMenuWithCustomTriggers, secondaryMenu } }));
-export const CustomMenuTriggersInHamburger = () => (_jsx(BrandedNavBar, { menuData: { primaryMenu: primaryMenuWithCustomTriggers, secondaryMenu }, defaultOpen: true }));
-CustomMenuTriggersInHamburger.parameters = {
-    viewport: {
-        defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+export const CustomMenuTriggersInHamburger = {
+    render: () => _jsx(BrandedNavBar, { menuData: { primaryMenu: primaryMenuWithCustomTriggers, secondaryMenu }, defaultOpen: true }),
+    parameters: {
+        viewport: {
+            defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+        },
+        chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
     },
-    chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
 };

package/dist/src/BrandedNavBar/SmallNavBar.story.d.ts

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

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

@@ -4,14 +4,10 @@ declare const _default: {
 export default _default;
 export declare const _Breadcrumbs: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutLink: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };
 export declare const WithReactRouter: {
-    (): import("react/jsx-runtime").JSX.Element;
-    story: {
-        name: string;
-    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+    name: string;
 };

package/dist/src/Breadcrumbs/Breadcrumbs.story.js

@@ -7,11 +7,11 @@ export default {
     title: "Components/Breadcrumbs",
 };
 export const _Breadcrumbs = () => (_jsxs(_Fragment, { children: [_jsx(Breadcrumbs, { children: _jsx(Link, { href: "/", children: "Home" }) }), _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Tenants" })] })] }));
-export const WithoutLink = () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Tenants" }), _jsx(Text, { children: "Current Tenant" })] }));
-WithoutLink.story = {
+export const WithoutLink = {
+    render: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Tenants" }), _jsx(Text, { children: "Current Tenant" })] })),
     name: "without link",
 };
-export const WithReactRouter = () => (_jsx(BrowserRouter, { children: _jsxs(Breadcrumbs, { children: [_jsx(Link, { as: ReactRouterLink, to: "/", children: "Home" }), _jsx(Link, { as: ReactRouterLink, to: "/", children: "Tenants" }), _jsx(Text, { children: "Current Tenant" })] }) }));
-WithReactRouter.story = {
+export const WithReactRouter = {
+    render: () => (_jsx(BrowserRouter, { children: _jsxs(Breadcrumbs, { children: [_jsx(Link, { as: ReactRouterLink, to: "/", children: "Home" }), _jsx(Link, { as: ReactRouterLink, to: "/", children: "Tenants" }), _jsx(Text, { children: "Current Tenant" })] }) })),
     name: "with react router",
 };

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

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

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

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

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

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