@nulogy/components 14.8.2 → 15.0.1

package/dist/src/BrandedNavBar/NavBar.story.js

@@ -0,0 +1,416 @@
+import React from "react";
+import styled from "styled-components";
+import { select } from "@storybook/addon-knobs";
+import { BrowserRouter, Link as ReactRouterLink } from "react-router-dom";
+import { Heading1 } from "../Type";
+import { Icon } from "../Icon";
+import { DropdownButton, DropdownLink } from "../DropdownMenu";
+import { legacy as theme } from "../theme/theme";
+import { Button } from "../Button";
+import { Text } from "../Type";
+import { BrandedNavBar as NDSBrandedNavBar } from "./index";
+const sampleLogo = "http://pigment.github.io/fake-logos/logos/vector/color/auto-speed.svg";
+const ResetStorybookView = styled.div({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100vw",
+    height: "100vh",
+});
+const BrandedNavBar = (props) => (React.createElement(ResetStorybookView, null,
+    React.createElement(NDSBrandedNavBar, Object.assign({}, props)),
+    React.createElement(Heading1, { mt: "x3", ml: "x1" }, "Some content")));
+const primaryMenu = [
+    {
+        name: "Dashboard",
+        items: [{ name: "Items", href: "/" }, { name: "Carriers", href: "/" }, { name: "Only text submenu" }],
+    },
+    {
+        name: "Operations",
+        items: [
+            {
+                name: "Production",
+                items: [
+                    { name: "Dashboard", href: "/" },
+                    {
+                        name: "Projects",
+                        items: [
+                            { name: "Cycle Counts", href: "/" },
+                            { name: "Blind Counts", href: "/" },
+                            { name: "Preferences", href: "/" },
+                            { name: "Permissions", href: "/" },
+                            { name: "Manage account", href: "/" },
+                            { name: "More Link", href: "/" },
+                            { name: "One More Link", href: "/" },
+                            { name: "Test Link", href: "/" },
+                            { name: "Hello", href: "/" },
+                            { name: "World", href: "/" },
+                            { name: "Great!", href: "/" },
+                            { name: "Example", href: "/" },
+                            { name: "More Example", href: "/" },
+                        ],
+                    },
+                    {
+                        name: "Jobs",
+                        items: [{ name: "Job 1", href: "/" }],
+                    },
+                    { name: "Profile", href: "/" },
+                    { name: "Preferences", href: "/" },
+                    { name: "Logout", href: "/" },
+                    { name: "Settings", href: "/" },
+                    { name: "Permissions", href: "/" },
+                    { name: "Manage account", href: "/" },
+                    { name: "More Link", href: "/" },
+                    { name: "One More Link", href: "/" },
+                    { name: "Test Link", href: "/" },
+                    { name: "Hello", href: "/" },
+                    { name: "World", href: "/" },
+                    { name: "Great!", href: "/" },
+                    { name: "Example", href: "/" },
+                    { name: "More Example", href: "/" },
+                ],
+            },
+        ],
+    },
+    { name: "Link", href: "/" },
+    { name: "Only text" },
+];
+const secondaryMenu = [
+    {
+        name: "User@Nulogy.com",
+        items: [
+            { name: "Profile", href: "/" },
+            { name: "Preferences", href: "/" },
+            { name: "Logout", href: "/" },
+        ],
+    },
+    {
+        name: "Settings",
+        items: [
+            { name: "Permissions", href: "/" },
+            { name: "Manage account", href: "/" },
+        ],
+    },
+];
+const secondaryMenuWithIcon = [
+    {
+        name: "Account Information: User@Nulogy.com",
+        items: [
+            { name: "Profile", href: "/" },
+            { name: "Preferences", href: "/" },
+            { name: "Logout", href: "/" },
+        ],
+    },
+    {
+        name: React.createElement(Icon, { icon: "settings" }),
+        ariaLabel: "Settings",
+        key: "Settings",
+        items: [
+            { name: "Permissions", href: "/" },
+            { name: "Manage account", href: "/" },
+        ],
+    },
+    {
+        name: React.createElement(Icon, { icon: "chatBubble" }),
+        ariaLabel: "chat",
+        key: "chat",
+        items: [
+            { name: "Permissions", href: "/" },
+            { name: "Manage account", href: "/" },
+        ],
+    },
+];
+export default {
+    title: "Components/BrandedNavBar",
+};
+export const _BrandedNavBar = () => React.createElement(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu } });
+_BrandedNavBar.story = {
+    name: "BrandedNavBar",
+};
+export const WithACompanyLogo = () => React.createElement(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, logoSrc: sampleLogo });
+WithACompanyLogo.story = {
+    name: "With a company logo",
+};
+export const WithAppName = () => React.createElement(BrandedNavBar, { subtext: "Quality Control", menuData: { primaryMenu, secondaryMenu } });
+WithAppName.story = {
+    name: "With app name",
+};
+export const WithACompanyLogoAndAppName = () => (React.createElement(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", logoSrc: sampleLogo }));
+WithACompanyLogoAndAppName.story = {
+    name: "With a company logo and app name",
+};
+export const WithEnvironmentBanner = () => (React.createElement(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, subtext: "Quality control", logoSrc: sampleLogo, environment: select("environment", ["training", "development"], "training") }));
+WithEnvironmentBanner.story = {
+    name: "with environment banner",
+};
+export const WithIcon = () => (React.createElement(BrandedNavBar, { menuData: {
+        primaryMenu: primaryMenu,
+        secondaryMenu: secondaryMenuWithIcon,
+    } }));
+WithIcon.story = {
+    name: "With icon",
+};
+export const WithPrimaryAndSecondarySubMenus = () => (React.createElement(BrandedNavBar, { menuData: {
+        primaryMenu: [
+            {
+                name: "Operations",
+                items: [
+                    {
+                        name: "Production",
+                        items: [
+                            { name: "Dashboard", href: "/" },
+                            {
+                                name: "Projects",
+                                items: [
+                                    { name: "Cycle Counts", href: "/" },
+                                    { name: "Blind Counts", href: "/" },
+                                ],
+                            },
+                            {
+                                name: "Jobs",
+                                items: [{ name: "Job 1", href: "/" }],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        secondaryMenu: [
+            {
+                name: "Settings",
+                items: [
+                    {
+                        name: "Production",
+                        items: [
+                            { name: "Dashboard", href: "/" },
+                            {
+                                name: "Projects",
+                                items: [
+                                    { name: "Cycle Counts", href: "/" },
+                                    { name: "Blind Counts", href: "/" },
+                                ],
+                            },
+                            {
+                                name: "Jobs",
+                                items: [{ name: "Job 1", href: "/" }],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    } }));
+export const WithExternalLinks = () => (React.createElement(BrandedNavBar, { menuData: {
+        primaryMenu: [
+            {
+                name: "Top level open in new tab link",
+                href: "https://www.google.com",
+                openInNew: true,
+            },
+            {
+                name: "Top level open in same tab link",
+                href: "https://www.google.com",
+                openInNew: false,
+            },
+            {
+                name: "Dropdown",
+                items: [
+                    {
+                        name: "New tab link in dropdown",
+                        href: "https://www.google.com",
+                        openInNew: true,
+                    },
+                    {
+                        name: "Same tab link in dropdown",
+                        href: "https://www.google.com",
+                        openInNew: false,
+                    },
+                    {
+                        name: "Sub Menu",
+                        items: [
+                            {
+                                name: "New tab link in submenu",
+                                href: "https://www.google.com",
+                                openInNew: true,
+                            },
+                            {
+                                name: "Same tab link in submenu",
+                                href: "https://www.google.com",
+                                openInNew: false,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    } }));
+const primaryMenuReactRouter = [
+    {
+        name: "Dashboard",
+        items: [
+            {
+                name: "Customers",
+                to: "/customers",
+                as: ReactRouterLink,
+            },
+            {
+                name: "Invoices",
+                items: [
+                    {
+                        name: "new invoice",
+                        to: "/new",
+                        as: ReactRouterLink,
+                    },
+                ],
+            },
+            { name: "Projects", href: "/" },
+            { name: "Items", href: "/" },
+            { name: "Vendors", href: "/" },
+            { name: "Carriers", href: "/" },
+        ],
+    },
+    {
+        name: "Inspector",
+        items: [
+            { name: "Dashboard", href: "/" },
+            { name: "Moves", href: "/" },
+            { name: "Pick Lists", href: "/" },
+            { name: "Receive Orders", href: "/" },
+            { name: "Receipts", href: "/" },
+            { name: "Ship Orders", href: "/" },
+            { name: "Shipments", href: "/" },
+            { name: "Item Lists", href: "/" },
+            { name: "Cycle Counts", href: "/" },
+            { name: "Blind Counts", href: "/" },
+            { name: "Inbound Stock Transfer Orders", href: "/" },
+            { name: "Inbound Stock Transfers", href: "/" },
+            { name: "Outbound Stock Transfers", href: "/" },
+        ],
+    },
+    {
+        name: "Operations",
+        items: [
+            {
+                name: "Production",
+                items: [
+                    { name: "Dashboard", href: "/" },
+                    {
+                        name: "Projects",
+                        items: [
+                            { name: "Cycle Counts", href: "/" },
+                            { name: "Blind Counts", href: "/" },
+                        ],
+                    },
+                    {
+                        name: "Jobs",
+                        items: [
+                            { name: "Job 1", href: "/" },
+                            { name: "Job 2", href: "/" },
+                        ],
+                    },
+                ],
+            },
+            { name: "Item cart", href: "/" },
+            { name: "Inventory", href: "/" },
+        ],
+    },
+    { name: "Link", to: "/Link" },
+];
+export const WithReactRouter = () => (React.createElement(BrowserRouter, { basename: "/" },
+    React.createElement(BrandedNavBar, { brandingLinkTo: "/Home", brandingLinkComponent: ReactRouterLink, menuData: {
+            primaryMenu: primaryMenuReactRouter,
+            secondaryMenu: secondaryMenuWithIcon,
+        } })));
+WithReactRouter.story = {
+    name: "With react router",
+};
+export const WithHamburgerMenu = () => {
+    return React.createElement(BrandedNavBar, { menuData: { primaryMenu, secondaryMenu }, defaultOpen: true });
+};
+WithHamburgerMenu.parameters = {
+    viewport: {
+        defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+    },
+    chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
+};
+const customPrimaryMenu = [
+    {
+        name: "Submenu",
+        items: [
+            { name: "Submenu link", href: "/" },
+            {
+                name: "Custom submenu HTML Link",
+                render: () => React.createElement("a", { href: "/" }, "Submenu Raw HTML Link"),
+            },
+            {
+                name: "Custom submenu DropdownLink",
+                render: () => React.createElement(DropdownLink, { href: "/" }, "DropdownLink"),
+            },
+            {
+                name: "Custom submenu DropdownButton",
+                render: ({ layer }) => React.createElement(DropdownButton, null,
+                    "DropdownButton at layer ",
+                    layer),
+            },
+        ],
+    },
+    { name: "Menu link", href: "/" },
+    {
+        name: "Custom Menu HTML Link",
+        render: () => React.createElement("a", { href: "/" }, "Menu Raw HTML Link"),
+    },
+];
+export const CustomRendering = () => React.createElement(BrandedNavBar, { menuData: { primaryMenu: customPrimaryMenu, secondaryMenu } });
+export const CustomRenderingInHamburger = () => (React.createElement(BrandedNavBar, { menuData: { primaryMenu: customPrimaryMenu, secondaryMenu }, defaultOpen: true }));
+CustomRenderingInHamburger.parameters = {
+    viewport: {
+        defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+    },
+    chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
+};
+const primaryMenuWithCustomTriggers = [
+    {
+        name: "Menu",
+        trigger: ({ size, layer }) => (React.createElement(Button, null,
+            "Custom menu trigger for ",
+            size,
+            ". layer: ",
+            layer)),
+        items: [
+            { name: "Menu 1 link", href: "/" },
+            {
+                name: "Submenu 1 (pass-through to hamburger default)",
+                trigger: ({ size, defaultRender, layer }) => size === "medium" ? React.createElement(Button, null,
+                    "Custom submenu trigger. layer: ",
+                    layer) : defaultRender(),
+                items: [{ name: "Submenu 1 link", href: "/" }],
+            },
+            {
+                name: "Submenu 2",
+                trigger: ({ size, openMenu, closeMenu, defaultRender, layer }) => {
+                    return size === "medium" ? (React.createElement(Button, { onMouseEnter: openMenu, onMouseLeave: closeMenu },
+                        "Custom submenu trigger w/ open on hover. layer: ",
+                        layer)) : (defaultRender());
+                },
+                items: [{ name: "Submenu 2 link", href: "/" }],
+            },
+            {
+                name: "Submenu 3 (pass-through to desktop default)",
+                trigger: ({ size, defaultRender, layer }) => {
+                    return size === "small" ? (React.createElement(Text, { color: "black", pl: "x6" },
+                        "Custom submenu hamburger heading 2. layer: ",
+                        layer)) : (defaultRender());
+                },
+                items: [{ name: "Submenu 3 link", href: "/" }],
+            },
+        ],
+    },
+];
+export const CustomMenuTriggers = () => (React.createElement(BrandedNavBar, { menuData: { primaryMenu: primaryMenuWithCustomTriggers, secondaryMenu } }));
+export const CustomMenuTriggersInHamburger = () => (React.createElement(BrandedNavBar, { menuData: { primaryMenu: primaryMenuWithCustomTriggers, secondaryMenu }, defaultOpen: true }));
+CustomMenuTriggersInHamburger.parameters = {
+    viewport: {
+        defaultViewport: "small", // for some reason this has to match the viewport key, NOT the name!
+    },
+    chromatic: { viewports: [parseInt(theme.breakpoints.small)] },
+};

package/dist/src/BrandedNavBar/NavBarBackground.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { DefaultNDSThemeType } from "../theme";
-import { StyledProps } from "../StyledProps";
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export type NavBarBackgroundProps = {
-    theme?: DefaultNDSThemeType;
-} & StyledProps;
-declare const NavBarBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, keyof import("../Flex/Flex").FlexProps> & import("../Flex/Flex").FlexProps, never>> & string;
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export default NavBarBackground;
+/// <reference types="react" />
+import { DefaultNDSThemeType } from "../theme";
+import { StyledProps } from "../StyledProps";
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export type NavBarBackgroundProps = {
+    theme?: DefaultNDSThemeType;
+} & StyledProps;
+declare const NavBarBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../Box").BoxProps> & import("../Box").BoxProps, keyof import("../Flex/Flex").FlexProps> & import("../Flex/Flex").FlexProps, never>> & string;
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default NavBarBackground;

package/dist/src/BrandedNavBar/NavBarBackground.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { Flex } from "../Flex";
+import { addStyledProps } from "../StyledProps";
+const NavBarBackground = styled(Flex)(({ theme }) => ({
+    padding: `0 ${theme.space.x3}`,
+    borderBottom: `1px solid ${theme.colors.lightGrey}`,
+    alignItems: "center",
+    zIndex: theme.zIndices.navBar,
+    position: "relative",
+}), addStyledProps);
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default NavBarBackground;

package/dist/src/BrandedNavBar/NavBarDropdownMenu.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-declare const NavBarDropdownMenu: React.JSXElementConstructor<any>;
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export default NavBarDropdownMenu;
+import React from "react";
+declare const NavBarDropdownMenu: React.JSXElementConstructor<any>;
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default NavBarDropdownMenu;

package/dist/src/BrandedNavBar/NavBarDropdownMenu.js

@@ -0,0 +1,94 @@
+import React from "react";
+import { Manager, Reference, Popper } from "react-popper";
+import { DetectOutsideClick, withMenuState, PopperArrow } from "../utils";
+import DropdownMenuContainer from "../DropdownMenu/DropdownMenuContainer";
+class StatelessNavBarDropdownMenuClass extends React.Component {
+}
+/* eslint-disable react/destructuring-assignment */
+class StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {
+    constructor(props) {
+        super(props);
+        this.handleOutsideClick = this.handleOutsideClick.bind(this);
+        this.setMenuRef = this.setMenuRef.bind(this);
+        this.setTriggerRef = this.setTriggerRef.bind(this);
+    }
+    setMenuRef(node) {
+        this.menuRef = node;
+    }
+    setTriggerRef(node) {
+        this.triggerRef = node;
+    }
+    menuTriggerEventHandlers() {
+        return {
+            onBlur: () => this.props.menuState.closeMenu(false),
+            onClick: () => this.handleTriggerClick(),
+        };
+    }
+    menuEventHandlers() {
+        return {
+            onBlur: () => this.props.menuState.closeMenu(false),
+            onFocus: () => this.props.menuState.openMenu(false),
+            onClick: () => this.props.menuState.openMenu(false),
+        };
+    }
+    handleTriggerClick() {
+        if (this.props.triggerTogglesMenuState) {
+            this.props.menuState.toggleMenu();
+        }
+        else {
+            this.props.menuState.openMenu();
+        }
+    }
+    handleOutsideClick() {
+        this.props.menuState.closeMenu(false);
+    }
+    render() {
+        const { trigger, children, placement, modifiers, showArrow, dropdownMenuContainerEventHandlers, menuState: { isOpen, closeMenu, openMenu }, } = this.props;
+        const childrenFnc = typeof children === "function" ? children : () => children;
+        return (React.createElement(Manager, null,
+            React.createElement(Reference, null, ({ ref }) => React.cloneElement(trigger({
+                closeMenu,
+                openMenu,
+                isOpen,
+            }), Object.assign(Object.assign({ "aria-haspopup": true, "aria-expanded": isOpen, type: "button" }, this.menuTriggerEventHandlers()), { ref: (node) => {
+                    ref(node);
+                    this.setTriggerRef(node);
+                } }))),
+            isOpen && (React.createElement(Popper, { placement: placement, modifiers: modifiers }, (popperProps) => (React.createElement(React.Fragment, null,
+                React.createElement(DropdownMenuContainer, Object.assign({}, popperProps, { placement: placement, showArrow: showArrow }, this.menuEventHandlers(), { ref: (node) => {
+                        if (typeof popperProps.ref === "function") {
+                            popperProps.ref(node);
+                        }
+                        this.setMenuRef(node);
+                    }, onMouseDown: (e) => {
+                        e.preventDefault();
+                        e.target.focus();
+                    } }, dropdownMenuContainerEventHandlers({
+                    openMenu,
+                    closeMenu,
+                })),
+                    React.createElement(PopperArrow, Object.assign({}, popperProps.arrowProps, { placement: placement, ref: popperProps.arrowProps.ref, backgroundColor: "white", borderColor: "white" })),
+                    React.createElement(DetectOutsideClick, { onClick: this.handleOutsideClick, clickRef: [this.menuRef, this.triggerRef] }),
+                    childrenFnc({
+                        closeMenu,
+                        openMenu,
+                    }))))))));
+    }
+}
+/* eslint-enable react/destructuring-assignment */
+// @ts-ignore
+StatelessNavBarDropdownMenu.defaultProps = {
+    showArrow: true,
+    placement: "bottom-start",
+    modifiers: null,
+    triggerTogglesMenuState: true,
+    dropdownMenuContainerEventHandlers: () => { },
+};
+const NavBarDropdownMenu = withMenuState(StatelessNavBarDropdownMenu);
+// @ts-ignore
+NavBarDropdownMenu.defaultProps = {
+    showDelay: "0",
+    hideDelay: "100",
+};
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export default NavBarDropdownMenu;

package/dist/src/BrandedNavBar/NulogyLogo.d.ts

@@ -1,3 +1,3 @@
-import React from "react";
-declare const NulogyLogo: () => React.JSX.Element;
-export default NulogyLogo;
+import React from "react";
+declare const NulogyLogo: () => React.JSX.Element;
+export default NulogyLogo;

package/dist/src/BrandedNavBar/NulogyLogo.js

@@ -0,0 +1,15 @@
+import React from "react";
+const NulogyLogo = () => (React.createElement("svg", { width: "76px", height: "18px", viewBox: "0 0 76 18" },
+    React.createElement("g", { id: "FInal", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd" },
+        React.createElement("g", { id: "DQI", transform: "translate(-924.000000, -30.000000)" },
+            React.createElement("g", { id: "Branding", transform: "translate(916.000000, 24.000000)" },
+                React.createElement("g", { id: "Logo/Wordmark/White", transform: "translate(8.000000, 6.000000)" },
+                    React.createElement("g", { id: "Group" },
+                        React.createElement("path", { d: "M27.2853035,13.6251552 L24.3693609,13.6251552 L24.3693609,5.29388243 L27.0621839,5.29388243 L27.0621839,6.69024606 C27.4508582,6.19089626 27.9367815,5.77426587 28.4910287,5.46515515 C28.9949427,5.19647371 29.5588999,5.05803724 30.1309029,5.0626097 C31.018985,5.0626097 31.6927403,5.31533697 32.1521688,5.82079152 C32.6115974,6.32624606 32.8413117,7.06588243 32.8413117,8.03970061 L32.8413117,13.6251552 L29.9407567,13.6251552 L29.9407567,8.85242788 C29.9407567,8.41606425 29.8506295,8.08624606 29.6703753,7.86297334 C29.490121,7.63970061 29.2230369,7.5306097 28.869123,7.53570061 C28.3606008,7.53570061 27.9693172,7.70515515 27.695272,8.04406425 C27.4212269,8.38297334 27.2845707,8.87642788 27.2853035,9.52442788 L27.2853035,13.6251552 Z", id: "Path", fill: "#00438F" }),
+                        React.createElement("path", { d: "M40.1451818,5.0625 L43.0435386,5.0625 L43.0435386,12.7239545 L40.3507157,13.7919545 L40.3507157,12.1643182 C39.9614808,12.6643061 39.4757347,13.082268 38.9218708,13.3937727 C38.4207722,13.6600419 37.8602579,13.7969677 37.2918886,13.7919545 C36.4023411,13.7919545 35.7267539,13.5374091 35.2651271,13.0283182 C34.8035003,12.5192273 34.5719542,11.7792273 34.5704887,10.8083182 L34.5704887,5.0625 L37.4864313,5.0625 L37.4864313,10.0010455 C37.4864313,10.4374091 37.5765584,10.7686818 37.7568127,10.9948636 C37.937067,11.2210455 38.2041511,11.3334091 38.5580649,11.3319545 C39.0709836,11.3319545 39.4622673,11.1610455 39.7319159,10.8192273 C40.0015646,10.4774091 40.1382208,9.98577273 40.1418845,9.34431818 L40.1451818,5.0625 Z", id: "Path", fill: "#00438F" }),
+                        React.createElement("polygon", { id: "Path", fill: "#00438F", points: "46.3103725 13.812 44.7716165 13.812 44.7716165 0.612 46.3103725 9.99200722e-16" }),
+                        React.createElement("path", { d: "M47.6052632,9.60286364 C47.6052632,8.28359091 48.0276883,7.19704545 48.8725386,6.34322727 C49.7173889,5.48940909 50.7886562,5.0625 52.0863404,5.0625 C53.3840246,5.0625 54.4552919,5.48940909 55.3001422,6.34322727 C56.1449925,7.19704545 56.5674176,8.28359091 56.5674176,9.60286364 C56.5674176,10.9279545 56.1449925,12.0188636 55.3001422,12.8755909 C54.4552919,13.7323182 53.3840246,14.1592273 52.0863404,14.1563329 C50.7937854,14.1563329 49.7239836,13.7294091 48.8769351,12.8755909 C48.0298865,12.0217727 47.6059959,10.9308636 47.6052632,9.60286364 Z M49.133028,9.60286364 C49.133028,10.6392273 49.4030431,11.4730455 49.9430731,12.1043182 C50.4831032,12.7355909 51.1912973,13.0515909 52.0676555,13.0523182 C52.9469446,13.0523182 53.6580697,12.7363182 54.2010308,12.1043182 C54.7439918,11.4723182 55.0173042,10.6385 55.0209679,9.60286364 C55.0209679,8.57377273 54.7476555,7.74322727 54.2010308,7.11122727 C53.654406,6.47922727 52.9432809,6.16359091 52.0676555,6.16431693 C51.1883664,6.16431693 50.4801722,6.48031818 49.9430731,7.11231818 C49.405974,7.74431818 49.135959,8.5745 49.133028,9.60286364 Z", id: "Shape", fill: "#00438F" }),
+                        React.createElement("path", { d: "M64.0871268,13.2650455 C63.6599049,13.5160632 63.2028112,13.7132209 62.7264269,13.8519545 C62.2872699,13.9773973 61.8326004,14.0412883 61.375619,14.0417727 C60.1402177,14.0417727 59.1418582,13.6348636 58.3805404,12.8210455 C57.6192225,12.0072273 57.23893,10.9377727 57.2396617,9.61268182 C57.2396617,8.26213636 57.6463339,7.16613636 58.4596764,6.32468182 C59.2730188,5.48322727 60.3354932,5.0625 61.6470995,5.0625 C62.0607066,5.06850508 62.4731354,5.10790785 62.8803025,5.18031818 C63.3492567,5.25740909 63.891485,5.37595455 64.5069874,5.53595455 L65.5962068,5.09959091 L65.5962068,12.6159545 C65.5962068,13.6203182 65.5482123,14.3552273 65.4522232,14.8206818 C65.3679541,15.2558519 65.2020399,15.6714278 64.9631186,16.0457727 C64.6019617,16.5876404 64.0882569,17.0121536 63.4859129,17.2665 C62.7842363,17.5630036 62.0270581,17.7080287 61.2646087,17.6919545 C60.7156985,17.6919213 60.1690427,17.6222662 59.6379238,17.4846818 C59.0829675,17.3384872 58.5470293,17.1287137 58.0409149,16.8595909 L57.7892184,15.0475909 L58.9158076,15.7785 C59.2556951,15.9885109 59.62653,16.1445715 60.014919,16.2410455 C60.4392817,16.3595698 60.8776378,16.4215675 61.3184652,16.4254091 C62.1977543,16.4254091 62.8795698,16.2072273 63.3639115,15.7708636 C63.8482533,15.3345 64.089325,14.7134091 64.0871268,13.9075909 L64.0871268,13.2650455 Z M64.0871268,12.1272273 L64.0871268,6.79159091 C63.7249004,6.6117699 63.3457079,6.46780202 62.9550421,6.36177273 C62.6131894,6.26948879 62.2607514,6.22145438 61.9064898,6.21886364 C60.9693141,6.21886364 60.2149573,6.53159091 59.6434194,7.15704545 C59.0718814,7.7825 58.7857461,8.6145 58.7850134,9.65304545 C58.7850134,10.6508636 59.0414727,11.4428636 59.5543914,12.0290455 C60.06731,12.6152273 60.7582847,12.9079545 61.6273155,12.9072286 C61.9914329,12.9029522 62.3527769,12.8437294 62.6989491,12.7315909 C63.1785695,12.5707605 63.6430713,12.3685328 64.0871268,12.1272273 L64.0871268,12.1272273 Z", id: "Shape", fill: "#00438F" }),
+                        React.createElement("path", { d: "M66.8740602,5.0625 L68.4765646,5.0625 L70.9913315,11.6079545 L73.7588941,5.0625 L75.0635393,5.0625 L71.0572782,14.2446818 L70.9913315,14.3745 C70.3582433,15.8043182 69.8706042,16.8225 69.5284142,17.4290455 L67.8610622,17.4290455 C68.2162734,17.063213 68.5346911,16.6638682 68.8117936,16.2366818 C69.158768,15.6835017 69.4668841,15.1072249 69.7339481,14.5119545 L70.2747109,13.3566818 L66.8740602,5.0625 Z", id: "Path", fill: "#00438F" }),
+                        React.createElement("path", { d: "M17.3967355,0.639272727 L20.618231,1.91781818 L20.618231,13.4301818 C20.618231,15.9021818 17.5407191,16.3363636 15.4633985,16.6276364 C16.6515379,16.3363636 17.4033301,16.0090909 17.3967355,13.4301818 L17.3967355,3.19745455 L14.1752399,1.91781818 L17.3967355,0.639272727 Z M3.86557485,15.9883636 L3.86557485,8.95527273 C3.86557485,8.24727273 4.40084211,7.44654545 5.05041695,7.17054545 L8.37632809,5.75236364 L8.37632809,10.2250909 L11.5978237,12.1527273 C12.2473985,12.48 13.5311606,12.4876364 13.5311606,11.5123636 L13.5311606,9.59345455 L12.2408038,8.95309091 L12.2408038,0 L2.41804511,3.59236364 C1.08262474,4.08 1.81208432e-14,5.61709091 1.81208432e-14,7.03527273 L1.81208432e-14,17.5876364 L3.86557485,15.9883636 Z", id: "Shape", fill: "#F0B41C" }))))))));
+export default NulogyLogo;

package/dist/src/BrandedNavBar/NulogyLogoContainer.d.ts

@@ -1,8 +1,8 @@
-import React from "react";
-type NulogyLogoContainerProps = {
-    subText?: string;
-    height?: string;
-};
-/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
-export declare const NulogyLogoContainer: ({ subText, height }: NulogyLogoContainerProps) => React.JSX.Element;
-export {};
+import React from "react";
+type NulogyLogoContainerProps = {
+    subText?: string;
+    height?: string;
+};
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export declare const NulogyLogoContainer: ({ subText, height }: NulogyLogoContainerProps) => React.JSX.Element;
+export {};

package/dist/src/BrandedNavBar/NulogyLogoContainer.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { Flex } from "../Flex";
+import { Box } from "../Box";
+import { Text } from "../Type";
+import NulogyLogo from "./NulogyLogo";
+const borderStyle = "1px solid #e4e7eb";
+/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */
+export const NulogyLogoContainer = ({ subText, height }) => (React.createElement(Flex, { px: "x1", py: "half", alignItems: "center", justifyContent: "center", flexDirection: subText ? "column" : "row", height: height, borderLeft: borderStyle, borderRight: borderStyle },
+    React.createElement(Box, { width: "76px", height: "18px" },
+        React.createElement(NulogyLogo, null)),
+    subText && (React.createElement(Text, { fontSize: "8px", lineHeight: "10px", color: "darkGrey", fontWeight: "medium", textTransform: "uppercase", letterSpacing: ".5px" }, subText))));