@nulogy/components 16.0.0 → 16.0.2

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

@@ -1,9 +1,8 @@
 import type { StoryObj } from "@storybook/react";
-import React from "react";
 import { Page } from "..";
 declare const _default: {
     title: string;
-    component: ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }: import("./Page").PageProps) => React.JSX.Element;
+    component: ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }: import("./Page").PageProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {
         layout: string;
     };

package/dist/src/Layout/Page.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ApplicationFrame, Breadcrumbs, Link, Heading2, Text, Page, StatusIndicator, Navigation } from "..";
 export default {
     title: "Components/Page",
@@ -9,57 +9,44 @@ export default {
 };
 export const _Page = {
     args: {
-        breadcrumbs: (React.createElement(Breadcrumbs, null,
-            React.createElement(Link, { href: "/" }, "Home"),
-            React.createElement(Link, { href: "/" }, "Materials"))),
+        breadcrumbs: (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })),
         title: "Materials Overview",
-        headerContent: React.createElement(StatusIndicator, { type: "informative" }, "Beta"),
-        children: (React.createElement(Text, { fontFamily: "mono", fontSize: "small" }, "content")),
+        headerContent: _jsx(StatusIndicator, { type: "informative", children: "Beta" }),
+        children: (_jsx(Text, { fontFamily: "mono", fontSize: "small", children: "content" })),
     },
 };
 export const NoPageTitle = {
-    render: (args) => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null) },
-        React.createElement(Page, { ...args }))),
+    render: (args) => (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), children: _jsx(Page, { ...args }) })),
     args: {
-        breadcrumbs: (React.createElement(Breadcrumbs, null,
-            React.createElement(Link, { href: "/" }, "Home"),
-            React.createElement(Link, { href: "/" }, "Materials"))),
-        children: (React.createElement(Text, { fontFamily: "mono", fontSize: "small" }, "content")),
+        breadcrumbs: (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })),
+        children: (_jsx(Text, { fontFamily: "mono", fontSize: "small", children: "content" })),
     },
 };
 export const NoBreadcrumbs = {
-    render: (args) => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), height: "100vh" },
-        React.createElement(Page, { ...args }))),
+    render: (args) => (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), height: "100vh", children: _jsx(Page, { ...args }) })),
     args: {
         title: "Materials Overview",
-        children: (React.createElement(React.Fragment, null,
-            React.createElement(Heading2, null, "Overview"),
-            React.createElement(Text, null, "I am main content."))),
+        children: (_jsxs(_Fragment, { children: [_jsx(Heading2, { children: "Overview" }), _jsx(Text, { children: "I am main content." })] })),
     },
 };
 export const NoBackground = {
     args: {
         title: "Materials Overview",
-        breadcrumbs: (React.createElement(Breadcrumbs, null,
-            React.createElement(Link, { href: "/" }, "Home"),
-            React.createElement(Link, { href: "/" }, "Materials"))),
+        breadcrumbs: (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })),
     },
 };
 export const WithFullHeight = {
-    render: (args) => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null) },
-        React.createElement(Page, { ...args }))),
+    render: (args) => (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), children: _jsx(Page, { ...args }) })),
     args: {
         title: "Materials Overview",
         fullHeight: true,
-        breadcrumbs: (React.createElement(Breadcrumbs, null,
-            React.createElement(Link, { href: "/" }, "Home"),
-            React.createElement(Link, { href: "/" }, "Materials"))),
-        children: React.createElement(Text, null, "I am main content."),
+        breadcrumbs: (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })),
+        children: _jsx(Text, { children: "I am main content." }),
     },
 };
 export const WithReactNodeAsTitle = {
     args: {
-        title: React.createElement("b", null, "I am a title"),
-        children: React.createElement(Text, null, "I am main content."),
+        title: _jsx("b", { children: "I am a title" }),
+        children: _jsx(Text, { children: "I am main content." }),
     },
 };

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

@@ -21,5 +21,5 @@ export type SidebarProps = Omit<AnimatedBoxProps, "width"> & {
     helpText?: React.ReactNode;
     renderHelpText?: () => React.ReactNode;
 };
-declare function Sidebar({ p, width, children, onClose, title, isOpen, footer, closeButtonTestId, closeButtonAriaLabel, offset, triggerRef, duration, top, closeOnOutsideClick, overlay, disableScroll, hideCloseButton, zIndex, helpText, renderHelpText, ...props }: SidebarProps): React.JSX.Element;
+declare function Sidebar({ p, width, children, onClose, title, isOpen, footer, closeButtonTestId, closeButtonAriaLabel, offset, triggerRef, duration, top, closeOnOutsideClick, overlay, disableScroll, hideCloseButton, zIndex, helpText, renderHelpText, ...props }: SidebarProps): import("react/jsx-runtime").JSX.Element;
 export default Sidebar;

package/dist/src/Layout/Sidebar.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useState, useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from "react";
 import { AnimatePresence } from "framer-motion";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
@@ -25,7 +26,7 @@ const focusFirstElement = () => {
         focusable[0].focus();
     }
 };
-const SidebarOverlay = ({ transitionDuration, top, transparent, zIndex = 799, onClick }) => (React.createElement(AnimatedBox, { position: "fixed", top: top, bottom: "0", left: "0", right: "0", zIndex: zIndex, bg: !transparent && "rgba(18, 43, 71, 0.5)", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: transitionDuration }, "data-testid": "sidebar-overlay", onMouseDown: onClick }));
+const SidebarOverlay = ({ transitionDuration, top, transparent, zIndex = 799, onClick }) => (_jsx(AnimatedBox, { position: "fixed", top: top, bottom: "0", left: "0", right: "0", zIndex: zIndex, bg: !transparent && "rgba(18, 43, 71, 0.5)", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: transitionDuration }, "data-testid": "sidebar-overlay", onMouseDown: onClick }));
 function Sidebar({ p = "x2", width = "xs", children, onClose, title, isOpen, footer, closeButtonTestId = "sidebar-close-button", closeButtonAriaLabel, offset = "0px", triggerRef, duration = 0.25, top, closeOnOutsideClick = true, overlay = "show", disableScroll = true, hideCloseButton = false, zIndex = "sidebar", helpText, renderHelpText, ...props }) {
     const closeButton = useRef(null);
     const [shouldUpdateFocus, setShouldUpdateFocus] = useState(false);
@@ -89,19 +90,6 @@ function Sidebar({ p = "x2", width = "xs", children, onClose, title, isOpen, foo
             },
         },
     };
-    return (React.createElement(React.Fragment, null,
-        closeOnOutsideClick && (React.createElement(AnimatePresence, null, isOpen && overlay !== "hide" && (React.createElement(SidebarOverlay, { top: top, transparent: overlay === "transparent" || overlay === false, transitionDuration: duration, zIndex: zIndex, onClick: closeOnOutsideClick && isOpen && onClose })))),
-        React.createElement(AnimatedBox, { role: "dialog", paddingX: "x1", bg: "white", display: "flex", flexDirection: "column", height: `calc(100% - ${navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT})`, borderLeftWidth: "1px", borderLeftStyle: "solid", borderLeftColor: "lightGrey", animate: isOpen ? "open" : "closed", variants: variants, initial: isOpen ? "open" : "closed", position: "fixed", top: top, right: offset, width: typeof selectedWidth === "string" ? { default: "100%", small: selectedWidth } : selectedWidth, zIndex: zIndex, ref: sideBarRef, ...props },
-            React.createElement(Flex, { flexDirection: "column", p: "x2", borderBottomWidth: "1px", borderBottomStyle: "solid", borderBottomColor: "lightGrey" },
-                React.createElement(Flex, { flexDirection: "column", gap: "x1" },
-                    React.createElement(Flex, { justifyContent: "space-between", alignItems: "flex-start" },
-                        title && (React.createElement(Flex, { alignItems: "center", height: "100%" },
-                            React.createElement(Heading2, { mb: 0 }, title))),
-                        !hideCloseButton && (React.createElement(Box, { marginLeft: "x2" },
-                            React.createElement(IconicButton, { type: "button", ref: closeButton, icon: "close", onClick: onClose, "data-testid": closeButtonTestId, "aria-label": closeButtonAriaLabel || t("close") })))),
-                    renderHelpText ? renderHelpText() : helpText && React.createElement(Text, { color: "midGrey" }, helpText))),
-            React.createElement(Flex, { p: p, maxHeight: "100%", overflow: "auto", flexGrow: 1, flexDirection: "column", style: { overflowBehaviour: "contain" } },
-                React.createElement(AnimatedBox, { variants: childVariants, animate: isOpen ? "open" : "closed", flexGrow: 1, ref: contentRef }, children)),
-            footer && (React.createElement(Box, { position: "sticky", backgroundColor: "white", borderTopWidth: "1px", borderTopStyle: "solid", borderTopColor: "lightGrey", alignSelf: "flex-end", width: "100%", p: p, pt: "x2" }, footer)))));
+    return (_jsxs(_Fragment, { children: [closeOnOutsideClick && (_jsx(AnimatePresence, { children: isOpen && overlay !== "hide" && (_jsx(SidebarOverlay, { top: top, transparent: overlay === "transparent" || overlay === false, transitionDuration: duration, zIndex: zIndex, onClick: closeOnOutsideClick && isOpen && onClose })) })), _jsxs(AnimatedBox, { role: "dialog", paddingX: "x1", bg: "white", display: "flex", flexDirection: "column", height: `calc(100% - ${navigationV3 ? theme.space[NAVIGATION_MENU_HEIGHT_STYLED_UNITS] : NAVBAR_HEIGHT})`, borderLeftWidth: "1px", borderLeftStyle: "solid", borderLeftColor: "lightGrey", animate: isOpen ? "open" : "closed", variants: variants, initial: isOpen ? "open" : "closed", position: "fixed", top: top, right: offset, width: typeof selectedWidth === "string" ? { default: "100%", small: selectedWidth } : selectedWidth, zIndex: zIndex, ref: sideBarRef, ...props, children: [_jsx(Flex, { flexDirection: "column", p: "x2", borderBottomWidth: "1px", borderBottomStyle: "solid", borderBottomColor: "lightGrey", children: _jsxs(Flex, { flexDirection: "column", gap: "x1", children: [_jsxs(Flex, { justifyContent: "space-between", alignItems: "flex-start", children: [title && (_jsx(Flex, { alignItems: "center", height: "100%", children: _jsx(Heading2, { mb: 0, children: title }) })), !hideCloseButton && (_jsx(Box, { marginLeft: "x2", children: _jsx(IconicButton, { type: "button", ref: closeButton, icon: "close", onClick: onClose, "data-testid": closeButtonTestId, "aria-label": closeButtonAriaLabel || t("close") }) }))] }), renderHelpText ? renderHelpText() : helpText && _jsx(Text, { color: "midGrey", children: helpText })] }) }), _jsx(Flex, { p: p, maxHeight: "100%", overflow: "auto", flexGrow: 1, flexDirection: "column", style: { overflowBehaviour: "contain" }, children: _jsx(AnimatedBox, { variants: childVariants, animate: isOpen ? "open" : "closed", flexGrow: 1, ref: contentRef, children: children }) }), footer && (_jsx(Box, { position: "sticky", backgroundColor: "white", borderTopWidth: "1px", borderTopStyle: "solid", borderTopColor: "lightGrey", alignSelf: "flex-end", width: "100%", p: p, pt: "x2", children: footer }))] })] }));
 }
 export default Sidebar;

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

@@ -1,5 +1,4 @@
 import type { StoryObj } from "@storybook/react";
-import React from "react";
 import { Sidebar } from "..";
 declare const _default: {
     title: string;
@@ -12,14 +11,14 @@ declare const _default: {
 };
 export default _default;
 type Story = StoryObj<typeof Sidebar>;
-export declare const _Sidebar: () => React.JSX.Element;
-export declare const WithoutOverlay: () => React.JSX.Element;
-export declare const OpenByDefault: () => React.JSX.Element;
+export declare const _Sidebar: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutOverlay: () => import("react/jsx-runtime").JSX.Element;
+export declare const OpenByDefault: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomOffset: Story;
-export declare const DontCloseOnOutsideClick: () => React.JSX.Element;
-export declare const WithoutCloseButton: () => React.JSX.Element;
-export declare const WithALongTitle: () => React.JSX.Element;
-export declare const WithDifferentWidths: () => React.JSX.Element;
-export declare const WithHelpText: () => React.JSX.Element;
-export declare const WithOtherElementsInHelpText: () => React.JSX.Element;
-export declare const WithARenderedHelpText: () => React.JSX.Element;
+export declare const DontCloseOnOutsideClick: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutCloseButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithALongTitle: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithDifferentWidths: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithHelpText: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithOtherElementsInHelpText: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithARenderedHelpText: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Layout/Sidebar.story.js

@@ -1,4 +1,5 @@
-import React, { useState, useRef } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef } from "react";
 import { ApplicationFrame, Breadcrumbs, Link, Page, Sidebar, Select, PrimaryButton, Box, Textarea, Heading3, Navigation, } from "..";
 import { useUrlProps } from "../utils/testing/useUrlProps";
 export default {
@@ -8,19 +9,7 @@ export default {
         chromatic: { delay: 300 }, // time for sidebar animation
     },
 };
-const ExampleSidebar = ({ isOpen, onClose, ...props }) => (React.createElement(Sidebar, { isOpen: isOpen, title: "Filters", onClose: onClose, footer: React.createElement(PrimaryButton, null, "Apply"), ...props },
-    React.createElement(Select, { options: [{ label: "first option", value: 1 }], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Delivery:" }),
-    React.createElement(Select, { options: [], labelText: "Last Delivery:" })));
+const ExampleSidebar = ({ isOpen, onClose, ...props }) => (_jsxs(Sidebar, { isOpen: isOpen, title: "Filters", onClose: onClose, footer: _jsx(PrimaryButton, { children: "Apply" }), ...props, children: [_jsx(Select, { options: [{ label: "first option", value: 1 }], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Delivery:" }), _jsx(Select, { options: [], labelText: "Last Delivery:" })] }));
 export const _Sidebar = () => {
     const [isOpen, setIsOpen] = useState(false);
     const triggerRef = useRef(null);
@@ -31,14 +20,7 @@ export const _Sidebar = () => {
     const closeSidebar = () => {
         setIsOpen(false);
     };
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
-        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
-                React.createElement(Link, { href: "/" }, "Home"),
-                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
-            React.createElement(Box, { minWidth: "300px" },
-                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
-                React.createElement(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
-            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", ...urlProps }))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsx(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2", children: "Space for more content" })] }), _jsx(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", ...urlProps })] }) }));
 };
 export const WithoutOverlay = () => {
     const [isOpen, setIsOpen] = useState(false);
@@ -49,16 +31,7 @@ export const WithoutOverlay = () => {
     const closeSidebar = () => {
         setIsOpen(false);
     };
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
-        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
-                React.createElement(Link, { href: "/" }, "Home"),
-                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
-            React.createElement(Box, { minWidth: "300px" },
-                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
-                React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" },
-                    "Space for more content",
-                    React.createElement("input", null))),
-            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", overlay: false }))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsxs(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2", children: ["Space for more content", _jsx("input", {})] })] }), _jsx(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", overlay: false })] }) }));
 };
 export const OpenByDefault = () => {
     const [isOpen, setIsOpen] = useState(true);
@@ -69,14 +42,7 @@ export const OpenByDefault = () => {
     const closeSidebar = () => {
         setIsOpen(false);
     };
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
-        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
-                React.createElement(Link, { href: "/" }, "Home"),
-                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
-            React.createElement(Box, { minWidth: "300px" },
-                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
-                React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
-            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsx(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2", children: "Space for more content" })] }), _jsx(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" })] }) }));
 };
 const WithCustomOffsetComponent = (args) => {
     const [isOpen, setIsOpen] = useState(true);
@@ -87,14 +53,7 @@ const WithCustomOffsetComponent = (args) => {
     const closeSidebar = () => {
         setIsOpen(false);
     };
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
-        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
-                React.createElement(Link, { href: "/" }, "Home"),
-                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
-            React.createElement(Box, { minWidth: "300px" },
-                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
-                React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
-            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", ...args }))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsx(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2", children: "Space for more content" })] }), _jsx(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger", ...args })] }) }));
 };
 export const WithCustomOffset = {
     args: {
@@ -102,7 +61,7 @@ export const WithCustomOffset = {
         duration: 0.5,
     },
     name: "With custom offset",
-    render: (args) => React.createElement(WithCustomOffsetComponent, { ...args }),
+    render: (args) => _jsx(WithCustomOffsetComponent, { ...args }),
 };
 export const DontCloseOnOutsideClick = () => {
     const [isOpen, setIsOpen] = useState(false);
@@ -113,14 +72,7 @@ export const DontCloseOnOutsideClick = () => {
     const closeSidebar = () => {
         setIsOpen(false);
     };
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
-        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
-                React.createElement(Link, { href: "/" }, "Home"),
-                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
-            React.createElement(Box, { minWidth: "300px" },
-                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
-                React.createElement(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
-            React.createElement(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSideBarTrigger", closeOnOutsideClick: false }))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsx(Box, { height: "3000px", width: "100%", bg: "lightBlue", mt: "x3", p: "x2", children: "Space for more content" })] }), _jsx(ExampleSidebar, { isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSideBarTrigger", closeOnOutsideClick: false })] }) }));
 };
 export const WithoutCloseButton = () => {
     const [isOpen, setIsOpen] = useState(true);
@@ -131,14 +83,7 @@ export const WithoutCloseButton = () => {
     const closeSidebar = () => {
         setIsOpen(false);
     };
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
-        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
-                React.createElement(Link, { href: "/" }, "Home"),
-                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
-            React.createElement(Box, { minWidth: "300px" },
-                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
-                React.createElement(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
-            React.createElement(ExampleSidebar, { hideCloseButton: true, isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsx(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2", children: "Space for more content" })] }), _jsx(ExampleSidebar, { hideCloseButton: true, isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" })] }) }));
 };
 export const WithALongTitle = () => {
     const [isOpen, setIsOpen] = useState(true);
@@ -149,14 +94,7 @@ export const WithALongTitle = () => {
     const closeSidebar = () => {
         setIsOpen(false);
     };
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null), overflowX: "hidden" },
-        React.createElement(Page, { breadcrumbs: React.createElement(Breadcrumbs, null,
-                React.createElement(Link, { href: "/" }, "Home"),
-                React.createElement(Link, { href: "/" }, "Materials")), title: "Materials Overview" },
-            React.createElement(Box, { minWidth: "300px" },
-                React.createElement(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger" }, "Open Sidebar"),
-                React.createElement(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2" }, "Space for more content")),
-            React.createElement(ExampleSidebar, { title: "A very very very very very very very long title", isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" }))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), overflowX: "hidden", children: _jsxs(Page, { breadcrumbs: _jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] }), title: "Materials Overview", children: [_jsxs(Box, { minWidth: "300px", children: [_jsx(PrimaryButton, { onClick: toggleSidebar, ref: triggerRef, id: "openSidebarTrigger", children: "Open Sidebar" }), _jsx(Box, { height: "3000px", width: "50%", bg: "lightBlue", mt: "x3", p: "x2", children: "Space for more content" })] }), _jsx(ExampleSidebar, { title: "A very very very very very very very long title", isOpen: isOpen, onClose: closeSidebar, triggerRef: triggerRef, "aria-controls": "openSidebarTrigger" })] }) }));
 };
 export const WithDifferentWidths = () => {
     const [width, setWidth] = useState({ value: "xs", label: "Extra small (xs)" });
@@ -170,29 +108,20 @@ export const WithDifferentWidths = () => {
         { value: "75ch", label: "Custom value (75ch)" },
         { value: "100%", label: "Custom value (100%)" },
     ];
-    return (React.createElement(Sidebar, { hideCloseButton: true, top: 0, height: "100%", width: width.value, isOpen: true, title: `${width.label} sidebar` },
-        React.createElement(Select, { value: width.value, options: options, onChange: (s) => {
+    return (_jsx(Sidebar, { hideCloseButton: true, top: 0, height: "100%", width: width.value, isOpen: true, title: `${width.label} sidebar`, children: _jsx(Select, { value: width.value, options: options, onChange: (s) => {
                 const [option] = options.filter(({ value }) => value === s);
                 setWidth(option);
-            }, labelText: "Sidebar size" })));
+            }, labelText: "Sidebar size" }) }));
 };
 export const WithHelpText = () => {
     const [helpText, setHelpText] = useState("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tempor lacus nec finibus egestas.");
-    return (React.createElement(Sidebar, { footer: React.createElement(PrimaryButton, null, "Apply"), top: 0, height: "100%", isOpen: true, title: "With help text", helpText: helpText },
-        React.createElement(Textarea, { value: helpText, labelText: "Help Text", placeholder: "Enter some text...", onChange: (event) => {
+    return (_jsx(Sidebar, { footer: _jsx(PrimaryButton, { children: "Apply" }), top: 0, height: "100%", isOpen: true, title: "With help text", helpText: helpText, children: _jsx(Textarea, { value: helpText, labelText: "Help Text", placeholder: "Enter some text...", onChange: (event) => {
                 setHelpText(event.target.value);
-            } })));
+            } }) }));
 };
 export const WithOtherElementsInHelpText = () => {
-    return (React.createElement(Sidebar, { hideCloseButton: true, top: 0, height: "100%", isOpen: true, title: "With help text", helpText: React.createElement(React.Fragment, null,
-            "Carry over remaining quantity to a future PO line item.",
-            " ",
-            React.createElement(Link, { underline: false, href: "/" }, "Learn more"),
-            " ") }));
+    return (_jsx(Sidebar, { hideCloseButton: true, top: 0, height: "100%", isOpen: true, title: "With help text", helpText: _jsxs(_Fragment, { children: ["Carry over remaining quantity to a future PO line item.", " ", _jsx(Link, { underline: false, href: "/", children: "Learn more" }), " "] }) }));
 };
 export const WithARenderedHelpText = () => {
-    return (React.createElement(Sidebar, { hideCloseButton: true, top: 0, height: "100%", isOpen: true, title: "With help text", renderHelpText: () => (React.createElement(Heading3, { color: "red", fontWeight: "bold" },
-            "This is a custom help text",
-            " ",
-            React.createElement(Link, { href: "/", underline: false }, "Learn more"))) }));
+    return (_jsx(Sidebar, { hideCloseButton: true, top: 0, height: "100%", isOpen: true, title: "With help text", renderHelpText: () => (_jsxs(Heading3, { color: "red", fontWeight: "bold", children: ["This is a custom help text", " ", _jsx(Link, { href: "/", underline: false, children: "Learn more" })] })) }));
 };

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

@@ -11,4 +11,4 @@ export interface LinkProps extends React.ComponentPropsWithRef<"a">, Partial<Sty
     forApp?: NulogyAppName;
     openInNewTab?: boolean;
 }
-export default function Link({ children, forApp, openInNewTab, ...props }: LinkProps): React.JSX.Element;
+export default function Link({ children, forApp, openInNewTab, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Link/Link.js

@@ -1,7 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { darken } from "polished";
 import { themeGet } from "@styled-system/theme-get";
-import React from "react";
 import { addStyledProps } from "../StyledProps";
 import { AppTag } from "../AppTag";
 import { InlineFlex } from "../Flex";
@@ -10,14 +10,11 @@ export default function Link({ children, forApp, openInNewTab, ...props }) {
     const openInNewTabProps = openInNewTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
     const renderContent = () => {
         if (forApp || openInNewTab) {
-            return (React.createElement(InlineFlex, { alignItems: "center", gap: "half" },
-                React.createElement(LinkWrapper, { underline: props.underline }, children),
-                forApp && React.createElement(AppTag, { app: forApp, type: "interactive" }),
-                openInNewTab && React.createElement(Icon, { icon: "openInNew", size: "x2", color: "midGrey" })));
+            return (_jsxs(InlineFlex, { alignItems: "center", gap: "half", children: [_jsx(LinkWrapper, { underline: props.underline, children: children }), forApp && _jsx(AppTag, { app: forApp, type: "interactive" }), openInNewTab && _jsx(Icon, { icon: "openInNew", size: "x2", color: "midGrey" })] }));
         }
         return children;
     };
-    return (React.createElement(Anchor, { ...openInNewTabProps, ...props }, renderContent()));
+    return (_jsx(Anchor, { ...openInNewTabProps, ...props, children: renderContent() }));
 }
 const LinkWrapper = styled.span(({ underline = true }) => ({
     textDecoration: underline ? "underline" : "none",

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

@@ -1,54 +1,53 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
 export declare const _Link: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomFontSize: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithoutUnderline: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithADifferentColor: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const WithADifferentFontSize: () => React.JSX.Element;
+export declare const WithADifferentFontSize: () => import("react/jsx-runtime").JSX.Element;
 export declare const AsAButton: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const _ReactRouterLink: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithAppTag: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
-export declare const OpenInNewTab: () => React.JSX.Element;
+export declare const OpenInNewTab: () => import("react/jsx-runtime").JSX.Element;
 export declare const OpenInNewTabWithAppTag: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

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

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

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

@@ -1,29 +1,28 @@
-import React from "react";
 declare const _default: {
     title: string;
 };
 export default _default;
-export declare const _List: () => React.JSX.Element;
+export declare const _List: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithCustomColour: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCustomFontSizeAndLineHeight: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithCompactSpacing: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };
 };
 export declare const WithLeftAlignment: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

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

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