@nulogy/components 16.0.1 → 16.0.3

package/dist/src/BottomSheet/stories/BottomSheet.story.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
+import { expect, screen, userEvent, waitFor, within } from "storybook/test";
 import { Button } from "../../Button";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
@@ -10,7 +11,23 @@ export default {
         chromatic: { delay: 3000 },
     },
 };
-export const BasicUsage = () => {
-    const [isOpen, setIsOpen] = React.useState(true);
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
+export const BasicUsage = {
+    render: () => {
+        const [isOpen, setIsOpen] = React.useState(true);
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => setIsOpen(true), children: "Open Sheet" }), _jsx(BottomSheet, { title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false), children: _jsx(Placeholder, {}) })] }));
+    },
+    play: async ({ canvasElement, step }) => {
+        const canvas = within(canvasElement);
+        await step("is open initially", async () => {
+            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
+        });
+        await step("closes when Close button is clicked", async () => {
+            await userEvent.click(screen.getByText("Close"));
+            await waitFor(() => expect(screen.queryByRole("dialog")).not.toBeInTheDocument());
+        });
+        await step("opens when trigger button is clicked", async () => {
+            await userEvent.click(canvas.getByText("Open Sheet"));
+            await waitFor(() => expect(screen.getByRole("dialog")).toBeVisible());
+        });
+    },
 };

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

@@ -7,15 +7,15 @@ export interface BoxProps extends StyledProps, ComponentPropsWithRef<"div"> {
 declare const Box: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BoxProps>> & string;
 export interface AnimatedBoxProps extends MotionProps, Omit<BoxProps, "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd" | "style" | "transition"> {
 }
-export declare const AnimatedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
-    children?: import("react").ReactNode | Record<string, unknown>;
-    slot?: string;
-    title?: string;
+export declare const AnimatedBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
+    children?: import("react").ReactNode;
     property?: string;
     color?: string;
     content?: string;
     translate?: "yes" | "no";
     hidden?: boolean;
+    slot?: string;
+    title?: string;
     defaultChecked?: boolean;
     defaultValue?: string | number | readonly string[];
     suppressContentEditableWarning?: boolean;
@@ -24,7 +24,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters";
     autoFocus?: boolean;
     className?: string;
-    contentEditable?: "inherit" | (boolean | "true" | "false");
+    contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only";
     contextMenu?: string;
     dir?: string;
     draggable?: boolean | "true" | "false";
@@ -32,7 +32,6 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     id?: string;
     lang?: string;
     nonce?: string;
-    placeholder?: string;
     spellCheck?: boolean | "true" | "false";
     tabIndex?: number;
     radioGroup?: string;
@@ -56,7 +55,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     results?: number;
     security?: string;
     unselectable?: "off" | "on";
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal";
+    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal";
     is?: string;
     exportparts?: string;
     part?: string;
@@ -72,7 +71,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     "aria-colindextext"?: string;
     "aria-colspan"?: number;
     "aria-controls"?: string;
-    "aria-current"?: boolean | "time" | "page" | "true" | "false" | "step" | "location" | "date";
+    "aria-current"?: boolean | "page" | "time" | "true" | "false" | "step" | "location" | "date";
     "aria-describedby"?: string;
     "aria-description"?: string;
     "aria-details"?: string;
@@ -82,7 +81,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     "aria-expanded"?: boolean | "true" | "false";
     "aria-flowto"?: string;
     "aria-grabbed"?: boolean | "true" | "false";
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree";
+    "aria-haspopup"?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
     "aria-hidden"?: boolean | "true" | "false";
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling";
     "aria-keyshortcuts"?: string;
@@ -99,7 +98,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     "aria-posinset"?: number;
     "aria-pressed"?: boolean | "true" | "false" | "mixed";
     "aria-readonly"?: boolean | "true" | "false";
-    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
+    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
     "aria-required"?: boolean | "true" | "false";
     "aria-roledescription"?: string;
     "aria-rowcount"?: number;
@@ -250,9 +249,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     onPointerCancel?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerCancelCapture?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerEnter?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerEnterCapture?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerLeave?: import("react").PointerEventHandler<HTMLDivElement>;
-    onPointerLeaveCapture?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerOver?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerOverCapture?: import("react").PointerEventHandler<HTMLDivElement>;
     onPointerOut?: import("react").PointerEventHandler<HTMLDivElement>;
@@ -272,5 +269,7 @@ export declare const AnimatedBox: import("styled-components/dist/types").IStyled
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLDivElement>;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement>;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement>;
-} & MotionProps & import("react").RefAttributes<HTMLDivElement>, AnimatedBoxProps>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+} & MotionProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: import("react").Ref<HTMLDivElement>;
+}, AnimatedBoxProps>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
 export default Box;

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/DesktopMenu.d.ts

@@ -7,5 +7,7 @@ export type DesktopMenuProps = {
     themeColorObject: any;
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-declare const DesktopMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<DesktopMenuProps & React.RefAttributes<HTMLElement>, never>> & string & Omit<React.ForwardRefExoticComponent<DesktopMenuProps & React.RefAttributes<HTMLElement>>, keyof React.Component<any, {}, any>>;
+declare const DesktopMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<DesktopMenuProps & React.RefAttributes<HTMLElement>, "ref"> & {
+    ref?: React.Ref<HTMLElement>;
+}, never>> & string & Omit<React.ForwardRefExoticComponent<DesktopMenuProps & React.RefAttributes<HTMLElement>>, keyof React.Component<any, {}, any>>;
 export default DesktopMenu;

package/dist/src/BrandedNavBar/NavBar.js

@@ -22,10 +22,10 @@ const themeColorObject = {
     textColor: "blackBlue",
     logoColor: "blue",
 };
-const MediumNavBar = ({ menuData, environment, logo, showNulogyLogo, subtext, ...props }) => {
+function MediumNavBar({ menuData, environment, logo, showNulogyLogo, subtext, ...props }) {
     const { t } = useTranslation();
     return (_jsxs(_Fragment, { children: [environment && _jsx(EnvironmentBanner, { children: environment }), _jsx("header", { ...props, children: _jsxs(NavBarBackground, { backgroundColor: "white", height: NAVBAR_HEIGHT, children: [logo, _jsxs(Flex, { justifyContent: "space-between", alignContent: "flex-end", flexGrow: 1, ml: "x3", alignItems: "center", children: [menuData.primaryMenu && (_jsx(DesktopMenu, { themeColorObject: themeColorObject, "aria-label": t("primary navigation"), menuType: "primary", menuData: menuData.primaryMenu })), _jsxs(Flex, { justifySelf: "flex-end", alignItems: "center", children: [menuData.secondaryMenu && (_jsx(DesktopMenu, { themeColorObject: themeColorObject, "aria-label": t("secondary navigation"), menuType: "secondary", menuData: menuData.secondaryMenu })), showNulogyLogo && (_jsx(Box, { pl: "x3", children: _jsx(NulogyLogoContainer, { height: NAVBAR_HEIGHT, subText: subtext }) }))] })] })] }) })] }));
-};
+}
 const SelectNavBarBasedOnWidth = ({ width, defaultOpen, breakpointUpper, brandingLinkHref = "/", brandingLinkTo, brandingLinkComponent, logoSrc, ...props }) => {
     const currentWidth = width || (typeof window !== "undefined" && window.innerWidth);
     const logo = (_jsx(BrandLogoContainer, { logoSrc: logoSrc, brandingLinkHref: brandingLinkHref, brandingLinkTo: brandingLinkTo, brandingLinkComponent: brandingLinkComponent, subtext: props.subtext }));

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