@nulogy/components 16.0.0 → 16.0.1

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

@@ -1,18 +1,16 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Button } from "../../Button";
 import { Placeholder } from "../../utils/story/placeholder";
 import BottomSheet from "../BottomSheet";
 export default {
     title: "Components/BottomSheet",
-    decorators: [(storyFn) => React.createElement("div", { style: { width: "800px", height: "800px" } }, storyFn())],
+    decorators: [(storyFn) => _jsx("div", { style: { width: "800px", height: "800px" }, children: storyFn() })],
     parameters: {
         chromatic: { delay: 3000 },
     },
 };
 export const BasicUsage = () => {
     const [isOpen, setIsOpen] = React.useState(true);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Sheet"),
-        React.createElement(BottomSheet, { title: "Edit Profile", isOpen: isOpen, onClose: () => setIsOpen(false) },
-            React.createElement(Placeholder, null))));
+    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, {}) })] }));
 };

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

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

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

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { styled } from "styled-components";
 import { Button } from "../Button";
 import { Box, Flex } from "../index";
@@ -6,53 +7,36 @@ import { AnimatedBox } from "./Box";
 export default {
     title: "Components/Box",
 };
-export const _Box = () => React.createElement(Box, { p: "x3" }, "Hello World");
-export const WithATextColour = () => (React.createElement(Flex, { p: "x3", color: "blue" }, "Hello World"));
+export const _Box = () => _jsx(Box, { p: "x3", children: "Hello World" });
+export const WithATextColour = () => (_jsx(Flex, { p: "x3", color: "blue", children: "Hello World" }));
 WithATextColour.story = {
     name: "With a text colour",
 };
-export const WithABackgroundColour = () => (React.createElement(Box, { p: "x3", color: "white", bg: "blue" }, "Hello World"));
+export const WithABackgroundColour = () => (_jsx(Box, { p: "x3", color: "white", bg: "blue", children: "Hello World" }));
 WithABackgroundColour.story = {
     name: "With a background colour",
 };
-export const WithASetWidth = () => (React.createElement(Box, { p: "x3", width: 1 / 2, bg: "whiteGrey" }, "Half Width"));
+export const WithASetWidth = () => (_jsx(Box, { p: "x3", width: 1 / 2, bg: "whiteGrey", children: "Half Width" }));
 WithASetWidth.story = {
     name: "With a set width",
 };
-export const WithAResponsiveWidth = () => (React.createElement(Box, { p: "x3", width: { extraSmall: 1, small: 1 / 2, medium: 1 / 4 }, bg: "whiteGrey" }, "Full width on extra small screens, 1/2 width on small and 1/4 width on medium"));
+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 = {
     name: "With a responsive width",
 };
-export const WithPadding = () => (React.createElement(Box, { p: "x2" },
-    React.createElement(Box, { m: "x1", p: "x3", bg: "whiteGrey" }, "Padding"),
-    React.createElement(Box, { m: "x1", p: "x3", bg: "whiteGrey" }, "Padding top"),
-    React.createElement(Box, { m: "x1", pr: "x3", bg: "whiteGrey" }, "Padding right"),
-    React.createElement(Box, { m: "x1", pb: "x3", bg: "whiteGrey" }, "Padding bottom"),
-    React.createElement(Box, { m: "x1", pl: "x3", bg: "whiteGrey" }, "Padding left"),
-    React.createElement(Box, { m: "x1", px: "x3", bg: "whiteGrey" }, "Padding x"),
-    React.createElement(Box, { m: "x1", py: "x3", bg: "whiteGrey" }, "Padding y")));
+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 = {
     name: "With padding",
 };
-export const WithMargin = () => (React.createElement(Box, { p: "x3" },
-    React.createElement(Box, { m: "x3", bg: "whiteGrey" }, "Margin"),
-    React.createElement(Box, { mt: "x3", bg: "whiteGrey" }, "Margin top"),
-    React.createElement(Box, { mr: "x3", bg: "whiteGrey" }, "Margin right"),
-    React.createElement(Box, { mb: "x3", bg: "whiteGrey" }, "Margin bottom"),
-    React.createElement(Box, { ml: "x3", bg: "whiteGrey" }, "Margin left"),
-    React.createElement(Box, { mx: "x3", bg: "whiteGrey" }, "Margin x"),
-    React.createElement(Box, { my: "x3", bg: "whiteGrey" }, "Margin y")));
+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 = {
     name: "With margin",
 };
-export const WithAShadow = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { p: "x1", mb: "x2", boxShadow: "small" }, "Small shadow"),
-    React.createElement(Box, { p: "x3", mb: "x2", boxShadow: "medium" }, "Medium shadow"),
-    React.createElement(Box, { p: "x6", mb: "x2", boxShadow: "large" }, "Large shadow")));
+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 = {
     name: "With a shadow",
 };
-export const WithABackgroundImage = () => (React.createElement(Box, { p: "x1", mb: "x2", backgroundImage: "linear-gradient(0deg, #E1EBFA, #216BEB)" }, "Gradient"));
+export const WithABackgroundImage = () => (_jsx(Box, { p: "x1", mb: "x2", backgroundImage: "linear-gradient(0deg, #E1EBFA, #216BEB)", children: "Gradient" }));
 WithABackgroundImage.story = {
     name: "With a background image",
 };
@@ -61,11 +45,11 @@ const HoverableBox = styled(Box)({
         backgroundColor: "blue",
     },
 });
-export const WithHoverTransition = () => (React.createElement(HoverableBox, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transition: "background-color 0.5s linear" }, "Transition"));
+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 = {
     name: "With hover transition",
 };
-export const WithTransform = () => (React.createElement(Box, { p: "x1", mb: "x2", bg: "red", marginLeft: "50px", mt: "50px", color: "white", height: "40px", width: "200px", transform: "rotate(90deg)" }, "Rotated"));
+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 = {
     name: "with transform",
 };
@@ -76,9 +60,7 @@ export const WithAnimation = () => {
         closed: { opacity: 0, x: "-100%" },
     };
     const handleClick = () => setIsOpen(!isOpen);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Button, { onClick: handleClick }, "Animate!"),
-        React.createElement(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 } }, "Animated")));
+    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 = {
     name: "with animation",

package/dist/src/BrandedNavBar/BrandLogoContainer.d.ts

@@ -7,6 +7,6 @@ export type BrandLogoContainerProps = {
     brandingLinkComponent?: React.ElementType;
     subtext?: string;
 };
-declare const BrandLogoContainer: ({ logoSrc, brandingLinkHref, brandingLinkTo, brandingLinkComponent, subtext, }: BrandLogoContainerProps) => React.JSX.Element;
+declare const BrandLogoContainer: ({ logoSrc, brandingLinkHref, brandingLinkTo, brandingLinkComponent, subtext, }: BrandLogoContainerProps) => import("react/jsx-runtime").JSX.Element;
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default BrandLogoContainer;

package/dist/src/BrandedNavBar/BrandLogoContainer.js

@@ -1,14 +1,11 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "../Box";
 import { Link } from "../Link";
 import { Branding } from "../Branding";
 const MAX_LOGO_WIDTH = "184px";
 const MAX_LOGO_HEIGHT = "36px";
 const BrandLogoContainer = ({ logoSrc, brandingLinkHref, brandingLinkTo, brandingLinkComponent, subtext, }) => {
-    return (React.createElement(Box, { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT },
-        React.createElement(Link, { "aria-label": "Home", href: brandingLinkHref, to: brandingLinkTo, as: brandingLinkComponent, underline: false, variant: "desktop", style: { display: "block" } },
-            logoSrc && React.createElement("img", { src: logoSrc, style: { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT }, alt: "" }),
-            !logoSrc && React.createElement(Branding, { size: subtext ? "small" : "medium", logoColor: "blue", subtext: subtext }))));
+    return (_jsx(Box, { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT, children: _jsxs(Link, { "aria-label": "Home", href: brandingLinkHref, to: brandingLinkTo, as: brandingLinkComponent, underline: false, variant: "desktop", style: { display: "block" }, children: [logoSrc && _jsx("img", { src: logoSrc, style: { maxWidth: MAX_LOGO_WIDTH, maxHeight: MAX_LOGO_HEIGHT }, alt: "" }), !logoSrc && _jsx(Branding, { size: subtext ? "small" : "medium", logoColor: "blue", subtext: subtext })] }) }));
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default BrandLogoContainer;

package/dist/src/BrandedNavBar/DesktopMenu.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { Icon } from "../Icon";
@@ -43,8 +44,7 @@ const Nav = styled.nav({
     display: "flex",
     alignItems: "center",
 });
-const renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => (React.createElement("div", { key: menuItem.key ?? menuItem.name },
-    React.createElement(MenuTrigger, { menuType: menuType, name: menuItem.name, "aria-label": menuItem.ariaLabel, menuData: menuItem.items, trigger: menuItem.trigger, layer: layer, ...themeColorObject })));
+const renderMenuTrigger = (menuItem, themeColorObject, layer, menuType) => (_jsx("div", { children: _jsx(MenuTrigger, { menuType: menuType, name: menuItem.name, "aria-label": menuItem.ariaLabel, menuData: menuItem.items, trigger: menuItem.trigger, layer: layer, ...themeColorObject }) }, menuItem.key ?? menuItem.name));
 const renderMenuLink = (menuItem, themeColorObject) => {
     const linkProps = {
         href: menuItem.href,
@@ -52,13 +52,10 @@ const renderMenuLink = (menuItem, themeColorObject) => {
         as: menuItem.as,
         target: menuItem.openInNew ? "_blank" : undefined,
     };
-    return (React.createElement("div", { key: menuItem.key ?? menuItem.name },
-        React.createElement(MenuLink, { ...linkProps, ...themeColorObject },
-            menuItem.name,
-            menuItem.openInNew && React.createElement(Icon, { size: "x2", icon: "openInNew" }))));
+    return (_jsx("div", { children: _jsxs(MenuLink, { ...linkProps, ...themeColorObject, children: [menuItem.name, menuItem.openInNew && _jsx(Icon, { size: "x2", icon: "openInNew" })] }) }, menuItem.key ?? menuItem.name));
 };
-const renderCustom = (menuItem, _themeColorObject, layer) => (React.createElement("div", { key: menuItem.key ?? menuItem.name }, menuItem.render({ size: "medium", layer })));
-const renderText = (menuItem, themeColorObject) => (React.createElement(MenuText, { key: menuItem.key ?? menuItem.name, ...themeColorObject }, menuItem.name));
+const renderCustom = (menuItem, _themeColorObject, layer) => (_jsx("div", { children: menuItem.render({ size: "medium", layer }) }, menuItem.key ?? menuItem.name));
+const renderText = (menuItem, themeColorObject) => (_jsx(MenuText, { ...themeColorObject, children: menuItem.name }, menuItem.key ?? menuItem.name));
 const getRenderFunction = (menuItem) => {
     if (menuItem.items) {
         return renderMenuTrigger;
@@ -72,7 +69,7 @@ const getRenderFunction = (menuItem) => {
     return renderText;
 };
 const renderMenuItem = (menuItem, themeColorObject, layer, menuType) => getRenderFunction(menuItem)(menuItem, themeColorObject, layer, menuType);
-const BaseDesktopMenu = React.forwardRef(({ menuData, menuType, themeColorObject, ...props }, ref) => (React.createElement(Nav, { ...props, ref: ref }, menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType)))));
+const BaseDesktopMenu = React.forwardRef(({ menuData, menuType, themeColorObject, ...props }, ref) => (_jsx(Nav, { ...props, ref: ref, children: menuData.map((menuItem) => renderMenuItem(menuItem, themeColorObject, 0, menuType)) })));
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 const DesktopMenu = styled(BaseDesktopMenu)({
     "& > div": {

package/dist/src/BrandedNavBar/MenuTrigger.d.ts

@@ -14,6 +14,6 @@ export type MenuTriggerProps = {
     layer: number;
     menuType: MenuType;
 };
-declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType, ...props }: MenuTriggerProps) => React.JSX.Element;
+declare const MenuTrigger: ({ menuData, name, color, hoverColor, hoverBackground, "aria-label": ariaLabel, trigger, layer, menuType, ...props }: MenuTriggerProps) => import("react/jsx-runtime").JSX.Element;
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default MenuTrigger;

package/dist/src/BrandedNavBar/MenuTrigger.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import NavBarDropdownMenu from "./NavBarDropdownMenu";
 import SubMenuTrigger from "./SubMenuTrigger";
 import renderSubMenuItems from "./renderSubMenuItems";
@@ -17,7 +17,7 @@ const MenuTrigger = ({ menuData, name, color, hoverColor, hoverBackground, "aria
         name,
         "aria-label": ariaLabel,
     };
-    return (React.createElement(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
+    return (_jsx(NavBarDropdownMenu, { ...props, placement: "bottom-start", modifiers: {
             flip: { behavior: ["bottom"] },
             setPopperWidth: {
                 enabled: true,
@@ -29,17 +29,17 @@ const MenuTrigger = ({ menuData, name, color, hoverColor, hoverBackground, "aria
                 boundariesElement: "viewport",
             },
         }, trigger: () => {
-            const defaultRender = () => React.createElement(MenuTriggerButton, { ...triggerProps });
+            const defaultRender = () => _jsx(MenuTriggerButton, { ...triggerProps });
             return trigger ? trigger({ size: "medium", defaultRender, layer }) : defaultRender();
-        } }, ({ closeMenu }) => (React.createElement("ul", { style: {
-            listStyle: "none",
-            margin: "0",
-            padding: "0",
-            minWidth: dropdownMinWidth,
-        } }, renderSubMenuItems(menuData, (e) => {
-        closeMenu(e);
-        e.stopPropagation();
-    }, SubMenuTrigger, layer + 1, menuType)))));
+        }, children: ({ closeMenu }) => (_jsx("ul", { style: {
+                listStyle: "none",
+                margin: "0",
+                padding: "0",
+                minWidth: dropdownMinWidth,
+            }, children: renderSubMenuItems(menuData, (e) => {
+                closeMenu(e);
+                e.stopPropagation();
+            }, SubMenuTrigger, layer + 1, menuType) })) }));
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default MenuTrigger;

package/dist/src/BrandedNavBar/MenuTriggerButton.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { styled } from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
@@ -29,14 +30,12 @@ const StyledButton = styled.button(({ color = "white", hoverColor = "lightBlue",
         opacity: ".5",
     },
 }));
-const MenuTriggerButton = React.forwardRef(({ name, color, hoverColor, hoverBackground, ...props }, ref) => (React.createElement(StyledButton, { color: color, hoverColor: hoverColor, hoverBackground: hoverBackground, ref: ref, ...props },
-    name,
-    React.createElement(Icon, { style: {
-            position: "absolute",
-            top: "52%",
-            transform: "translateY(-50%)",
-            right: "8px",
-        }, icon: "downArrow", color: themeGet(`colors.${color}`, color)(color), size: "20px", p: "2px" }))));
+const MenuTriggerButton = React.forwardRef(({ name, color, hoverColor, hoverBackground, ...props }, ref) => (_jsxs(StyledButton, { color: color, hoverColor: hoverColor, hoverBackground: hoverBackground, ref: ref, ...props, children: [name, _jsx(Icon, { style: {
+                position: "absolute",
+                top: "52%",
+                transform: "translateY(-50%)",
+                right: "8px",
+            }, icon: "downArrow", color: themeGet(`colors.${color}`, color)(color), size: "20px", p: "2px" })] })));
 MenuTriggerButton.displayName = "MenuTriggerButton";
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 export default MenuTriggerButton;

package/dist/src/BrandedNavBar/MobileMenu.d.ts

@@ -16,5 +16,5 @@ type BaseMobileMenuProps = {
     showNulogyLogo?: boolean;
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-declare const MobileMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseMobileMenuProps, never>> & string & Omit<({ menuData, closeMenu, subtext, themeColorObject, showNulogyLogo, ...props }: BaseMobileMenuProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const MobileMenu: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseMobileMenuProps, never>> & string & Omit<({ menuData, closeMenu, subtext, themeColorObject, showNulogyLogo, ...props }: BaseMobileMenuProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 export default MobileMenu;

package/dist/src/BrandedNavBar/MobileMenu.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { display } from "styled-system";
 import { Text } from "../Type";
@@ -71,19 +71,13 @@ const renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {
         target: menuItem.openInNew ? "_blank" : undefined,
     };
     const topLevel = layer === 0;
-    return (React.createElement("li", { key: menuItem.key ?? menuItem.name }, topLevel ? (React.createElement(TopLevelLink, { ...sharedLinkProps },
-        menuItem.name,
-        menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" }))) : (React.createElement(DropdownLink, { ...sharedLinkProps },
-        menuItem.name,
-        menuItem.openInNew && React.createElement(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })))));
+    return (_jsx("li", { children: topLevel ? (_jsxs(TopLevelLink, { ...sharedLinkProps, children: [menuItem.name, menuItem.openInNew && _jsx(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })] })) : (_jsxs(DropdownLink, { ...sharedLinkProps, children: [menuItem.name, menuItem.openInNew && _jsx(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })] })) }, menuItem.key ?? menuItem.name));
 };
-const renderCustom = (menuItem, linkOnClick, themeColorObject, layer) => (React.createElement("li", { key: menuItem.key ?? menuItem.name }, menuItem.render({ size: "small", onItemClick: linkOnClick, layer })));
-const renderSubMenu = (menuItem, linkOnClick, themeColorObject, layer) => (React.createElement("li", { key: menuItem.key ?? menuItem.name, style: { display: "block" } },
-    React.createElement(SubMenu, { menuItem: menuItem, layer: layer, themeColorObject: themeColorObject, linkOnClick: linkOnClick })));
+const renderCustom = (menuItem, linkOnClick, themeColorObject, layer) => (_jsx("li", { children: menuItem.render({ size: "small", onItemClick: linkOnClick, layer }) }, menuItem.key ?? menuItem.name));
+const renderSubMenu = (menuItem, linkOnClick, themeColorObject, layer) => (_jsx("li", { style: { display: "block" }, children: _jsx(SubMenu, { menuItem: menuItem, layer: layer, themeColorObject: themeColorObject, linkOnClick: linkOnClick }) }, menuItem.key ?? menuItem.name));
 const renderText = (menuItem, linkOnClick, themeColorObject, layer) => {
     const MenuText = layer === 0 ? TopLevelText : DropdownText;
-    return (React.createElement("li", { key: menuItem.key ?? menuItem.name },
-        React.createElement(MenuText, { pl: getPaddingLeft(layer), mb: "x1" }, menuItem.name)));
+    return (_jsx("li", { children: _jsx(MenuText, { pl: getPaddingLeft(layer), mb: "x1", children: menuItem.name }) }, menuItem.key ?? menuItem.name));
 };
 const getRenderFunction = (menuItem) => {
     if (menuItem.items) {
@@ -104,12 +98,10 @@ const renderMenuItems = (menuItems, linkOnClick, themeColorObject, layer) => men
     return render(menuItem, linkOnClick, themeColorObject, layer);
 });
 const renderTopLayerMenuItems = (menuData, linkOnClick, themeColorObject) => renderMenuItems(menuData, linkOnClick, themeColorObject, 0);
-const getSubMenuHeading = (layer, name) => layer === 0 ? (React.createElement(TopLevelText, { as: "h3", mb: "x1" }, name)) : (React.createElement(DropdownText, { mb: "x1", pl: getPaddingLeft(layer) }, name));
+const getSubMenuHeading = (layer, name) => layer === 0 ? (_jsx(TopLevelText, { as: "h3", mb: "x1", children: name })) : (_jsx(DropdownText, { mb: "x1", pl: getPaddingLeft(layer), children: name }));
 const SubMenu = ({ menuItem, linkOnClick, themeColorObject, layer }) => {
     const defaultRender = () => getSubMenuHeading(layer, menuItem.name);
-    return (React.createElement(React.Fragment, null,
-        menuItem.trigger ? menuItem.trigger({ size: "small", defaultRender, layer }) : defaultRender(),
-        React.createElement(SubMenuItemsList, null, renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1))));
+    return (_jsxs(_Fragment, { children: [menuItem.trigger ? menuItem.trigger({ size: "small", defaultRender, layer }) : defaultRender(), _jsx(SubMenuItemsList, { children: renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1) })] }));
 };
 const Menu = styled.ul(({ theme }) => ({
     listStyle: "none",
@@ -129,15 +121,7 @@ const Nav = styled.nav(({ backgroundColor }) => ({
 });
 const BaseMobileMenu = ({ menuData, closeMenu, subtext, themeColorObject, showNulogyLogo, ...props }) => {
     useScrollLock();
-    return (React.createElement(Nav, { backgroundColor: themeColorObject && themeColorObject.background, ...props },
-        React.createElement(BrandingWrap, null,
-            React.createElement(BrandingText, { logoColor: themeColorObject?.logoColor })),
-        React.createElement(Menu, null,
-            menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject),
-            menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)),
-        showNulogyLogo && (React.createElement(Flex, { textAlign: "center", borderTop: borderStyle, height: "40px", alignItems: "center", justifyContent: "center" },
-            React.createElement(NulogyLogo, null),
-            subtext && (React.createElement(Text, { fontSize: "8px", lineHeight: "0", color: "darkGrey", fontWeight: "medium", textTransform: "uppercase", letterSpacing: ".5px" }, subtext))))));
+    return (_jsxs(Nav, { backgroundColor: themeColorObject && themeColorObject.background, ...props, children: [_jsx(BrandingWrap, { children: _jsx(BrandingText, { logoColor: themeColorObject?.logoColor }) }), _jsxs(Menu, { children: [menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject), menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)] }), showNulogyLogo && (_jsxs(Flex, { textAlign: "center", borderTop: borderStyle, height: "40px", alignItems: "center", justifyContent: "center", children: [_jsx(NulogyLogo, {}), subtext && (_jsx(Text, { fontSize: "8px", lineHeight: "0", color: "darkGrey", fontWeight: "medium", textTransform: "uppercase", letterSpacing: ".5px", children: subtext }))] }))] }));
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 const MobileMenu = styled(BaseMobileMenu)(display);

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

@@ -11,5 +11,5 @@ type BaseNavBarProps = {
     logoSrc?: string;
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-declare const NavBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseNavBarProps, never>> & string & Omit<({ environment, breakpointUpper, ...props }: BaseNavBarProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
+declare const NavBar: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<BaseNavBarProps, never>> & string & Omit<({ environment, breakpointUpper, ...props }: BaseNavBarProps) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>;
 export default NavBar;

package/dist/src/BrandedNavBar/NavBar.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import ReactResizeDetector from "react-resize-detector";
 import { useTranslation } from "react-i18next";
@@ -24,31 +24,21 @@ const themeColorObject = {
 };
 const MediumNavBar = ({ menuData, environment, logo, showNulogyLogo, subtext, ...props }) => {
     const { t } = useTranslation();
-    return (React.createElement(React.Fragment, null,
-        environment && React.createElement(EnvironmentBanner, null, environment),
-        React.createElement("header", { ...props },
-            React.createElement(NavBarBackground, { backgroundColor: "white", height: NAVBAR_HEIGHT },
-                logo,
-                React.createElement(Flex, { justifyContent: "space-between", alignContent: "flex-end", flexGrow: 1, ml: "x3", alignItems: "center" },
-                    menuData.primaryMenu && (React.createElement(DesktopMenu, { themeColorObject: themeColorObject, "aria-label": t("primary navigation"), menuType: "primary", menuData: menuData.primaryMenu })),
-                    React.createElement(Flex, { justifySelf: "flex-end", alignItems: "center" },
-                        menuData.secondaryMenu && (React.createElement(DesktopMenu, { themeColorObject: themeColorObject, "aria-label": t("secondary navigation"), menuType: "secondary", menuData: menuData.secondaryMenu })),
-                        showNulogyLogo && (React.createElement(Box, { pl: "x3" },
-                            React.createElement(NulogyLogoContainer, { height: NAVBAR_HEIGHT, subText: subtext })))))))));
+    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 = (React.createElement(BrandLogoContainer, { logoSrc: logoSrc, brandingLinkHref: brandingLinkHref, brandingLinkTo: brandingLinkTo, brandingLinkComponent: brandingLinkComponent, subtext: props.subtext }));
+    const logo = (_jsx(BrandLogoContainer, { logoSrc: logoSrc, brandingLinkHref: brandingLinkHref, brandingLinkTo: brandingLinkTo, brandingLinkComponent: brandingLinkComponent, subtext: props.subtext }));
     if (currentWidth >= numberFromDimension(breakpointUpper)) {
-        return React.createElement(MediumNavBar, { logo: logo, showNulogyLogo: logoSrc, ...props });
+        return _jsx(MediumNavBar, { logo: logo, showNulogyLogo: logoSrc, ...props });
     }
     else {
-        return (React.createElement(SmallNavBar, { width: currentWidth, defaultOpen: defaultOpen, themeColorObject: themeColorObject, navBarHeight: NAVBAR_HEIGHT, logo: logo, showNulogyLogo: logoSrc, ...props }));
+        return (_jsx(SmallNavBar, { width: currentWidth, defaultOpen: defaultOpen, themeColorObject: themeColorObject, navBarHeight: NAVBAR_HEIGHT, logo: logo, showNulogyLogo: logoSrc, ...props }));
     }
 };
 const BaseNavBar = ({ environment, breakpointUpper = "medium", ...props }) => {
     const { breakpoints } = useTheme();
-    return (React.createElement(ReactResizeDetector, { handleWidth: true }, ({ width }) => (React.createElement(SelectNavBarBasedOnWidth, { breakpointUpper: breakpoints[breakpointUpper] || breakpointUpper, width: width, environment: environment, ...props }))));
+    return (_jsx(ReactResizeDetector, { handleWidth: true, children: ({ width }) => (_jsx(SelectNavBarBasedOnWidth, { breakpointUpper: breakpoints[breakpointUpper] || breakpointUpper, width: width, environment: environment, ...props })) }));
 };
 /** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
 const NavBar = styled(BaseNavBar)({});

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

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