@nulogy/components 16.0.0 → 16.0.1

package/dist/src/Navigation/components/UserMenu/parts/Header.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { Text } from "../../../../Type";
 import { Flex } from "../../../../Flex";
@@ -31,9 +31,5 @@ const HeaderWrapper = styled(Flex).attrs({
     },
 }));
 export const Header = ({ title, subtitle1, subtitle2, containerProps }) => {
-    return (React.createElement(HeaderWrapper, { ...containerProps },
-        React.createElement(HeaderText, { fontWeight: "bold" }, title),
-        React.createElement(HeaderText, { fontWeight: "normal" }, subtitle1),
-        React.createElement(HeaderText, { fontWeight: "normal" }, subtitle2),
-        React.createElement(BackgroundTriangles, null)));
+    return (_jsxs(HeaderWrapper, { ...containerProps, children: [_jsx(HeaderText, { fontWeight: "bold", children: title }), _jsx(HeaderText, { fontWeight: "normal", children: subtitle1 }), _jsx(HeaderText, { fontWeight: "normal", children: subtitle2 }), _jsx(BackgroundTriangles, {})] }));
 };

package/dist/src/Navigation/components/UserMenu/parts/Item.js

@@ -1,14 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { RadixNavigationMenuItem } from "../../shared/components";
 import { UserMenuLink, UserMenuTrigger } from "./styled";
 const Item = React.forwardRef(({ item, level = 0, ...props }, forwardedRef) => {
-    return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
-        item.type === "link" && (React.createElement(UserMenuLink, { asChild: true }, item.element ? (React.cloneElement(item.element, {
-            ...item.props,
-            children: item.label,
-        })) : (React.createElement("a", { ...item.props }, item.label)))),
-        item.type === "button" && React.createElement(UserMenuTrigger, { ...item.props }, item.label),
-        item.type === "custom" && item.render({ level, withinMobileNav: false })));
+    return (_jsxs(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: [item.type === "link" && (_jsx(UserMenuLink, { asChild: true, children: item.element ? (React.cloneElement(item.element, {
+                    ...item.props,
+                    children: item.label,
+                })) : (_jsx("a", { ...item.props, children: item.label })) })), item.type === "button" && _jsx(UserMenuTrigger, { ...item.props, children: item.label }), item.type === "custom" && item.render({ level, withinMobileNav: false })] }));
 });
 Item.displayName = "Item";
 export default Item;

package/dist/src/Navigation/components/UserMenu/parts/MobileItem.js

@@ -1,18 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { RadixNavigationMenuItem } from "../../shared/components";
 import { IndentedContainer } from "../../MobileNav/parts/styled";
 import { UserMenuLink, UserMenuTrigger } from "./styled";
 const MobileItem = React.forwardRef(({ item, level = 0, ...props }, forwardedRef) => {
-    const content = (React.createElement(React.Fragment, null,
-        item.type === "link" && (React.createElement(IndentedContainer, { level: level },
-            React.createElement(UserMenuLink, { asChild: true, "$isMobile": true }, item.element ? (React.cloneElement(item.element, {
-                ...item.props,
-                children: item.label,
-            })) : (React.createElement("a", { ...item.props }, item.label))))),
-        item.type === "button" && (React.createElement(IndentedContainer, { level: level },
-            React.createElement(UserMenuTrigger, { ...item.props, "$isMobile": true }, item.label))),
-        item.type === "custom" && item.render({ level, withinMobileNav: true })));
-    return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props }, content));
+    const content = (_jsxs(_Fragment, { children: [item.type === "link" && (_jsx(IndentedContainer, { level: level, children: _jsx(UserMenuLink, { asChild: true, "$isMobile": true, children: item.element ? (React.cloneElement(item.element, {
+                        ...item.props,
+                        children: item.label,
+                    })) : (_jsx("a", { ...item.props, children: item.label })) }) })), item.type === "button" && (_jsx(IndentedContainer, { level: level, children: _jsx(UserMenuTrigger, { ...item.props, "$isMobile": true, children: item.label }) })), item.type === "custom" && item.render({ level, withinMobileNav: true })] }));
+    return (_jsx(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: content }));
 });
 MobileItem.displayName = "MobileItem";
 export default MobileItem;

package/dist/src/Navigation/components/shared/NavigationLogo.d.ts

@@ -4,5 +4,5 @@ interface NavigationLogoProps {
     maxHeight?: string;
     children: React.ReactNode;
 }
-export declare const NavigationLogo: ({ children, maxWidth, maxHeight, ...props }: NavigationLogoProps) => React.JSX.Element;
+export declare const NavigationLogo: ({ children, maxWidth, maxHeight, ...props }: NavigationLogoProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Navigation/components/shared/NavigationLogo.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 const LogoContainer = styled.div(({ $maxWidth, $maxHeight }) => ({
     display: "flex",
@@ -11,5 +11,5 @@ const LogoContainer = styled.div(({ $maxWidth, $maxHeight }) => ({
     },
 }));
 export const NavigationLogo = ({ children, maxWidth, maxHeight, ...props }) => {
-    return (React.createElement(LogoContainer, { "$maxWidth": maxWidth, "$maxHeight": maxHeight, ...props }, children));
+    return (_jsx(LogoContainer, { "$maxWidth": maxWidth, "$maxHeight": maxHeight, ...props, children: children }));
 };

package/dist/src/Navigation/components/shared/NavigationLogoLink.d.ts

@@ -1,7 +1,6 @@
-import React from "react";
 import type { NavigationMenuLinkProps } from "@radix-ui/react-navigation-menu";
 interface NavigationLogoLinkProps extends Omit<NavigationMenuLinkProps, "asChild"> {
     renderAsFragment?: boolean;
 }
-export declare const NavigationLogoLink: ({ href, renderAsFragment, ...props }: NavigationLogoLinkProps) => React.JSX.Element;
+export declare const NavigationLogoLink: ({ href, renderAsFragment, ...props }: NavigationLogoLinkProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/Navigation/components/shared/NavigationLogoLink.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { NavigationMenuLink as BaseNavigationMenuLink } from "./components";
 const NavigationMenuLink = styled(BaseNavigationMenuLink)(({ theme }) => ({
@@ -7,5 +7,5 @@ const NavigationMenuLink = styled(BaseNavigationMenuLink)(({ theme }) => ({
     padding: theme.space.x1,
 }));
 export const NavigationLogoLink = ({ href, renderAsFragment = false, ...props }) => {
-    return React.createElement(NavigationMenuLink, { href: href, asChild: renderAsFragment, ...props });
+    return _jsx(NavigationMenuLink, { href: href, asChild: renderAsFragment, ...props });
 };

package/dist/src/Navigation/components/shared/NavigationMenuItem.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import * as RadixNavigationMenu from "@radix-ui/react-navigation-menu";
 import { styled } from "styled-components";
@@ -14,14 +15,13 @@ import { CaretDown, NavigationMenuLink, NavigationMenuTrigger, RadixNavigationMe
  */
 export const NavigationMenuItem = React.forwardRef(({ item, level = 0, ...props }, forwardedRef) => {
     if (item.type === "separator") {
-        return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
-            React.createElement(VerticalDivider, { mx: "x1" })));
+        return (_jsx(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: _jsx(VerticalDivider, { mx: "x1" }) }));
     }
     /* ---------------------------------------------------------------------
      * Handle "custom” items
      * -------------------------------------------------------------------*/
     if (item.type === "custom") {
-        return (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props }, item.render({ withinSubMenu: level > 0, level, withinMobileNav: false })));
+        return (_jsx(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: item.render({ withinSubMenu: level > 0, level, withinMobileNav: false }) }));
     }
     const hasIcon = "icon" in item;
     const isLink = item.type === "link";
@@ -29,22 +29,13 @@ export const NavigationMenuItem = React.forwardRef(({ item, level = 0, ...props
     const hasLabel = "label" in item && item.label;
     const hasIconOnly = hasIcon && !hasLabel;
     const hasTooltip = hasIconOnly && Boolean(item.tooltip);
-    const Content = (React.createElement(React.Fragment, null,
-        hasIcon && React.createElement(Icon, { icon: item.icon, size: "x3", "aria-hidden": true }),
-        "label" in item && item.label && (React.createElement(Text, { fontSize: "small", lineHeight: "smallTextCompressed" }, item.label)),
-        hasSubMenu && React.createElement(CaretDown, { "aria-hidden": true, size: "x2" })));
+    const Content = (_jsxs(_Fragment, { children: [hasIcon && _jsx(Icon, { icon: item.icon, size: "x3", "aria-hidden": true }), "label" in item && item.label && (_jsx(Text, { fontSize: "small", lineHeight: "smallTextCompressed", children: item.label })), hasSubMenu && _jsx(CaretDown, { "aria-hidden": true, size: "x2" })] }));
     if (isLink) {
-        const Item = (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
-            React.createElement(NavigationMenuLink, { asChild: true, "aria-label": hasIconOnly && item.tooltip ? item.tooltip : item.label, borderRadius: hasIconOnly ? "rounded" : undefined, p: hasIcon ? "x1" : undefined }, item.element ? (React.cloneElement(item.element, { ...item.props, children: Content })) : (React.createElement("a", { ...item.props }, Content)))));
-        return hasTooltip ? (React.createElement(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip }, Item)) : (Item);
+        const Item = (_jsx(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: _jsx(NavigationMenuLink, { asChild: true, "aria-label": hasIconOnly && item.tooltip ? item.tooltip : item.label, borderRadius: hasIconOnly ? "rounded" : undefined, p: hasIcon ? "x1" : undefined, children: item.element ? (React.cloneElement(item.element, { ...item.props, children: Content })) : (_jsx("a", { ...item.props, children: Content })) }) }));
+        return hasTooltip ? (_jsx(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip, children: Item })) : (Item);
     }
-    const Item = (React.createElement(RadixNavigationMenuItem, { ref: forwardedRef, ...props },
-        React.createElement(NavigationMenuTrigger, { asChild: true, position: "relative", "aria-label": hasIconOnly && item.tooltip ? item.tooltip : hasLabel ? item.label : undefined, borderRadius: hasIconOnly ? "rounded" : undefined, p: hasIcon ? "x1" : undefined },
-            React.createElement(Button, { ...item.props }, Content)),
-        hasSubMenu && (React.createElement(SubMenuContent, null,
-            React.createElement(RadixNavigationMenu.Sub, { orientation: "vertical" },
-                React.createElement(NavigationMenuSubList, null, item.items?.map((sub) => React.createElement(MenuSubItem, { key: sub.key, item: sub, level: level + 1 }))))))));
-    return hasTooltip ? (React.createElement(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip }, Item)) : (Item);
+    const Item = (_jsxs(RadixNavigationMenuItem, { ref: forwardedRef, ...props, children: [_jsx(NavigationMenuTrigger, { asChild: true, position: "relative", "aria-label": hasIconOnly && item.tooltip ? item.tooltip : hasLabel ? item.label : undefined, borderRadius: hasIconOnly ? "rounded" : undefined, p: hasIcon ? "x1" : undefined, children: _jsx(Button, { ...item.props, children: Content }) }), hasSubMenu && (_jsx(SubMenuContent, { children: _jsx(RadixNavigationMenu.Sub, { orientation: "vertical", children: _jsx(NavigationMenuSubList, { children: item.items?.map((sub) => (_jsx(MenuSubItem, { item: sub, level: level + 1 }, sub.key))) }) }) }))] }));
+    return hasTooltip ? (_jsx(MiniTooltip, { delayDuration: 0, sideOffset: 0, content: item.tooltip, children: Item })) : (Item);
 });
 NavigationMenuItem.displayName = "NavigationMenuItem";
 export const NavigationMenuSubList = styled(RadixNavigationMenu.List) `
@@ -61,6 +52,6 @@ const Button = React.forwardRef(({ onPointerEnter, onPointerLeave, onPointerMove
     void onPointerEnter;
     void onPointerLeave;
     void onPointerMove;
-    return React.createElement("button", { ...props, ref: forwardedRef });
+    return _jsx("button", { ...props, ref: forwardedRef });
 });
 Button.displayName = "Button";

package/dist/src/Navigation/stories/Navigation.appSwitcher.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     title: string;
     parameters: {
@@ -6,7 +5,7 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const AllApps: () => React.JSX.Element;
-export declare const OnlySelectApps: () => React.JSX.Element;
-export declare const WithConditionallyVisibleApps: () => React.JSX.Element;
-export declare const WithAnIndicator: () => React.JSX.Element;
+export declare const AllApps: () => import("react/jsx-runtime").JSX.Element;
+export declare const OnlySelectApps: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithConditionallyVisibleApps: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithAnIndicator: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Navigation/stories/Navigation.appSwitcher.story.js

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import useConditionalAutoClick from "../../utils/testing/useConditionalAutoClick";
 import Navigation from "../Navigation";
 import { ApplicationFrame, Page } from "../../Layout";
@@ -25,7 +26,7 @@ export const AllApps = () => {
             when: "absent",
         },
     });
-    return (React.createElement(Navigation, { appSwitcher: {
+    return (_jsx(Navigation, { appSwitcher: {
             apps: {
                 "production-scheduling": {
                     url: "https://nulogy.com/",
@@ -59,7 +60,7 @@ export const OnlySelectApps = () => {
             when: "absent",
         },
     });
-    return (React.createElement(Navigation, { appSwitcher: {
+    return (_jsx(Navigation, { appSwitcher: {
             apps: {
                 "production-scheduling": {
                     url: "https://nulogy.com/",
@@ -82,7 +83,7 @@ export const WithConditionallyVisibleApps = () => {
             when: "absent",
         },
     });
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { appSwitcher: {
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { appSwitcher: {
                 apps: {
                     "production-scheduling": {
                         url: "https://nulogy.com/",
@@ -98,17 +99,7 @@ export const WithConditionallyVisibleApps = () => {
                         visible: isAdmin,
                     },
                 },
-            } }) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Flex, null,
-                React.createElement(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story information", overlay: "hide", top: "64px", bottom: "0px" },
-                    React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-                        React.createElement(Checkbox, { labelText: "User is admin", checked: isAdmin, onChange: () => setIsAdmin(!isAdmin) }),
-                        React.createElement(Text, { fontSize: "small", color: "darkGrey" },
-                            "In this example, the Smart Factory app is only visible to ",
-                            React.createElement("strong", null, "admins"),
-                            ". The app switcher is conditionally rendered based on the user's role."))),
-                React.createElement(Box, { flex: 1 })))));
+            } }), children: _jsx(Page, { fullHeight: true, children: _jsxs(Flex, { children: [_jsx(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story information", overlay: "hide", top: "64px", bottom: "0px", children: _jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsx(Checkbox, { labelText: "User is admin", checked: isAdmin, onChange: () => setIsAdmin(!isAdmin) }), _jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["In this example, the Smart Factory app is only visible to ", _jsx("strong", { children: "admins" }), ". The app switcher is conditionally rendered based on the user's role."] })] }) }), _jsx(Box, { flex: 1 })] }) }) }));
 };
 export const WithAnIndicator = () => {
     useConditionalAutoClick({
@@ -118,30 +109,19 @@ export const WithAnIndicator = () => {
             when: "absent",
         },
     });
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { appSwitcher: {
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { appSwitcher: {
                 apps: {
                     "production-scheduling": {
                         url: "https://nulogy.com/",
                     },
                     "smart-factory": {
                         url: "https://nulogy.com/",
-                        indicator: React.createElement(StatusIndicator, { type: "informative" }, "new"),
+                        indicator: _jsx(StatusIndicator, { type: "informative", children: "new" }),
                     },
                     "shop-floor": {
                         url: "https://nulogy.com/",
-                        indicator: (React.createElement(InlineFlex, { alignItems: "center", gap: "x0_25", bg: "lightRed", pl: "x0_5", pr: "x1", borderRadius: "rounded" },
-                            React.createElement(Icon, { icon: "error", size: "x2", color: "red" }),
-                            React.createElement(Text, { fontSize: "smaller", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: "medium", color: "red" }, "Not available"))),
+                        indicator: (_jsxs(InlineFlex, { alignItems: "center", gap: "x0_25", bg: "lightRed", pl: "x0_5", pr: "x1", borderRadius: "rounded", children: [_jsx(Icon, { icon: "error", size: "x2", color: "red" }), _jsx(Text, { fontSize: "smaller", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: "medium", color: "red", children: "Not available" })] })),
                     },
                 },
-            } }) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Flex, null,
-                React.createElement(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story information", overlay: "hide", top: "64px", bottom: "0px" },
-                    React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-                        React.createElement(Text, { fontSize: "small", color: "darkGrey" },
-                            "In this example, the Smart Factory app is using a ",
-                            React.createElement(Code, null, "StatusIndicator"),
-                            ", The Shop Floor app is using a custom one."))),
-                React.createElement(Box, { flex: 1 })))));
+            } }), children: _jsx(Page, { fullHeight: true, children: _jsxs(Flex, { children: [_jsx(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story information", overlay: "hide", top: "64px", bottom: "0px", children: _jsx(Flex, { flexDirection: "column", gap: "x2", children: _jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["In this example, the Smart Factory app is using a ", _jsx(Code, { children: "StatusIndicator" }), ", The Shop Floor app is using a custom one."] }) }) }), _jsx(Box, { flex: 1 })] }) }) }));
 };

package/dist/src/Navigation/stories/Navigation.logos.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     title: string;
     parameters: {
@@ -6,16 +5,16 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const PrimaryLogo: () => React.JSX.Element;
-export declare const UsingClientRouting: () => React.JSX.Element;
-export declare const WithANulogyApplicationName: () => React.JSX.Element;
-export declare const SecondaryLogo: () => React.JSX.Element;
-export declare const SecondaryLogoLink: () => React.JSX.Element;
-export declare const WithoutPassingAPrimaryLogo: () => React.JSX.Element;
-export declare const WithoutAPrimaryLogo: () => React.JSX.Element;
-export declare const WithACustomPrimaryLogo: () => React.JSX.Element;
+export declare const PrimaryLogo: () => import("react/jsx-runtime").JSX.Element;
+export declare const UsingClientRouting: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithANulogyApplicationName: () => import("react/jsx-runtime").JSX.Element;
+export declare const SecondaryLogo: () => import("react/jsx-runtime").JSX.Element;
+export declare const SecondaryLogoLink: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutPassingAPrimaryLogo: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutAPrimaryLogo: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithACustomPrimaryLogo: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithNavigationLogoWrapper: {
-    (): React.JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     story: {
         name: string;
     };

package/dist/src/Navigation/stories/Navigation.logos.story.js

@@ -1,4 +1,5 @@
-import React, { Fragment, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from "react";
 import { BrowserRouter, Link } from "react-router-dom";
 import { NulogyLogo } from "../components/NulogyLogo/NulogyLogo";
 import Navigation from "../Navigation";
@@ -21,95 +22,35 @@ export default {
     },
 };
 export const PrimaryLogo = () => {
-    return (React.createElement(Navigation, { primaryLogo: React.createElement(NavigationLogoLink, { href: "/", "aria-label": "Nulogy Logo" },
-            React.createElement(NulogyLogo, null)) }));
+    return (_jsx(Navigation, { primaryLogo: _jsx(NavigationLogoLink, { href: "/", "aria-label": "Nulogy Logo", children: _jsx(NulogyLogo, {}) }) }));
 };
 export const UsingClientRouting = () => {
-    return (React.createElement(BrowserRouter, null,
-        React.createElement(Navigation, { primaryLogo: React.createElement(NavigationLogoLink, { renderAsFragment: true },
-                React.createElement(Link, { to: "/", "aria-label": "Nulogy Logo" },
-                    React.createElement(NulogyLogo, null))) })));
+    return (_jsx(BrowserRouter, { children: _jsx(Navigation, { primaryLogo: _jsx(NavigationLogoLink, { renderAsFragment: true, children: _jsx(Link, { to: "/", "aria-label": "Nulogy Logo", children: _jsx(NulogyLogo, {}) }) }) }) }));
 };
 export const WithANulogyApplicationName = () => {
     const [application, setApplication] = useState("supplier-collaboration");
     const handleApplicationChange = (e) => {
         setApplication(e.target.value);
     };
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(BrowserRouter, null,
-            React.createElement(Navigation, { primaryLogo: React.createElement(NavigationLogoLink, { renderAsFragment: true },
-                    React.createElement(Link, { to: "/", "aria-label": "Nulogy Logo" },
-                        React.createElement(NulogyLogo, { app: application }))) })) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story configuration", overlay: "hide", top: "64px", bottom: "0px" },
-                React.createElement(RadioGroup, { labelText: "Application name", name: "application", onChange: handleApplicationChange, defaultValue: application },
-                    React.createElement(Radio, { value: "supplier-collaboration", labelText: "Supplier Collaboration" }),
-                    React.createElement(Radio, { value: "smart-factory", labelText: "Smart Factory" }),
-                    React.createElement(Radio, { value: "digital-quality-inspection", labelText: "Digital Quality Inspection" }),
-                    React.createElement(Radio, { value: "production-scheduling", labelText: "Production Scheduling" }),
-                    React.createElement(Radio, { value: "shop-floor", labelText: "Shop Floor Control" }),
-                    React.createElement(Radio, { value: "data", labelText: "Data" }))))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(BrowserRouter, { children: _jsx(Navigation, { primaryLogo: _jsx(NavigationLogoLink, { renderAsFragment: true, children: _jsx(Link, { to: "/", "aria-label": "Nulogy Logo", children: _jsx(NulogyLogo, { app: application }) }) }) }) }), children: _jsx(Page, { fullHeight: true, children: _jsx(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story configuration", overlay: "hide", top: "64px", bottom: "0px", children: _jsxs(RadioGroup, { labelText: "Application name", name: "application", onChange: handleApplicationChange, defaultValue: application, children: [_jsx(Radio, { value: "supplier-collaboration", labelText: "Supplier Collaboration" }), _jsx(Radio, { value: "smart-factory", labelText: "Smart Factory" }), _jsx(Radio, { value: "digital-quality-inspection", labelText: "Digital Quality Inspection" }), _jsx(Radio, { value: "production-scheduling", labelText: "Production Scheduling" }), _jsx(Radio, { value: "shop-floor", labelText: "Shop Floor Control" }), _jsx(Radio, { value: "data", labelText: "Data" })] }) }) }) }));
 };
 export const SecondaryLogo = () => {
-    return (React.createElement(BrowserRouter, null,
-        React.createElement(Navigation, { secondaryLogo: React.createElement(CustomLogoThree, { style: { width: "auto", height: 32 } }) })));
+    return (_jsx(BrowserRouter, { children: _jsx(Navigation, { secondaryLogo: _jsx(CustomLogoThree, { style: { width: "auto", height: 32 } }) }) }));
 };
 export const SecondaryLogoLink = () => {
-    return (React.createElement(BrowserRouter, null,
-        React.createElement(Navigation, { secondaryLogo: React.createElement(NavigationLogoLink, { renderAsFragment: true },
-                React.createElement(Link, { to: "/", "aria-label": "Nulogy Logo" },
-                    React.createElement(CustomLogo, { style: { width: "auto", height: 24 } }))) })));
+    return (_jsx(BrowserRouter, { children: _jsx(Navigation, { secondaryLogo: _jsx(NavigationLogoLink, { renderAsFragment: true, children: _jsx(Link, { to: "/", "aria-label": "Nulogy Logo", children: _jsx(CustomLogo, { style: { width: "auto", height: 24 } }) }) }) }) }));
 };
 export const WithoutPassingAPrimaryLogo = () => {
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Alert, { type: "warning" },
-                "If the primary logo is not passed, the Nulogy logo without an application name will be used with a standard anchor tag with an ",
-                React.createElement(Code, null, "href=\"/\""),
-                " attribute."))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, {}), children: _jsx(Page, { fullHeight: true, children: _jsxs(Alert, { type: "warning", children: ["If the primary logo is not passed, the Nulogy logo without an application name will be used with a standard anchor tag with an ", _jsx(Code, { children: "href=\"/\"" }), " attribute."] }) }) }));
 };
 export const WithoutAPrimaryLogo = () => {
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryLogo: React.createElement(Fragment, null) }) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Alert, { type: "danger" }, "This is not a recommended usage of the Navigation component."))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { primaryLogo: _jsx(Fragment, {}) }), children: _jsx(Page, { fullHeight: true, children: _jsx(Alert, { type: "danger", children: "This is not a recommended usage of the Navigation component." }) }) }));
 };
 export const WithACustomPrimaryLogo = () => {
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryLogo: React.createElement(CustomLogo2, { style: { width: "auto", height: 24 } }) }) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Alert, { type: "danger" }, "This is not a recommended usage of the Navigation component."))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { primaryLogo: _jsx(CustomLogo2, { style: { width: "auto", height: 24 } }) }), children: _jsx(Page, { fullHeight: true, children: _jsx(Alert, { type: "danger", children: "This is not a recommended usage of the Navigation component." }) }) }));
 };
 export const WithNavigationLogoWrapper = () => {
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { secondaryLogo: React.createElement(NavigationLogoLink, { href: "/", "aria-label": "Custom Logo" },
-                React.createElement(NavigationLogo, null,
-                    React.createElement(CustomLogo2, null))) }) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Flex, { flexDirection: "column", gap: "x2" },
-                React.createElement(Text, null,
-                    "Secondary logos are not styled, ensure setting an explicit ",
-                    React.createElement(Code, null, "width"),
-                    " / ",
-                    React.createElement(Code, null, "height"),
-                    " on the passed ",
-                    React.createElement(Code, null, "ReactNode"),
-                    " to prevent overflow, or using the ",
-                    React.createElement(Code, null, "NavigationLogo"),
-                    " helper."),
-                React.createElement(Text, null,
-                    React.createElement(Code, null, "NavigationLogo"),
-                    " component constrains logos to maximum ",
-                    React.createElement(Code, null, "184px"),
-                    " width and",
-                    " ",
-                    React.createElement(Code, null, "36px"),
-                    " height by default to prevent overflow in the Navigation."),
-                React.createElement(Text, null,
-                    "You can adjust this by passing ",
-                    React.createElement(Code, null, "maxWidth"),
-                    " and ",
-                    React.createElement(Code, null, "maxHeight"),
-                    " props to the",
-                    " ",
-                    React.createElement(Code, null, "NavigationLogo"),
-                    " component.")))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { secondaryLogo: _jsx(NavigationLogoLink, { href: "/", "aria-label": "Custom Logo", children: _jsx(NavigationLogo, { children: _jsx(CustomLogo2, {}) }) }) }), children: _jsx(Page, { fullHeight: true, children: _jsxs(Flex, { flexDirection: "column", gap: "x2", children: [_jsxs(Text, { children: ["Secondary logos are not styled, ensure setting an explicit ", _jsx(Code, { children: "width" }), " / ", _jsx(Code, { children: "height" }), " on the passed ", _jsx(Code, { children: "ReactNode" }), " to prevent overflow, or using the ", _jsx(Code, { children: "NavigationLogo" }), " helper."] }), _jsxs(Text, { children: [_jsx(Code, { children: "NavigationLogo" }), " component constrains logos to maximum ", _jsx(Code, { children: "184px" }), " width and", " ", _jsx(Code, { children: "36px" }), " height by default to prevent overflow in the Navigation."] }), _jsxs(Text, { children: ["You can adjust this by passing ", _jsx(Code, { children: "maxWidth" }), " and ", _jsx(Code, { children: "maxHeight" }), " props to the", " ", _jsx(Code, { children: "NavigationLogo" }), " component."] })] }) }) }));
 };
 WithNavigationLogoWrapper.story = {
     name: "With NavigationLogo wrapper",

package/dist/src/Navigation/stories/Navigation.mobileVisibility.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     title: string;
     parameters: {
@@ -6,8 +5,8 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const DefaultBehavior: () => React.JSX.Element;
-export declare const ItemInNavigationBar: () => React.JSX.Element;
-export declare const ItemInNavigationMenu: () => React.JSX.Element;
-export declare const ItemHiddenOnMobile: () => React.JSX.Element;
-export declare const MixedVisibility: () => React.JSX.Element;
+export declare const DefaultBehavior: () => import("react/jsx-runtime").JSX.Element;
+export declare const ItemInNavigationBar: () => import("react/jsx-runtime").JSX.Element;
+export declare const ItemInNavigationMenu: () => import("react/jsx-runtime").JSX.Element;
+export declare const ItemHiddenOnMobile: () => import("react/jsx-runtime").JSX.Element;
+export declare const MixedVisibility: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/Navigation/stories/Navigation.mobileVisibility.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 { useTheme } from "styled-components";
 import Navigation from "../Navigation";
 import { Text } from "../../Type";
@@ -20,19 +20,9 @@ const baseMenuItems = [
 ];
 const StoryLayout = ({ children, description }) => {
     const { breakpoints } = useTheme();
-    return (React.createElement(ApplicationFrame, { navBar: children },
-        React.createElement(Page, null,
-            description && React.createElement(Text, { mb: "x2" }, description),
-            React.createElement(Text, { mb: "x2", color: "darkGrey", fontSize: "small" },
-                "Resize the window to the default mobile breakpoint width (",
-                breakpoints[NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY],
-                ") to observe the mobile navigation behavior."))));
+    return (_jsx(ApplicationFrame, { navBar: children, children: _jsxs(Page, { children: [description && _jsx(Text, { mb: "x2", children: description }), _jsxs(Text, { mb: "x2", color: "darkGrey", fontSize: "small", children: ["Resize the window to the default mobile breakpoint width (", breakpoints[NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY], ") to observe the mobile navigation behavior."] })] }) }));
 };
-export const DefaultBehavior = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
-        "Default behavior: Items without ",
-        React.createElement(Code, null, "mobileVisibility"),
-        " set will appear in the mobile navigation menu.") },
-    React.createElement(Navigation, { primaryNavigation: [
+export const DefaultBehavior = () => (_jsx(StoryLayout, { description: _jsxs(_Fragment, { children: ["Default behavior: Items without ", _jsx(Code, { children: "mobileVisibility" }), " set will appear in the mobile navigation menu."] }), children: _jsx(Navigation, { primaryNavigation: [
             { ...baseMenuItems[0], label: "Home (Default)" },
             { ...baseMenuItems[1], label: "Products (Default)" },
         ], secondaryNavigation: [
@@ -42,12 +32,8 @@ export const DefaultBehavior = () => (React.createElement(StoryLayout, { descrip
                 icon: "settings",
                 type: "button",
             },
-        ] })));
-export const ItemInNavigationBar = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
-        "Items with ",
-        React.createElement(Code, null, "mobileVisibility: \"navigationBar\""),
-        " will appear directly in the mobile navigation bar.") },
-    React.createElement(Navigation, { primaryNavigation: [
+        ] }) }));
+export const ItemInNavigationBar = () => (_jsx(StoryLayout, { description: _jsxs(_Fragment, { children: ["Items with ", _jsx(Code, { children: "mobileVisibility: \"navigationBar\"" }), " will appear directly in the mobile navigation bar."] }), children: _jsx(Navigation, { primaryNavigation: [
             { ...baseMenuItems[0], label: "Home (Menu)" },
             {
                 key: "search",
@@ -74,12 +60,8 @@ export const ItemInNavigationBar = () => (React.createElement(StoryLayout, { des
                 type: "button",
                 mobileVisibility: "navigationMenu",
             },
-        ] })));
-export const ItemInNavigationMenu = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
-        "Items with ",
-        React.createElement(Code, null, "mobileVisibility: \"navigationMenu\""),
-        " will appear inside the collapsible mobile menu. This is also the default behavior if the prop is not set.") },
-    React.createElement(Navigation, { primaryNavigation: [
+        ] }) }));
+export const ItemInNavigationMenu = () => (_jsx(StoryLayout, { description: _jsxs(_Fragment, { children: ["Items with ", _jsx(Code, { children: "mobileVisibility: \"navigationMenu\"" }), " will appear inside the collapsible mobile menu. This is also the default behavior if the prop is not set."] }), children: _jsx(Navigation, { primaryNavigation: [
             {
                 ...baseMenuItems[0],
                 label: "Home (Explicit Menu)",
@@ -98,12 +80,8 @@ export const ItemInNavigationMenu = () => (React.createElement(StoryLayout, { de
                 type: "button",
                 mobileVisibility: "navigationMenu",
             },
-        ] })));
-export const ItemHiddenOnMobile = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
-        "Items with ",
-        React.createElement(Code, null, "mobileVisibility: \"hidden\""),
-        " will not be visible on mobile viewports.") },
-    React.createElement(Navigation, { primaryNavigation: [
+        ] }) }));
+export const ItemHiddenOnMobile = () => (_jsx(StoryLayout, { description: _jsxs(_Fragment, { children: ["Items with ", _jsx(Code, { children: "mobileVisibility: \"hidden\"" }), " will not be visible on mobile viewports."] }), children: _jsx(Navigation, { primaryNavigation: [
             { ...baseMenuItems[0], label: "Home (Visible)" },
             {
                 ...baseMenuItems[1],
@@ -125,12 +103,8 @@ export const ItemHiddenOnMobile = () => (React.createElement(StoryLayout, { desc
                 icon: "chatBubble",
                 type: "button",
             },
-        ] })));
-export const MixedVisibility = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
-        "A mix of items with different ",
-        React.createElement(Code, null, "mobileVisibility"),
-        " settings to demonstrate various behaviors simultaneously.") },
-    React.createElement(Navigation, { primaryNavigation: [
+        ] }) }));
+export const MixedVisibility = () => (_jsx(StoryLayout, { description: _jsxs(_Fragment, { children: ["A mix of items with different ", _jsx(Code, { children: "mobileVisibility" }), " settings to demonstrate various behaviors simultaneously."] }), children: _jsx(Navigation, { primaryNavigation: [
             {
                 key: "dashboard",
                 label: "Dashboard",
@@ -181,4 +155,4 @@ export const MixedVisibility = () => (React.createElement(StoryLayout, { descrip
                 type: "button",
                 mobileVisibility: "hidden",
             },
-        ] })));
+        ] }) }));

package/dist/src/Navigation/stories/Navigation.navigationMenus.story.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 declare const _default: {
     title: string;
     parameters: {
@@ -6,8 +5,8 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const BasicUsage: () => React.JSX.Element;
-export declare const Separators: () => React.JSX.Element;
-export declare const CustomMenuItems: () => React.JSX.Element;
-export declare const IconsAndLabels: () => React.JSX.Element;
-export declare const WithClientRouting: () => React.JSX.Element;
+export declare const BasicUsage: () => import("react/jsx-runtime").JSX.Element;
+export declare const Separators: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomMenuItems: () => import("react/jsx-runtime").JSX.Element;
+export declare const IconsAndLabels: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithClientRouting: () => import("react/jsx-runtime").JSX.Element;