@stokr/components-library 3.0.30 → 3.0.32

package/dist/analytics/index.js

@@ -95,7 +95,8 @@ function initAnalytics({
       rage_click: true,
       scroll,
       submit: true,
-      capture_text_content: false
+      capture_text_content: false,
+      capture_extra_attrs: ["data-cy"]
     },
     record_sessions_percent: 100,
     record_heatmap_data: true,

package/dist/components/2FA/Connect2FA.js

@@ -44,7 +44,17 @@ const Connect2FA = (props) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, center: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { minWidth: "150px", onClick: changeStep, fluid: true, children: "Continue" }) })
+      /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingTop: true, center: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          minWidth: "150px",
+          id: "enable-2fa-connect-continue-btn",
+          "data-cy": "enable-2fa-connect-continue",
+          onClick: changeStep,
+          fluid: true,
+          children: "Continue"
+        }
+      ) })
     ] }) })
   ] }) });
 };

package/dist/components/2FA/EnterCode.js

@@ -19,7 +19,7 @@ const EnterCode = (props) => {
         /* @__PURE__ */ jsx("h3", { children: "Enter 2FA code" }),
         /* @__PURE__ */ jsx("p", { children: "Enter the log in 2FA code from your authenticator app" })
       ] }) }),
-      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: onModalSwitch && /* @__PURE__ */ jsx(ModalLinkWrap, { children: /* @__PURE__ */ jsx(ModalLink, { type: "button", as: "button", onClick: onModalSwitch, children: "Lost your device?" }) }) })
+      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: onModalSwitch && /* @__PURE__ */ jsx(ModalLinkWrap, { children: /* @__PURE__ */ jsx(ModalLink, { type: "button", as: "button", "data-cy": "2fa-enter-code-lost-device", onClick: onModalSwitch, children: "Lost your device?" }) }) })
     ] }),
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
       Formik,
@@ -38,6 +38,7 @@ const EnterCode = (props) => {
                   id: "otp-input",
                   name: "otpInput",
                   numInputs: 6,
+                  dataCyPrefix: "2fa-enter-code-otp",
                   value: values.otpInput,
                   onChange: (e) => {
                     setFieldValue("otpInput", e);
@@ -48,7 +49,17 @@ const EnterCode = (props) => {
               ),
               /* @__PURE__ */ jsx(FormError, { show: errors.otpInput && touched.otpInput, children: errors.otpInput })
             ] }) }),
-            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "2fa-enter-code-btn", fluid: true, disabled: submitDisabled, children: "Continue" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "submit",
+                id: "2fa-enter-code-btn",
+                "data-cy": "2fa-enter-code-submit",
+                fluid: true,
+                disabled: submitDisabled,
+                children: "Continue"
+              }
+            ) }),
             /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError?.popup === "enter2fa", children: popupError.message }) })
           ] });
         }

package/dist/components/2FA/InstallAuthApp.js

@@ -22,6 +22,8 @@ const InstallAuthApp = (props) => {
         Button,
         {
           minWidth: "150px",
+          id: "enable-2fa-download-app-btn",
+          "data-cy": "enable-2fa-download-auth-app",
           fluid: true,
           onClick: () => {
             window.open("https://onelink.to/ev63j9", "_blank");
@@ -50,6 +52,8 @@ const InstallAuthApp = (props) => {
         Button,
         {
           minWidth: "150px",
+          id: "enable-2fa-install-app-continue-btn",
+          "data-cy": "enable-2fa-install-app-continue",
           onClick: changeStep,
           fluid: true,
           children: "Continue"

package/dist/components/2FA/ResetCode.js

@@ -12,7 +12,7 @@ const ResetCode = (props) => {
         /* @__PURE__ */ jsx("h3", { children: "Lost your device?" }),
         /* @__PURE__ */ jsx("p", { children: "No problem! We are here to help you..." })
       ] }) }),
-      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsx(ModalLinkWrap, { children: /* @__PURE__ */ jsx(ModalLink, { type: "button", as: "button", onClick: onModalSwitch, children: "Enter 2FA code" }) }) })
+      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsx(ModalLinkWrap, { children: /* @__PURE__ */ jsx(ModalLink, { type: "button", as: "button", "data-cy": "2fa-reset-code-back-to-enter-code", onClick: onModalSwitch, children: "Enter 2FA code" }) }) })
     ] }),
     /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(
       "a",
@@ -20,6 +20,7 @@ const ResetCode = (props) => {
         href: "https://stokr.zendesk.com/hc/en-us/requests/new",
         target: "_blank",
         rel: "noreferrer",
+        "data-cy": "2fa-reset-code-contact-support",
         style: { textDecoration: "underline" },
         children: "Contact us to reset your 2FA."
       }

package/dist/components/2FA/Sucess2FA.js

@@ -12,7 +12,11 @@ const Sucess2FA = ({
   titleText = "Success!",
   subTitleLeft = "",
   textRight = "",
-  buttonText = "Continue"
+  buttonText = "Continue",
+  /** DOM id for the primary action button — override per screen (verify email, enable/disable 2FA, etc.) */
+  continueButtonId = "success-flow-continue-btn",
+  /** Playwright / analytics-friendly selector for the primary button */
+  continueButtonDataCy = "success-flow-continue"
 }) => {
   return /* @__PURE__ */ jsx(ModalWrapper, { children: /* @__PURE__ */ jsxs(Row, { children: [
     /* @__PURE__ */ jsxs(Column, { part: 8, children: [
@@ -30,7 +34,9 @@ const Sucess2FA = ({
       /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
         Button,
         {
+          id: continueButtonId,
           minWidth: "240px",
+          "data-cy": continueButtonDataCy,
           onClick: () => {
             onClick();
           },
@@ -42,7 +48,13 @@ const Sucess2FA = ({
   ] }) });
 };
 Sucess2FA.propTypes = {
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
+  titleText: PropTypes.string,
+  subTitleLeft: PropTypes.string,
+  textRight: PropTypes.string,
+  buttonText: PropTypes.string,
+  continueButtonId: PropTypes.string,
+  continueButtonDataCy: PropTypes.string
 };
 var stdin_default = Sucess2FA;
 export {

package/dist/components/2FA/disable-2fa-flow.js

@@ -60,6 +60,8 @@ const Disable2FA = ({ showFlow, setShowFlow, onSuccess, onRequiresRecentLoginErr
       children: /* @__PURE__ */ jsx(ModalInner, { noPadding: true, children: isModalOpen.sucess ? /* @__PURE__ */ jsx(
         stdin_default$1,
         {
+          continueButtonId: "disable-2fa-success-continue-btn",
+          continueButtonDataCy: "disable-2fa-success-continue",
           onClick: () => {
             setShowFlow(false);
             onSuccess?.();
@@ -77,8 +79,19 @@ const Disable2FA = ({ showFlow, setShowFlow, onSuccess, onRequiresRecentLoginErr
         ] }),
         /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsxs(ModalInner, { children: [
           /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingVertical: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("p", { children: "Do you want to remove your log in 2FA authentication?" }) }) }),
-          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { secondary: true, style: { marginRight: 20 }, onClick: () => setShowFlow(false), fluid: true, children: "NO" }) }),
-          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingTop: true, children: /* @__PURE__ */ jsx(Button, { onClick: handleDisableClick, fluid: true, children: "Yes" }) })
+          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              secondary: true,
+              style: { marginRight: 20 },
+              id: "disable-2fa-confirm-no-btn",
+              "data-cy": "disable-2fa-confirm-no",
+              onClick: () => setShowFlow(false),
+              fluid: true,
+              children: "NO"
+            }
+          ) }),
+          /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingHorizontal: true, noPaddingTop: true, children: /* @__PURE__ */ jsx(Button, { id: "disable-2fa-confirm-yes-btn", "data-cy": "disable-2fa-confirm-yes", onClick: handleDisableClick, fluid: true, children: "Yes" }) })
         ] }) })
       ] }) }) })
     }

package/dist/components/2FA/enable-2fa-flow.js

@@ -64,6 +64,8 @@ const Enable2FAFlow = ({ showFlow, setShowFlow, onSuccess, totpData, onRequiresR
   return /* @__PURE__ */ jsx(Modal, { isOpen: showFlow, onClose: () => setShowFlow(false), children: /* @__PURE__ */ jsx(ModalInner, { noPadding: true, children: showSuccess ? /* @__PURE__ */ jsx(
     stdin_default$1,
     {
+      continueButtonId: "enable-2fa-success-continue-btn",
+      continueButtonDataCy: "enable-2fa-success-continue",
       onClick: () => {
         if (onSuccess) onSuccess();
         setshowSuccess(false);
@@ -88,18 +90,21 @@ const Enable2FAFlow = ({ showFlow, setShowFlow, onSuccess, totpData, onRequiresR
           stepsProgressList: [
             {
               id: "app",
+              dataCy: "enable-2fa-progress-app",
               handleClick: () => {
                 stepController.changeStep("app", 0);
               }
             },
             {
               id: "connect",
+              dataCy: "enable-2fa-progress-connect",
               handleClick: () => {
                 stepController.changeStep("connect", 1);
               }
             },
             {
               id: "enter-code",
+              dataCy: "enable-2fa-progress-enter-code",
               handleClick: () => stepController.changeStep("enter-code", 2)
             }
           ],

package/dist/components/2FA/main-flow.js

@@ -129,6 +129,7 @@ const Main2FAFlow = ({
           children: /* @__PURE__ */ jsx(
             stdin_default$1,
             {
+              dataCy: "2fa-settings-toggle",
               value1: "disabled",
               value2: "enabled",
               value1Color: colors.orangishRed,
@@ -194,6 +195,8 @@ const Main2FAFlow = ({
     isFlowopen.requiresRecentLogin && /* @__PURE__ */ jsx(Modal, { isOpen: isFlowopen.requiresRecentLogin, onClose: () => handleFlowClose("requiresRecentLogin"), children: /* @__PURE__ */ jsx(ModalInner, { noPadding: true, children: /* @__PURE__ */ jsx(
       stdin_default$4,
       {
+        continueButtonId: "2fa-requires-recent-login-btn",
+        continueButtonDataCy: "2fa-requires-recent-login-submit",
         onClick: () => {
           onLoginAgainClick?.();
         },

package/dist/components/BackButton/BackButton.js

@@ -1,9 +1,11 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import "react";
 import PropTypes from "prop-types";
-import { StyledBackButtonExternal, BackButtonIcon, StyledBackButton, StyledWindowBackButton } from "./BackButton.styles.js";
+import { useNavigate } from "react-router-dom";
 import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+import { StyledBackButtonExternal, BackButtonIcon, StyledBackButton, StyledWindowBackButton } from "./BackButton.styles.js";
 const BackButton = ({ children, to, href }) => {
+  const navigate = useNavigate();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(IoniconsStyles, {}),
     href ? /* @__PURE__ */ jsxs(StyledBackButtonExternal, { href, children: [
@@ -12,7 +14,7 @@ const BackButton = ({ children, to, href }) => {
     ] }) : to ? /* @__PURE__ */ jsxs(StyledBackButton, { to, children: [
       /* @__PURE__ */ jsx(BackButtonIcon, {}),
       children
-    ] }) : /* @__PURE__ */ jsxs(StyledWindowBackButton, { onClick: () => window.history.back(), children: [
+    ] }) : /* @__PURE__ */ jsxs(StyledWindowBackButton, { onClick: () => navigate(-1), children: [
       /* @__PURE__ */ jsx(BackButtonIcon, {}),
       children
     ] })

package/dist/components/Checklist/ChecklistCard.js

@@ -6,6 +6,7 @@ import { CardContainer, IconBlock, IconCopy, CardTitle, CardDescription } from "
 import { Icon } from "../ToDoList/ToDoListTask.styles.js";
 import { colors } from "../../styles/colors.js";
 import SvgWarningFilled from "../../static/images/warning-filled.svg.js";
+import { Link } from "react-router-dom";
 const ICON_MAP = {
   done: {
     icon: iconsMap.check,
@@ -52,7 +53,7 @@ const ChecklistCard = ({
     }
   );
   if (link && !onClick && !disabled) {
-    return /* @__PURE__ */ jsx("a", { href: link, tabIndex: 0, "aria-disabled": disabled, style: { textDecoration: "none", color: "inherit" }, children: content });
+    return /* @__PURE__ */ jsx(Link, { to: link, tabIndex: 0, "aria-disabled": disabled, style: { textDecoration: "none", color: "inherit" }, children: content });
   }
   return content;
 };

package/dist/components/ConfirmModal/ConfirmModal.js

@@ -89,8 +89,27 @@ const ConfirmModalComponent = ({
             onConfirm: handleConfirm,
             onCancel: handleCancel
           }) }) : /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingHorizontal: true, flex: true, style: { gap: 16 }, children: [
-            showCancel && /* @__PURE__ */ jsx(Button, { outlineBlack: true, minWidth: "120px", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
-            /* @__PURE__ */ jsx(Button, { minWidth: "120px", onClick: () => handleConfirm(true), ...buttonProps, children: confirmText })
+            showCancel && /* @__PURE__ */ jsx(
+              Button,
+              {
+                outlineBlack: true,
+                minWidth: "120px",
+                onClick: handleCancel,
+                ...cancelButtonProps,
+                "data-cy": cancelButtonProps["data-cy"] ?? "confirm-modal-cancel",
+                children: cancelText
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                minWidth: "120px",
+                onClick: () => handleConfirm(true),
+                ...buttonProps,
+                "data-cy": buttonProps["data-cy"] ?? "confirm-modal-confirm",
+                children: confirmText
+              }
+            )
           ] })
         ] }) }),
         showRedBar && /* @__PURE__ */ jsx(RedBar, { barColor, style: barStyle })

package/dist/components/FAQ/FAQ.js

@@ -4,8 +4,13 @@ import { Text } from "../Text/Text.styles.js";
 import { useState } from "react";
 import scrollToElement from "scroll-to-element";
 import { FaqItems, FaqItem, FaqTitle, FaqDropdownIcon, FaqContent, FaqText } from "./FAQ.styles.js";
+function slugFromTitle(title) {
+  if (title == null) return "";
+  const raw = typeof title === "string" ? title : "";
+  return raw.toLowerCase().trim().slice(0, 48).replace(/\s+/g, "-").replace(/[^a-z0-9_-]/g, "");
+}
 const FAQ = (props) => {
-  const { items, noScroll, scrollRef, modalViewMore, withTextStyling } = props;
+  const { items, noScroll, scrollRef, modalViewMore, withTextStyling, dataCyPrefix = "faq" } = props;
   const [activeIndex, setActiveIndex] = useState(null);
   const onTitleClick = (e, index) => {
     e.persist();
@@ -30,27 +35,34 @@ const FAQ = (props) => {
     fontWeight: "300",
     lineHeight: "16px"
   };
-  return /* @__PURE__ */ jsx(FaqItems, { children: items.map((item, index) => (
-    // eslint-disable-next-line @eslint-react/no-array-index-key
-    /* @__PURE__ */ jsxs(FaqItem, { children: [
-      /* @__PURE__ */ jsxs(
-        FaqTitle,
-        {
-          isActive: activeIndex === index,
-          onClick: (e) => onTitleClick(e, index),
-          modalViewMore,
-          children: [
-            item.title,
-            /* @__PURE__ */ jsx(FaqDropdownIcon, {})
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(FaqContent, { isOpened: activeIndex === index, children: !Array.isArray(item.content) ? /* @__PURE__ */ jsx(FaqText, { children: item.content }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx("br", {}),
-        /* @__PURE__ */ jsx(Text, { style: withTextStyling ? textStyling : {}, children: /* @__PURE__ */ jsx("ul", { children: item.content.map((answer) => /* @__PURE__ */ jsx("li", { children: answer }, answer)) }) })
-      ] }) })
-    ] }, index)
-  )) });
+  return /* @__PURE__ */ jsx(FaqItems, { "data-cy": `${dataCyPrefix}-accordion`, children: items.map((item, index) => {
+    const titleSlug = slugFromTitle(item.title);
+    const itemCy = titleSlug ? `${dataCyPrefix}-item-${titleSlug}` : `${dataCyPrefix}-item-${index}`;
+    return (
+      // eslint-disable-next-line @eslint-react/no-array-index-key -- FAQ order is content-defined
+      /* @__PURE__ */ jsxs(FaqItem, { "data-cy": `${itemCy}-wrap`, children: [
+        /* @__PURE__ */ jsxs(
+          FaqTitle,
+          {
+            type: "button",
+            "data-cy": `${itemCy}-toggle`,
+            "aria-expanded": activeIndex === index,
+            isActive: activeIndex === index,
+            onClick: (e) => onTitleClick(e, index),
+            modalViewMore,
+            children: [
+              item.title,
+              /* @__PURE__ */ jsx(FaqDropdownIcon, {})
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(FaqContent, { "data-cy": `${itemCy}-panel`, isOpened: activeIndex === index, children: !Array.isArray(item.content) ? /* @__PURE__ */ jsx(FaqText, { children: item.content }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("br", {}),
+          /* @__PURE__ */ jsx(Text, { style: withTextStyling ? textStyling : {}, children: /* @__PURE__ */ jsx("ul", { children: item.content.map((answer) => /* @__PURE__ */ jsx("li", { children: answer }, answer)) }) })
+        ] }) })
+      ] }, index)
+    );
+  }) });
 };
 FAQ.propTypes = {
   items: PropTypes.arrayOf(
@@ -58,7 +70,9 @@ FAQ.propTypes = {
       title: PropTypes.node.isRequired,
       content: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.node]).isRequired
     })
-  ).isRequired
+  ).isRequired,
+  /** Prefix for data-cy: `{prefix}-accordion`, `{prefix}-item-{slug}-toggle`, etc. */
+  dataCyPrefix: PropTypes.string
 };
 var stdin_default = FAQ;
 export {

package/dist/components/Footer/FooterMenu.styles.js

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import { colors } from "../../styles/colors.js";
 import theme from "../../styles/theme.js";
+import { Link as Link$1 } from "react-router-dom";
 const Container = styled.div`
   z-index: 2;
   position: relative;
@@ -185,7 +186,7 @@ const Item = styled.li.withConfig({
     padding-right: 16px;
   }
 `;
-const Link = styled.a`
+const Link = styled(Link$1)`
   display: inline-block;
   font-family: 'Open Sans';
   font-weight: bold;

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.js

@@ -43,7 +43,17 @@ class ForgotPasswordModal extends PureComponent {
         ] }) }),
         /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
           footerTextContent,
-          /* @__PURE__ */ jsx(ModalLink, { type: "button", to: "#", as: "button", onClick: onModalSwitch, children: "Log in" })
+          /* @__PURE__ */ jsx(
+            ModalLink,
+            {
+              type: "button",
+              to: "#",
+              as: "button",
+              "data-cy": "forgot-password-modal-switch-to-login",
+              onClick: onModalSwitch,
+              children: "Log in"
+            }
+          )
         ] }) })
       ] }),
       /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: popupSuccess.popup !== "forgot" ? /* @__PURE__ */ jsx(
@@ -69,12 +79,23 @@ class ForgotPasswordModal extends PureComponent {
                     error: !!errors.email,
                     touched: !!touched.email,
                     onChange: handleChange,
-                    onBlur: handleBlur
+                    onBlur: handleBlur,
+                    "data-cy": "forgot-password-modal-email-input"
                   }
                 ),
                 /* @__PURE__ */ jsx(FormError, { show: errors.email && touched.email, children: errors.email })
               ] }) }),
-              /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "forgot-password-submit-btn", fluid: true, disabled: submitDisabled, children: isActionLoading === "forgot" ? "Sending Reset Link" : "Send Reset Link" }) }),
+              /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "submit",
+                  id: "forgot-password-submit-btn",
+                  "data-cy": "forgot-password-modal-submit",
+                  fluid: true,
+                  disabled: submitDisabled,
+                  children: isActionLoading === "forgot" ? "Sending Reset Link" : "Send Reset Link"
+                }
+              ) }),
               /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "forgot", children: popupError.message }) })
             ] });
           }

package/dist/components/Header/Header.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useMemo, useState, useEffect } from "react";
 import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
 import { Button } from "../Button/Button.styles.js";
 import stdin_default$1 from "../SvgIcons/LogoSvg.js";
 import "../SvgIcons/SocialInstagram.js";
@@ -65,7 +66,7 @@ const RenderSubMenu = ({
       /* @__PURE__ */ jsx("a", { children: title }),
       /* @__PURE__ */ jsx(ArrowDown, { displayAlways: true, isOpened: isActive, style: { right: "-2em", position: "absolute" } })
     ] }) }),
-    /* @__PURE__ */ jsx(Collapse, { isOpened: isActive, children: subMenuItems.map((item) => /* @__PURE__ */ jsx(MobileMenuItem, { red: true, children: /* @__PURE__ */ jsx(MobileMenuLink, { href: basePlatformUrl + item.link, children: item.name }) }, item.name)) })
+    /* @__PURE__ */ jsx(Collapse, { isOpened: isActive, children: subMenuItems.map((item) => /* @__PURE__ */ jsx(MobileMenuItem, { red: true, children: /* @__PURE__ */ jsx(MobileMenuLink, { to: basePlatformUrl + item.link, children: item.name }) }, item.name)) })
   ] });
 };
 function HeaderView({
@@ -189,12 +190,12 @@ function HeaderView({
     withSidebar && /* @__PURE__ */ jsx(SidebarToggle, { isSidebarExpanded, onClick: sidebarHandler, children: /* @__PURE__ */ jsx(HamburgerIcon, {}) }),
     /* @__PURE__ */ jsxs(HeaderInner, { withSidebar, children: [
       /* @__PURE__ */ jsxs(MainNavWrap, { hasProgress: progress, children: [
-        /* @__PURE__ */ jsx(Logo, { isHighlight: currentActiveMenu === "main", children: /* @__PURE__ */ jsx("a", { href: platformURL, "data-cy": "logo-nav-link", children: /* @__PURE__ */ jsx(stdin_default$1, {}) }) }),
+        /* @__PURE__ */ jsx(Logo, { isHighlight: currentActiveMenu === "main", children: /* @__PURE__ */ jsx(Link, { to: newPlatformUrl || "/", "data-cy": "logo-nav-link", children: /* @__PURE__ */ jsx(stdin_default$1, {}) }) }),
         !progress && /* @__PURE__ */ jsx(HeaderMainNav, { children: /* @__PURE__ */ jsx(MenuNav, { children: /* @__PURE__ */ jsxs("ul", { children: [
           /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "a",
+            Link,
             {
-              href: newPlatformUrl + "/featured-assets",
+              to: newPlatformUrl + "/featured-assets",
               "data-cy": "invest-nav-link",
               onClick: () => track("header_link_clicked", { link: "invest" }),
               children: "Invest"
@@ -223,9 +224,9 @@ function HeaderView({
             }
           ) }),
           /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            "a",
+            Link,
             {
-              href: newPlatformUrl + "/team",
+              to: newPlatformUrl + "/team",
               "data-cy": "team-nav-link",
               onClick: () => track("header_link_clicked", { link: "team" }),
               children: "Team"
@@ -298,7 +299,7 @@ function HeaderView({
       ] }),
       /* @__PURE__ */ jsxs(MobileMenu, { isActive: currentActiveMenu === "main", withSidebar, children: [
         /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, children: /* @__PURE__ */ jsx(MenuNav, { mobile: true, children: /* @__PURE__ */ jsxs("ul", { children: [
-          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { href: newPlatformUrl + "/featured-assets", "data-cy": "invest-nav-link", children: "Invest" }) }),
+          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { to: newPlatformUrl + "/featured-assets", "data-cy": "invest-nav-link", children: "Invest" }) }),
           /* @__PURE__ */ jsx(
             RenderSubMenu,
             {
@@ -323,16 +324,15 @@ function HeaderView({
               }
             }
           ),
-          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { href: newPlatformUrl + "/team", children: "Team" }) })
+          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { to: newPlatformUrl + "/team", children: "Team" }) })
         ] }) }) }) }),
         hasLoggedInSession(user) ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          !signupFlow && /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, flexColumn: true, borderTop: true, children: /* @__PURE__ */ jsx(MenuNav, { mobile: true, children: /* @__PURE__ */ jsx("ul", { children: isAdmin ? /* @__PURE__ */ jsx(Fragment, { children: isVentureDashboard ? /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx("a", { href: "/settings", children: "Settings" }) }) : /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
-            "a",
+          !signupFlow && /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, flexColumn: true, borderTop: true, children: /* @__PURE__ */ jsx(MenuNav, { mobile: true, children: /* @__PURE__ */ jsx("ul", { children: isAdmin ? /* @__PURE__ */ jsx(Fragment, { children: isVentureDashboard ? /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(Link, { to: "/settings", children: "Settings" }) }) : /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
+            Link,
             {
-              href: getConfig("adminUrl"),
+              to: getConfig("adminUrl"),
               onClick: (e) => {
                 e.preventDefault();
-                navigateToHref(navigate, getConfig("adminUrl"));
                 toggleMenu("main");
               },
               children: "Dashboard"
@@ -340,16 +340,11 @@ function HeaderView({
           ) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsxs(MobileMenuItem, { children: [
               /* @__PURE__ */ jsx(
-                "a",
+                Link,
                 {
-                  href: newPlatformUrlForUserMenu ? `${newPlatformUrlForUserMenu}/overview` : "/overview",
+                  to: newPlatformUrlForUserMenu ? `${newPlatformUrlForUserMenu}/overview` : "/overview",
                   onClick: (e) => {
                     e.preventDefault();
-                    if (newPlatformUrlForUserMenu) {
-                      navigateToHref(navigate, getConfig("dashboardUrl") + "/overview");
-                    } else {
-                      navigate("/overview");
-                    }
                     toggleMenu("main");
                   },
                   children: "Dashboard"
@@ -358,25 +353,25 @@ function HeaderView({
               checkTodoStatus(user) > 0 && /* @__PURE__ */ jsx(NotificationCounter, { mobileMenu: true, children: checkTodoStatus(user) })
             ] }),
             /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
-              "a",
+              Link,
               {
-                href: `${newPlatformUrlForUserMenu}/settings/profile-and-privacy`,
+                to: `${newPlatformUrlForUserMenu}/settings/profile-and-privacy`,
                 onClick: () => toggleMenu("main"),
                 children: "Profile and Privacy"
               }
             ) }),
             /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
-              "a",
+              Link,
               {
-                href: `${newPlatformUrlForUserMenu}/settings/liquid-address`,
+                to: `${newPlatformUrlForUserMenu}/settings/liquid-address`,
                 onClick: () => toggleMenu("main"),
                 children: "Liquid Addresses"
               }
             ) }),
             /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
-              "a",
+              Link,
               {
-                href: `${newPlatformUrlForUserMenu}/settings/investment-eligibility`,
+                to: `${newPlatformUrlForUserMenu}/settings/investment-eligibility`,
                 onClick: () => toggleMenu("main"),
                 children: "Investment eligibility"
               }

package/dist/components/Header/Header.styles.js

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { Link } from "react-router-dom";
 import rwd, { rwdMax } from "../../styles/rwd.js";
 import { colors } from "../../styles/colors.js";
 import spacing from "../../styles/spacing.js";
@@ -363,7 +364,7 @@ const MobileMenuItem = styled.li.withConfig({
 const MobileMenuWrapper = styled.div`
   cursor: pointer;
 `;
-const MobileMenuLink = styled.a`
+const MobileMenuLink = styled(Link)`
   width: 100%;
 `;
 const MobileMenuPart = styled.div.withConfig({