@stokr/components-library 3.0.36 → 3.0.38

package/dist/auth/index.js

@@ -1,15 +1,15 @@
 import { configure } from "../config.js";
+import { Auth, DEFAULT_TOKEN_EXPIRY_MS } from "../context/Auth.js";
+import { AuthConsumer, AuthContext, AuthProvider } from "../context/AuthContext.js";
+import { LoadingDots, StokrLoader, StokrLoaderBox } from "../components/StokrLoader/StokrLoader.js";
 import { default as default2 } from "../components/2FA/Connect2FA.js";
 import { default as default3 } from "../components/2FA/enable-2fa-flow.js";
 import { default as default4 } from "../components/2FA/EnterCode.js";
 import { default as default5 } from "../components/2FA/InstallAuthApp.js";
 import { default as default6 } from "../components/2FA/login-with-otp-flow.js";
-import { default as default7 } from "../components/2FA/Sucess2FA.js";
-import { default as default8 } from "../components/2FA/main-flow.js";
-import { default as default9 } from "../components/2FA/ResetCode.js";
-import { Auth, DEFAULT_TOKEN_EXPIRY_MS } from "../context/Auth.js";
-import { AuthConsumer, AuthContext, AuthProvider } from "../context/AuthContext.js";
-import { LoadingDots, StokrLoader, StokrLoaderBox } from "../components/StokrLoader/StokrLoader.js";
+import { default as default7 } from "../components/2FA/main-flow.js";
+import { default as default8 } from "../components/2FA/ResetCode.js";
+import { default as default9 } from "../components/2FA/Sucess2FA.js";
 import { getConfig, resetRuntimeConfig } from "../runtime-config.js";
 export {
   Auth,
@@ -23,11 +23,11 @@ export {
   default5 as InstallAuthApp,
   LoadingDots,
   default6 as LoginWithOTPFlow,
-  default8 as Main2FAFlow,
-  default9 as ResetCode,
+  default7 as Main2FAFlow,
+  default8 as ResetCode,
   StokrLoader,
   StokrLoaderBox,
-  default7 as Sucess2FA,
+  default9 as Sucess2FA,
   configure,
   getConfig,
   resetRuntimeConfig

package/dist/components/2FA/login-with-otp-flow.js

@@ -8,9 +8,9 @@ import stdin_default$2 from "./EnterCode.js";
 import background from "../../static/images/background3.png.js";
 import stdin_default$3 from "./ResetCode.js";
 import { authenticationApi } from "../../api/authenticationApi.js";
+import { useNavigate } from "react-router-dom";
 import { getConfig, getPlatformURL } from "../../runtime-config.js";
 import { navigateToHref } from "../../routing/navigate-app.js";
-import { useNavigate } from "react-router-dom";
 const LoginWithOTP = ({ withBackground, useRelativePathForMenu = false }) => {
   const navigate = useNavigate();
   const { loginUser, waitingFor2fa, firebaseError, loginUserWithTotp, reset2faFlow } = useContext(AuthContext);

package/dist/components/BlogPost/BlogPost.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import { Container, ImageWrapper, LoaderWrapper, LoaderImage, Image, Content, Category, TextWrapper, BottomRow, StyledButton } from "./BlogPost.styles.js";
-import { Breakdown } from "../breakdown/Breakdown.js";
 import { loaderGif } from "../StokrLoader/StokrLoader.js";
+import { Breakdown } from "../breakdown/Breakdown.js";
 const BlogPost = ({
   layout = "image-left",
   category,

package/dist/components/BlogPost/BlogPost.styles.js

@@ -1,8 +1,8 @@
 import rwd from "../../styles/rwd.js";
-import { Breakdown } from "../breakdown/Breakdown.js";
 import theme from "../../styles/theme.js";
 import { Button } from "../Button/Button.styles.js";
 import styled, { css } from "styled-components";
+import { Breakdown } from "../breakdown/Breakdown.js";
 const Content = styled.div.withConfig({
   shouldForwardProp: (props) => props !== "layout"
 })`

package/dist/components/Button/GlareButton.js

@@ -4,7 +4,7 @@ import { Button } from "./Button.styles.js";
 import { colors } from "../../styles/colors.js";
 import { useInView } from "react-intersection-observer";
 import { useState, useRef, useId, useEffect } from "react";
-import styled, { keyframes, css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 const config = {
   colorDark: "rgb(41, 112, 225)",
   colorLight: "#9bfcfd",

package/dist/components/ConfirmModal/ConfirmModal.js

@@ -25,8 +25,8 @@ const ConfirmModalComponent = ({
   barColor,
   renderFooter,
   modalProps,
-  buttonProps,
-  cancelButtonProps,
+  buttonProps = {},
+  cancelButtonProps = {},
   barStyle,
   maxWidth,
   modalStyles,
@@ -96,7 +96,7 @@ const ConfirmModalComponent = ({
                 minWidth: "120px",
                 onClick: handleCancel,
                 ...cancelButtonProps,
-                "data-cy": cancelButtonProps["data-cy"] ?? "confirm-modal-cancel",
+                "data-cy": cancelButtonProps?.["data-cy"] ?? "confirm-modal-cancel",
                 children: cancelText
               }
             ),
@@ -106,7 +106,7 @@ const ConfirmModalComponent = ({
                 minWidth: "120px",
                 onClick: () => handleConfirm(true),
                 ...buttonProps,
-                "data-cy": buttonProps["data-cy"] ?? "confirm-modal-confirm",
+                "data-cy": buttonProps?.["data-cy"] ?? "confirm-modal-confirm",
                 children: confirmText
               }
             )

package/dist/components/Country/CountrySelect.js

@@ -0,0 +1,117 @@
+import { jsx } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { useMemo } from "react";
+import { Select } from "../Input/Select.js";
+import * as Flags from "country-flag-icons/react/3x2";
+import { SelectedChipsTitle, SelectedChipsList, SelectedChip, SelectedChipRemove } from "../Input/Select.styles.js";
+const PillChipsWrapper = styled.div`
+  ${SelectedChipsTitle} {
+    color: #9b9b9b;
+    margin-bottom: 10px;
+  }
+
+  ${SelectedChipsList} {
+    gap: 10px;
+  }
+
+  ${SelectedChip} {
+    padding: 6px 12px 6px 10px;
+    border-color: #d8d8d8;
+    border-radius: 999px;
+    font-size: 13px;
+  }
+
+  ${SelectedChipRemove} {
+    color: #9b9b9b;
+    font-size: 12px;
+    border-radius: 50%;
+    transition:
+      color 0.15s,
+      background-color 0.15s;
+
+    &:hover {
+      color: #202020;
+      background-color: #f0f0f0;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+
+      &:hover {
+        color: #9b9b9b;
+        background-color: transparent;
+      }
+    }
+  }
+`;
+const FlagFor = ({ code }) => {
+  if (!code) return null;
+  const Cmp = Flags[code.toUpperCase()];
+  if (!Cmp) return null;
+  return /* @__PURE__ */ jsx(Cmp, { "aria-hidden": "true", focusable: "false" });
+};
+FlagFor.propTypes = {
+  code: PropTypes.string
+};
+const CountrySelect = (props) => {
+  const {
+    countries,
+    multiple = false,
+    placeholder = multiple ? "Search and select countries" : "Search countries",
+    selectedLabel = "Selected",
+    ...rest
+  } = props;
+  const options = useMemo(
+    () => (countries ?? []).map((c) => ({
+      key: c?.key || c.value?.toString(),
+      ...c,
+      icon: c.icon ? c.icon : /* @__PURE__ */ jsx(FlagFor, { code: c.value })
+    })),
+    [countries]
+  );
+  return /* @__PURE__ */ jsx(PillChipsWrapper, { children: /* @__PURE__ */ jsx(
+    Select,
+    {
+      ...rest,
+      options,
+      multiple,
+      search: true,
+      placeholder,
+      selectedLabel
+    }
+  ) });
+};
+CountrySelect.propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.string,
+  /** Dynamic list returned by your API. `code` must be ISO 3166-1 alpha-2 (e.g. 'be', 'us'). */
+  countries: PropTypes.arrayOf(
+    PropTypes.shape({
+      key: PropTypes.string,
+      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      label: PropTypes.string.isRequired,
+      icon: PropTypes.node
+    })
+  ).isRequired,
+  /** string for single mode, string[] for multi mode */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  multiple: PropTypes.bool,
+  placeholder: PropTypes.string,
+  selectedLabel: PropTypes.string,
+  error: PropTypes.bool,
+  touched: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  onFocus: PropTypes.func,
+  /** Playwright / autocapture: selector on the underlying react-select control */
+  dataCy: PropTypes.string
+};
+export {
+  CountrySelect,
+  FlagFor,
+  Flags
+};

package/dist/components/Header/Header.js

@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
 import stdin_default$1 from "../SmartLink/SmartLink.js";
 import { Button } from "../Button/Button.styles.js";
 import stdin_default$2 from "../SvgIcons/LogoSvg.js";
-import "../SvgIcons/SocialInstagram.js";
 import { MenuNav } from "../MenuNav/MenuNav.styles.js";
 import stdin_default$4 from "../MainMenu/MainMenu.js";
 import { StepsProgressSignup, StepsProgressHeader } from "../StepsProgress/StepsProgress.js";
@@ -17,15 +16,15 @@ import { Collapse } from "react-collapse";
 import { usePrevious, useMobileView } from "../../utils/customHooks.js";
 import { checkTodoStatus } from "../../utils/check-todo-status.js";
 import { hasLoggedInSession } from "../../utils/user-identity.js";
-import { Breakdown } from "../breakdown/Breakdown.js";
 import { socialSvg } from "../Footer/FooterMenu.js";
 import { Wrapper, FlexContainer } from "../Grid/Grid.styles.js";
 import { getFooterGroups } from "../Footer/FooterLayout.js";
 import { getPlatformURL, getConfig } from "../../runtime-config.js";
-import { navigateToHref } from "../../routing/navigate-app.js";
 import { withRouter } from "../../utils/withRouter.js";
 import { sizes } from "../../styles/rwd.js";
 import { track } from "../../analytics/index.js";
+import { navigateToHref } from "../../routing/navigate-app.js";
+import { Breakdown } from "../breakdown/Breakdown.js";
 const UserAvatarComponent = ({ avatar }) => {
   const [photo, setphoto] = useState(avatarPlaceholder);
   const prevAvatar = usePrevious(avatar);

package/dist/components/InfoBox/InfoBox.js

@@ -5,22 +5,23 @@ import { colors } from "../../styles/colors.js";
 const VARIANTS = {
   warning: {
     background: "#FFFBEB",
-    border: colors.warningOrange,
-    iconColor: "black"
+    border: colors.warningYellow,
+    iconColor: colors.warningYellow
   },
   info: {
     background: "#F8FAFC",
     border: colors.blueDark,
-    iconColor: "black"
+    // border: `${colors.blueDark}80`, // 128 (100% opacity in hex): 50% opacity
+    iconColor: colors.blueDark
   },
   error: {
     background: "#FDEDEC",
     border: colors.darkRed,
-    iconColor: "black"
+    iconColor: colors.darkRed
   }
 };
 const Container = styled.div`
-position: relative;
+  position: relative;
   display: flex;
   overflow: hidden;
   align-items: flex-start;
@@ -28,7 +29,7 @@ position: relative;
   gap: 12px;
   padding: 12px 20px 12px 16px;
   background: ${(props) => props.$bg};
-  border: 1px solid ${(props) => props.$border};
+  // border: 1px solid ${(props) => props.$border};
   border-radius: 8px;
   font-size: 12px;
   line-height: 18px;
@@ -68,14 +69,7 @@ const Content = styled.div`
   flex: 1;
   min-width: 0;
 `;
-const InfoBox = ({
-  variant = "warning",
-  children,
-  icon,
-  style,
-  className,
-  noLeftBorder
-}) => {
+const InfoBox = ({ variant = "warning", children, icon, style, className, noLeftBorder }) => {
   const theme = VARIANTS[variant] || VARIANTS.warning;
   const renderIcon = () => {
     if (icon) {
@@ -83,10 +77,20 @@ const InfoBox = ({
     }
     return /* @__PURE__ */ jsx(DefaultIcon, { $color: theme.iconColor });
   };
-  return /* @__PURE__ */ jsxs(Container, { $bg: theme.background, $noLeftBorder: noLeftBorder, $border: theme.border, style, className, children: [
-    renderIcon(),
-    /* @__PURE__ */ jsx(Content, { children })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      $bg: theme.background,
+      $noLeftBorder: noLeftBorder,
+      $border: theme.border,
+      style,
+      className,
+      children: [
+        renderIcon(),
+        /* @__PURE__ */ jsx(Content, { children })
+      ]
+    }
+  );
 };
 export {
   InfoBox

package/dist/components/InfoIcon/InfoIcon.js

@@ -1,9 +1,12 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import "react";
+import DOMPurify from "dompurify";
 import PropTypes from "prop-types";
+import { useId } from "react";
+import parse from "html-react-parser";
 import { Tooltip } from "react-tippy";
-import { Container, Icon } from "./InfoIcon.styles.js";
+import { colors } from "../../styles/colors.js";
 import { IoniconsStyles } from "../../styles/ioniconsStyles.js";
+import { Container, ArrowColorGlobalStyle, Icon } from "./InfoIcon.styles.js";
 const InfoIcon = ({
   title = null,
   html = null,
@@ -14,13 +17,20 @@ const InfoIcon = ({
   noIcon,
   disabled,
   fullWidth,
+  arrow = true,
+  arrowColor = colors.blue,
+  theme = "light",
+  trigger,
   outline = false,
   containerStyle,
   ...props
 }) => {
+  const htmlContent = typeof html === "string" ? parse(DOMPurify.sanitize(html)) : html;
+  const instanceToken = `info-${useId().replace(/[^a-zA-Z0-9]/g, "")}`;
+  const tippyTheme = arrowColor ? `${theme} ${instanceToken}` : theme;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(IoniconsStyles, {}),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       Container,
       {
         noMargin,
@@ -28,20 +38,25 @@ const InfoIcon = ({
         noMarginRight,
         fullWidth,
         style: containerStyle,
-        children: /* @__PURE__ */ jsx(
-          Tooltip,
-          {
-            ...props,
-            position,
-            title,
-            html,
-            theme: "light",
-            arrow: true,
-            duration: 200,
-            disabled,
-            children: noIcon ? props.children : /* @__PURE__ */ jsx(Icon, { outline })
-          }
-        )
+        children: [
+          arrowColor && /* @__PURE__ */ jsx(ArrowColorGlobalStyle, { themeName: instanceToken, color: arrowColor }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              ...props,
+              position,
+              title,
+              trigger,
+              html: htmlContent,
+              useContext: htmlContent != null,
+              theme: tippyTheme,
+              arrow: arrowColor ? true : arrow,
+              duration: 200,
+              disabled,
+              children: noIcon ? props.children : /* @__PURE__ */ jsx(Icon, { outline })
+            }
+          )
+        ]
       }
     )
   ] });
@@ -53,7 +68,12 @@ InfoIcon.propTypes = {
   noMargin: PropTypes.bool,
   noMarginLeft: PropTypes.bool,
   noMarginRight: PropTypes.bool,
-  outline: PropTypes.bool
+  outline: PropTypes.bool,
+  children: PropTypes.node,
+  theme: PropTypes.string,
+  trigger: PropTypes.oneOf(["click", "focus"]),
+  arrow: PropTypes.bool,
+  arrowColor: PropTypes.string
 };
 export {
   InfoIcon,

package/dist/components/InfoIcon/InfoIcon.styles.js

@@ -1,5 +1,19 @@
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 import theme from "../../styles/theme.js";
+const ArrowColorGlobalStyle = createGlobalStyle`
+  .tippy-popper[x-placement^='top'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
+    border-top-color: ${(props) => props.color} !important;
+  }
+  .tippy-popper[x-placement^='bottom'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
+    border-bottom-color: ${(props) => props.color} !important;
+  }
+  .tippy-popper[x-placement^='left'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
+    border-left-color: ${(props) => props.color} !important;
+  }
+  .tippy-popper[x-placement^='right'] .tippy-tooltip.${(props) => props.themeName}-theme [x-arrow] {
+    border-right-color: ${(props) => props.color} !important;
+  }
+`;
 const Container = styled.div.withConfig({
   shouldForwardProp: (props) => !["noMargin", "noMarginLeft", "noMarginRight", "fullWidth"].includes(props)
 })`
@@ -59,6 +73,7 @@ const Icon = styled.i.withConfig({
   }
 `;
 export {
+  ArrowColorGlobalStyle,
   Container,
   Icon
 };

package/dist/components/Input/InputPassword.js

@@ -2,7 +2,6 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import stdin_default$1 from "../SvgIcons/CapsLockSvg.js";
-import "../SvgIcons/SocialInstagram.js";
 import { InfoIcon } from "../InfoIcon/InfoIcon.js";
 import { Wrapper, Label, InputWrap } from "./Input.styles.js";
 import { InfoIconWrapper, ShowPassword, BottomWrap, PasswordStrengthWrap, PasswordStrengthIndicators, PasswordStrengthIndicator, PasswordStrengthText, CapslockIndicator } from "./InputPassword.styles.js";