@nulogy/components 16.0.0 → 16.0.1

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

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Breadcrumbs, Button, DropdownButton, DropdownLink, Flex, Link, PrimaryButton, StatusIndicator, Header, Text, Heading1, Icon, } from "..";
 import Summary from "../Summary/Summary";
 import SummaryItem from "../Summary/SummaryItem";
@@ -15,57 +15,17 @@ export default {
         chromatic: { viewports },
     },
 };
-export const Default = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview" }));
-export const TitleAsReactElement = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: React.createElement(Heading1, { mb: "0" },
-        "Bacon ",
-        React.createElement(Icon, { icon: "info" })) }));
-export const WithActions = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview", renderActions: () => (React.createElement(Flex, { gap: "x1" },
-        React.createElement(PrimaryButton, { size: "small" }, " Archive"),
-        React.createElement(Button, { size: "small" }, "Delete"),
-        React.createElement(DropdownMenu, { showArrow: false, defaultOpen: false },
-            React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
-            React.createElement(DropdownButton, null, "Dropdown Button")))) }));
-export const WithSubTitle = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview", subtitle: "Materials Overview" }));
-export const WithContent = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"),
-        React.createElement(Text, null, "Orders"))), title: "Materials Overview", subtitle: "Materials Overview" },
-    React.createElement(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small" }, "Extra content")));
-export const WithSummary = () => (React.createElement(Header, { breakpoints: {
+export const Default = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview" }));
+export const TitleAsReactElement = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: _jsxs(Heading1, { mb: "0", children: ["Bacon ", _jsx(Icon, { icon: "info" })] }) }));
+export const WithActions = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview", renderActions: () => (_jsxs(Flex, { gap: "x1", children: [_jsx(PrimaryButton, { size: "small", children: " Archive" }), _jsx(Button, { size: "small", children: "Delete" }), _jsxs(DropdownMenu, { showArrow: false, defaultOpen: false, children: [_jsx(DropdownLink, { href: "/", children: "Dropdown Link" }), _jsx(DropdownButton, { children: "Dropdown Button" })] })] })) }));
+export const WithSubTitle = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview", subtitle: "Materials Overview" }));
+export const WithContent = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" }), _jsx(Text, { children: "Orders" })] })), title: "Materials Overview", subtitle: "Materials Overview", children: _jsx(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small", children: "Extra content" }) }));
+export const WithSummary = () => (_jsx(Header, { breakpoints: {
         medium: 1200,
-    }, renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { underline: false, href: "/" }, "Home"),
-        React.createElement(Link, { underline: false, href: "/" }, "Materials"))), title: "Page title", renderSummary: () => (React.createElement(Summary, { breakpoint: 1200 },
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }))) }));
-export const WithAnUndecoratedBackground = () => (React.createElement(Header, { undecorated: true, renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview" }));
-export const WithCustomBackground = () => (React.createElement(Header, { renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { href: "/" }, "Home"),
-        React.createElement(Link, { href: "/" }, "Materials"))), title: "Materials Overview", background: "#98FB98", undecorated: true }));
-export const WithEverything = () => (React.createElement(Header, { breakpoints: {
+    }, renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { underline: false, href: "/", children: "Home" }), _jsx(Link, { underline: false, href: "/", children: "Materials" })] })), title: "Page title", renderSummary: () => (_jsxs(Summary, { breakpoint: 1200, children: [_jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) })] })) }));
+export const WithAnUndecoratedBackground = () => (_jsx(Header, { undecorated: true, renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview" }));
+export const WithCustomBackground = () => (_jsx(Header, { renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { href: "/", children: "Home" }), _jsx(Link, { href: "/", children: "Materials" })] })), title: "Materials Overview", background: "#98FB98", undecorated: true }));
+export const WithEverything = () => (_jsx(Header, { breakpoints: {
         small: 768,
         medium: 1200,
-    }, renderBreadcrumbs: () => (React.createElement(Breadcrumbs, null,
-        React.createElement(Link, { underline: false, href: "/" }, "Home"),
-        React.createElement(Link, { underline: false, href: "/" }, "Materials"))), title: "Page title", subtitle: "Alternative page title", renderSummary: () => (React.createElement(Summary, { breakpoint: 1200 },
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryDivider, null),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }),
-        React.createElement(SummaryItem, { value: 42, status: React.createElement(StatusIndicator, { type: "informative" }, "On Time") }))), renderActions: () => (React.createElement(DropdownMenu, { showArrow: false, defaultOpen: false },
-        React.createElement(DropdownLink, { href: "/" }, "Dropdown Link"),
-        React.createElement(DropdownButton, null, "Dropdown Button"))) },
-    React.createElement(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small" }, "Extra content")));
+    }, renderBreadcrumbs: () => (_jsxs(Breadcrumbs, { children: [_jsx(Link, { underline: false, href: "/", children: "Home" }), _jsx(Link, { underline: false, href: "/", children: "Materials" })] })), title: "Page title", subtitle: "Alternative page title", renderSummary: () => (_jsxs(Summary, { breakpoint: 1200, children: [_jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryDivider, {}), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) }), _jsx(SummaryItem, { value: 42, status: _jsx(StatusIndicator, { type: "informative", children: "On Time" }) })] })), renderActions: () => (_jsxs(DropdownMenu, { showArrow: false, defaultOpen: false, children: [_jsx(DropdownLink, { href: "/", children: "Dropdown Link" }), _jsx(DropdownButton, { children: "Dropdown Button" })] })), children: _jsx(Box, { border: "1px dashed", borderColor: "grey", py: "half", px: "x1", borderRadius: "small", children: "Extra content" }) }));

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

@@ -1,13 +1,12 @@
 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;
     };
-    render: (args: import("./Page").PageProps) => React.JSX.Element;
+    render: (args: import("./Page").PageProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default _default;
 type Story = StoryObj<typeof Page>;

package/dist/src/Layout/Page.applicationFrame.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 { Link } from "../Link";
 import { ApplicationFrame, Navigation, Page, Breadcrumbs, Heading2, Text } from "..";
 export default {
@@ -7,32 +7,25 @@ export default {
     parameters: {
         layout: "fullscreen",
     },
-    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 }) })),
 };
 export const NoPageTitle = {
     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 = {
     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 WithFullHeight = {
     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." }),
     },
 };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { FlexProps } from "../Flex/Flex";
 export interface PageProps extends Omit<FlexProps, "title"> {
     breadcrumbs?: ReactNode;
@@ -8,5 +8,5 @@ export interface PageProps extends Omit<FlexProps, "title"> {
     fullHeight?: boolean;
     renderHeader?: () => ReactNode;
 }
-export declare const Page: ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }: PageProps) => React.JSX.Element;
+export declare const Page: ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }: PageProps) => import("react/jsx-runtime").JSX.Element;
 export default Page;

package/dist/src/Layout/Page.js

@@ -1,10 +1,8 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "../Box";
 import { Flex } from "../Flex";
 import Header from "./Header";
-export const Page = ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }) => (React.createElement(Flex, { flexDirection: "column", flexGrow: fullHeight ? 1 : 0, ...rest },
-    renderHeader
-        ? renderHeader()
-        : (breadcrumbs || title || headerContent) && (React.createElement(Header, { renderBreadcrumbs: () => breadcrumbs, title: title }, headerContent)),
-    React.createElement(Box, { p: "x3" }, children)));
+export const Page = ({ breadcrumbs, title, children, headerContent, fullHeight, renderHeader, ...rest }) => (_jsxs(Flex, { flexDirection: "column", flexGrow: fullHeight ? 1 : 0, ...rest, children: [renderHeader
+            ? renderHeader()
+            : (breadcrumbs || title || headerContent) && (_jsx(Header, { renderBreadcrumbs: () => breadcrumbs, title: title, children: headerContent })), _jsx(Box, { p: "x3", children: children })] }));
 export default Page;

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