@nulogy/components 16.1.0 → 17.0.0

package/dist/esm/BrandedNavBar/MobileMenu.js

@@ -0,0 +1,174 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import { display } from "../node_modules/.pnpm/styled-system@5.1.5/node_modules/styled-system/dist/index.esm.js";
+import { addStyledProps } from "../StyledProps/index.js";
+import NulogyLogo from "./NulogyLogo.js";
+import { useScrollLock } from "../utils/useScrollLock.js";
+import BrandingText from "../Branding/BrandingText.js";
+import Flex from "../Flex/Flex.js";
+import Text from "../Type/Text.js";
+import Icon from "../Icon/Icon.js";
+import DropdownLink from "../DropdownMenu/DropdownLink.js";
+import DropdownText from "../DropdownMenu/DropdownText.js";
+import Link from "../Link/Link.js";
+const borderStyle = "1px solid #e4e7eb";
+const BrandingWrap = styled.div(({ theme }) => ({
+  marginLeft: theme.space.x3,
+  color: theme.colors.white,
+  marginBottom: theme.space.x1
+}));
+const getPaddingLeft = (layer) => `${24 * layer + 24}px`;
+const getSharedStyles = (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: theme.space.half,
+  textDecoration: "none",
+  border: "none",
+  backgroundColor: "transparent",
+  fontSize: theme.fontSizes.large,
+  fontWeight: theme.fontWeights.medium,
+  lineHeight: theme.lineHeights.heading3,
+  padding: `${theme.space.x1} ${theme.space.x3}`
+});
+const TopLevelLink = styled(Link)(
+  ({ theme }) => ({
+    ...getSharedStyles(theme),
+    color: theme.colors.darkBlue,
+    "&:visited": {
+      color: theme.colors.darkBlue
+    },
+    width: "100%",
+    borderRadius: "0",
+    transition: ".2s",
+    "&:hover, &:focus": {
+      outline: "none",
+      color: theme.colors.blackBlue,
+      backgroundColor: theme.colors.whiteGrey,
+      cursor: "pointer"
+    },
+    "&:focus": {
+      boxShadow: theme.shadows.focus
+    },
+    "&:disabled": {
+      opacity: ".5"
+    }
+  }),
+  addStyledProps
+);
+const TopLevelText = styled(Text)(
+  ({ theme }) => ({
+    ...getSharedStyles(theme),
+    color: theme.colors.blackBlue
+  }),
+  addStyledProps
+);
+const SubMenuItemsList = styled.ul({
+  listStyle: "none",
+  paddingLeft: "0",
+  margin: "0"
+});
+const renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {
+  const sharedLinkProps = {
+    onClick: linkOnClick,
+    href: menuItem.href,
+    as: menuItem.as,
+    to: menuItem.to,
+    pl: layer === 0 ? getPaddingLeft(layer) : `${24 * layer + 20}px`,
+    mb: "x1",
+    target: menuItem.openInNew ? "_blank" : void 0
+  };
+  const topLevel = layer === 0;
+  return /* @__PURE__ */ jsx("li", { children: topLevel ? /* @__PURE__ */ jsxs(TopLevelLink, { ...sharedLinkProps, children: [
+    menuItem.name,
+    menuItem.openInNew && /* @__PURE__ */ jsx(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })
+  ] }) : /* @__PURE__ */ jsxs(DropdownLink, { ...sharedLinkProps, children: [
+    menuItem.name,
+    menuItem.openInNew && /* @__PURE__ */ jsx(Icon, { size: topLevel ? "x3" : "x2", icon: "openInNew" })
+  ] }) }, menuItem.key ?? menuItem.name);
+};
+const renderCustom = (menuItem, linkOnClick, themeColorObject, layer) => /* @__PURE__ */ jsx("li", { children: menuItem.render({ size: "small", onItemClick: linkOnClick, layer }) }, menuItem.key ?? menuItem.name);
+const renderSubMenu = (menuItem, linkOnClick, themeColorObject, layer) => /* @__PURE__ */ jsx("li", { style: { display: "block" }, children: /* @__PURE__ */ jsx(SubMenu, { menuItem, layer, themeColorObject, linkOnClick }) }, menuItem.key ?? menuItem.name);
+const renderText = (menuItem, linkOnClick, themeColorObject, layer) => {
+  const MenuText = layer === 0 ? TopLevelText : DropdownText;
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(MenuText, { pl: getPaddingLeft(layer), mb: "x1", children: menuItem.name }) }, menuItem.key ?? menuItem.name);
+};
+const getRenderFunction = (menuItem) => {
+  if (menuItem.items) {
+    return renderSubMenu;
+  } else if (menuItem.href || menuItem.to) {
+    return renderMenuLink;
+  } else if (menuItem.render) {
+    return renderCustom;
+  } else {
+    return renderText;
+  }
+};
+const renderMenuItems = (menuItems, linkOnClick, themeColorObject, layer) => menuItems.map((menuItem) => {
+  const render = getRenderFunction(menuItem);
+  return render(menuItem, linkOnClick, themeColorObject, layer);
+});
+const renderTopLayerMenuItems = (menuData, linkOnClick, themeColorObject) => renderMenuItems(menuData, linkOnClick, themeColorObject, 0);
+const getSubMenuHeading = (layer, name) => layer === 0 ? /* @__PURE__ */ jsx(TopLevelText, { as: "h3", mb: "x1", children: name }) : /* @__PURE__ */ jsx(DropdownText, { mb: "x1", pl: getPaddingLeft(layer), children: name });
+const SubMenu = ({ menuItem, linkOnClick, themeColorObject, layer }) => {
+  const defaultRender = () => getSubMenuHeading(layer, menuItem.name);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    menuItem.trigger ? menuItem.trigger({ size: "small", defaultRender, layer }) : defaultRender(),
+    /* @__PURE__ */ jsx(SubMenuItemsList, { children: renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1) })
+  ] });
+};
+const Menu = styled.ul(({ theme }) => ({
+  listStyle: "none",
+  margin: "0",
+  padding: `${theme.space.x1} 0`,
+  zIndex: theme.zIndices.content,
+  width: "100%",
+  color: theme.colors.white,
+  [`${TopLevelText}`]: {
+    padding: `${theme.space.x1} 0 ${theme.space.x1} ${theme.space.x3}`
+  }
+}));
+const Nav = styled.nav(
+  ({ backgroundColor }) => ({
+    backgroundColor
+  }),
+  {
+    minHeight: "calc(100vh - 72px)"
+  }
+);
+const BaseMobileMenu = ({
+  menuData,
+  closeMenu,
+  subtext,
+  themeColorObject,
+  showNulogyLogo,
+  ...props
+}) => {
+  useScrollLock();
+  return /* @__PURE__ */ jsxs(Nav, { backgroundColor: themeColorObject && themeColorObject.background, ...props, children: [
+    /* @__PURE__ */ jsx(BrandingWrap, { children: /* @__PURE__ */ jsx(BrandingText, { logoColor: themeColorObject?.logoColor }) }),
+    /* @__PURE__ */ jsxs(Menu, { children: [
+      menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject),
+      menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)
+    ] }),
+    showNulogyLogo && /* @__PURE__ */ jsxs(Flex, { textAlign: "center", borderTop: borderStyle, height: "40px", alignItems: "center", justifyContent: "center", children: [
+      /* @__PURE__ */ jsx(NulogyLogo, {}),
+      subtext && /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: "8px",
+          lineHeight: "0",
+          color: "darkGrey",
+          fontWeight: "medium",
+          textTransform: "uppercase",
+          letterSpacing: ".5px",
+          children: subtext
+        }
+      )
+    ] })
+  ] });
+};
+const MobileMenu = styled(BaseMobileMenu)(display);
+export {
+  MobileMenu as default
+};
+//# sourceMappingURL=MobileMenu.js.map

package/dist/esm/BrandedNavBar/MobileMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileMenu.js","sources":["../../../src/BrandedNavBar/MobileMenu.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport type { CSSObject } from \"styled-components\";\nimport { display } from \"styled-system\";\nimport { Text } from \"../Type\";\nimport { Flex } from \"../Flex\";\nimport { BrandingText } from \"../Branding\";\nimport { DropdownLink, DropdownText } from \"../DropdownMenu\";\nimport { Icon } from \"../Icon\";\nimport { Link } from \"../Link\";\nimport { addStyledProps } from \"../StyledProps\";\nimport NulogyLogo from \"./NulogyLogo\";\nimport { TriggerFunctionProps } from \"./TriggerFunctionProps\";\nimport { useScrollLock } from \"../utils/useScrollLock\";\nimport { DefaultNDSThemeType } from \"../theme\";\n\nconst borderStyle = \"1px solid #e4e7eb\";\n\nconst BrandingWrap = styled.div(({ theme }) => ({\n  marginLeft: theme.space.x3,\n  color: theme.colors.white,\n  marginBottom: theme.space.x1,\n}));\n\nconst getPaddingLeft = (layer) => `${24 * layer + 24}px`;\n\nconst getSharedStyles = (theme: DefaultNDSThemeType): CSSObject => ({\n  display: \"flex\",\n  alignItems: \"center\",\n  gap: theme.space.half,\n  textDecoration: \"none\",\n  border: \"none\",\n  backgroundColor: \"transparent\",\n  fontSize: theme.fontSizes.large,\n  fontWeight: theme.fontWeights.medium,\n  lineHeight: theme.lineHeights.heading3,\n  padding: `${theme.space.x1} ${theme.space.x3}`,\n});\n\nconst TopLevelLink = styled(Link)(\n  ({ theme }) => ({\n    ...getSharedStyles(theme),\n    color: theme.colors.darkBlue,\n    \"&:visited\": {\n      color: theme.colors.darkBlue,\n    },\n    width: \"100%\",\n    borderRadius: \"0\",\n    transition: \".2s\",\n    \"&:hover, &:focus\": {\n      outline: \"none\",\n      color: theme.colors.blackBlue,\n      backgroundColor: theme.colors.whiteGrey,\n      cursor: \"pointer\",\n    },\n    \"&:focus\": {\n      boxShadow: theme.shadows.focus,\n    },\n    \"&:disabled\": {\n      opacity: \".5\",\n    },\n  }),\n  addStyledProps\n);\n\nconst TopLevelText = styled(Text)(\n  ({ theme }) => ({\n    ...getSharedStyles(theme),\n    color: theme.colors.blackBlue,\n  }),\n  addStyledProps\n);\n\nconst SubMenuItemsList = styled.ul({\n  listStyle: \"none\",\n  paddingLeft: \"0\",\n  margin: \"0\",\n});\n\nconst renderMenuLink = (menuItem, linkOnClick, themeColorObject, layer) => {\n  const sharedLinkProps = {\n    onClick: linkOnClick,\n    href: menuItem.href,\n    as: menuItem.as,\n    to: menuItem.to,\n\n    pl: layer === 0 ? getPaddingLeft(layer) : `${24 * layer + 20}px`,\n    mb: \"x1\",\n    target: menuItem.openInNew ? \"_blank\" : undefined,\n  };\n  const topLevel = layer === 0;\n\n  return (\n    <li key={menuItem.key ?? menuItem.name}>\n      {topLevel ? (\n        <TopLevelLink {...sharedLinkProps}>\n          {menuItem.name}\n          {menuItem.openInNew && <Icon size={topLevel ? \"x3\" : \"x2\"} icon=\"openInNew\" />}\n        </TopLevelLink>\n      ) : (\n        <DropdownLink {...sharedLinkProps}>\n          {menuItem.name}\n          {menuItem.openInNew && <Icon size={topLevel ? \"x3\" : \"x2\"} icon=\"openInNew\" />}\n        </DropdownLink>\n      )}\n    </li>\n  );\n};\n\nconst renderCustom = (menuItem, linkOnClick, themeColorObject, layer) => (\n  <li key={menuItem.key ?? menuItem.name}>{menuItem.render({ size: \"small\", onItemClick: linkOnClick, layer })}</li>\n);\n\nconst renderSubMenu = (menuItem, linkOnClick, themeColorObject, layer) => (\n  <li key={menuItem.key ?? menuItem.name} style={{ display: \"block\" }}>\n    <SubMenu menuItem={menuItem} layer={layer} themeColorObject={themeColorObject} linkOnClick={linkOnClick} />\n  </li>\n);\n\nconst renderText = (menuItem, linkOnClick, themeColorObject, layer) => {\n  const MenuText = layer === 0 ? TopLevelText : DropdownText;\n  return (\n    <li key={menuItem.key ?? menuItem.name}>\n      <MenuText pl={getPaddingLeft(layer)} mb=\"x1\">\n        {menuItem.name}\n      </MenuText>\n    </li>\n  );\n};\n\nconst getRenderFunction = (menuItem) => {\n  if (menuItem.items) {\n    return renderSubMenu;\n  } else if (menuItem.href || menuItem.to) {\n    return renderMenuLink;\n  } else if (menuItem.render) {\n    return renderCustom;\n  } else {\n    return renderText;\n  }\n};\n\nconst renderMenuItems = (menuItems, linkOnClick, themeColorObject, layer) =>\n  menuItems.map((menuItem) => {\n    const render = getRenderFunction(menuItem);\n    return render(menuItem, linkOnClick, themeColorObject, layer);\n  });\n\nconst renderTopLayerMenuItems = (menuData, linkOnClick, themeColorObject) =>\n  renderMenuItems(menuData, linkOnClick, themeColorObject, 0);\n\nconst getSubMenuHeading = (layer, name) =>\n  layer === 0 ? (\n    <TopLevelText as=\"h3\" mb=\"x1\">\n      {name}\n    </TopLevelText>\n  ) : (\n    <DropdownText mb=\"x1\" pl={getPaddingLeft(layer)}>\n      {name}\n    </DropdownText>\n  );\n\ntype ThemeColorObject = {\n  textColor?: string;\n  background?: string;\n  logoColor?: \"white\" | \"blue\";\n};\n\ntype MenuItem = {\n  items?: any[];\n  name?: string;\n  trigger?: (props: TriggerFunctionProps) => React.ReactNode;\n};\n\ntype SubMenuProps = {\n  layer?: number;\n  menuItem?: MenuItem;\n  linkOnClick?: React.MouseEventHandler<HTMLElement>;\n  themeColorObject?: ThemeColorObject;\n};\n\nconst SubMenu = ({ menuItem, linkOnClick, themeColorObject, layer }: SubMenuProps) => {\n  const defaultRender = () => getSubMenuHeading(layer, menuItem.name);\n  return (\n    <>\n      {menuItem.trigger ? menuItem.trigger({ size: \"small\", defaultRender, layer }) : defaultRender()}\n      <SubMenuItemsList>{renderMenuItems(menuItem.items, linkOnClick, themeColorObject, layer + 1)}</SubMenuItemsList>\n    </>\n  );\n};\n\nconst Menu = styled.ul(({ theme }) => ({\n  listStyle: \"none\",\n  margin: \"0\",\n  padding: `${theme.space.x1} 0`,\n  zIndex: theme.zIndices.content,\n  width: \"100%\",\n  color: theme.colors.white,\n  [`${TopLevelText}`]: {\n    padding: `${theme.space.x1} 0 ${theme.space.x1} ${theme.space.x3}`,\n  },\n}));\n\ntype NavProps = {\n  backgroundColor: string;\n};\n\nconst Nav = styled.nav<NavProps>(\n  ({ backgroundColor }) => ({\n    backgroundColor,\n  }),\n  {\n    minHeight: \"calc(100vh - 72px)\",\n  }\n);\n\ntype MenuData = {\n  primaryMenu?: any[];\n  secondaryMenu?: any[];\n};\n\ntype BaseMobileMenuProps = {\n  menuData: MenuData;\n  subtext?: string;\n  closeMenu?: React.MouseEventHandler<HTMLElement>;\n  themeColorObject?: ThemeColorObject;\n  showNulogyLogo?: boolean;\n};\n\nconst BaseMobileMenu = ({\n  menuData,\n  closeMenu,\n  subtext,\n  themeColorObject,\n  showNulogyLogo,\n  ...props\n}: BaseMobileMenuProps) => {\n  useScrollLock();\n\n  return (\n    <Nav backgroundColor={themeColorObject && themeColorObject.background} {...props}>\n      <BrandingWrap>\n        <BrandingText logoColor={themeColorObject?.logoColor} />\n      </BrandingWrap>\n      <Menu>\n        {menuData.primaryMenu && renderTopLayerMenuItems(menuData.primaryMenu, closeMenu, themeColorObject)}\n        {menuData.secondaryMenu && renderTopLayerMenuItems(menuData.secondaryMenu, closeMenu, themeColorObject)}\n      </Menu>\n      {showNulogyLogo && (\n        <Flex textAlign=\"center\" borderTop={borderStyle} height=\"40px\" alignItems=\"center\" justifyContent=\"center\">\n          <NulogyLogo />\n          {subtext && (\n            <Text\n              fontSize=\"8px\"\n              lineHeight=\"0\"\n              color=\"darkGrey\"\n              fontWeight=\"medium\"\n              textTransform=\"uppercase\"\n              letterSpacing=\".5px\"\n            >\n              {subtext}\n            </Text>\n          )}\n        </Flex>\n      )}\n    </Nav>\n  );\n};\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nconst MobileMenu = styled(BaseMobileMenu)(display);\n\nexport default MobileMenu;\n"],"names":[],"mappings":"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"}

package/dist/esm/BrandedNavBar/NavBar.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { styled, useTheme } from "styled-components";
+import ResizeDetector from "../node_modules/.pnpm/react-resize-detector@9.1.1_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-resize-detector/build/index.esm.js";
+import numberFromDimension from "../utils/numberFromDimension/index.js";
+import DesktopMenu from "./DesktopMenu.js";
+import { NulogyLogoContainer } from "./NulogyLogoContainer.js";
+import EnvironmentBanner from "../Navigation/components/EnvironmentBanner/EnvironmentBanner.js";
+import BrandLogoContainer from "./BrandLogoContainer.js";
+import SmallNavBar from "./SmallNavBar.js";
+import NavBarBackground from "./NavBarBackground.js";
+import { useTranslation } from "../node_modules/.pnpm/react-i18next@12.3.1_i18next@19.9.2_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/react-i18next/dist/es/useTranslation.js";
+import Flex from "../Flex/Flex.js";
+import Box from "../Box/Box.js";
+const NAVBAR_HEIGHT = "56px";
+const themeColorObject = {
+  color: "darkBlue",
+  hoverColor: "blackBlue",
+  background: "white",
+  hoverBackground: "whiteGrey",
+  textColor: "blackBlue",
+  logoColor: "blue"
+};
+function MediumNavBar({ menuData, environment, logo, showNulogyLogo, subtext, ...props }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    environment && /* @__PURE__ */ jsx(EnvironmentBanner, { children: environment }),
+    /* @__PURE__ */ jsx("header", { ...props, children: /* @__PURE__ */ jsxs(NavBarBackground, { backgroundColor: "white", height: NAVBAR_HEIGHT, children: [
+      logo,
+      /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignContent: "flex-end", flexGrow: 1, ml: "x3", alignItems: "center", children: [
+        menuData.primaryMenu && /* @__PURE__ */ jsx(
+          DesktopMenu,
+          {
+            themeColorObject,
+            "aria-label": t("primary navigation"),
+            menuType: "primary",
+            menuData: menuData.primaryMenu
+          }
+        ),
+        /* @__PURE__ */ jsxs(Flex, { justifySelf: "flex-end", alignItems: "center", children: [
+          menuData.secondaryMenu && /* @__PURE__ */ jsx(
+            DesktopMenu,
+            {
+              themeColorObject,
+              "aria-label": t("secondary navigation"),
+              menuType: "secondary",
+              menuData: menuData.secondaryMenu
+            }
+          ),
+          showNulogyLogo && /* @__PURE__ */ jsx(Box, { pl: "x3", children: /* @__PURE__ */ jsx(NulogyLogoContainer, { height: NAVBAR_HEIGHT, subText: subtext }) })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+const SelectNavBarBasedOnWidth = ({
+  width,
+  defaultOpen,
+  breakpointUpper,
+  brandingLinkHref = "/",
+  brandingLinkTo,
+  brandingLinkComponent,
+  logoSrc,
+  ...props
+}) => {
+  const currentWidth = width || typeof window !== "undefined" && window.innerWidth;
+  const logo = /* @__PURE__ */ jsx(
+    BrandLogoContainer,
+    {
+      logoSrc,
+      brandingLinkHref,
+      brandingLinkTo,
+      brandingLinkComponent,
+      subtext: props.subtext
+    }
+  );
+  if (currentWidth >= numberFromDimension(breakpointUpper)) {
+    return /* @__PURE__ */ jsx(MediumNavBar, { logo, showNulogyLogo: logoSrc, ...props });
+  } else {
+    return /* @__PURE__ */ jsx(
+      SmallNavBar,
+      {
+        width: currentWidth,
+        defaultOpen,
+        themeColorObject,
+        navBarHeight: NAVBAR_HEIGHT,
+        logo,
+        showNulogyLogo: logoSrc,
+        ...props
+      }
+    );
+  }
+};
+const BaseNavBar = ({ environment, breakpointUpper = "medium", ...props }) => {
+  const { breakpoints } = useTheme();
+  return /* @__PURE__ */ jsx(ResizeDetector, { handleWidth: true, children: ({ width }) => /* @__PURE__ */ jsx(
+    SelectNavBarBasedOnWidth,
+    {
+      breakpointUpper: breakpoints[breakpointUpper] || breakpointUpper,
+      width,
+      environment,
+      ...props
+    }
+  ) });
+};
+const NavBar = styled(BaseNavBar)({});
+export {
+  NAVBAR_HEIGHT,
+  NavBar as default
+};
+//# sourceMappingURL=NavBar.js.map

package/dist/esm/BrandedNavBar/NavBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBar.js","sources":["../../../src/BrandedNavBar/NavBar.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled } from \"styled-components\";\nimport ReactResizeDetector from \"react-resize-detector\";\nimport { useTranslation } from \"react-i18next\";\nimport { useTheme } from \"styled-components\";\nimport { Flex } from \"../Flex\";\nimport { Box } from \"../Box\";\nimport numberFromDimension from \"../utils/numberFromDimension\";\nimport DesktopMenu from \"./DesktopMenu\";\nimport { NulogyLogoContainer } from \"./NulogyLogoContainer\";\nimport EnvironmentBanner from \"../Navigation/components/EnvironmentBanner/EnvironmentBanner\";\nimport BrandLogoContainer from \"./BrandLogoContainer\";\nimport SmallNavBar from \"./SmallNavBar\";\nimport NavBarBackground from \"./NavBarBackground\";\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport const NAVBAR_HEIGHT = \"56px\";\n\nconst themeColorObject = {\n  color: \"darkBlue\",\n  hoverColor: \"blackBlue\",\n  background: \"white\",\n  hoverBackground: \"whiteGrey\",\n  textColor: \"blackBlue\",\n  logoColor: \"blue\",\n};\n\ntype MediumNavBarProps = {\n  menuData?: any;\n  environment?: \"development\" | \"training\";\n  logo: React.ReactNode;\n  showNulogyLogo?: boolean;\n  subtext?: string;\n};\n\nfunction MediumNavBar({ menuData, environment, logo, showNulogyLogo, subtext, ...props }: MediumNavBarProps) {\n  const { t } = useTranslation();\n  return (\n    <>\n      {environment && <EnvironmentBanner>{environment}</EnvironmentBanner>}\n      <header {...props}>\n        <NavBarBackground backgroundColor=\"white\" height={NAVBAR_HEIGHT}>\n          {logo}\n          <Flex justifyContent=\"space-between\" alignContent=\"flex-end\" flexGrow={1} ml=\"x3\" alignItems=\"center\">\n            {menuData.primaryMenu && (\n              <DesktopMenu\n                themeColorObject={themeColorObject}\n                aria-label={t(\"primary navigation\")}\n                menuType=\"primary\"\n                menuData={menuData.primaryMenu}\n              />\n            )}\n            <Flex justifySelf=\"flex-end\" alignItems=\"center\">\n              {menuData.secondaryMenu && (\n                <DesktopMenu\n                  themeColorObject={themeColorObject}\n                  aria-label={t(\"secondary navigation\")}\n                  menuType=\"secondary\"\n                  menuData={menuData.secondaryMenu}\n                />\n              )}\n              {showNulogyLogo && (\n                <Box pl=\"x3\">\n                  <NulogyLogoContainer height={NAVBAR_HEIGHT} subText={subtext} />\n                </Box>\n              )}\n            </Flex>\n          </Flex>\n        </NavBarBackground>\n      </header>\n    </>\n  );\n}\n\nconst SelectNavBarBasedOnWidth = ({\n  width,\n  defaultOpen,\n  breakpointUpper,\n  brandingLinkHref = \"/\",\n  brandingLinkTo,\n  brandingLinkComponent,\n  logoSrc,\n  ...props\n}: any) => {\n  const currentWidth = width || (typeof window !== \"undefined\" && window.innerWidth);\n\n  const logo = (\n    <BrandLogoContainer\n      logoSrc={logoSrc}\n      brandingLinkHref={brandingLinkHref}\n      brandingLinkTo={brandingLinkTo}\n      brandingLinkComponent={brandingLinkComponent}\n      subtext={props.subtext}\n    />\n  );\n\n  if (currentWidth >= numberFromDimension(breakpointUpper)) {\n    return <MediumNavBar logo={logo} showNulogyLogo={logoSrc} {...props} />;\n  } else {\n    return (\n      <SmallNavBar\n        width={currentWidth}\n        defaultOpen={defaultOpen}\n        themeColorObject={themeColorObject}\n        navBarHeight={NAVBAR_HEIGHT}\n        logo={logo}\n        showNulogyLogo={logoSrc}\n        {...props}\n      />\n    );\n  }\n};\n\ntype BaseNavBarProps = {\n  menuData?: any;\n  className?: string;\n  breakpointUpper?: number | string;\n  environment?: \"training\" | \"development\" | undefined;\n  subtext?: string;\n  brandingLinkHref?: string;\n  logoSrc?: string;\n};\n\nconst BaseNavBar = ({ environment, breakpointUpper = \"medium\", ...props }: BaseNavBarProps) => {\n  const { breakpoints } = useTheme();\n  return (\n    <ReactResizeDetector handleWidth>\n      {({ width }) => (\n        <SelectNavBarBasedOnWidth\n          breakpointUpper={breakpoints[breakpointUpper] || breakpointUpper}\n          width={width}\n          environment={environment}\n          {...props}\n        />\n      )}\n    </ReactResizeDetector>\n  );\n};\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nconst NavBar = styled(BaseNavBar)({});\n\nexport default NavBar;\n"],"names":["ReactResizeDetector"],"mappings":";;;;;;;;;;;;;AAgBO,MAAM,gBAAgB;AAE7B,MAAM,mBAAmB;AAAA,EACvB,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,WAAW;AACb;AAUA,SAAS,aAAa,EAAE,UAAU,aAAa,MAAM,gBAAgB,SAAS,GAAG,SAA4B;AAC3G,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,eAAe,oBAAC,qBAAmB,UAAA,YAAA,CAAY;AAAA,IAChD,oBAAC,YAAQ,GAAG,OACV,+BAAC,kBAAA,EAAiB,iBAAgB,SAAQ,QAAQ,eAC/C,UAAA;AAAA,MAAA;AAAA,MACD,qBAAC,MAAA,EAAK,gBAAe,iBAAgB,cAAa,YAAW,UAAU,GAAG,IAAG,MAAK,YAAW,UAC1F,UAAA;AAAA,QAAA,SAAS,eACR;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA,cAAY,EAAE,oBAAoB;AAAA,YAClC,UAAS;AAAA,YACT,UAAU,SAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAGvB,qBAAC,MAAA,EAAK,aAAY,YAAW,YAAW,UACrC,UAAA;AAAA,UAAA,SAAS,iBACR;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA,cAAY,EAAE,sBAAsB;AAAA,cACpC,UAAS;AAAA,cACT,UAAU,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAGtB,kBACC,oBAAC,KAAA,EAAI,IAAG,MACN,UAAA,oBAAC,qBAAA,EAAoB,QAAQ,eAAe,SAAS,QAAA,CAAS,EAAA,CAChE;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;AAEA,MAAM,2BAA2B,CAAC;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAW;AACT,QAAM,eAAe,SAAU,OAAO,WAAW,eAAe,OAAO;AAEvE,QAAM,OACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,IAAA;AAAA,EAAA;AAInB,MAAI,gBAAgB,oBAAoB,eAAe,GAAG;AACxD,+BAAQ,cAAA,EAAa,MAAY,gBAAgB,SAAU,GAAG,OAAO;AAAA,EACvE,OAAO;AACL,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA,gBAAgB;AAAA,QACf,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAYA,MAAM,aAAa,CAAC,EAAE,aAAa,kBAAkB,UAAU,GAAG,YAA6B;AAC7F,QAAM,EAAE,YAAA,IAAgB,SAAA;AACxB,6BACGA,gBAAA,EAAoB,aAAW,MAC7B,UAAA,CAAC,EAAE,YACF;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,iBAAiB,YAAY,eAAe,KAAK;AAAA,MACjD;AAAA,MACA;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA,GAGV;AAEJ;AAGA,MAAM,SAAS,OAAO,UAAU,EAAE,CAAA,CAAE;"}

package/dist/esm/BrandedNavBar/NavBarBackground.js

@@ -0,0 +1,17 @@
+import { styled } from "styled-components";
+import { addStyledProps } from "../StyledProps/index.js";
+import Flex from "../Flex/Flex.js";
+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
+);
+export {
+  NavBarBackground as default
+};
+//# sourceMappingURL=NavBarBackground.js.map

package/dist/esm/BrandedNavBar/NavBarBackground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarBackground.js","sources":["../../../src/BrandedNavBar/NavBarBackground.tsx"],"sourcesContent":["import { styled, CSSObject } from \"styled-components\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport { Flex } from \"../Flex\";\nimport { addStyledProps, StyledProps } from \"../StyledProps\";\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport type NavBarBackgroundProps = {\n  theme?: DefaultNDSThemeType;\n} & StyledProps;\n\nconst NavBarBackground = styled(Flex)(\n  ({ theme }: NavBarBackgroundProps): CSSObject => ({\n    padding: `0 ${theme.space.x3}`,\n    borderBottom: `1px solid ${theme.colors.lightGrey}`,\n    alignItems: \"center\",\n    zIndex: theme.zIndices.navBar,\n    position: \"relative\",\n  }),\n  addStyledProps\n);\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport default NavBarBackground;\n"],"names":[],"mappings":";;;AAUA,MAAM,mBAAmB,OAAO,IAAI;AAAA,EAClC,CAAC,EAAE,MAAA,OAA+C;AAAA,IAChD,SAAS,KAAK,MAAM,MAAM,EAAE;AAAA,IAC5B,cAAc,aAAa,MAAM,OAAO,SAAS;AAAA,IACjD,YAAY;AAAA,IACZ,QAAQ,MAAM,SAAS;AAAA,IACvB,UAAU;AAAA,EAAA;AAAA,EAEZ;AACF;"}

package/dist/esm/BrandedNavBar/NavBarDropdownMenu.js

@@ -0,0 +1,142 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import Popper from "../node_modules/.pnpm/react-popper@1.3.11_react@18.3.1/node_modules/react-popper/lib/esm/Popper.js";
+import Manager from "../node_modules/.pnpm/react-popper@1.3.11_react@18.3.1/node_modules/react-popper/lib/esm/Manager.js";
+import Reference from "../node_modules/.pnpm/react-popper@1.3.11_react@18.3.1/node_modules/react-popper/lib/esm/Reference.js";
+import DropdownMenuContainer from "../DropdownMenu/DropdownMenuContainer.js";
+import withMenuState from "../utils/withMenuState.js";
+import PopperArrow from "../utils/PopperArrow.js";
+import DetectOutsideClick from "../utils/DetectOutsideClick.js";
+class StatelessNavBarDropdownMenuClass extends React__default.Component {
+}
+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 /* @__PURE__ */ jsxs(Manager, { children: [
+      /* @__PURE__ */ jsx(Reference, { children: ({ ref }) => React__default.cloneElement(
+        trigger({
+          closeMenu,
+          openMenu,
+          isOpen
+        }),
+        {
+          "aria-haspopup": true,
+          "aria-expanded": isOpen,
+          type: "button",
+          ...this.menuTriggerEventHandlers(),
+          ref: (node) => {
+            ref(node);
+            this.setTriggerRef(node);
+          }
+        }
+      ) }),
+      isOpen && /* @__PURE__ */ jsx(Popper, { placement, modifiers, children: (popperProps) => {
+        const { ref: popperRef, style, placement: popperPlacement } = popperProps;
+        return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+          DropdownMenuContainer,
+          {
+            dataPlacement: popperPlacement,
+            style,
+            placement,
+            showArrow,
+            ...this.menuEventHandlers(),
+            ...{
+              ref: (node) => {
+                if (typeof popperRef === "function") {
+                  popperRef(node);
+                }
+                this.setMenuRef(node);
+              }
+            },
+            onMouseDown: (e) => {
+              e.preventDefault();
+              e.target.focus();
+            },
+            ...dropdownMenuContainerEventHandlers({
+              openMenu,
+              closeMenu
+            }),
+            children: [
+              /* @__PURE__ */ jsx(
+                PopperArrow,
+                {
+                  ...popperProps.arrowProps,
+                  placement,
+                  ref: popperProps.arrowProps.ref,
+                  backgroundColor: "white",
+                  borderColor: "white"
+                }
+              ),
+              /* @__PURE__ */ jsx(DetectOutsideClick, { onClick: this.handleOutsideClick, clickRef: [this.menuRef, this.triggerRef] }),
+              childrenFnc({
+                closeMenu,
+                openMenu
+              })
+            ]
+          }
+        ) });
+      } })
+    ] });
+  }
+}
+StatelessNavBarDropdownMenu.defaultProps = {
+  showArrow: true,
+  placement: "bottom-start",
+  modifiers: null,
+  triggerTogglesMenuState: true,
+  dropdownMenuContainerEventHandlers: () => {
+  }
+};
+const NavBarDropdownMenu = withMenuState(StatelessNavBarDropdownMenu);
+NavBarDropdownMenu.defaultProps = {
+  showDelay: "0",
+  hideDelay: "100"
+};
+export {
+  NavBarDropdownMenu as default
+};
+//# sourceMappingURL=NavBarDropdownMenu.js.map

package/dist/esm/BrandedNavBar/NavBarDropdownMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavBarDropdownMenu.js","sources":["../../../src/BrandedNavBar/NavBarDropdownMenu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Manager, Reference, Popper } from \"react-popper\";\nimport { DetectOutsideClick, withMenuState, PopperArrow } from \"../utils\";\nimport DropdownMenuContainer from \"../DropdownMenu/DropdownMenuContainer\";\n\ntype MenuState = {\n  isOpen?: boolean;\n  openMenu?: (skipDelay?: boolean) => void;\n  closeMenu?: (skipDelay?: boolean) => void;\n  toggleMenu?: (skipDelay?: boolean) => void;\n};\n\ntype NavBarDropdownMenuProps = {\n  children?:\n    | React.ReactNode\n    | ((props: {\n        closeMenu?: (skipDelay?: boolean) => void;\n        openMenu?: (skipDelay?: boolean) => void;\n      }) => React.ReactNode);\n  trigger?: (props: {\n    closeMenu?: (skipDelay?: boolean) => void;\n    openMenu?: (skipDelay?: boolean) => void;\n    isOpen?: boolean;\n  }) => React.ReactElement;\n  menuState?: MenuState;\n  showArrow?: boolean;\n  placement?: \"bottom-start\" | \"right-start\" | \"left-start\";\n  modifiers?: any;\n  triggerTogglesMenuState?: boolean;\n  dropdownMenuContainerEventHandlers?: (props: {\n    openMenu?: (skipDelay?: boolean) => void;\n    closeMenu?: (skipDelay?: boolean) => void;\n  }) => React.HTMLAttributes<HTMLElement>;\n};\n\nclass StatelessNavBarDropdownMenuClass extends React.Component<NavBarDropdownMenuProps, any> {\n  menuRef: any;\n  triggerRef: any;\n}\n\ntype Ref = {\n  ref: any;\n};\n\nclass StatelessNavBarDropdownMenu extends StatelessNavBarDropdownMenuClass {\n  constructor(props) {\n    super(props);\n\n    this.handleOutsideClick = this.handleOutsideClick.bind(this);\n    this.setMenuRef = this.setMenuRef.bind(this);\n    this.setTriggerRef = this.setTriggerRef.bind(this);\n  }\n\n  setMenuRef(node) {\n    this.menuRef = node;\n  }\n\n  setTriggerRef(node) {\n    this.triggerRef = node;\n  }\n\n  menuTriggerEventHandlers() {\n    return {\n      onBlur: () => this.props.menuState.closeMenu(false),\n      onClick: () => this.handleTriggerClick(),\n    };\n  }\n\n  menuEventHandlers() {\n    return {\n      onBlur: () => this.props.menuState.closeMenu(false),\n      onFocus: () => this.props.menuState.openMenu(false),\n      onClick: () => this.props.menuState.openMenu(false),\n    };\n  }\n\n  handleTriggerClick() {\n    if (this.props.triggerTogglesMenuState) {\n      this.props.menuState.toggleMenu();\n    } else {\n      this.props.menuState.openMenu();\n    }\n  }\n\n  handleOutsideClick() {\n    this.props.menuState.closeMenu(false);\n  }\n\n  render() {\n    const {\n      trigger,\n      children,\n      placement,\n      modifiers,\n      showArrow,\n      dropdownMenuContainerEventHandlers,\n      menuState: { isOpen, closeMenu, openMenu },\n    } = this.props;\n\n    const childrenFnc = typeof children === \"function\" ? children : () => children;\n    return (\n      <Manager>\n        <Reference>\n          {({ ref }: Ref) =>\n            React.cloneElement(\n              trigger({\n                closeMenu,\n                openMenu,\n                isOpen,\n              }),\n              {\n                \"aria-haspopup\": true,\n                \"aria-expanded\": isOpen,\n                type: \"button\",\n                ...this.menuTriggerEventHandlers(),\n                ref: (node) => {\n                  ref(node);\n                  this.setTriggerRef(node);\n                },\n              }\n            )\n          }\n        </Reference>\n        {isOpen && (\n          <Popper placement={placement} modifiers={modifiers}>\n            {(popperProps) => {\n              const { ref: popperRef, style, placement: popperPlacement } = popperProps;\n              return (\n                <>\n                  <DropdownMenuContainer\n                    dataPlacement={popperPlacement}\n                    style={style}\n                    placement={placement}\n                    showArrow={showArrow}\n                    {...this.menuEventHandlers()}\n                    {...({\n                      ref: (node: HTMLElement | null) => {\n                        if (typeof popperRef === \"function\") {\n                          popperRef(node);\n                        }\n                        this.setMenuRef(node);\n                      },\n                    } as any)}\n                    onMouseDown={(e) => {\n                      e.preventDefault();\n                      (e.target as HTMLElement).focus();\n                    }}\n                    {...dropdownMenuContainerEventHandlers({\n                      openMenu,\n                      closeMenu,\n                    })}\n                  >\n                    <PopperArrow\n                      {...popperProps.arrowProps}\n                      placement={placement}\n                      ref={popperProps.arrowProps.ref}\n                      backgroundColor=\"white\"\n                      borderColor=\"white\"\n                    />\n                    <DetectOutsideClick onClick={this.handleOutsideClick} clickRef={[this.menuRef, this.triggerRef]} />\n                    {childrenFnc({\n                      closeMenu,\n                      openMenu,\n                    })}\n                  </DropdownMenuContainer>\n                </>\n              );\n            }}\n          </Popper>\n        )}\n      </Manager>\n    );\n  }\n}\n\n// @ts-expect-error - defaultProps is not recognized on functional components in newer React types\nStatelessNavBarDropdownMenu.defaultProps = {\n  showArrow: true,\n  placement: \"bottom-start\",\n  modifiers: null,\n  triggerTogglesMenuState: true,\n  dropdownMenuContainerEventHandlers: () => {},\n};\n\nconst NavBarDropdownMenu = withMenuState(StatelessNavBarDropdownMenu);\n\n// @ts-expect-error - defaultProps is not recognized on functional components in newer React types\nNavBarDropdownMenu.defaultProps = {\n  showDelay: \"0\",\n  hideDelay: \"100\",\n};\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport default NavBarDropdownMenu;\n"],"names":["React"],"mappings":"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"}

package/dist/esm/BrandedNavBar/NulogyLogo.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const NulogyLogo = () => /* @__PURE__ */ jsx("svg", { width: "76px", height: "18px", viewBox: "0 0 76 18", children: /* @__PURE__ */ jsx("g", { id: "FInal", stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", children: /* @__PURE__ */ jsx("g", { id: "DQI", transform: "translate(-924.000000, -30.000000)", children: /* @__PURE__ */ jsx("g", { id: "Branding", transform: "translate(916.000000, 24.000000)", children: /* @__PURE__ */ jsx("g", { id: "Logo/Wordmark/White", transform: "translate(8.000000, 6.000000)", children: /* @__PURE__ */ jsxs("g", { id: "Group", children: [
+  /* @__PURE__ */ jsx(
+    "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"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "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"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "polygon",
+    {
+      id: "Path",
+      fill: "#00438F",
+      points: "46.3103725 13.812 44.7716165 13.812 44.7716165 0.612 46.3103725 9.99200722e-16"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "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"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "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"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "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"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "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 {
+  NulogyLogo as default
+};
+//# sourceMappingURL=NulogyLogo.js.map

package/dist/esm/BrandedNavBar/NulogyLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NulogyLogo.js","sources":["../../../src/BrandedNavBar/NulogyLogo.tsx"],"sourcesContent":["import React from \"react\";\n\nconst NulogyLogo = () => (\n  <svg width=\"76px\" height=\"18px\" viewBox=\"0 0 76 18\">\n    <g id=\"FInal\" stroke=\"none\" strokeWidth=\"1\" fill=\"none\" fillRule=\"evenodd\">\n      <g id=\"DQI\" transform=\"translate(-924.000000, -30.000000)\">\n        <g id=\"Branding\" transform=\"translate(916.000000, 24.000000)\">\n          <g id=\"Logo/Wordmark/White\" transform=\"translate(8.000000, 6.000000)\">\n            <g id=\"Group\">\n              <path\n                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\"\n                id=\"Path\"\n                fill=\"#00438F\"\n              />\n              <path\n                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\"\n                id=\"Path\"\n                fill=\"#00438F\"\n              />\n              <polygon\n                id=\"Path\"\n                fill=\"#00438F\"\n                points=\"46.3103725 13.812 44.7716165 13.812 44.7716165 0.612 46.3103725 9.99200722e-16\"\n              />\n              <path\n                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\"\n                id=\"Shape\"\n                fill=\"#00438F\"\n              />\n              <path\n                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\"\n                id=\"Shape\"\n                fill=\"#00438F\"\n              />\n              <path\n                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\"\n                id=\"Path\"\n                fill=\"#00438F\"\n              />\n              <path\n                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\"\n                id=\"Shape\"\n                fill=\"#F0B41C\"\n              />\n            </g>\n          </g>\n        </g>\n      </g>\n    </g>\n  </svg>\n);\n\nexport default NulogyLogo;\n"],"names":[],"mappings":";AAEA,MAAM,aAAa,MACjB,oBAAC,SAAI,OAAM,QAAO,QAAO,QAAO,SAAQ,aACtC,UAAA,oBAAC,KAAA,EAAE,IAAG,SAAQ,QAAO,QAAO,aAAY,KAAI,MAAK,QAAO,UAAS,WAC/D,UAAA,oBAAC,KAAA,EAAE,IAAG,OAAM,WAAU,sCACpB,UAAA,oBAAC,KAAA,EAAE,IAAG,YAAW,WAAU,oCACzB,UAAA,oBAAC,KAAA,EAAE,IAAG,uBAAsB,WAAU,iCACpC,UAAA,qBAAC,KAAA,EAAE,IAAG,SACJ,UAAA;AAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,IAAG;AAAA,MACH,MAAK;AAAA,IAAA;AAAA,EAAA;AAAA,EAEP;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,IAAG;AAAA,MACH,MAAK;AAAA,IAAA;AAAA,EAAA;AAAA,EAEP;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAG;AAAA,MACH,MAAK;AAAA,MACL,QAAO;AAAA,IAAA;AAAA,EAAA;AAAA,EAET;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,IAAG;AAAA,MACH,MAAK;AAAA,IAAA;AAAA,EAAA;AAAA,EAEP;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,IAAG;AAAA,MACH,MAAK;AAAA,IAAA;AAAA,EAAA;AAAA,EAEP;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,IAAG;AAAA,MACH,MAAK;AAAA,IAAA;AAAA,EAAA;AAAA,EAEP;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,IAAG;AAAA,MACH,MAAK;AAAA,IAAA;AAAA,EAAA;AACP,EAAA,CACF,EAAA,CACF,EAAA,CACF,EAAA,CACF,EAAA,CACF,EAAA,CACF;"}

package/dist/esm/BrandedNavBar/NulogyLogoContainer.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import NulogyLogo from "./NulogyLogo.js";
+import Flex from "../Flex/Flex.js";
+import Box from "../Box/Box.js";
+import Text from "../Type/Text.js";
+const borderStyle = "1px solid #e4e7eb";
+const NulogyLogoContainer = ({ subText, height }) => /* @__PURE__ */ jsxs(
+  Flex,
+  {
+    px: "x1",
+    py: "half",
+    alignItems: "center",
+    justifyContent: "center",
+    flexDirection: subText ? "column" : "row",
+    height,
+    borderLeft: borderStyle,
+    borderRight: borderStyle,
+    children: [
+      /* @__PURE__ */ jsx(Box, { width: "76px", height: "18px", children: /* @__PURE__ */ jsx(NulogyLogo, {}) }),
+      subText && /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: "8px",
+          lineHeight: "10px",
+          color: "darkGrey",
+          fontWeight: "medium",
+          textTransform: "uppercase",
+          letterSpacing: ".5px",
+          children: subText
+        }
+      )
+    ]
+  }
+);
+export {
+  NulogyLogoContainer
+};
+//# sourceMappingURL=NulogyLogoContainer.js.map