@nulogy/components 16.0.0 → 16.0.1

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;

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { BrowserRouter, Link } from "react-router-dom";
 import { Flex } from "../../Flex";
@@ -23,24 +24,22 @@ export const BasicUsage = () => {
             when: "absent",
         },
     });
-    return (React.createElement(Navigation, { userMenu: {
+    return (_jsx(Navigation, { userMenu: {
             triggerText: { title: "haidera@nulogy.com", subtitle1: "Nulogy", 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",
@@ -69,33 +68,19 @@ export const WithoutATrigger = () => {
     const [title, setTitle] = React.useState("haidera@nulogy.com");
     const [subtitle1, setSubtitle1] = React.useState("Nulogy");
     const [subtitle2, setSubtitle2] = React.useState("Toronto, ON");
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { userMenu: {
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { userMenu: {
                 triggerText: {
                     title: title,
                     subtitle1: subtitle1,
                     subtitle2: subtitle2,
                 },
-            } }) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Flex, { width: "600px", flexDirection: "column", gap: "x2" },
-                React.createElement(Text, { fontSize: "small", color: "darkGrey" },
-                    "You can add a ",
-                    React.createElement(Code, null, "title"),
-                    ", ",
-                    React.createElement(Code, null, "subtitle1"),
-                    ", and ",
-                    React.createElement(Code, null, "subtitle2"),
-                    " to the trigger text of the user menu. Values will be truncated if they do not fit."),
-                React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "If the user menu does not contain anything other than the trigger text, the user menu button will be disabled, like in this example."),
-                React.createElement(Input, { labelText: "Title", value: title, onChange: (e) => {
-                        setTitle(e.target.value);
-                    } }),
-                React.createElement(Input, { labelText: "Subtitle 1", value: subtitle1, onChange: (e) => {
-                        setSubtitle1(e.target.value);
-                    } }),
-                React.createElement(Input, { labelText: "Subtitle 2", value: subtitle2, onChange: (e) => {
-                        setSubtitle2(e.target.value);
-                    } })))));
+            } }), children: _jsx(Page, { fullHeight: true, children: _jsxs(Flex, { width: "600px", flexDirection: "column", gap: "x2", children: [_jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["You can add a ", _jsx(Code, { children: "title" }), ", ", _jsx(Code, { children: "subtitle1" }), ", and ", _jsx(Code, { children: "subtitle2" }), " to the trigger text of the user menu. Values will be truncated if they do not fit."] }), _jsx(Text, { fontSize: "small", color: "darkGrey", children: "If the user menu does not contain anything other than the trigger text, the user menu button will be disabled, like in this example." }), _jsx(Input, { labelText: "Title", value: title, onChange: (e) => {
+                            setTitle(e.target.value);
+                        } }), _jsx(Input, { labelText: "Subtitle 1", value: subtitle1, onChange: (e) => {
+                            setSubtitle1(e.target.value);
+                        } }), _jsx(Input, { labelText: "Subtitle 2", value: subtitle2, onChange: (e) => {
+                            setSubtitle2(e.target.value);
+                        } })] }) }) }));
 };
 export const Header = () => {
     const [title, setTitle] = React.useState("Haider Alshamma");
@@ -108,7 +93,7 @@ export const Header = () => {
             when: "absent",
         },
     });
-    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { userMenu: {
+    return (_jsx(ApplicationFrame, { navBar: _jsx(Navigation, { userMenu: {
                 triggerText: {
                     title: "haidera@nulogy.com",
                     subtitle1: "Nulogy",
@@ -117,26 +102,13 @@ export const Header = () => {
                 header: {
                     title: title,
                 },
-            } }) },
-        React.createElement(Page, { fullHeight: true },
-            React.createElement(Flex, { width: "600px", flexDirection: "column", gap: "x2" },
-                React.createElement(Text, { fontSize: "small", color: "darkGrey" },
-                    "The header is optional. You can add a ",
-                    React.createElement(Code, null, "title"),
-                    ", ",
-                    React.createElement(Code, null, "subtitle1"),
-                    ", and ",
-                    React.createElement(Code, null, "subtitle2"),
-                    "."),
-                React.createElement(Input, { labelText: "Title", value: title, onChange: (e) => {
-                        setTitle(e.target.value);
-                    } }),
-                React.createElement(Input, { labelText: "Subtitle 1", value: subtitle1, onChange: (e) => {
-                        setSubtitle1(e.target.value);
-                    } }),
-                React.createElement(Input, { labelText: "Subtitle 2", value: subtitle2, onChange: (e) => {
-                        setSubtitle2(e.target.value);
-                    } })))));
+            } }), children: _jsx(Page, { fullHeight: true, children: _jsxs(Flex, { width: "600px", flexDirection: "column", gap: "x2", children: [_jsxs(Text, { fontSize: "small", color: "darkGrey", children: ["The header is optional. You can add a ", _jsx(Code, { children: "title" }), ", ", _jsx(Code, { children: "subtitle1" }), ", and ", _jsx(Code, { children: "subtitle2" }), "."] }), _jsx(Input, { labelText: "Title", value: title, onChange: (e) => {
+                            setTitle(e.target.value);
+                        } }), _jsx(Input, { labelText: "Subtitle 1", value: subtitle1, onChange: (e) => {
+                            setSubtitle1(e.target.value);
+                        } }), _jsx(Input, { labelText: "Subtitle 2", value: subtitle2, onChange: (e) => {
+                            setSubtitle2(e.target.value);
+                        } })] }) }) }));
 };
 export const Controls = () => {
     useConditionalAutoClick({
@@ -146,23 +118,21 @@ export const Controls = () => {
             when: "absent",
         },
     });
-    return (React.createElement(Navigation, { userMenu: {
+    return (_jsx(Navigation, { userMenu: {
             triggerText: {
                 title: "haidera@nulogy.com",
                 subtitle1: "Nulogy",
                 subtitle2: "Toronto, ON",
             },
-            controls: () => (React.createElement(Flex, { gap: "x2", flexDirection: "column", width: "100%" },
-                React.createElement(Select, { defaultValue: ["eaches"], options: [
-                        { value: "eaches", label: "Eaches" },
-                        { value: "cases", label: "Cases" },
-                        { value: "pallets", label: "Pallets" },
-                    ], labelText: "Default" }),
-                React.createElement(Select, { defaultValue: ["eaches"], options: [
-                        { value: "eaches", label: "Eaches" },
-                        { value: "cases", label: "Cases" },
-                        { value: "pallets", label: "Pallets" },
-                    ], labelText: "Base" }))),
+            controls: () => (_jsxs(Flex, { gap: "x2", flexDirection: "column", width: "100%", children: [_jsx(Select, { defaultValue: ["eaches"], options: [
+                            { value: "eaches", label: "Eaches" },
+                            { value: "cases", label: "Cases" },
+                            { value: "pallets", label: "Pallets" },
+                        ], labelText: "Default" }), _jsx(Select, { defaultValue: ["eaches"], options: [
+                            { value: "eaches", label: "Eaches" },
+                            { value: "cases", label: "Cases" },
+                            { value: "pallets", label: "Pallets" },
+                        ], labelText: "Base" })] })),
         } }));
 };
 export const MenuItems = () => {
@@ -173,8 +143,7 @@ export const MenuItems = () => {
             when: "absent",
         },
     });
-    return (React.createElement(BrowserRouter, null,
-        React.createElement(Navigation, { userMenu: {
+    return (_jsx(BrowserRouter, { children: _jsx(Navigation, { userMenu: {
                 triggerText: {
                     title: "haidera@nulogy.com",
                     subtitle1: "Nulogy",
@@ -203,7 +172,7 @@ export const MenuItems = () => {
                         key: "client-side-routing",
                         label: "A menu item can use client-side routing",
                         type: "link",
-                        element: React.createElement(Link, { to: "/finance" }),
+                        element: _jsx(Link, { to: "/finance" }),
                     },
                     {
                         key: "nested-items",
@@ -211,5 +180,5 @@ export const MenuItems = () => {
                         type: "button",
                     },
                 ],
-            } })));
+            } }) }));
 };

package/dist/src/Navigation/stories/fixtures/logos/CustomLogo2.d.ts

@@ -1,2 +1,2 @@
-import React, { SVGProps } from "react";
-export default function CustomLogo2(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+import { SVGProps } from "react";
+export default function CustomLogo2(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/src/Navigation/stories/fixtures/logos/CustomLogo2.js

@@ -1,15 +1,4 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default function CustomLogo2(props) {
-    return (React.createElement("svg", { id: "logo-76", viewBox: "0 0 218 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props },
-        React.createElement("path", { d: "M122.355 29.5238H127.018V11.9352H122.355V29.5238ZM122.355 9.19238H127.018V5.00952H122.355V9.19238Z", fill: "black" }),
-        React.createElement("path", { d: "M130.023 35.2838H134.686V27.5352H134.754C135.748 29.0438 137.36 30.0381 139.828 30.0381C144.354 30.0381 147.44 26.4381 147.44 20.7467C147.44 15.2609 144.457 11.4552 139.794 11.4552C137.394 11.4552 135.748 12.5867 134.617 14.1295H134.514V11.9352H130.023V35.2838ZM138.834 26.1638C136.057 26.1638 134.583 24.0724 134.583 20.8838C134.583 17.7295 135.748 15.2267 138.663 15.2267C141.543 15.2267 142.708 17.5581 142.708 20.8838C142.708 24.2095 141.2 26.1638 138.834 26.1638Z", fill: "black" }),
-        React.createElement("path", { d: "M156.741 30.0381C161.13 30.0381 164.147 27.9124 164.147 24.3809C164.147 20.2667 160.89 19.4438 157.941 18.8267C155.438 18.3124 153.107 18.1752 153.107 16.6667C153.107 15.3981 154.307 14.7124 156.124 14.7124C158.113 14.7124 159.313 15.3981 159.518 17.2838H163.735C163.393 13.7524 160.821 11.4552 156.193 11.4552C152.181 11.4552 149.027 13.2724 149.027 17.0781C149.027 20.9181 152.113 21.7752 155.267 22.3924C157.667 22.8724 159.895 23.0438 159.895 24.7238C159.895 25.9581 158.73 26.7467 156.673 26.7467C154.581 26.7467 153.141 25.8552 152.833 23.8324H148.513C148.787 27.5695 151.633 30.0381 156.741 30.0381Z", fill: "black" }),
-        React.createElement("path", { d: "M181.85 29.5238V11.9352H177.187V22.0838C177.187 24.4152 175.85 26.0609 173.656 26.0609C171.667 26.0609 170.742 24.9295 170.742 22.8724V11.9352H166.113V23.6609C166.113 27.5009 168.307 30.0038 172.216 30.0038C174.685 30.0038 176.056 29.0781 177.256 27.4667H177.359V29.5238H181.85Z", fill: "black" }),
-        React.createElement("path", { d: "M184.866 29.5238H189.529V19.3067C189.529 16.9752 190.798 15.4667 192.684 15.4667C194.398 15.4667 195.392 16.4952 195.392 18.4838V29.5238H200.055V19.3067C200.055 16.9752 201.255 15.4667 203.209 15.4667C204.924 15.4667 205.918 16.4952 205.918 18.4838V29.5238H210.581V17.6952C210.581 13.8552 208.489 11.4552 204.786 11.4552C202.558 11.4552 200.706 12.6209 199.506 14.5409H199.438C198.581 12.6895 196.798 11.4552 194.569 11.4552C192.135 11.4552 190.421 12.6895 189.461 14.3009H189.358V11.9352H184.866V29.5238Z", fill: "black" }),
-        React.createElement("path", { d: "M0.824158 29.5238H5.48701V5.00952H0.824158V29.5238Z", fill: "black" }),
-        React.createElement("path", { d: "M16.8884 30.0381C22.3398 30.0381 26.0769 25.9924 26.0769 20.7467C26.0769 15.5009 22.3398 11.4552 16.8884 11.4552C11.4369 11.4552 7.69978 15.5009 7.69978 20.7467C7.69978 25.9924 11.4369 30.0381 16.8884 30.0381ZM16.8884 26.4724C14.0084 26.4724 12.4312 24.1752 12.4312 20.7467C12.4312 17.3181 14.0084 14.9867 16.8884 14.9867C19.7341 14.9867 21.3455 17.3181 21.3455 20.7467C21.3455 24.1752 19.7341 26.4724 16.8884 26.4724Z", fill: "black" }),
-        React.createElement("path", { d: "M35.993 35.5238C38.5987 35.5238 40.8616 34.9067 42.3358 33.5352C43.6387 32.3352 44.4273 30.6552 44.4273 28.1867V11.9352H39.9359V13.7867H39.8673C38.8044 12.3124 37.193 11.4552 34.9987 11.4552C30.5416 11.4552 27.3873 14.8152 27.3873 20.0609C27.3873 25.3752 31.2273 28.4609 35.1359 28.4609C37.3644 28.4609 38.7016 27.5695 39.7301 26.4038H39.833V28.3238C39.833 30.7238 38.5644 31.9924 35.9244 31.9924C33.7644 31.9924 32.7701 31.1352 32.393 30.0381H27.7644C28.2444 33.4667 31.193 35.5238 35.993 35.5238ZM35.9244 24.7238C33.5244 24.7238 31.9473 22.9752 31.9473 19.9924C31.9473 17.0438 33.5244 15.1924 35.8901 15.1924C38.7016 15.1924 40.073 17.3867 40.073 19.9581C40.073 22.5638 38.873 24.7238 35.9244 24.7238Z", fill: "black" }),
-        React.createElement("path", { d: "M55.7611 30.0381C61.2125 30.0381 64.9497 25.9924 64.9497 20.7467C64.9497 15.5009 61.2125 11.4552 55.7611 11.4552C50.3097 11.4552 46.5725 15.5009 46.5725 20.7467C46.5725 25.9924 50.3097 30.0381 55.7611 30.0381ZM55.7611 26.4724C52.8811 26.4724 51.304 24.1752 51.304 20.7467C51.304 17.3181 52.8811 14.9867 55.7611 14.9867C58.6068 14.9867 60.2183 17.3181 60.2183 20.7467C60.2183 24.1752 58.6068 26.4724 55.7611 26.4724Z", fill: "black" }),
-        React.createElement("path", { d: "M212.275 9.04762C212.275 8.25864 212.915 7.61905 213.704 7.61905H216.561C217.35 7.61905 217.99 8.25864 217.99 9.04762C217.99 9.8366 217.35 10.4762 216.561 10.4762H213.704C212.915 10.4762 212.275 9.8366 212.275 9.04762Z", fill: "black" }),
-        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M93.2277 0C104.273 0 113.228 8.95431 113.228 20C113.228 31.0457 104.273 40 93.2277 40C82.182 40 73.2277 31.0457 73.2277 20C73.2277 8.95431 82.182 0 93.2277 0ZM92.5048 1.49659C90.2231 1.81769 88.0505 3.65108 86.364 6.7174C85.8748 7.60683 85.4334 8.58946 85.0488 9.65044C87.342 9.07417 89.8611 8.73442 92.5048 8.68187V1.49659ZM83.3584 10.1308C83.8368 8.62958 84.4219 7.2484 85.0972 6.02065C85.9332 4.50059 86.9254 3.18795 88.0433 2.17977C81.9644 3.94523 77.1729 8.73679 75.4074 14.8157C76.4156 13.6978 77.7282 12.7056 79.2483 11.8696C80.4761 11.1943 81.8572 10.6091 83.3584 10.1308ZM82.8781 11.8211C82.3018 14.1143 81.9621 16.6334 81.9095 19.2771H74.7242C75.0453 16.9954 76.8787 14.8228 79.9451 13.1364C80.8345 12.6472 81.8171 12.2058 82.8781 11.8211ZM83.3556 19.2771C83.4153 16.392 83.8307 13.6834 84.5179 11.2902C86.9111 10.603 89.6197 10.1876 92.5048 10.1279V13.2508C91.4285 16.0062 89.2333 18.2012 86.4778 19.2771H83.3556ZM81.9095 20.7229H74.7242C75.0453 23.0046 76.8787 25.1771 79.9451 26.8636C80.8345 27.3528 81.8171 27.7942 82.8781 28.1789C82.3018 25.8857 81.9621 23.3666 81.9095 20.7229ZM84.5179 28.7098C83.8307 26.3166 83.4153 23.608 83.3556 20.7229H86.4778C89.2333 21.7988 91.4285 23.9938 92.5048 26.7492V29.8721C89.6197 29.8124 86.9111 29.397 84.5179 28.7098ZM83.3584 29.8692C81.8572 29.3909 80.4761 28.8057 79.2483 28.1304C77.7282 27.2944 76.4156 26.3022 75.4074 25.1843C77.1729 31.2632 81.9644 36.0548 88.0433 37.8202C86.9254 36.812 85.9332 35.4994 85.0972 33.9793C84.4219 32.7516 83.8368 31.3704 83.3584 29.8692ZM92.5048 38.5034C90.2231 38.1823 88.0505 36.3489 86.364 33.2826C85.8748 32.3932 85.4334 31.4105 85.0488 30.3496C87.342 30.9258 89.8611 31.2656 92.5048 31.3181V38.5034ZM98.412 37.8202C99.5299 36.812 100.522 35.4994 101.358 33.9793C102.033 32.7516 102.619 31.3704 103.097 29.8692C104.598 29.3909 105.979 28.8057 107.207 28.1304C108.727 27.2944 110.04 26.3022 111.048 25.1843C109.282 31.2632 104.491 36.0548 98.412 37.8202ZM101.407 30.3496C101.022 31.4105 100.58 32.3932 100.091 33.2826C98.4048 36.3489 96.2322 38.1823 93.9505 38.5034V31.3181C96.5942 31.2656 99.1133 30.9258 101.407 30.3496ZM103.577 28.1789C104.638 27.7942 105.621 27.3528 106.51 26.8636C109.577 25.1772 111.41 23.0046 111.731 20.7229H104.546C104.493 23.3666 104.153 25.8857 103.577 28.1789ZM103.1 20.7229C103.04 23.608 102.625 26.3166 101.937 28.7098C99.5442 29.397 96.8356 29.8124 93.9505 29.8721V26.7515C95.0265 23.9951 97.2222 21.7991 99.9784 20.7229H103.1ZM104.546 19.2771H111.731C111.41 16.9954 109.577 14.8228 106.51 13.1364C105.621 12.6472 104.638 12.2058 103.577 11.8211C104.153 14.1143 104.493 16.6334 104.546 19.2771ZM101.937 11.2902C102.625 13.6834 103.04 16.392 103.1 19.2771H99.9785C97.2222 18.2009 95.0265 16.0049 93.9505 13.2485V10.1279C96.8356 10.1876 99.5442 10.603 101.937 11.2902ZM103.097 10.1308C104.598 10.6091 105.979 11.1943 107.207 11.8696C108.727 12.7056 110.04 13.6978 111.048 14.8157C109.282 8.73679 104.491 3.94523 98.412 2.17977C99.5299 3.18795 100.522 4.50059 101.358 6.02065C102.033 7.2484 102.619 8.62958 103.097 10.1308ZM93.9505 1.49659C96.2322 1.81769 98.4048 3.65108 100.091 6.7174C100.58 7.60684 101.022 8.58946 101.407 9.65044C99.1133 9.07417 96.5942 8.73442 93.9505 8.68187V1.49659Z", fill: "black" })));
+    return (_jsxs("svg", { id: "logo-76", viewBox: "0 0 218 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [_jsx("path", { d: "M122.355 29.5238H127.018V11.9352H122.355V29.5238ZM122.355 9.19238H127.018V5.00952H122.355V9.19238Z", fill: "black" }), _jsx("path", { d: "M130.023 35.2838H134.686V27.5352H134.754C135.748 29.0438 137.36 30.0381 139.828 30.0381C144.354 30.0381 147.44 26.4381 147.44 20.7467C147.44 15.2609 144.457 11.4552 139.794 11.4552C137.394 11.4552 135.748 12.5867 134.617 14.1295H134.514V11.9352H130.023V35.2838ZM138.834 26.1638C136.057 26.1638 134.583 24.0724 134.583 20.8838C134.583 17.7295 135.748 15.2267 138.663 15.2267C141.543 15.2267 142.708 17.5581 142.708 20.8838C142.708 24.2095 141.2 26.1638 138.834 26.1638Z", fill: "black" }), _jsx("path", { d: "M156.741 30.0381C161.13 30.0381 164.147 27.9124 164.147 24.3809C164.147 20.2667 160.89 19.4438 157.941 18.8267C155.438 18.3124 153.107 18.1752 153.107 16.6667C153.107 15.3981 154.307 14.7124 156.124 14.7124C158.113 14.7124 159.313 15.3981 159.518 17.2838H163.735C163.393 13.7524 160.821 11.4552 156.193 11.4552C152.181 11.4552 149.027 13.2724 149.027 17.0781C149.027 20.9181 152.113 21.7752 155.267 22.3924C157.667 22.8724 159.895 23.0438 159.895 24.7238C159.895 25.9581 158.73 26.7467 156.673 26.7467C154.581 26.7467 153.141 25.8552 152.833 23.8324H148.513C148.787 27.5695 151.633 30.0381 156.741 30.0381Z", fill: "black" }), _jsx("path", { d: "M181.85 29.5238V11.9352H177.187V22.0838C177.187 24.4152 175.85 26.0609 173.656 26.0609C171.667 26.0609 170.742 24.9295 170.742 22.8724V11.9352H166.113V23.6609C166.113 27.5009 168.307 30.0038 172.216 30.0038C174.685 30.0038 176.056 29.0781 177.256 27.4667H177.359V29.5238H181.85Z", fill: "black" }), _jsx("path", { d: "M184.866 29.5238H189.529V19.3067C189.529 16.9752 190.798 15.4667 192.684 15.4667C194.398 15.4667 195.392 16.4952 195.392 18.4838V29.5238H200.055V19.3067C200.055 16.9752 201.255 15.4667 203.209 15.4667C204.924 15.4667 205.918 16.4952 205.918 18.4838V29.5238H210.581V17.6952C210.581 13.8552 208.489 11.4552 204.786 11.4552C202.558 11.4552 200.706 12.6209 199.506 14.5409H199.438C198.581 12.6895 196.798 11.4552 194.569 11.4552C192.135 11.4552 190.421 12.6895 189.461 14.3009H189.358V11.9352H184.866V29.5238Z", fill: "black" }), _jsx("path", { d: "M0.824158 29.5238H5.48701V5.00952H0.824158V29.5238Z", fill: "black" }), _jsx("path", { d: "M16.8884 30.0381C22.3398 30.0381 26.0769 25.9924 26.0769 20.7467C26.0769 15.5009 22.3398 11.4552 16.8884 11.4552C11.4369 11.4552 7.69978 15.5009 7.69978 20.7467C7.69978 25.9924 11.4369 30.0381 16.8884 30.0381ZM16.8884 26.4724C14.0084 26.4724 12.4312 24.1752 12.4312 20.7467C12.4312 17.3181 14.0084 14.9867 16.8884 14.9867C19.7341 14.9867 21.3455 17.3181 21.3455 20.7467C21.3455 24.1752 19.7341 26.4724 16.8884 26.4724Z", fill: "black" }), _jsx("path", { d: "M35.993 35.5238C38.5987 35.5238 40.8616 34.9067 42.3358 33.5352C43.6387 32.3352 44.4273 30.6552 44.4273 28.1867V11.9352H39.9359V13.7867H39.8673C38.8044 12.3124 37.193 11.4552 34.9987 11.4552C30.5416 11.4552 27.3873 14.8152 27.3873 20.0609C27.3873 25.3752 31.2273 28.4609 35.1359 28.4609C37.3644 28.4609 38.7016 27.5695 39.7301 26.4038H39.833V28.3238C39.833 30.7238 38.5644 31.9924 35.9244 31.9924C33.7644 31.9924 32.7701 31.1352 32.393 30.0381H27.7644C28.2444 33.4667 31.193 35.5238 35.993 35.5238ZM35.9244 24.7238C33.5244 24.7238 31.9473 22.9752 31.9473 19.9924C31.9473 17.0438 33.5244 15.1924 35.8901 15.1924C38.7016 15.1924 40.073 17.3867 40.073 19.9581C40.073 22.5638 38.873 24.7238 35.9244 24.7238Z", fill: "black" }), _jsx("path", { d: "M55.7611 30.0381C61.2125 30.0381 64.9497 25.9924 64.9497 20.7467C64.9497 15.5009 61.2125 11.4552 55.7611 11.4552C50.3097 11.4552 46.5725 15.5009 46.5725 20.7467C46.5725 25.9924 50.3097 30.0381 55.7611 30.0381ZM55.7611 26.4724C52.8811 26.4724 51.304 24.1752 51.304 20.7467C51.304 17.3181 52.8811 14.9867 55.7611 14.9867C58.6068 14.9867 60.2183 17.3181 60.2183 20.7467C60.2183 24.1752 58.6068 26.4724 55.7611 26.4724Z", fill: "black" }), _jsx("path", { d: "M212.275 9.04762C212.275 8.25864 212.915 7.61905 213.704 7.61905H216.561C217.35 7.61905 217.99 8.25864 217.99 9.04762C217.99 9.8366 217.35 10.4762 216.561 10.4762H213.704C212.915 10.4762 212.275 9.8366 212.275 9.04762Z", fill: "black" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M93.2277 0C104.273 0 113.228 8.95431 113.228 20C113.228 31.0457 104.273 40 93.2277 40C82.182 40 73.2277 31.0457 73.2277 20C73.2277 8.95431 82.182 0 93.2277 0ZM92.5048 1.49659C90.2231 1.81769 88.0505 3.65108 86.364 6.7174C85.8748 7.60683 85.4334 8.58946 85.0488 9.65044C87.342 9.07417 89.8611 8.73442 92.5048 8.68187V1.49659ZM83.3584 10.1308C83.8368 8.62958 84.4219 7.2484 85.0972 6.02065C85.9332 4.50059 86.9254 3.18795 88.0433 2.17977C81.9644 3.94523 77.1729 8.73679 75.4074 14.8157C76.4156 13.6978 77.7282 12.7056 79.2483 11.8696C80.4761 11.1943 81.8572 10.6091 83.3584 10.1308ZM82.8781 11.8211C82.3018 14.1143 81.9621 16.6334 81.9095 19.2771H74.7242C75.0453 16.9954 76.8787 14.8228 79.9451 13.1364C80.8345 12.6472 81.8171 12.2058 82.8781 11.8211ZM83.3556 19.2771C83.4153 16.392 83.8307 13.6834 84.5179 11.2902C86.9111 10.603 89.6197 10.1876 92.5048 10.1279V13.2508C91.4285 16.0062 89.2333 18.2012 86.4778 19.2771H83.3556ZM81.9095 20.7229H74.7242C75.0453 23.0046 76.8787 25.1771 79.9451 26.8636C80.8345 27.3528 81.8171 27.7942 82.8781 28.1789C82.3018 25.8857 81.9621 23.3666 81.9095 20.7229ZM84.5179 28.7098C83.8307 26.3166 83.4153 23.608 83.3556 20.7229H86.4778C89.2333 21.7988 91.4285 23.9938 92.5048 26.7492V29.8721C89.6197 29.8124 86.9111 29.397 84.5179 28.7098ZM83.3584 29.8692C81.8572 29.3909 80.4761 28.8057 79.2483 28.1304C77.7282 27.2944 76.4156 26.3022 75.4074 25.1843C77.1729 31.2632 81.9644 36.0548 88.0433 37.8202C86.9254 36.812 85.9332 35.4994 85.0972 33.9793C84.4219 32.7516 83.8368 31.3704 83.3584 29.8692ZM92.5048 38.5034C90.2231 38.1823 88.0505 36.3489 86.364 33.2826C85.8748 32.3932 85.4334 31.4105 85.0488 30.3496C87.342 30.9258 89.8611 31.2656 92.5048 31.3181V38.5034ZM98.412 37.8202C99.5299 36.812 100.522 35.4994 101.358 33.9793C102.033 32.7516 102.619 31.3704 103.097 29.8692C104.598 29.3909 105.979 28.8057 107.207 28.1304C108.727 27.2944 110.04 26.3022 111.048 25.1843C109.282 31.2632 104.491 36.0548 98.412 37.8202ZM101.407 30.3496C101.022 31.4105 100.58 32.3932 100.091 33.2826C98.4048 36.3489 96.2322 38.1823 93.9505 38.5034V31.3181C96.5942 31.2656 99.1133 30.9258 101.407 30.3496ZM103.577 28.1789C104.638 27.7942 105.621 27.3528 106.51 26.8636C109.577 25.1772 111.41 23.0046 111.731 20.7229H104.546C104.493 23.3666 104.153 25.8857 103.577 28.1789ZM103.1 20.7229C103.04 23.608 102.625 26.3166 101.937 28.7098C99.5442 29.397 96.8356 29.8124 93.9505 29.8721V26.7515C95.0265 23.9951 97.2222 21.7991 99.9784 20.7229H103.1ZM104.546 19.2771H111.731C111.41 16.9954 109.577 14.8228 106.51 13.1364C105.621 12.6472 104.638 12.2058 103.577 11.8211C104.153 14.1143 104.493 16.6334 104.546 19.2771ZM101.937 11.2902C102.625 13.6834 103.04 16.392 103.1 19.2771H99.9785C97.2222 18.2009 95.0265 16.0049 93.9505 13.2485V10.1279C96.8356 10.1876 99.5442 10.603 101.937 11.2902ZM103.097 10.1308C104.598 10.6091 105.979 11.1943 107.207 11.8696C108.727 12.7056 110.04 13.6978 111.048 14.8157C109.282 8.73679 104.491 3.94523 98.412 2.17977C99.5299 3.18795 100.522 4.50059 101.358 6.02065C102.033 7.2484 102.619 8.62958 103.097 10.1308ZM93.9505 1.49659C96.2322 1.81769 98.4048 3.65108 100.091 6.7174C100.58 7.60684 101.022 8.58946 101.407 9.65044C99.1133 9.07417 96.5942 8.73442 93.9505 8.68187V1.49659Z", fill: "black" })] }));
 }

package/dist/src/Navigation/stories/fixtures/logos/CustomLogo3.d.ts

@@ -1,2 +1,2 @@
-import React, { SVGProps } from "react";
-export default function CustomLogo3(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+import { SVGProps } from "react";
+export default function CustomLogo3(props: SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;