@nulogy/components 16.0.0 → 16.0.2

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;

package/dist/src/Navigation/stories/Navigation.navigationMenus.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 { BrowserRouter, Link } from "react-router-dom";
 import Navigation from "../Navigation";
 import { ApplicationFrame, Page } from "../../Layout";
@@ -19,7 +19,7 @@ export default {
     },
 };
 export const BasicUsage = () => {
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryNavigation: [
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { primaryNavigation: [
                 {
                     key: "dashboard",
                     label: "Dashboard",
@@ -95,40 +95,10 @@ export const BasicUsage = () => {
                         },
                     },
                 },
-            ] }) },
-        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 ",
-                            React.createElement("strong", null, "Dashboard"),
-                            ", ",
-                            React.createElement("strong", null, "Inspector"),
-                            ", and",
-                            " ",
-                            React.createElement("strong", null, "Reports"),
-                            " are links, and the ",
-                            React.createElement("strong", null, "Sheets"),
-                            " and ",
-                            React.createElement("strong", null, "Forms"),
-                            " are buttons."),
-                        React.createElement(Text, { fontSize: "small", color: "darkGrey" },
-                            "The ",
-                            React.createElement("strong", null, "Search"),
-                            " and ",
-                            React.createElement("strong", null, "Settings"),
-                            " buttons are secondary navigation items."),
-                        React.createElement(Text, { fontSize: "small", color: "darkGrey" },
-                            "Everything that can be rendered in the ",
-                            React.createElement(Code, null, "primaryNavigation"),
-                            " (left part of the navigation) can also be rendered in the ",
-                            React.createElement(Code, null, "secondaryNavigation"),
-                            " (right part of the navigation), and vice versa."))),
-                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: [_jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["In this example, the ", _jsx("strong", { children: "Dashboard" }), ", ", _jsx("strong", { children: "Inspector" }), ", and", " ", _jsx("strong", { children: "Reports" }), " are links, and the ", _jsx("strong", { children: "Sheets" }), " and ", _jsx("strong", { children: "Forms" }), " are buttons."] }), _jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["The ", _jsx("strong", { children: "Search" }), " and ", _jsx("strong", { children: "Settings" }), " buttons are secondary navigation items."] }), _jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["Everything that can be rendered in the ", _jsx(Code, { children: "primaryNavigation" }), " (left part of the navigation) can also be rendered in the ", _jsx(Code, { children: "secondaryNavigation" }), " (right part of the navigation), and vice versa."] })] }) }), _jsx(Box, { flex: 1 })] }) }) }));
 };
 export const Separators = () => {
-    return (React.createElement(Navigation, { primaryNavigation: [
+    return (_jsx(Navigation, { primaryNavigation: [
             {
                 key: "dashboard",
                 label: "Dashboard",
@@ -173,12 +143,12 @@ export const Separators = () => {
         ] }));
 };
 export const CustomMenuItems = () => {
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryNavigation: [
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { primaryNavigation: [
                 {
                     key: "custom-menu-item",
                     type: "custom",
                     render: () => {
-                        return (React.createElement(Text, { color: "red", fontWeight: "bold" }, "I am a custom menu item"));
+                        return (_jsx(Text, { color: "red", fontWeight: "bold", children: "I am a custom menu item" }));
                     },
                 },
                 {
@@ -190,14 +160,14 @@ export const CustomMenuItems = () => {
                             key: "custom-submenu-item-1",
                             type: "custom",
                             render: () => {
-                                return React.createElement(Text, { color: "darkGrey" }, "I am custom submenu item 1");
+                                return _jsx(Text, { color: "darkGrey", children: "I am custom submenu item 1" });
                             },
                         },
                         {
                             key: "custom-submenu-item-2",
                             type: "custom",
                             render: () => {
-                                return React.createElement(Button, null, "I am custom submenu item 2");
+                                return _jsx(Button, { children: "I am custom submenu item 2" });
                             },
                         },
                     ],
@@ -205,42 +175,20 @@ export const CustomMenuItems = () => {
                 {
                     key: "custom-panel-1",
                     type: "custom",
-                    render: ({ withinSubMenu, withinMobileNav, level }) => (React.createElement(React.Fragment, null,
-                        React.createElement(NavigationMenuTrigger, null, "Open custom panel"),
-                        React.createElement(NavigationMenuContent, { padding: "x2", background: "coral", right: withinMobileNav ? "100%" : "auto", top: withinMobileNav ? "0px" : "auto" },
-                            React.createElement(Text, { fontWeight: "bold" }, "I am a custom panel."),
-                            React.createElement("pre", null,
-                                React.createElement(Text, null,
-                                    "withinSubMenu: ",
-                                    withinSubMenu ? "true" : "false"),
-                                React.createElement(Text, null,
-                                    "withinMobileNav: ",
-                                    withinMobileNav ? "true" : "false"),
-                                React.createElement(Text, null,
-                                    "level: ",
-                                    level))))),
+                    render: ({ withinSubMenu, withinMobileNav, level }) => (_jsxs(_Fragment, { children: [_jsx(NavigationMenuTrigger, { children: "Open custom panel" }), _jsxs(NavigationMenuContent, { padding: "x2", background: "coral", right: withinMobileNav ? "100%" : "auto", top: withinMobileNav ? "0px" : "auto", children: [_jsx(Text, { fontWeight: "bold", children: "I am a custom panel." }), _jsxs("pre", { children: [_jsxs(Text, { children: ["withinSubMenu: ", withinSubMenu ? "true" : "false"] }), _jsxs(Text, { children: ["withinMobileNav: ", withinMobileNav ? "true" : "false"] }), _jsxs(Text, { children: ["level: ", level] })] })] })] })),
                 },
             ], secondaryNavigation: [
                 {
                     key: "custom-menu-item",
                     type: "custom",
                     render: () => {
-                        return React.createElement(Input, { placeholder: "Custom menu item too!", iconLeft: "search" });
+                        return _jsx(Input, { placeholder: "Custom menu item too!", iconLeft: "search" });
                     },
                 },
-            ] }) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Alert, { type: "warning" },
-                "Custom menu items should be used sparingly. When used, make sure they remain accessible and use styles that are inline with the rest of the navigation. The render function gives you access to ",
-                React.createElement(Code, null, "withinSubMenu"),
-                ", ",
-                React.createElement(Code, null, "withinMobileNav"),
-                ", and ",
-                React.createElement(Code, null, "level"),
-                " to style and position the rendered items properly. See component documentation for more details."))));
+            ] }), children: _jsx(Page, { fullHeight: true, children: _jsxs(Alert, { type: "warning", children: ["Custom menu items should be used sparingly. When used, make sure they remain accessible and use styles that are inline with the rest of the navigation. The render function gives you access to ", _jsx(Code, { children: "withinSubMenu" }), ", ", _jsx(Code, { children: "withinMobileNav" }), ", and ", _jsx(Code, { children: "level" }), " to style and position the rendered items properly. See component documentation for more details."] }) }) }));
 };
 export const IconsAndLabels = () => {
-    return (React.createElement(Navigation, { primaryNavigation: [
+    return (_jsx(Navigation, { primaryNavigation: [
             {
                 key: "icon-and-label",
                 label: "Icon and label",
@@ -279,27 +227,26 @@ export const IconsAndLabels = () => {
         ] }));
 };
 export const WithClientRouting = () => {
-    return (React.createElement(BrowserRouter, null,
-        React.createElement(Navigation, { primaryNavigation: [
+    return (_jsx(BrowserRouter, { children: _jsx(Navigation, { primaryNavigation: [
                 {
                     key: "dashboard",
                     label: "Dashboard",
                     type: "link",
-                    element: React.createElement(Link, { to: "/dashboard" }),
+                    element: _jsx(Link, { to: "/dashboard" }),
                 },
                 {
                     key: "profile",
                     label: "Profile",
                     type: "link",
                     icon: "user",
-                    element: React.createElement(Link, { to: "/profile" }),
+                    element: _jsx(Link, { to: "/profile" }),
                 },
                 {
                     key: "settings",
                     tooltip: "Settings",
                     type: "link",
                     icon: "settings",
-                    element: React.createElement(Link, { to: "/settings" }),
+                    element: _jsx(Link, { to: "/settings" }),
                 },
-            ] })));
+            ] }) }));
 };

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

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

package/dist/src/Navigation/stories/Navigation.navigationMenus.subMenus.story.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import Navigation from "../Navigation";
 export default {
     title: "Components/Navigation/Navigation Menus/Sub Menus",
@@ -7,7 +7,7 @@ export default {
     },
 };
 export const SubMenus = () => {
-    return (React.createElement(Navigation, { primaryNavigation: [
+    return (_jsx(Navigation, { primaryNavigation: [
             {
                 key: "company",
                 label: "Company",
@@ -119,7 +119,7 @@ export const SubMenus = () => {
         ] }));
 };
 export const SubMenuSeparator = () => {
-    return (React.createElement(Navigation, { primaryNavigation: [
+    return (_jsx(Navigation, { primaryNavigation: [
             {
                 key: "company",
                 label: "Company",
@@ -149,7 +149,7 @@ export const SubMenuSeparator = () => {
         ] }));
 };
 export const IconsAndLabels = () => {
-    return (React.createElement(Navigation, { primaryNavigation: [
+    return (_jsx(Navigation, { primaryNavigation: [
             {
                 key: "primary-submenu-parent",
                 label: "Primary submenu parent",

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

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

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

@@ -1,4 +1,5 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 import { Input } from "../../Input";
 import { Navigation } from "..";
 import { ApplicationFrame, Page, Sidebar } from "../../Layout";
@@ -15,7 +16,7 @@ export default {
         layout: "fullscreen",
     },
 };
-export const BasicUsage = () => (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { appSwitcher: {
+export const BasicUsage = () => (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { appSwitcher: {
             apps: {
                 "production-scheduling": {
                     url: "https://nulogy.com/",
@@ -139,24 +140,22 @@ export const BasicUsage = () => (React.createElement(ApplicationFrame, { navBar:
                     },
                 },
             },
-        ], secondaryLogo: React.createElement(CustomLogo3, { style: { width: "auto", height: 32 } }), userMenu: {
+        ], secondaryLogo: _jsx(CustomLogo3, { style: { width: "auto", height: 32 } }), userMenu: {
             triggerText: { title: "haidera@nulogy.com", subtitle2: "Toronto, ON" },
             header: {
                 title: "Haider Alshamma",
                 subtitle1: "haidera@nulogy.com",
                 subtitle2: "Nulogy",
             },
-            controls: () => (React.createElement(Flex, { gap: "x2", flexDirection: "column", width: "100%", pt: "x1" },
-                React.createElement(Select, { labelText: "Company", defaultValue: ["Nulogy Canada"], options: [
-                        { value: "Nulogy Canada", label: "Nulogy - Canada" },
-                        { value: "Nulogy US", label: "Nulogy - US" },
-                        { value: "Nulogy UK", label: "Nulogy - UK" },
-                    ] }),
-                React.createElement(Select, { labelText: "User group", defaultValue: ["super-user"], options: [
-                        { value: "super-user", label: "Super User" },
-                        { value: "admin", label: "Admin" },
-                        { value: "user", label: "User" },
-                    ] }))),
+            controls: () => (_jsxs(Flex, { gap: "x2", flexDirection: "column", width: "100%", pt: "x1", children: [_jsx(Select, { labelText: "Company", defaultValue: ["Nulogy Canada"], options: [
+                            { value: "Nulogy Canada", label: "Nulogy - Canada" },
+                            { value: "Nulogy US", label: "Nulogy - US" },
+                            { value: "Nulogy UK", label: "Nulogy - UK" },
+                        ] }), _jsx(Select, { labelText: "User group", defaultValue: ["super-user"], options: [
+                            { value: "super-user", label: "Super User" },
+                            { value: "admin", label: "Admin" },
+                            { value: "user", label: "User" },
+                        ] })] })),
             menuItems: [
                 {
                     key: "preferences",
@@ -179,30 +178,11 @@ export const BasicUsage = () => (React.createElement(ApplicationFrame, { navBar:
                     },
                 },
             ],
-        } }) },
-    React.createElement(Page, { fullHeight: true },
-        React.createElement(Placeholder, null))));
+        } }), children: _jsx(Page, { fullHeight: true, children: _jsx(Placeholder, {}) }) }));
 export const WithACustomBreakpoint = () => {
     const [breakpoint, setBreakpoint] = useState("1000px");
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryNavigation: [{ key: "dashboard", label: "Dashboard", type: "link" }], secondaryNavigation: [{ key: "settings", icon: "settings", tooltip: "Settings", type: "button" }], breakpoint: breakpoint }) },
-        React.createElement(Page, { fullHeight: true },
-            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(Input, { labelText: "Breakpoint", value: breakpoint, onChange: (e) => setBreakpoint(e.target.value) }),
-                    React.createElement(Text, { fontSize: "small", color: "darkGrey" },
-                        "The navigation will transition to desktop when the viewport is wider than ",
-                        React.createElement(Code, null, breakpoint),
-                        "."),
-                    React.createElement(Text, { fontSize: "small", color: "darkGrey" },
-                        "You can also use any valid key from the ",
-                        React.createElement("a", { href: "/?path=/story/tokens--breakpoints" }, "theme breakpoints"),
-                        " ",
-                        "as a breakpoint value."))))));
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { primaryNavigation: [{ key: "dashboard", label: "Dashboard", type: "link" }], secondaryNavigation: [{ key: "settings", icon: "settings", tooltip: "Settings", type: "button" }], breakpoint: breakpoint }), children: _jsx(Page, { fullHeight: true, 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(Input, { labelText: "Breakpoint", value: breakpoint, onChange: (e) => setBreakpoint(e.target.value) }), _jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["The navigation will transition to desktop when the viewport is wider than ", _jsx(Code, { children: breakpoint }), "."] }), _jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["You can also use any valid key from the ", _jsx("a", { href: "/?path=/story/tokens--breakpoints", children: "theme breakpoints" }), " ", "as a breakpoint value."] })] }) }) }) }));
 };
 export const WithBanners = () => {
-    return (React.createElement(ApplicationFrame, { environment: "production", navBar: React.createElement(React.Fragment, null,
-            React.createElement(Banner, { title: "Action required" }, "We have detected unauthorized access attempts on your account. Please change your password immediately to secure your account."),
-            React.createElement(Navigation, { primaryNavigation: [{ key: "dashboard", label: "Dashboard", type: "link" }], secondaryNavigation: [{ key: "settings", icon: "settings", tooltip: "Settings", type: "button" }] })) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story information", overlay: "hide", top: "83px", bottom: "0px" }))));
+    return (_jsx(ApplicationFrame, { environment: "production", navBar: _jsxs(_Fragment, { children: [_jsx(Banner, { title: "Action required", children: "We have detected unauthorized access attempts on your account. Please change your password immediately to secure your account." }), _jsx(Navigation, { primaryNavigation: [{ key: "dashboard", label: "Dashboard", type: "link" }], secondaryNavigation: [{ key: "settings", icon: "settings", tooltip: "Settings", type: "button" }] })] }), children: _jsx(Page, { fullHeight: true, children: _jsx(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story information", overlay: "hide", top: "83px", bottom: "0px" }) }) }));
 };

package/dist/src/Navigation/stories/Navigation.userMenu.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 WithoutATrigger: () => React.JSX.Element;
-export declare const Header: () => React.JSX.Element;
-export declare const Controls: () => React.JSX.Element;
-export declare const MenuItems: () => React.JSX.Element;
+export declare const BasicUsage: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutATrigger: () => import("react/jsx-runtime").JSX.Element;
+export declare const Header: () => import("react/jsx-runtime").JSX.Element;
+export declare const Controls: () => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItems: () => import("react/jsx-runtime").JSX.Element;