@nulogy/components 16.1.0 → 17.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"NulogyLogoContainer.js","sources":["../../../src/BrandedNavBar/NulogyLogoContainer.tsx"],"sourcesContent":["import React from \"react\";\nimport { Flex } from \"../Flex\";\nimport { Box } from \"../Box\";\nimport { Text } from \"../Type\";\nimport NulogyLogo from \"./NulogyLogo\";\n\nconst borderStyle = \"1px solid #e4e7eb\";\n\ntype NulogyLogoContainerProps = {\n  subText?: string;\n  height?: string;\n};\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport const NulogyLogoContainer = ({ subText, height }: NulogyLogoContainerProps) => (\n  <Flex\n    px=\"x1\"\n    py=\"half\"\n    alignItems=\"center\"\n    justifyContent=\"center\"\n    flexDirection={subText ? \"column\" : \"row\"}\n    height={height}\n    borderLeft={borderStyle}\n    borderRight={borderStyle}\n  >\n    <Box width=\"76px\" height=\"18px\">\n      <NulogyLogo />\n    </Box>\n    {subText && (\n      <Text\n        fontSize=\"8px\"\n        lineHeight=\"10px\"\n        color=\"darkGrey\"\n        fontWeight=\"medium\"\n        textTransform=\"uppercase\"\n        letterSpacing=\".5px\"\n      >\n        {subText}\n      </Text>\n    )}\n  </Flex>\n);\n"],"names":[],"mappings":";;;;;AAMA,MAAM,cAAc;AAQb,MAAM,sBAAsB,CAAC,EAAE,SAAS,aAC7C;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,IAAG;AAAA,IACH,IAAG;AAAA,IACH,YAAW;AAAA,IACX,gBAAe;AAAA,IACf,eAAe,UAAU,WAAW;AAAA,IACpC;AAAA,IACA,YAAY;AAAA,IACZ,aAAa;AAAA,IAEb,UAAA;AAAA,MAAA,oBAAC,OAAI,OAAM,QAAO,QAAO,QACvB,UAAA,oBAAC,cAAW,EAAA,CACd;AAAA,MACC,WACC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,YAAW;AAAA,UACX,OAAM;AAAA,UACN,YAAW;AAAA,UACX,eAAc;AAAA,UACd,eAAc;AAAA,UAEb,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAEJ;"}

package/dist/esm/BrandedNavBar/SmallNavBar.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { styled, useTheme } from "styled-components";
+import React__default, { useEffect } from "react";
+import NavBarSearch from "../NavBarSearch/NavBarSearch.js";
+import EnvironmentBanner from "../Navigation/components/EnvironmentBanner/EnvironmentBanner.js";
+import MobileMenu from "./MobileMenu.js";
+import NavBarBackground from "./NavBarBackground.js";
+import withMenuState from "../utils/withMenuState.js";
+import Flex from "../Flex/Flex.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 Icon from "../Icon/Icon.js";
+const MobileMenuTrigger = styled.button(({ color, hoverColor, hoverBackground, theme }) => ({
+  color: theme.colors[color] || color,
+  background: "none",
+  border: "none",
+  padding: theme.space.x1,
+  marginLeft: theme.space.x1,
+  borderRadius: theme.radii.medium,
+  transition: ".2s",
+  height: theme.space.x5,
+  "&:hover, &:focus": {
+    outline: "none",
+    color: theme.colors[hoverColor] || hoverColor,
+    backgroundColor: theme.colors[hoverBackground] || hoverBackground,
+    cursor: "pointer"
+  },
+  "&:focus": {
+    boxShadow: theme.shadows.focus
+  }
+}));
+const SmallHeader = styled.header(
+  ({ isOpen, theme }) => isOpen ? {
+    position: "fixed",
+    width: "100%",
+    height: "100%",
+    zIndex: theme.zIndices.overlay,
+    overflow: "scroll",
+    top: "0",
+    left: "0",
+    right: "0",
+    bottom: "0",
+    backgroundColor: theme.colors.white
+  } : null
+);
+const MenuIcon = ({ isOpen }) => {
+  const { t } = useTranslation();
+  const icon = isOpen ? "close" : "menu";
+  const title = isOpen ? t("close menu") : t("open menu");
+  return /* @__PURE__ */ jsx(Icon, { icon, title });
+};
+const SmallNavBarNoState = ({
+  menuData,
+  menuState: { isOpen, toggleMenu, closeMenu },
+  subtext,
+  environment,
+  showNulogyLogo,
+  breakpointLower = "small",
+  themeColorObject,
+  navBarHeight,
+  logo,
+  renderMenuButton,
+  ...props
+}) => {
+  const navRef = React__default.useRef(null);
+  useEffect(() => {
+    if (navRef && navRef.current) {
+      navRef.current.scrollTop = 0;
+    }
+  }, [isOpen]);
+  const { breakpoints } = useTheme();
+  const ariaExpanded = isOpen ? true : null;
+  return /* @__PURE__ */ jsxs(
+    SmallHeader,
+    {
+      ref: navRef,
+      isOpen,
+      breakpointLower: breakpoints ? breakpoints[breakpointLower] : breakpointLower,
+      ...props,
+      children: [
+        environment && /* @__PURE__ */ jsx(EnvironmentBanner, { children: environment }),
+        /* @__PURE__ */ jsxs(NavBarBackground, { backgroundColor: "white", height: navBarHeight, children: [
+          logo,
+          /* @__PURE__ */ jsxs(Flex, { justifyContent: "flex-end", ml: "x3", flexGrow: 1, children: [
+            menuData.search && /* @__PURE__ */ jsx(Flex, { maxWidth: "18em", alignItems: "center", px: "0", children: /* @__PURE__ */ jsx(NavBarSearch, { ...menuData.search }) }),
+            (menuData.primaryMenu || menuData.secondaryMenu) && (renderMenuButton ? renderMenuButton({
+              themeColorObject,
+              onClick: toggleMenu,
+              ariaExpanded,
+              isOpen
+            }) : /* @__PURE__ */ jsx(MobileMenuTrigger, { ...themeColorObject, onClick: toggleMenu, "aria-expanded": ariaExpanded, children: /* @__PURE__ */ jsx(MenuIcon, { isOpen }) }))
+          ] })
+        ] }),
+        isOpen && /* @__PURE__ */ jsx(
+          MobileMenu,
+          {
+            themeColorObject,
+            subtext,
+            menuData,
+            closeMenu,
+            showNulogyLogo
+          }
+        )
+      ]
+    }
+  );
+};
+const SmallNavBar = withMenuState(SmallNavBarNoState);
+export {
+  SmallNavBar as default
+};
+//# sourceMappingURL=SmallNavBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmallNavBar.js","sources":["../../../src/BrandedNavBar/SmallNavBar.tsx"],"sourcesContent":["import { styled, CSSObject, useTheme } from \"styled-components\";\nimport { useTranslation } from \"react-i18next\";\nimport React, { useEffect } from \"react\";\nimport { Icon } from \"../Icon\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport { Flex } from \"../Flex\";\nimport NavBarSearch from \"../NavBarSearch/NavBarSearch\";\nimport { withMenuState, WithMenuStateProps, AcceptsMenuStateProps } from \"../utils\";\nimport EnvironmentBanner from \"../Navigation/components/EnvironmentBanner/EnvironmentBanner\";\nimport MobileMenu from \"./MobileMenu\";\nimport NavBarBackground from \"./NavBarBackground\";\n\ntype MobileMenuTriggerProps = {\n  color?: string;\n  hoverColor?: string;\n  hoverBackground?: string;\n  theme?: DefaultNDSThemeType;\n};\n\nconst MobileMenuTrigger = styled.button(({ color, hoverColor, hoverBackground, theme }: MobileMenuTriggerProps) => ({\n  color: theme.colors[color] || color,\n  background: \"none\",\n  border: \"none\",\n  padding: theme.space.x1,\n  marginLeft: theme.space.x1,\n  borderRadius: theme.radii.medium,\n  transition: \".2s\",\n  height: theme.space.x5,\n  \"&:hover, &:focus\": {\n    outline: \"none\",\n    color: theme.colors[hoverColor] || hoverColor,\n    backgroundColor: theme.colors[hoverBackground] || hoverBackground,\n    cursor: \"pointer\",\n  },\n  \"&:focus\": {\n    boxShadow: theme.shadows.focus,\n  },\n}));\n\ntype SmallHeaderProps = {\n  isOpen?: boolean;\n  theme?: DefaultNDSThemeType;\n  breakpointLower?: string | number;\n};\n\nconst SmallHeader = styled.header<SmallHeaderProps>(\n  ({ isOpen, theme }: SmallHeaderProps): CSSObject =>\n    isOpen\n      ? {\n          position: \"fixed\",\n          width: \"100%\",\n          height: \"100%\",\n          zIndex: theme.zIndices.overlay,\n          overflow: \"scroll\",\n          top: \"0\",\n          left: \"0\",\n          right: \"0\",\n          bottom: \"0\",\n          backgroundColor: theme.colors.white,\n        }\n      : null\n);\n\nconst MenuIcon = ({ isOpen }) => {\n  const { t } = useTranslation();\n  const icon = isOpen ? \"close\" : \"menu\";\n  const title = isOpen ? t(\"close menu\") : t(\"open menu\");\n  return <Icon icon={icon} title={title} />;\n};\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport type RenderMenuButtonProps = {\n  themeColorObject: any;\n  onClick: () => void;\n  ariaExpanded: true | null;\n  isOpen: boolean;\n};\n\ntype SmallNavBarNoStateProps = {\n  menuData?: any;\n  subtext?: string;\n  breakpointLower?: number | string;\n  width?: number;\n  themeColor?: \"blue\" | \"white\";\n  themeColorObject?: any;\n  environment?: \"development\" | \"training\";\n  navBarHeight: string;\n  logo?: React.ReactElement;\n  showNulogyLogo?: boolean;\n  renderMenuButton?: (props: RenderMenuButtonProps) => React.ReactElement;\n} & AcceptsMenuStateProps;\n\nconst SmallNavBarNoState = ({\n  menuData,\n  menuState: { isOpen, toggleMenu, closeMenu },\n  subtext,\n  environment,\n  showNulogyLogo,\n  breakpointLower = \"small\",\n  themeColorObject,\n  navBarHeight,\n  logo,\n  renderMenuButton,\n  ...props\n}: SmallNavBarNoStateProps) => {\n  const navRef = React.useRef(null);\n\n  useEffect(() => {\n    if (navRef && navRef.current) {\n      navRef.current.scrollTop = 0;\n    }\n  }, [isOpen]);\n\n  const { breakpoints } = useTheme();\n  const ariaExpanded = isOpen ? true : null;\n  return (\n    <SmallHeader\n      ref={navRef}\n      isOpen={isOpen}\n      breakpointLower={breakpoints ? breakpoints[breakpointLower] : breakpointLower}\n      {...props}\n    >\n      {environment && <EnvironmentBanner>{environment}</EnvironmentBanner>}\n      <NavBarBackground backgroundColor=\"white\" height={navBarHeight}>\n        {logo}\n        <Flex justifyContent=\"flex-end\" ml=\"x3\" flexGrow={1}>\n          {menuData.search && (\n            <Flex maxWidth=\"18em\" alignItems=\"center\" px=\"0\">\n              <NavBarSearch {...menuData.search} />\n            </Flex>\n          )}\n          {(menuData.primaryMenu || menuData.secondaryMenu) &&\n            (renderMenuButton ? (\n              renderMenuButton({\n                themeColorObject: themeColorObject,\n                onClick: toggleMenu,\n                ariaExpanded,\n                isOpen,\n              })\n            ) : (\n              <MobileMenuTrigger {...themeColorObject} onClick={toggleMenu} aria-expanded={ariaExpanded}>\n                <MenuIcon isOpen={isOpen} />\n              </MobileMenuTrigger>\n            ))}\n        </Flex>\n      </NavBarBackground>\n      {isOpen && (\n        <MobileMenu\n          themeColorObject={themeColorObject}\n          subtext={subtext}\n          menuData={menuData}\n          closeMenu={closeMenu}\n          showNulogyLogo={showNulogyLogo}\n        />\n      )}\n    </SmallHeader>\n  );\n};\n\nconst SmallNavBar = withMenuState(SmallNavBarNoState);\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport type SmallNavBarProps = SmallNavBarNoStateProps & WithMenuStateProps;\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport default SmallNavBar;\n"],"names":["React"],"mappings":";;;;;;;;;;;AAmBA,MAAM,oBAAoB,OAAO,OAAO,CAAC,EAAE,OAAO,YAAY,iBAAiB,aAAqC;AAAA,EAClH,OAAO,MAAM,OAAO,KAAK,KAAK;AAAA,EAC9B,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,SAAS,MAAM,MAAM;AAAA,EACrB,YAAY,MAAM,MAAM;AAAA,EACxB,cAAc,MAAM,MAAM;AAAA,EAC1B,YAAY;AAAA,EACZ,QAAQ,MAAM,MAAM;AAAA,EACpB,oBAAoB;AAAA,IAClB,SAAS;AAAA,IACT,OAAO,MAAM,OAAO,UAAU,KAAK;AAAA,IACnC,iBAAiB,MAAM,OAAO,eAAe,KAAK;AAAA,IAClD,QAAQ;AAAA,EAAA;AAAA,EAEV,WAAW;AAAA,IACT,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B,EAAE;AAQF,MAAM,cAAc,OAAO;AAAA,EACzB,CAAC,EAAE,QAAQ,MAAA,MACT,SACI;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,QAAQ,MAAM,SAAS;AAAA,IACvB,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,EAAA,IAEhC;AACR;AAEA,MAAM,WAAW,CAAC,EAAE,aAAa;AAC/B,QAAM,EAAE,EAAA,IAAM,eAAA;AACd,QAAM,OAAO,SAAS,UAAU;AAChC,QAAM,QAAQ,SAAS,EAAE,YAAY,IAAI,EAAE,WAAW;AACtD,SAAO,oBAAC,MAAA,EAAK,MAAY,MAAA,CAAc;AACzC;AAwBA,MAAM,qBAAqB,CAAC;AAAA,EAC1B;AAAA,EACA,WAAW,EAAE,QAAQ,YAAY,UAAA;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA+B;AAC7B,QAAM,SAASA,eAAM,OAAO,IAAI;AAEhC,YAAU,MAAM;AACd,QAAI,UAAU,OAAO,SAAS;AAC5B,aAAO,QAAQ,YAAY;AAAA,IAC7B;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,EAAE,YAAA,IAAgB,SAAA;AACxB,QAAM,eAAe,SAAS,OAAO;AACrC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,iBAAiB,cAAc,YAAY,eAAe,IAAI;AAAA,MAC7D,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,eAAe,oBAAC,qBAAmB,UAAA,YAAA,CAAY;AAAA,QAChD,qBAAC,kBAAA,EAAiB,iBAAgB,SAAQ,QAAQ,cAC/C,UAAA;AAAA,UAAA;AAAA,+BACA,MAAA,EAAK,gBAAe,YAAW,IAAG,MAAK,UAAU,GAC/C,UAAA;AAAA,YAAA,SAAS,UACR,oBAAC,MAAA,EAAK,UAAS,QAAO,YAAW,UAAS,IAAG,KAC3C,UAAA,oBAAC,cAAA,EAAc,GAAG,SAAS,QAAQ,GACrC;AAAA,aAEA,SAAS,eAAe,SAAS,mBAChC,mBACC,iBAAiB;AAAA,cACf;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA,YAAA,CACD,IAED,oBAAC,mBAAA,EAAmB,GAAG,kBAAkB,SAAS,YAAY,iBAAe,cAC3E,UAAA,oBAAC,UAAA,EAAS,QAAgB,GAC5B;AAAA,UAAA,EAAA,CAEN;AAAA,QAAA,GACF;AAAA,QACC,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEA,MAAM,cAAc,cAAc,kBAAkB;"}

package/dist/esm/BrandedNavBar/SubMenuTrigger.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { styled, useTheme } from "styled-components";
+import { addStyledProps } from "../StyledProps/index.js";
+import NavBarDropdownMenu from "./NavBarDropdownMenu.js";
+import renderSubMenuItems from "./renderSubMenuItems.js";
+import SubMenuTriggerButton from "./SubMenuTriggerButton.js";
+import { NAVBAR_HEIGHT } from "./NavBar.js";
+const SubMenuTrigger = ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    NavBarDropdownMenu,
+    {
+      placement: getPlacement(menuType),
+      modifiers: {
+        preventOverflow: {
+          enabled: true,
+          padding: theme.space.x1,
+          boundariesElement: "viewport"
+        }
+      },
+      showArrow: true,
+      triggerTogglesMenuState: false,
+      ...props,
+      dropdownMenuContainerEventHandlers: ({ openMenu, closeMenu }) => ({
+        onMouseEnter: openMenu,
+        onMouseLeave: closeMenu
+      }),
+      trigger: ({ closeMenu, openMenu, isOpen }) => {
+        const defaultRender = () => /* @__PURE__ */ jsx(SubMenuTriggerButton, { isOpen, name, onMouseEnter: openMenu, onMouseLeave: closeMenu });
+        const triggerProps = {
+          size: "medium",
+          closeMenu,
+          openMenu,
+          isOpen,
+          defaultRender,
+          layer
+        };
+        return trigger ? trigger(triggerProps) : defaultRender();
+      },
+      children: /* @__PURE__ */ jsx(SubMenuItemsList, { children: renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType) })
+    }
+  );
+};
+const SubMenuItemsList = styled("ul")(
+  ({ theme }) => ({
+    listStyle: "none",
+    margin: "0",
+    padding: "0",
+    maxHeight: `calc(100vh - ${NAVBAR_HEIGHT} - ${theme.space.x3})`,
+    overflowY: "auto"
+  }),
+  addStyledProps
+);
+function getPlacement(menuType) {
+  switch (menuType) {
+    case "primary":
+      return "right-start";
+    case "secondary":
+      return "left-start";
+  }
+}
+export {
+  SubMenuTrigger as default
+};
+//# sourceMappingURL=SubMenuTrigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenuTrigger.js","sources":["../../../src/BrandedNavBar/SubMenuTrigger.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled, useTheme } from \"styled-components\";\nimport { addStyledProps } from \"../StyledProps\";\nimport NavBarDropdownMenu from \"./NavBarDropdownMenu\";\nimport renderSubMenuItems from \"./renderSubMenuItems\";\nimport SubMenuTriggerButton from \"./SubMenuTriggerButton\";\nimport { TriggerFunctionProps } from \"./TriggerFunctionProps\";\nimport type { MenuType } from \"./MenuTrigger\";\nimport { NAVBAR_HEIGHT } from \"./NavBar\";\n\ntype SubMenuTriggerProps = React.ComponentPropsWithRef<\"button\"> & {\n  name?: string;\n  isOpen?: boolean;\n  onItemClick?: any;\n  menuData: any[];\n  trigger: (props: TriggerFunctionProps) => React.ReactNode;\n  layer: number;\n  menuType: MenuType;\n};\n\nconst SubMenuTrigger = ({ menuData, name, onItemClick, trigger, layer, menuType, ...props }: SubMenuTriggerProps) => {\n  const theme = useTheme();\n\n  return (\n    <NavBarDropdownMenu\n      placement={getPlacement(menuType)}\n      modifiers={{\n        preventOverflow: {\n          enabled: true,\n          padding: theme.space.x1,\n          boundariesElement: \"viewport\",\n        },\n      }}\n      showArrow={true}\n      triggerTogglesMenuState={false}\n      {...props}\n      dropdownMenuContainerEventHandlers={({ openMenu, closeMenu }) => ({\n        onMouseEnter: openMenu,\n        onMouseLeave: closeMenu,\n      })}\n      trigger={({ closeMenu, openMenu, isOpen }) => {\n        const defaultRender = () => (\n          <SubMenuTriggerButton isOpen={isOpen} name={name} onMouseEnter={openMenu} onMouseLeave={closeMenu} />\n        );\n        const triggerProps: TriggerFunctionProps = {\n          size: \"medium\",\n          closeMenu,\n          openMenu,\n          isOpen,\n          defaultRender,\n          layer,\n        };\n        return trigger ? trigger(triggerProps) : defaultRender();\n      }}\n    >\n      <SubMenuItemsList>\n        {renderSubMenuItems(menuData, onItemClick, SubMenuTrigger, layer + 1, menuType)}\n      </SubMenuItemsList>\n    </NavBarDropdownMenu>\n  );\n};\n\nconst SubMenuItemsList = styled(\"ul\")(\n  ({ theme }) => ({\n    listStyle: \"none\",\n    margin: \"0\",\n    padding: \"0\",\n    maxHeight: `calc(100vh - ${NAVBAR_HEIGHT} - ${theme.space.x3})`,\n    overflowY: \"auto\",\n  }),\n  addStyledProps\n);\n\nfunction getPlacement(menuType) {\n  switch (menuType) {\n    case \"primary\":\n      return \"right-start\";\n    case \"secondary\":\n      return \"left-start\";\n  }\n}\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport default SubMenuTrigger;\n"],"names":[],"mappings":";;;;;;;AAoBA,MAAM,iBAAiB,CAAC,EAAE,UAAU,MAAM,aAAa,SAAS,OAAO,UAAU,GAAG,YAAiC;AACnH,QAAM,QAAQ,SAAA;AAEd,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,aAAa,QAAQ;AAAA,MAChC,WAAW;AAAA,QACT,iBAAiB;AAAA,UACf,SAAS;AAAA,UACT,SAAS,MAAM,MAAM;AAAA,UACrB,mBAAmB;AAAA,QAAA;AAAA,MACrB;AAAA,MAEF,WAAW;AAAA,MACX,yBAAyB;AAAA,MACxB,GAAG;AAAA,MACJ,oCAAoC,CAAC,EAAE,UAAU,iBAAiB;AAAA,QAChE,cAAc;AAAA,QACd,cAAc;AAAA,MAAA;AAAA,MAEhB,SAAS,CAAC,EAAE,WAAW,UAAU,aAAa;AAC5C,cAAM,gBAAgB,MACpB,oBAAC,sBAAA,EAAqB,QAAgB,MAAY,cAAc,UAAU,cAAc,UAAA,CAAW;AAErG,cAAM,eAAqC;AAAA,UACzC,MAAM;AAAA,UACN;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAEF,eAAO,UAAU,QAAQ,YAAY,IAAI,cAAA;AAAA,MAC3C;AAAA,MAEA,UAAA,oBAAC,oBACE,UAAA,mBAAmB,UAAU,aAAa,gBAAgB,QAAQ,GAAG,QAAQ,EAAA,CAChF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,MAAM,mBAAmB,OAAO,IAAI;AAAA,EAClC,CAAC,EAAE,MAAA,OAAa;AAAA,IACd,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW,gBAAgB,aAAa,MAAM,MAAM,MAAM,EAAE;AAAA,IAC5D,WAAW;AAAA,EAAA;AAAA,EAEb;AACF;AAEA,SAAS,aAAa,UAAU;AAC9B,UAAQ,UAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,EAAA;AAEb;"}

package/dist/esm/BrandedNavBar/SubMenuTriggerButton.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import React__default from "react";
+import Flex from "../Flex/Flex.js";
+import Icon from "../Icon/Icon.js";
+import DropdownButton from "../DropdownMenu/DropdownButton.js";
+const StyledButton = styled(DropdownButton)(
+  ({ isOpen, theme }) => ({
+    padding: `${theme.space.x1} ${theme.space.x1} ${theme.space.x1} 12px`,
+    backgroundColor: isOpen ? theme.colors.lightBlue : "transparent",
+    color: isOpen ? theme.colors.darkBlue : theme.colors.darkGrey
+  })
+);
+const SubMenuTriggerButton = React__default.forwardRef(
+  ({ name, isOpen, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(StyledButton, { isOpen, ref, ...props, children: /* @__PURE__ */ jsxs(Flex, { gap: "half", justifyContent: "space-between", alignItems: "center", children: [
+      name,
+      /* @__PURE__ */ jsx(Icon, { icon: "rightArrow", size: "20px" })
+    ] }) });
+  }
+);
+SubMenuTriggerButton.displayName = "SubMenuTriggerButton";
+export {
+  SubMenuTriggerButton as default
+};
+//# sourceMappingURL=SubMenuTriggerButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubMenuTriggerButton.js","sources":["../../../src/BrandedNavBar/SubMenuTriggerButton.tsx"],"sourcesContent":["import { styled, CSSObject } from \"styled-components\";\nimport React from \"react\";\nimport { DropdownButton } from \"../DropdownMenu\";\nimport { Icon } from \"../Icon\";\nimport { Flex } from \"../Flex\";\n\nconst StyledButton = styled(DropdownButton)<{ isOpen: boolean }>(\n  ({ isOpen, theme }): CSSObject => ({\n    padding: `${theme.space.x1} ${theme.space.x1} ${theme.space.x1} 12px`,\n    backgroundColor: isOpen ? theme.colors.lightBlue : \"transparent\",\n    color: isOpen ? theme.colors.darkBlue : theme.colors.darkGrey,\n  })\n);\n\ntype SubMenuTriggerButtonProps = React.ComponentPropsWithRef<\"button\"> & {\n  name?: string;\n  isOpen: boolean;\n};\n\nconst SubMenuTriggerButton = React.forwardRef<HTMLButtonElement, SubMenuTriggerButtonProps>(\n  ({ name, isOpen, ...props }, ref) => {\n    return (\n      <StyledButton isOpen={isOpen} ref={ref} {...props}>\n        <Flex gap=\"half\" justifyContent=\"space-between\" alignItems=\"center\">\n          {name}\n          <Icon icon=\"rightArrow\" size=\"20px\" />\n        </Flex>\n      </StyledButton>\n    );\n  }\n);\n\nSubMenuTriggerButton.displayName = \"SubMenuTriggerButton\";\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport default SubMenuTriggerButton;\n"],"names":["React"],"mappings":";;;;;;AAMA,MAAM,eAAe,OAAO,cAAc;AAAA,EACxC,CAAC,EAAE,QAAQ,aAAwB;AAAA,IACjC,SAAS,GAAG,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,IAC9D,iBAAiB,SAAS,MAAM,OAAO,YAAY;AAAA,IACnD,OAAO,SAAS,MAAM,OAAO,WAAW,MAAM,OAAO;AAAA,EAAA;AAEzD;AAOA,MAAM,uBAAuBA,eAAM;AAAA,EACjC,CAAC,EAAE,MAAM,QAAQ,GAAG,MAAA,GAAS,QAAQ;AACnC,WACE,oBAAC,cAAA,EAAa,QAAgB,KAAW,GAAG,OAC1C,UAAA,qBAAC,MAAA,EAAK,KAAI,QAAO,gBAAe,iBAAgB,YAAW,UACxD,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,MAAA,EAAK,MAAK,cAAa,MAAK,OAAA,CAAO;AAAA,IAAA,EAAA,CACtC,EAAA,CACF;AAAA,EAEJ;AACF;AAEA,qBAAqB,cAAc;"}

package/dist/esm/BrandedNavBar/renderSubMenuItems.js

@@ -0,0 +1,54 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { styled } from "styled-components";
+import DropdownLink from "../DropdownMenu/DropdownLink.js";
+import Icon from "../Icon/Icon.js";
+import DropdownText from "../DropdownMenu/DropdownText.js";
+const renderSubMenuTrigger = (subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) => /* @__PURE__ */ jsx(NoWrapLi, { children: /* @__PURE__ */ jsx(
+  SubMenuTrigger,
+  {
+    onItemClick,
+    name: subMenuItem.name,
+    menuData: subMenuItem.items,
+    trigger: subMenuItem.trigger,
+    layer,
+    menuType
+  }
+) }, subMenuItem.key ?? subMenuItem.name);
+const renderSubMenuLink = (subMenuItem, onItemClick) => {
+  const linkProps = {
+    onClick: onItemClick,
+    href: subMenuItem.href,
+    to: subMenuItem.to,
+    as: subMenuItem.as,
+    target: subMenuItem.openInNew ? "_blank" : void 0
+  };
+  return /* @__PURE__ */ jsx(NoWrapLi, { children: /* @__PURE__ */ jsxs(DropdownLink, { ...linkProps, children: [
+    subMenuItem.name,
+    subMenuItem.openInNew && /* @__PURE__ */ jsx(Icon, { size: "x2", icon: "openInNew" })
+  ] }) }, subMenuItem.key ?? subMenuItem.name);
+};
+const renderCustom = (subMenuItem, onItemClick, _SubMenuTrigger, layer) => /* @__PURE__ */ jsx(NoWrapLi, { children: subMenuItem.render({ size: "medium", onItemClick, layer }) }, subMenuItem.key ?? subMenuItem.name);
+const renderText = (subMenuItem) => /* @__PURE__ */ jsx(NoWrapLi, { children: /* @__PURE__ */ jsx(DropdownText, { children: subMenuItem.name }) }, subMenuItem.key ?? subMenuItem.name);
+const getRenderFunction = (subMenuItem) => {
+  if (subMenuItem.items) {
+    return renderSubMenuTrigger;
+  } else if (subMenuItem.href || subMenuItem.to) {
+    return renderSubMenuLink;
+  } else if (subMenuItem.render) {
+    return renderCustom;
+  } else {
+    return renderText;
+  }
+};
+const renderSubMenuItems = (subMenuItems, onItemClick, SubMenuTrigger, layer, menuType) => subMenuItems.map(
+  (subMenuItem) => getRenderFunction(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType)
+);
+const NoWrapLi = styled.li(
+  () => ({
+    whiteSpace: "nowrap"
+  })
+);
+export {
+  renderSubMenuItems as default
+};
+//# sourceMappingURL=renderSubMenuItems.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderSubMenuItems.js","sources":["../../../src/BrandedNavBar/renderSubMenuItems.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled, CSSObject } from \"styled-components\";\nimport { DropdownText, DropdownLink } from \"../DropdownMenu\";\nimport { Icon } from \"../Icon\";\n\nconst renderSubMenuTrigger = (subMenuItem, onItemClick, SubMenuTrigger, layer, menuType) => (\n  <NoWrapLi key={subMenuItem.key ?? subMenuItem.name}>\n    <SubMenuTrigger\n      onItemClick={onItemClick}\n      name={subMenuItem.name}\n      menuData={subMenuItem.items}\n      trigger={subMenuItem.trigger}\n      layer={layer}\n      menuType={menuType}\n    />\n  </NoWrapLi>\n);\n\nconst renderSubMenuLink = (subMenuItem, onItemClick) => {\n  const linkProps = {\n    onClick: onItemClick,\n    href: subMenuItem.href,\n    to: subMenuItem.to,\n    as: subMenuItem.as,\n    target: subMenuItem.openInNew ? \"_blank\" : undefined,\n  };\n\n  return (\n    <NoWrapLi key={subMenuItem.key ?? subMenuItem.name}>\n      <DropdownLink {...linkProps}>\n        {subMenuItem.name}\n        {subMenuItem.openInNew && <Icon size=\"x2\" icon=\"openInNew\" />}\n      </DropdownLink>\n    </NoWrapLi>\n  );\n};\n\nconst renderCustom = (subMenuItem, onItemClick, _SubMenuTrigger, layer) => (\n  <NoWrapLi key={subMenuItem.key ?? subMenuItem.name}>\n    {subMenuItem.render({ size: \"medium\", onItemClick, layer })}\n  </NoWrapLi>\n);\n\nconst renderText = (subMenuItem) => (\n  <NoWrapLi key={subMenuItem.key ?? subMenuItem.name}>\n    <DropdownText>{subMenuItem.name}</DropdownText>\n  </NoWrapLi>\n);\n\nconst getRenderFunction = (subMenuItem) => {\n  if (subMenuItem.items) {\n    return renderSubMenuTrigger;\n  } else if (subMenuItem.href || subMenuItem.to) {\n    return renderSubMenuLink;\n  } else if (subMenuItem.render) {\n    return renderCustom;\n  } else {\n    return renderText;\n  }\n};\n\nconst renderSubMenuItems = (subMenuItems, onItemClick, SubMenuTrigger, layer, menuType) =>\n  subMenuItems.map((subMenuItem) =>\n    getRenderFunction(subMenuItem)(subMenuItem, onItemClick, SubMenuTrigger, layer, menuType)\n  );\n\nconst NoWrapLi = styled.li(\n  (): CSSObject => ({\n    whiteSpace: \"nowrap\",\n  })\n);\n\n/** @deprecated The BrandedNavBar component is deprecated. Use the Navigation component instead. */\nexport default renderSubMenuItems;\n"],"names":[],"mappings":";;;;;AAKA,MAAM,uBAAuB,CAAC,aAAa,aAAa,gBAAgB,OAAO,iCAC5E,UAAA,EACC,UAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC;AAAA,IACA,MAAM,YAAY;AAAA,IAClB,UAAU,YAAY;AAAA,IACtB,SAAS,YAAY;AAAA,IACrB;AAAA,IACA;AAAA,EAAA;AACF,EAAA,GARa,YAAY,OAAO,YAAY,IAS9C;AAGF,MAAM,oBAAoB,CAAC,aAAa,gBAAgB;AACtD,QAAM,YAAY;AAAA,IAChB,SAAS;AAAA,IACT,MAAM,YAAY;AAAA,IAClB,IAAI,YAAY;AAAA,IAChB,IAAI,YAAY;AAAA,IAChB,QAAQ,YAAY,YAAY,WAAW;AAAA,EAAA;AAG7C,SACE,oBAAC,UAAA,EACC,UAAA,qBAAC,cAAA,EAAc,GAAG,WACf,UAAA;AAAA,IAAA,YAAY;AAAA,IACZ,YAAY,aAAa,oBAAC,QAAK,MAAK,MAAK,MAAK,YAAA,CAAY;AAAA,EAAA,EAAA,CAC7D,EAAA,GAJa,YAAY,OAAO,YAAY,IAK9C;AAEJ;AAEA,MAAM,eAAe,CAAC,aAAa,aAAa,iBAAiB,UAC/D,oBAAC,YACE,UAAA,YAAY,OAAO,EAAE,MAAM,UAAU,aAAa,MAAA,CAAO,KAD7C,YAAY,OAAO,YAAY,IAE9C;AAGF,MAAM,aAAa,CAAC,gBAClB,oBAAC,UAAA,EACC,UAAA,oBAAC,cAAA,EAAc,UAAA,YAAY,MAAK,EAAA,GADnB,YAAY,OAAO,YAAY,IAE9C;AAGF,MAAM,oBAAoB,CAAC,gBAAgB;AACzC,MAAI,YAAY,OAAO;AACrB,WAAO;AAAA,EACT,WAAW,YAAY,QAAQ,YAAY,IAAI;AAC7C,WAAO;AAAA,EACT,WAAW,YAAY,QAAQ;AAC7B,WAAO;AAAA,EACT,OAAO;AACL,WAAO;AAAA,EACT;AACF;AAEA,MAAM,qBAAqB,CAAC,cAAc,aAAa,gBAAgB,OAAO,aAC5E,aAAa;AAAA,EAAI,CAAC,gBAChB,kBAAkB,WAAW,EAAE,aAAa,aAAa,gBAAgB,OAAO,QAAQ;AAC1F;AAEF,MAAM,WAAW,OAAO;AAAA,EACtB,OAAkB;AAAA,IAChB,YAAY;AAAA,EAAA;AAEhB;"}

package/dist/esm/Branding/Branding.js

@@ -0,0 +1,98 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTheme, styled } from "styled-components";
+import BrandingText from "./BrandingText.js";
+import LettermarkLogo from "./LettermarkLogo.js";
+import WordmarkLogo from "./WordmarkLogo.js";
+import Flex from "../Flex/Flex.js";
+function getLogoColor(color = "blue", theme) {
+  const config = {
+    white: {
+      letter: "#F0B41C",
+      logo: "#FFFFFF",
+      text: theme.colors.white,
+      line: theme.colors.lightGrey
+    },
+    blue: {
+      letter: "#F0B41C",
+      logo: "#1C68A5",
+      text: "#0E77D2",
+      line: theme.colors.lightBlue
+    }
+  };
+  return config[color];
+}
+const alignments = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end"
+};
+const getAlignment = (alignment) => alignments[alignment] || alignments.left;
+const BrandingWrap = styled.div(({ alignment, size }) => ({
+  width: "100%",
+  display: "inline-flex",
+  userSelect: "none",
+  flexDirection: "column",
+  alignItems: getAlignment(alignment),
+  padding: size === "medium" ? "2px 0" : void 0
+}));
+const Line = styled.div(({ logoColor, theme }) => ({
+  position: "relative",
+  width: "100%",
+  "&:before": {
+    content: "''",
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    borderTop: `1px solid ${getLogoColor(logoColor, theme).line}`,
+    background: getLogoColor(logoColor, theme).line,
+    width: "100%",
+    transform: "translateY(-50%)"
+  }
+}));
+const BrandingBoxPaddings = {
+  small: 0,
+  medium: "2px",
+  large: "6px"
+};
+const Branding = ({
+  logoType = "wordmark",
+  subtext,
+  size = "medium",
+  alignment = "left",
+  withLine,
+  logoColor = "blue",
+  className,
+  ...props
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(BrandingWrap, { size, alignment, className, ...props, children: [
+    logoType === "lettermark" ? /* @__PURE__ */ jsx(LettermarkLogo, { size, letterFill: getLogoColor(logoColor, theme).letter }) : /* @__PURE__ */ jsx(
+      WordmarkLogo,
+      {
+        size,
+        letterFill: getLogoColor(logoColor, theme).letter,
+        logoFill: getLogoColor(logoColor, theme).logo
+      }
+    ),
+    subtext && /* @__PURE__ */ jsxs(Flex, { justifyContent: getAlignment(alignment), width: "100%", py: BrandingBoxPaddings[size], children: [
+      alignment !== "left" && withLine && /* @__PURE__ */ jsx(Line, { logoColor }),
+      /* @__PURE__ */ jsx(
+        BrandingText,
+        {
+          logoColor,
+          style: {
+            marginLeft: alignment !== "left" && "4px",
+            marginRight: alignment !== "right" && "4px"
+          },
+          size,
+          children: subtext
+        }
+      ),
+      alignment !== "right" && withLine && /* @__PURE__ */ jsx(Line, { logoColor })
+    ] })
+  ] });
+};
+export {
+  Branding as default
+};
+//# sourceMappingURL=Branding.js.map

package/dist/esm/Branding/Branding.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Branding.js","sources":["../../../src/Branding/Branding.tsx"],"sourcesContent":["import React from \"react\";\nimport { styled, useTheme } from \"styled-components\";\nimport { Flex } from \"../Flex\";\nimport { DefaultNDSThemeType } from \"../theme\";\nimport BrandingText from \"./BrandingText\";\nimport LettermarkLogo from \"./LettermarkLogo\";\nimport WordmarkLogo from \"./WordmarkLogo\";\n\ntype BrandingProps = {\n  logoType?: \"wordmark\" | \"lettermark\";\n  logoColor?: \"blue\" | \"white\";\n  size?: \"small\" | \"medium\" | \"large\";\n  alignment?: \"left\" | \"center\" | \"right\";\n  withLine?: boolean;\n  subtext?: string;\n  className?: string;\n};\n\nfunction getLogoColor(color: \"white\" | \"blue\" = \"blue\", theme: DefaultNDSThemeType) {\n  const config = {\n    white: {\n      letter: \"#F0B41C\",\n      logo: \"#FFFFFF\",\n      text: theme.colors.white,\n      line: theme.colors.lightGrey,\n    },\n    blue: {\n      letter: \"#F0B41C\",\n      logo: \"#1C68A5\",\n      text: \"#0E77D2\",\n      line: theme.colors.lightBlue,\n    },\n  };\n\n  return config[color];\n}\n\nconst alignments = {\n  left: \"flex-start\",\n  center: \"center\",\n  right: \"flex-end\",\n} as const;\n\ntype Alignment = keyof typeof alignments;\n\nconst getAlignment = (alignment: Alignment) => alignments[alignment] || alignments.left;\n\nconst BrandingWrap = styled.div<{ size: string; alignment: Alignment }>(({ alignment, size }) => ({\n  width: \"100%\",\n  display: \"inline-flex\",\n  userSelect: \"none\",\n  flexDirection: \"column\",\n  alignItems: getAlignment(alignment),\n  padding: size === \"medium\" ? \"2px 0\" : undefined,\n}));\n\nconst Line = styled.div<{ logoColor: \"white\" | \"blue\" }>(({ logoColor, theme }) => ({\n  position: \"relative\",\n  width: \"100%\",\n  \"&:before\": {\n    content: \"''\",\n    position: \"absolute\",\n    top: \"50%\",\n    left: 0,\n    borderTop: `1px solid ${getLogoColor(logoColor, theme).line}`,\n    background: getLogoColor(logoColor, theme).line,\n    width: \"100%\",\n    transform: \"translateY(-50%)\",\n  },\n}));\n\nconst BrandingBoxPaddings = {\n  small: 0,\n  medium: \"2px\",\n  large: \"6px\",\n};\n\nconst Branding = ({\n  logoType = \"wordmark\",\n  subtext,\n  size = \"medium\",\n  alignment = \"left\",\n  withLine,\n  logoColor = \"blue\",\n  className,\n  ...props\n}: BrandingProps) => {\n  const theme = useTheme();\n\n  return (\n    <BrandingWrap size={size} alignment={alignment} className={className} {...props}>\n      {logoType === \"lettermark\" ? (\n        <LettermarkLogo size={size} letterFill={getLogoColor(logoColor, theme).letter} />\n      ) : (\n        <WordmarkLogo\n          size={size}\n          letterFill={getLogoColor(logoColor, theme).letter}\n          logoFill={getLogoColor(logoColor, theme).logo}\n        />\n      )}\n      {subtext && (\n        <Flex justifyContent={getAlignment(alignment)} width=\"100%\" py={BrandingBoxPaddings[size]}>\n          {alignment !== \"left\" && withLine && <Line logoColor={logoColor} />}\n          <BrandingText\n            logoColor={logoColor}\n            style={{\n              marginLeft: alignment !== \"left\" && \"4px\",\n              marginRight: alignment !== \"right\" && \"4px\",\n            }}\n            size={size}\n          >\n            {subtext}\n          </BrandingText>\n          {alignment !== \"right\" && withLine && <Line logoColor={logoColor} />}\n        </Flex>\n      )}\n    </BrandingWrap>\n  );\n};\n\nexport default Branding;\n"],"names":[],"mappings":";;;;;;AAkBA,SAAS,aAAa,QAA0B,QAAQ,OAA4B;AAClF,QAAM,SAAS;AAAA,IACb,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM,MAAM,OAAO;AAAA,MACnB,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,IAErB,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM,MAAM,OAAO;AAAA,IAAA;AAAA,EACrB;AAGF,SAAO,OAAO,KAAK;AACrB;AAEA,MAAM,aAAa;AAAA,EACjB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAIA,MAAM,eAAe,CAAC,cAAyB,WAAW,SAAS,KAAK,WAAW;AAEnF,MAAM,eAAe,OAAO,IAA4C,CAAC,EAAE,WAAW,YAAY;AAAA,EAChG,OAAO;AAAA,EACP,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,YAAY,aAAa,SAAS;AAAA,EAClC,SAAS,SAAS,WAAW,UAAU;AACzC,EAAE;AAEF,MAAM,OAAO,OAAO,IAAqC,CAAC,EAAE,WAAW,aAAa;AAAA,EAClF,UAAU;AAAA,EACV,OAAO;AAAA,EACP,YAAY;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW,aAAa,aAAa,WAAW,KAAK,EAAE,IAAI;AAAA,IAC3D,YAAY,aAAa,WAAW,KAAK,EAAE;AAAA,IAC3C,OAAO;AAAA,IACP,WAAW;AAAA,EAAA;AAEf,EAAE;AAEF,MAAM,sBAAsB;AAAA,EAC1B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,MAAM,WAAW,CAAC;AAAA,EAChB,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,GAAG;AACL,MAAqB;AACnB,QAAM,QAAQ,SAAA;AAEd,8BACG,cAAA,EAAa,MAAY,WAAsB,WAAuB,GAAG,OACvE,UAAA;AAAA,IAAA,aAAa,eACZ,oBAAC,gBAAA,EAAe,MAAY,YAAY,aAAa,WAAW,KAAK,EAAE,OAAA,CAAQ,IAE/E;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,YAAY,aAAa,WAAW,KAAK,EAAE;AAAA,QAC3C,UAAU,aAAa,WAAW,KAAK,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,IAG5C,WACC,qBAAC,MAAA,EAAK,gBAAgB,aAAa,SAAS,GAAG,OAAM,QAAO,IAAI,oBAAoB,IAAI,GACrF,UAAA;AAAA,MAAA,cAAc,UAAU,YAAY,oBAAC,MAAA,EAAK,WAAsB;AAAA,MACjE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,OAAO;AAAA,YACL,YAAY,cAAc,UAAU;AAAA,YACpC,aAAa,cAAc,WAAW;AAAA,UAAA;AAAA,UAExC;AAAA,UAEC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEF,cAAc,WAAW,YAAY,oBAAC,QAAK,UAAA,CAAsB;AAAA,IAAA,EAAA,CACpE;AAAA,EAAA,GAEJ;AAEJ;"}

package/dist/esm/Branding/BrandingText.js

@@ -0,0 +1,26 @@
+import { styled } from "styled-components";
+const logoColors = {
+  white: "#FFFFFF",
+  blue: "#0E77D2"
+};
+const getLogoColor = (logoColor) => logoColors[logoColor] || logoColors.blue;
+const BrandingText = styled.span(({ logoColor = "blue", size, theme }) => ({
+  color: getLogoColor(logoColor),
+  textDecoration: "none",
+  fontWeight: theme.fontWeights.medium,
+  letterSpacing: "0.0333em",
+  textTransform: "uppercase",
+  fontSize: size === "small" ? "10px" : "11px",
+  lineHeight: "12px",
+  whiteSpace: "nowrap",
+  active: {
+    color: getLogoColor(logoColor)
+  },
+  visited: {
+    color: getLogoColor(logoColor)
+  }
+}));
+export {
+  BrandingText as default
+};
+//# sourceMappingURL=BrandingText.js.map

package/dist/esm/Branding/BrandingText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandingText.js","sources":["../../../src/Branding/BrandingText.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\n\ntype BrandingTextProps = {\n  logoColor?: \"blue\" | \"white\";\n  size?: \"small\" | \"medium\" | \"large\";\n};\n\nconst logoColors = {\n  white: \"#FFFFFF\",\n  blue: \"#0E77D2\",\n};\n\nconst getLogoColor = (logoColor) => logoColors[logoColor] || logoColors.blue;\n\nconst BrandingText = styled.span<BrandingTextProps>(({ logoColor = \"blue\", size, theme }) => ({\n  color: getLogoColor(logoColor),\n  textDecoration: \"none\",\n  fontWeight: theme.fontWeights.medium,\n  letterSpacing: \"0.0333em\",\n  textTransform: \"uppercase\",\n  fontSize: size === \"small\" ? \"10px\" : \"11px\",\n  lineHeight: \"12px\",\n  whiteSpace: \"nowrap\",\n  active: {\n    color: getLogoColor(logoColor),\n  },\n  visited: {\n    color: getLogoColor(logoColor),\n  },\n}));\n\nexport default BrandingText;\n"],"names":[],"mappings":";AAOA,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AACR;AAEA,MAAM,eAAe,CAAC,cAAc,WAAW,SAAS,KAAK,WAAW;AAExE,MAAM,eAAe,OAAO,KAAwB,CAAC,EAAE,YAAY,QAAQ,MAAM,aAAa;AAAA,EAC5F,OAAO,aAAa,SAAS;AAAA,EAC7B,gBAAgB;AAAA,EAChB,YAAY,MAAM,YAAY;AAAA,EAC9B,eAAe;AAAA,EACf,eAAe;AAAA,EACf,UAAU,SAAS,UAAU,SAAS;AAAA,EACtC,YAAY;AAAA,EACZ,YAAY;AAAA,EACZ,QAAQ;AAAA,IACN,OAAO,aAAa,SAAS;AAAA,EAAA;AAAA,EAE/B,SAAS;AAAA,IACP,OAAO,aAAa,SAAS;AAAA,EAAA;AAEjC,EAAE;"}

package/dist/esm/Branding/LettermarkLogo.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+const sizes = {
+  small: {
+    height: "24px",
+    width: "28px"
+  },
+  medium: {
+    height: "32px",
+    width: "37px"
+  },
+  large: {
+    height: "48px",
+    width: "56px"
+  }
+};
+const getSize = (size) => sizes[size] || sizes.medium;
+function LettermarkLogo({ size, letterFill, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ...getSize(size),
+      ...props,
+      viewBox: "0 0 37 32",
+      style: { display: "block", margin: size === "large" ? null : "2px 0" },
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: letterFill,
+          d: "M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z"
+        }
+      )
+    }
+  );
+}
+export {
+  LettermarkLogo as default
+};
+//# sourceMappingURL=LettermarkLogo.js.map

package/dist/esm/Branding/LettermarkLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LettermarkLogo.js","sources":["../../../src/Branding/LettermarkLogo.tsx"],"sourcesContent":["import React from \"react\";\n\nconst sizes = {\n  small: {\n    height: \"24px\",\n    width: \"28px\",\n  },\n  medium: {\n    height: \"32px\",\n    width: \"37px\",\n  },\n  large: {\n    height: \"48px\",\n    width: \"56px\",\n  },\n};\n\nconst getSize = (size: string) => sizes[size] || sizes.medium;\n\ntype LettermarkLogoProps = {\n  letterFill?: string;\n  size?: string;\n};\n\nexport default function LettermarkLogo({ size, letterFill, ...props }: LettermarkLogoProps) {\n  return (\n    <svg\n      {...getSize(size)}\n      {...props}\n      viewBox=\"0 0 37 32\"\n      style={{ display: \"block\", margin: size === \"large\" ? null : \"2px 0\" }}\n    >\n      <path\n        fill={letterFill}\n        d=\"M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z\"\n      />\n    </svg>\n  );\n}\n"],"names":[],"mappings":";AAEA,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,UAAU,CAAC,SAAiB,MAAM,IAAI,KAAK,MAAM;AAOvD,SAAwB,eAAe,EAAE,MAAM,YAAY,GAAG,SAA8B;AAC1F,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG,QAAQ,IAAI;AAAA,MACf,GAAG;AAAA,MACJ,SAAQ;AAAA,MACR,OAAO,EAAE,SAAS,SAAS,QAAQ,SAAS,UAAU,OAAO,QAAA;AAAA,MAE7D,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,GAAE;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGN;"}

package/dist/esm/Branding/WordmarkLogo.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const sizes = {
+  small: {
+    height: "24px",
+    width: "100px"
+  },
+  medium: {
+    height: "32px",
+    width: "133px"
+  },
+  large: {
+    height: "48px",
+    width: "200px"
+  }
+};
+const getSize = (size) => sizes[size] || sizes.medium;
+function WordmarkLogo({ size, logoFill, letterFill, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...getSize(size),
+      ...props,
+      viewBox: "0 0 133 32",
+      style: { display: "block", margin: size === "medium" ? "2px 0" : null },
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            fill: letterFill,
+            d: "M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z"
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { transform: "translate(43.000000, 0.000000)", fill: logoFill, children: [
+          /* @__PURE__ */ jsx("path", { d: "M5.14521212,24.2224981 L1.33226763e-14,24.2224981 L1.33226763e-14,9.41134654 L4.75151515,9.41134654 L4.75151515,11.8937708 C5.43733518,11.0060378 6.29475204,10.2653615 7.27272727,9.71583139 C8.16188898,9.23817548 9.15699751,8.9920662 10.166303,9.00019502 C11.7333333,9.00019502 12.9221818,9.44948795 13.7328485,10.3480738 C14.5435152,11.2466597 14.9488485,12.5615688 14.9488485,14.2928011 L14.9488485,24.2224981 L9.83078788,24.2224981 L9.83078788,15.7376496 C9.83078788,14.961892 9.67175758,14.3755486 9.35369697,13.9786193 C9.03563636,13.58169 8.56436364,13.3877506 7.93987879,13.3968011 C7.04258586,13.3968011 6.35216162,13.6980536 5.86860606,14.3005587 C5.38505051,14.9030637 5.14391919,15.7803162 5.14521212,16.9323162 L5.14521212,24.2224981 Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M27.8366061,9 L32.9507879,9 L32.9507879,22.6203636 L28.1992727,24.5190303 L28.1992727,21.6254545 C27.5124636,22.5143219 26.6553593,23.2573653 25.6780606,23.8111515 C24.7938668,24.2845189 23.8048332,24.5279425 22.8019394,24.5190303 C21.2323232,24.5190303 20.0402424,24.0665051 19.225697,23.1614545 C18.4111515,22.256404 18.0025859,20.9408485 18,19.2147879 L18,9 L23.1452121,9 L23.1452121,17.7796364 C23.1452121,18.5553939 23.3042424,19.1443232 23.622303,19.5464242 C23.9403636,19.9485253 24.4116364,20.1482828 25.0361212,20.145697 C25.9411717,20.145697 26.631596,19.8418586 27.1073939,19.2341818 C27.5831919,18.6265051 27.8243232,17.7524848 27.8307879,16.6121212 L27.8366061,9 Z" }),
+          /* @__PURE__ */ jsx("polygon", { id: "Path", points: "38.7151515 24.5546667 36 24.5546667 36 1.088 38.7151515 1.15463195e-13" }),
+          /* @__PURE__ */ jsx("path", { d: "M41,17.0717576 C41,14.7263838 41.7453737,12.7947475 43.2361212,11.2768485 C44.7268687,9.75894949 46.6171313,9 48.9069091,9 C51.1966869,9 53.0869495,9.75894949 54.577697,11.2768485 C56.0684444,12.7947475 56.8138182,14.7263838 56.8138182,17.0717576 C56.8138182,19.4274747 56.0684444,21.3668687 54.577697,22.8899394 C53.0869495,24.4130101 51.1966869,25.1719596 48.9069091,25.1667879 C46.6261818,25.1667879 44.7385051,24.4078384 43.2438788,22.8899394 C41.7492525,21.3720404 41.0012929,19.4326465 41,17.0717576 Z M43.6957576,17.0717576 C43.6957576,18.9141818 44.172202,20.3965253 45.1250909,21.5187879 C46.0779798,22.6410505 47.327596,23.2028283 48.8739394,23.2041212 C50.4254545,23.2041212 51.6802424,22.6423434 52.638303,21.5187879 C53.5963636,20.3952323 54.0786263,18.9128889 54.0850909,17.0717576 C54.0850909,15.2422626 53.6028283,13.7657374 52.638303,12.6421818 C51.6737778,11.5186263 50.4189899,10.9574949 48.8739394,10.9587879 C47.3224242,10.9587879 46.0728081,11.5205657 45.1250909,12.6441212 C44.1773737,13.7676768 43.7009293,15.2435556 43.6957576,17.0717576 Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M70.0824261,23.582303 C69.3285884,24.0285568 68.5220417,24.3790594 67.6814564,24.625697 C66.9065592,24.8487063 66.1042899,24.9622904 65.2979413,24.9631515 C63.1180625,24.9631515 61.3564463,24.2397576 60.0130928,22.7929697 C58.6697392,21.3461818 57.9987089,19.4449293 58.0000019,17.0892121 C58.0000019,14.6882424 58.7175776,12.739798 60.1527291,11.2438788 C61.5878807,9.7479596 63.4626281,9 65.7769716,9 C66.5067857,9.0106757 67.2345208,9.08072506 67.9529716,9.20945455 C68.7804463,9.34650505 69.737214,9.55725253 70.8232746,9.84169697 L72.745214,9.06593939 L72.745214,22.4283636 C72.745214,24.213899 72.6605271,25.520404 72.4911534,26.3478788 C72.3424597,27.1215145 72.0497022,27.860316 71.6281231,28.5258182 C70.9908577,29.4891385 70.0844202,30.2438287 69.0215776,30.696 C67.7834618,31.2231176 66.4474127,31.48094 65.1020625,31.4523636 C64.1335045,31.4523045 63.1689244,31.3284732 62.2317594,31.0838788 C61.252533,30.8239772 60.3068642,30.4510466 59.41382,29.9726061 L58.9696988,26.7512727 L60.9575776,28.0506667 C61.5573127,28.4240193 62.2116549,28.7014604 62.8969716,28.8729697 C63.6457641,29.0836796 64.4192481,29.1938978 65.1970928,29.2007273 C66.7486079,29.2007273 67.9516786,28.8128485 68.8063049,28.0370909 C69.6609312,27.2613333 70.0863049,26.1571717 70.0824261,24.7246061 L70.0824261,23.582303 Z M70.0824261,21.5595152 L70.0824261,12.0739394 C69.4432737,11.7542576 68.7741844,11.4983147 68.0848503,11.3098182 C67.4816476,11.1457578 66.859767,11.0603633 66.2346685,11.0557576 C64.581012,11.0557576 63.2499413,11.6117172 62.2414564,12.7236364 C61.2329716,13.8355556 60.7280827,15.3146667 60.7267897,17.1609697 C60.7267897,18.9348687 61.179315,20.3428687 62.0843655,21.3849697 C62.989416,22.4270707 64.2086483,22.9474747 65.7420625,22.9461818 C66.3845516,22.9385817 67.0221469,22.8332967 67.6329716,22.6339394 C68.4792669,22.3480186 69.2988853,21.9885027 70.0824261,21.5595152 L70.0824261,21.5595152 Z" }),
+          /* @__PURE__ */ jsx("path", { d: "M75,9 L77.8276364,9 L82.2649697,20.6363636 L87.1483636,9 L89.4504242,9 L82.3813333,25.3238788 L82.2649697,25.5546667 C81.1478788,28.0965657 80.2874343,29.9066667 79.6836364,30.9849697 L76.7415758,30.9849697 C77.3683498,30.3346009 77.9302011,29.6246546 78.4191515,28.8652121 C79.0313917,27.8817808 79.5750659,26.8572886 80.046303,25.7990303 L81.0004848,23.7452121 L75,9 Z" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  WordmarkLogo as default
+};
+//# sourceMappingURL=WordmarkLogo.js.map

package/dist/esm/Branding/WordmarkLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WordmarkLogo.js","sources":["../../../src/Branding/WordmarkLogo.tsx"],"sourcesContent":["import React from \"react\";\n\nconst sizes = {\n  small: {\n    height: \"24px\",\n    width: \"100px\",\n  },\n  medium: {\n    height: \"32px\",\n    width: \"133px\",\n  },\n  large: {\n    height: \"48px\",\n    width: \"200px\",\n  },\n};\n\nconst getSize = (size: string) => sizes[size] || sizes.medium;\n\ntype WordmarkLogoProps = {\n  logoFill?: string;\n  letterFill?: string;\n  size?: string;\n  children?: React.ReactNode;\n};\n\nexport default function WordmarkLogo({ size, logoFill, letterFill, ...props }: WordmarkLogoProps) {\n  return (\n    <svg\n      {...getSize(size)}\n      {...props}\n      viewBox=\"0 0 133 32\"\n      style={{ display: \"block\", margin: size === \"medium\" ? \"2px 0\" : null }}\n    >\n      <path\n        fill={letterFill}\n        d=\"M30.6967273,1.13648485 L36.3810909,3.40945455 L36.3810909,23.8758788 C36.3810909,28.2705455 30.9507879,29.0424242 27.2853333,29.5602424 C29.3818182,29.0424242 30.7083636,28.4606061 30.6967273,23.8758788 L30.6967273,5.68436364 L25.0123636,3.40945455 L30.6967273,1.13648485 Z M6.82084848,28.4237576 L6.82084848,15.9204848 C6.82084848,14.6618182 7.76533333,13.238303 8.91151515,12.7476364 L14.7801212,10.2264242 L14.7801212,18.1779394 L20.4644848,21.6048485 C21.6106667,22.1866667 23.8758788,22.2002424 23.8758788,20.4664242 L23.8758788,17.0550303 L21.5990303,15.9166061 L21.5990303,1.56319402e-13 L4.26666667,6.38642424 C1.91030303,7.25333333 3.55271368e-15,9.98593939 3.55271368e-15,12.5071515 L3.55271368e-15,31.2669091 L6.82084848,28.4237576 Z\"\n      />\n      <g transform=\"translate(43.000000, 0.000000)\" fill={logoFill}>\n        <path d=\"M5.14521212,24.2224981 L1.33226763e-14,24.2224981 L1.33226763e-14,9.41134654 L4.75151515,9.41134654 L4.75151515,11.8937708 C5.43733518,11.0060378 6.29475204,10.2653615 7.27272727,9.71583139 C8.16188898,9.23817548 9.15699751,8.9920662 10.166303,9.00019502 C11.7333333,9.00019502 12.9221818,9.44948795 13.7328485,10.3480738 C14.5435152,11.2466597 14.9488485,12.5615688 14.9488485,14.2928011 L14.9488485,24.2224981 L9.83078788,24.2224981 L9.83078788,15.7376496 C9.83078788,14.961892 9.67175758,14.3755486 9.35369697,13.9786193 C9.03563636,13.58169 8.56436364,13.3877506 7.93987879,13.3968011 C7.04258586,13.3968011 6.35216162,13.6980536 5.86860606,14.3005587 C5.38505051,14.9030637 5.14391919,15.7803162 5.14521212,16.9323162 L5.14521212,24.2224981 Z\" />\n        <path d=\"M27.8366061,9 L32.9507879,9 L32.9507879,22.6203636 L28.1992727,24.5190303 L28.1992727,21.6254545 C27.5124636,22.5143219 26.6553593,23.2573653 25.6780606,23.8111515 C24.7938668,24.2845189 23.8048332,24.5279425 22.8019394,24.5190303 C21.2323232,24.5190303 20.0402424,24.0665051 19.225697,23.1614545 C18.4111515,22.256404 18.0025859,20.9408485 18,19.2147879 L18,9 L23.1452121,9 L23.1452121,17.7796364 C23.1452121,18.5553939 23.3042424,19.1443232 23.622303,19.5464242 C23.9403636,19.9485253 24.4116364,20.1482828 25.0361212,20.145697 C25.9411717,20.145697 26.631596,19.8418586 27.1073939,19.2341818 C27.5831919,18.6265051 27.8243232,17.7524848 27.8307879,16.6121212 L27.8366061,9 Z\" />\n        <polygon id=\"Path\" points=\"38.7151515 24.5546667 36 24.5546667 36 1.088 38.7151515 1.15463195e-13\" />\n        <path d=\"M41,17.0717576 C41,14.7263838 41.7453737,12.7947475 43.2361212,11.2768485 C44.7268687,9.75894949 46.6171313,9 48.9069091,9 C51.1966869,9 53.0869495,9.75894949 54.577697,11.2768485 C56.0684444,12.7947475 56.8138182,14.7263838 56.8138182,17.0717576 C56.8138182,19.4274747 56.0684444,21.3668687 54.577697,22.8899394 C53.0869495,24.4130101 51.1966869,25.1719596 48.9069091,25.1667879 C46.6261818,25.1667879 44.7385051,24.4078384 43.2438788,22.8899394 C41.7492525,21.3720404 41.0012929,19.4326465 41,17.0717576 Z M43.6957576,17.0717576 C43.6957576,18.9141818 44.172202,20.3965253 45.1250909,21.5187879 C46.0779798,22.6410505 47.327596,23.2028283 48.8739394,23.2041212 C50.4254545,23.2041212 51.6802424,22.6423434 52.638303,21.5187879 C53.5963636,20.3952323 54.0786263,18.9128889 54.0850909,17.0717576 C54.0850909,15.2422626 53.6028283,13.7657374 52.638303,12.6421818 C51.6737778,11.5186263 50.4189899,10.9574949 48.8739394,10.9587879 C47.3224242,10.9587879 46.0728081,11.5205657 45.1250909,12.6441212 C44.1773737,13.7676768 43.7009293,15.2435556 43.6957576,17.0717576 Z\" />\n        <path d=\"M70.0824261,23.582303 C69.3285884,24.0285568 68.5220417,24.3790594 67.6814564,24.625697 C66.9065592,24.8487063 66.1042899,24.9622904 65.2979413,24.9631515 C63.1180625,24.9631515 61.3564463,24.2397576 60.0130928,22.7929697 C58.6697392,21.3461818 57.9987089,19.4449293 58.0000019,17.0892121 C58.0000019,14.6882424 58.7175776,12.739798 60.1527291,11.2438788 C61.5878807,9.7479596 63.4626281,9 65.7769716,9 C66.5067857,9.0106757 67.2345208,9.08072506 67.9529716,9.20945455 C68.7804463,9.34650505 69.737214,9.55725253 70.8232746,9.84169697 L72.745214,9.06593939 L72.745214,22.4283636 C72.745214,24.213899 72.6605271,25.520404 72.4911534,26.3478788 C72.3424597,27.1215145 72.0497022,27.860316 71.6281231,28.5258182 C70.9908577,29.4891385 70.0844202,30.2438287 69.0215776,30.696 C67.7834618,31.2231176 66.4474127,31.48094 65.1020625,31.4523636 C64.1335045,31.4523045 63.1689244,31.3284732 62.2317594,31.0838788 C61.252533,30.8239772 60.3068642,30.4510466 59.41382,29.9726061 L58.9696988,26.7512727 L60.9575776,28.0506667 C61.5573127,28.4240193 62.2116549,28.7014604 62.8969716,28.8729697 C63.6457641,29.0836796 64.4192481,29.1938978 65.1970928,29.2007273 C66.7486079,29.2007273 67.9516786,28.8128485 68.8063049,28.0370909 C69.6609312,27.2613333 70.0863049,26.1571717 70.0824261,24.7246061 L70.0824261,23.582303 Z M70.0824261,21.5595152 L70.0824261,12.0739394 C69.4432737,11.7542576 68.7741844,11.4983147 68.0848503,11.3098182 C67.4816476,11.1457578 66.859767,11.0603633 66.2346685,11.0557576 C64.581012,11.0557576 63.2499413,11.6117172 62.2414564,12.7236364 C61.2329716,13.8355556 60.7280827,15.3146667 60.7267897,17.1609697 C60.7267897,18.9348687 61.179315,20.3428687 62.0843655,21.3849697 C62.989416,22.4270707 64.2086483,22.9474747 65.7420625,22.9461818 C66.3845516,22.9385817 67.0221469,22.8332967 67.6329716,22.6339394 C68.4792669,22.3480186 69.2988853,21.9885027 70.0824261,21.5595152 L70.0824261,21.5595152 Z\" />\n        <path d=\"M75,9 L77.8276364,9 L82.2649697,20.6363636 L87.1483636,9 L89.4504242,9 L82.3813333,25.3238788 L82.2649697,25.5546667 C81.1478788,28.0965657 80.2874343,29.9066667 79.6836364,30.9849697 L76.7415758,30.9849697 C77.3683498,30.3346009 77.9302011,29.6246546 78.4191515,28.8652121 C79.0313917,27.8817808 79.5750659,26.8572886 80.046303,25.7990303 L81.0004848,23.7452121 L75,9 Z\" />\n      </g>\n    </svg>\n  );\n}\n"],"names":[],"mappings":";AAEA,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAAA,EAET,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,UAAU,CAAC,SAAiB,MAAM,IAAI,KAAK,MAAM;AASvD,SAAwB,aAAa,EAAE,MAAM,UAAU,YAAY,GAAG,SAA4B;AAChG,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG,QAAQ,IAAI;AAAA,MACf,GAAG;AAAA,MACJ,SAAQ;AAAA,MACR,OAAO,EAAE,SAAS,SAAS,QAAQ,SAAS,WAAW,UAAU,KAAA;AAAA,MAEjE,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAM;AAAA,YACN,GAAE;AAAA,UAAA;AAAA,QAAA;AAAA,QAEJ,qBAAC,KAAA,EAAE,WAAU,kCAAiC,MAAM,UAClD,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,GAAE,8uBAAA,CAA8uB;AAAA,UACtvB,oBAAC,QAAA,EAAK,GAAE,wqBAAA,CAAwqB;AAAA,UAChrB,oBAAC,WAAA,EAAQ,IAAG,QAAO,QAAO,0EAAyE;AAAA,UACnG,oBAAC,QAAA,EAAK,GAAE,2iCAAA,CAA2iC;AAAA,UACnjC,oBAAC,QAAA,EAAK,GAAE,u3DAAA,CAAu3D;AAAA,UAC/3D,oBAAC,QAAA,EAAK,GAAE,qXAAA,CAAqX;AAAA,QAAA,EAAA,CAC/X;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { isValidElement } from "react";
+import { useComponentVariant } from "../NDSProvider/ComponentVariantContext.js";
+import BreadcrumbsList from "./BreadcrumbsList.js";
+import { BreadcrumbsListItem, BreadcrumbsListSeparator } from "./BreadcrumbsListItem.js";
+import Flex from "../Flex/Flex.js";
+import Icon from "../Icon/Icon.js";
+const insertSeparators = (items) => {
+  return items.reduce((acc, current, index) => {
+    return acc.concat(
+      current,
+      /* @__PURE__ */ jsx(BreadcrumbsListSeparator, { "aria-hidden": true, className: "separator", children: /* @__PURE__ */ jsx(Icon, { icon: "rightArrow" }) }, `separator-${index}`)
+    );
+  }, []);
+};
+const Breadcrumbs = ({ variant, as = "nav", children, ...props }) => {
+  const componentVariant = useComponentVariant(variant);
+  const allItems = React__default.Children.map(children, (child, index) => {
+    if (!isValidElement(child)) return null;
+    return /* @__PURE__ */ jsx(BreadcrumbsListItem, { variant: componentVariant, children: child }, `child-${index}`);
+  }).filter(Boolean);
+  return /* @__PURE__ */ jsx(Flex, { as, ...props, children: /* @__PURE__ */ jsx(BreadcrumbsList, { children: insertSeparators(allItems) }) });
+};
+export {
+  Breadcrumbs as default
+};
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/esm/Breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../../../src/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import React, { isValidElement } from \"react\";\nimport { Flex } from \"../Flex\";\nimport { Icon } from \"../Icon\";\nimport { FlexProps } from \"../Flex/Flex\";\nimport { ComponentVariant, useComponentVariant } from \"../NDSProvider/ComponentVariantContext\";\nimport BreadcrumbsList from \"./BreadcrumbsList\";\nimport { BreadcrumbsListItem, BreadcrumbsListSeparator } from \"./BreadcrumbsListItem\";\n\nconst insertSeparators = (items: JSX.Element[]) => {\n  return items.reduce((acc: JSX.Element[], current, index) => {\n    return acc.concat(\n      current,\n      <BreadcrumbsListSeparator aria-hidden key={`separator-${index}`} className=\"separator\">\n        <Icon icon=\"rightArrow\" />\n      </BreadcrumbsListSeparator>\n    );\n  }, []);\n};\n\ntype BreadcrumbsProps = FlexProps & { variant?: ComponentVariant };\n\nconst Breadcrumbs = ({ variant, as = \"nav\", children, ...props }: BreadcrumbsProps) => {\n  const componentVariant = useComponentVariant(variant);\n\n  const allItems = React.Children.map(children, (child, index) => {\n    if (!isValidElement(child)) return null;\n\n    return (\n      <BreadcrumbsListItem variant={componentVariant} key={`child-${index}`}>\n        {child}\n      </BreadcrumbsListItem>\n    );\n  }).filter(Boolean);\n\n  return (\n    <Flex as={as} {...props}>\n      <BreadcrumbsList>{insertSeparators(allItems)}</BreadcrumbsList>\n    </Flex>\n  );\n};\n\nexport default Breadcrumbs;\n"],"names":["React"],"mappings":";;;;;;;AAQA,MAAM,mBAAmB,CAAC,UAAyB;AACjD,SAAO,MAAM,OAAO,CAAC,KAAoB,SAAS,UAAU;AAC1D,WAAO,IAAI;AAAA,MACT;AAAA,MACA,oBAAC,0BAAA,EAAyB,eAAW,MAA4B,WAAU,aACzE,UAAA,oBAAC,MAAA,EAAK,MAAK,aAAA,CAAa,EAAA,GADiB,aAAa,KAAK,EAE7D;AAAA,IAAA;AAAA,EAEJ,GAAG,CAAA,CAAE;AACP;AAIA,MAAM,cAAc,CAAC,EAAE,SAAS,KAAK,OAAO,UAAU,GAAG,YAA8B;AACrF,QAAM,mBAAmB,oBAAoB,OAAO;AAEpD,QAAM,WAAWA,eAAM,SAAS,IAAI,UAAU,CAAC,OAAO,UAAU;AAC9D,QAAI,CAAC,eAAe,KAAK,EAAG,QAAO;AAEnC,+BACG,qBAAA,EAAoB,SAAS,kBAC3B,UAAA,SADkD,SAAS,KAAK,EAEnE;AAAA,EAEJ,CAAC,EAAE,OAAO,OAAO;AAEjB,SACE,oBAAC,MAAA,EAAK,IAAS,GAAG,OAChB,8BAAC,iBAAA,EAAiB,UAAA,iBAAiB,QAAQ,EAAA,CAAE,EAAA,CAC/C;AAEJ;"}

package/dist/esm/Breadcrumbs/BreadcrumbsList.js

@@ -0,0 +1,10 @@
+import { styled } from "styled-components";
+const BreadcrumbsList = styled.ol(() => ({
+  margin: 0,
+  padding: 0,
+  display: "flex"
+}));
+export {
+  BreadcrumbsList as default
+};
+//# sourceMappingURL=BreadcrumbsList.js.map

package/dist/esm/Breadcrumbs/BreadcrumbsList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsList.js","sources":["../../../src/Breadcrumbs/BreadcrumbsList.tsx"],"sourcesContent":["import { styled } from \"styled-components\";\n\nconst BreadcrumbsList = styled.ol(() => ({\n  margin: 0,\n  padding: 0,\n  display: \"flex\",\n}));\n\nexport default BreadcrumbsList;\n"],"names":[],"mappings":";AAEA,MAAM,kBAAkB,OAAO,GAAG,OAAO;AAAA,EACvC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AACX,EAAE;"}