@stokr/components-library 3.0.31 → 3.0.33

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

@@ -11,7 +11,7 @@ import { authenticationApi } from "../../api/authenticationApi.js";
 import { getConfig, getPlatformURL } from "../../runtime-config.js";
 import { navigateToHref } from "../../routing/navigate-app.js";
 import { useNavigate } from "react-router-dom";
-const LoginWithOTP = ({ withBackground }) => {
+const LoginWithOTP = ({ withBackground, useRelativePathForMenu = false }) => {
   const navigate = useNavigate();
   const { loginUser, waitingFor2fa, firebaseError, loginUserWithTotp, reset2faFlow } = useContext(AuthContext);
   const [isModalOpen, setIsModalOpen] = useState({
@@ -60,7 +60,7 @@ const LoginWithOTP = ({ withBackground }) => {
     });
   };
   const backgroundProp = `url(${background}) left top no-repeat`;
-  return /* @__PURE__ */ jsxs(Layout, { noHeader: true, noFooter: true, children: [
+  return /* @__PURE__ */ jsxs(Layout, { noHeader: true, noFooter: true, useRelativePathForMenu, children: [
     /* @__PURE__ */ jsx(
       stdin_default$1,
       {

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/Button/GlareButton.js

@@ -0,0 +1,273 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+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";
+const config = {
+  colorDark: "rgb(41, 112, 225)",
+  colorLight: "#9bfcfd",
+  colorFooter: colors.blue,
+  strokeWidth: 2,
+  padding: 5,
+  baseHeight: 50
+};
+const glareAnimation = keyframes`
+  0% { width: 0; }
+  50% { width: 200%; }
+  75% { opacity: 1; }
+  100% { width: 400%; opacity: 0; }
+`;
+const ButtonWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["nowrap", "fullWidth"].includes(props)
+})`
+  position: relative;
+  display: inline-block;
+
+  ${({ nowrap }) => !nowrap && css`
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0);
+    `}
+
+  ${({ fullWidth }) => fullWidth && css`
+      width: 100%;
+    `}
+`;
+const StyledButton = styled(Button).withConfig({
+  shouldForwardProp: (props) => !["beauty", "backgroundColor", "textColor", "borderColor", "fullWidth", "disabledColor"].includes(props)
+})`
+  position: relative;
+  margin: ${config.padding}px;
+  background-color: ${(props) => props.backgroundColor || "inherit"};
+  color: ${(props) => props.textColor || "inherit"};
+  border-color: ${(props) => props.borderColor || "inherit"};
+
+  ${({ fullWidth }) => fullWidth && css`
+      width: calc(100% - ${config.padding * 2}px);
+    `}
+
+  &:disabled {
+    background-color: ${(props) => props.disabledColor || "#333"} !important;
+    color: rgba(255, 255, 255, 0.5) !important;
+    border-color: #555 !important;
+  }
+`;
+const ButtonGlare = styled.svg`
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+`;
+const GlareShape = styled.rect.withConfig({
+  shouldForwardProp: (props) => !["animationDuration"].includes(props)
+})`
+  animation: ${glareAnimation} ${(props) => props.animationDuration || 4}s linear infinite;
+`;
+const GlareButton = ({
+  children,
+  nowrap = false,
+  onClick,
+  disabled = false,
+  fullWidth = false,
+  disabledColor = "#333",
+  buttonId = "glare-button",
+  className,
+  backgroundColor,
+  textColor,
+  borderColor,
+  glareColorDark = config.colorDark,
+  glareColorLight = config.colorLight,
+  animationDuration = 4,
+  ...props
+}) => {
+  const [isButtonVisible, setIsButtonVisible] = useState(false);
+  const [dimensions, setDimensions] = useState({
+    width: 295,
+    height: config.baseHeight
+  });
+  const buttonRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const observerRef = useRef(null);
+  const mediaQueryRef = useRef(null);
+  const ids = useRef({
+    linearGradient: `gradient-${useId()}`,
+    fadeGradient: `fade-gradient-${useId()}`,
+    staticMask: `static-mask-${useId()}`,
+    mask: `mask-${useId()}`,
+    fadeMask: `fade-mask-${useId()}`
+  });
+  const updateDimensions = () => {
+    if (!buttonRef.current || !wrapperRef.current) return;
+    const buttonRect = buttonRef.current.getBoundingClientRect();
+    setDimensions({
+      width: buttonRect.width + config.padding * 2,
+      height: buttonRect.height + config.padding * 2
+    });
+  };
+  const handleButtonVisibility = (isVisible) => {
+    setIsButtonVisible(isVisible);
+  };
+  const { ref: windowViewportRef } = useInView({
+    threshold: 0,
+    // partialVisibility equivalent - triggers as soon as any part is visible
+    onChange: (inView, _entry) => {
+      handleButtonVisibility(inView);
+    }
+  });
+  useEffect(() => {
+    let mediaTimeoutId;
+    mediaQueryRef.current = window.matchMedia("(max-width: 768px)");
+    const handleMediaChange = (_event) => {
+      if (mediaTimeoutId != null) clearTimeout(mediaTimeoutId);
+      mediaTimeoutId = setTimeout(updateDimensions, 400);
+    };
+    mediaQueryRef.current.addEventListener("change", handleMediaChange);
+    observerRef.current = new ResizeObserver(updateDimensions);
+    if (buttonRef.current) {
+      observerRef.current.observe(buttonRef.current);
+      updateDimensions();
+    }
+    return () => {
+      if (mediaTimeoutId != null) clearTimeout(mediaTimeoutId);
+      mediaQueryRef.current.removeEventListener("change", handleMediaChange);
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: windowViewportRef, children: /* @__PURE__ */ jsxs(ButtonWrapper, { ref: wrapperRef, nowrap, fullWidth, className, children: [
+    /* @__PURE__ */ jsxs(
+      ButtonGlare,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: `0 0 ${dimensions.width} ${dimensions.height}`,
+        preserveAspectRatio: "none",
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("filter", { id: "glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+              /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "100", result: "coloredBlur" }),
+              /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ jsx("feMergeNode", { in: "coloredBlur" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${ids.current.linearGradient}`, x1: "0%", y1: "50%", x2: "100%", y2: "50%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: glareColorDark, stopOpacity: "0" }),
+              /* @__PURE__ */ jsx("stop", { offset: "20%", stopColor: glareColorDark, stopOpacity: "1" }),
+              /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: glareColorDark }),
+              /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: glareColorLight }),
+              /* @__PURE__ */ jsx("stop", { offset: "80%", stopColor: glareColorDark }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: glareColorDark, stopOpacity: "0" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${ids.current.fadeGradient}`, x1: "0%", y1: "25%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "white", stopOpacity: "1" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+            ] }),
+            /* @__PURE__ */ jsx("mask", { id: `${ids.current.staticMask}`, children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: config.strokeWidth,
+                y: config.strokeWidth,
+                width: dimensions.width - config.strokeWidth * 2,
+                height: dimensions.height - config.strokeWidth * 2,
+                rx: (dimensions.height - config.strokeWidth * 2) / 2,
+                ry: (dimensions.height - config.strokeWidth * 2) / 2,
+                stroke: "#FFFFFF",
+                strokeWidth: config.strokeWidth + 1,
+                fill: "none"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("mask", { id: `${ids.current.mask}`, children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: config.strokeWidth,
+                y: config.strokeWidth,
+                width: dimensions.width - config.strokeWidth * 2,
+                height: dimensions.height - config.strokeWidth * 2,
+                rx: (dimensions.height - config.strokeWidth * 2) / 2,
+                ry: (dimensions.height - config.strokeWidth * 2) / 2,
+                stroke: "#FFFFFF",
+                strokeWidth: config.strokeWidth + 1
+              }
+            ) }),
+            /* @__PURE__ */ jsx("mask", { id: `${ids.current.fadeMask}`, children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: config.strokeWidth,
+                y: config.strokeWidth,
+                width: dimensions.width - config.strokeWidth * 2,
+                height: dimensions.height - config.strokeWidth * 2,
+                rx: (dimensions.height - config.strokeWidth * 2) / 2,
+                ry: (dimensions.height - config.strokeWidth * 2) / 2,
+                fill: `url(#${ids.current.fadeGradient})`
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "0",
+              y: "0",
+              width: dimensions.width,
+              height: dimensions.height,
+              fill: glareColorDark,
+              mask: `url(#${ids.current.staticMask})`,
+              filter: "url(#glow)"
+            }
+          ),
+          isButtonVisible && /* @__PURE__ */ jsx("g", { mask: `url(#${ids.current.fadeMask})`, children: /* @__PURE__ */ jsx(
+            GlareShape,
+            {
+              x: dimensions.width * -0.5,
+              y: config.strokeWidth,
+              width: dimensions.width * 2.5,
+              height: dimensions.height - config.strokeWidth * 2,
+              fill: `url(#${ids.current.linearGradient})`,
+              mask: `url(#${ids.current.mask})`,
+              animationDuration
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StyledButton,
+      {
+        beauty: true,
+        disabled,
+        id: buttonId,
+        onClick,
+        fullWidth,
+        disabledColor,
+        backgroundColor,
+        textColor,
+        borderColor,
+        ref: buttonRef,
+        ...props,
+        "data-cy": props["data-cy"] ?? buttonId,
+        children
+      }
+    )
+  ] }) });
+};
+GlareButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  nowrap: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  disabledColor: PropTypes.string,
+  buttonId: PropTypes.string,
+  className: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  textColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  glareColorDark: PropTypes.string,
+  glareColorLight: PropTypes.string,
+  animationDuration: PropTypes.number
+};
+export {
+  GlareButton
+};

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/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

@@ -190,7 +190,7 @@ 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(Link, { to: newPlatformUrl || "/", "data-cy": "logo-nav-link", children: /* @__PURE__ */ jsx(stdin_default$1, {}) }) }),
+        /* @__PURE__ */ jsx(Logo, { isHighlight: currentActiveMenu === "main", children: useRelativePathForMenu ? /* @__PURE__ */ jsx("a", { href: platformURL, "data-cy": "logo-nav-link", children: /* @__PURE__ */ jsx(stdin_default$1, {}) }) : /* @__PURE__ */ jsx(Link, { to: "/", "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(
             Link,

package/dist/components/Input/InputPassword.js

@@ -22,7 +22,12 @@ const InputPassword = (props) => {
     touched = false,
     info = "",
     showStrength = false,
-    autoComplete = "current-password"
+    autoComplete = "current-password",
+    onChange,
+    onBlur,
+    onFocus,
+    toggleDataCy,
+    ...domRest
   } = props;
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const [isCapslockOn, setIsCapslockOn] = useState(false);
@@ -37,16 +42,16 @@ const InputPassword = (props) => {
   const handleCapslock = (e) => {
     setIsCapslockOn(e.getModifierState("CapsLock"));
   };
-  const onFocus = (e, field) => {
-    props.onFocus?.(e, field);
+  const handleFocus = (e, field) => {
+    onFocus?.(e, field);
     setHasFocus(true);
   };
-  const onBlur = (e, field) => {
-    if (props.onBlur) props.onBlur(e, field);
+  const handleBlur = (e, field) => {
+    onBlur?.(e, field);
     setHasFocus(false);
   };
-  const onChange = (e, field) => {
-    props.onChange?.(e, field);
+  const handleChange = (e, field) => {
+    onChange?.(e, field);
   };
   const passwordStrengthFunction = () => {
     if (value.length === 0) {
@@ -67,19 +72,28 @@ const InputPassword = (props) => {
     /* @__PURE__ */ jsx(InputWrap, { error: error && touched, children: /* @__PURE__ */ jsx(
       "input",
       {
+        ...domRest,
         type: isPasswordVisible ? "text" : "password",
         id,
         name,
         value,
         autoComplete,
-        onChange,
-        onBlur,
-        onFocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
         onKeyUp: handleCapslock,
         onKeyDown: handleCapslock
       }
     ) }),
-    /* @__PURE__ */ jsx(ShowPassword, { onClick: togglePasswordVisibility, children: isPasswordVisible ? /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye-off" }) : /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye" }) }),
+    /* @__PURE__ */ jsx(
+      ShowPassword,
+      {
+        type: "button",
+        onClick: togglePasswordVisibility,
+        "data-cy": toggleDataCy ?? `${id}-password-visibility-toggle`,
+        children: isPasswordVisible ? /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye-off" }) : /* @__PURE__ */ jsx("i", { className: "ion ion-md-eye" })
+      }
+    ),
     /* @__PURE__ */ jsxs(BottomWrap, { children: [
       showStrength ? /* @__PURE__ */ jsxs(PasswordStrengthWrap, { children: [
         /* @__PURE__ */ jsxs(PasswordStrengthIndicators, { passwordStrength, children: [
@@ -112,7 +126,8 @@ InputPassword.propTypes = {
   onFocus: PropTypes.func,
   info: PropTypes.string,
   showStrength: PropTypes.bool,
-  autoComplete: PropTypes.string
+  autoComplete: PropTypes.string,
+  toggleDataCy: PropTypes.string
 };
 var stdin_default = InputPassword;
 export {

package/dist/components/Input/OtpInput.js

@@ -23,7 +23,18 @@ const Separator = styled.span`
   `}
 `;
 const OtpInput = (props) => {
-  const { value, numInputs = 4, RenderSeparator = Separator, inputType = "text", shouldAutoFocus = true, label } = props;
+  const {
+    value,
+    numInputs = 4,
+    RenderSeparator = Separator,
+    inputType = "text",
+    shouldAutoFocus = true,
+    label,
+    /** Per-digit selectors: `{prefix}-digit-0`, … */
+    dataCyPrefix,
+    onChange,
+    ...otpProps
+  } = props;
   const [labelUp, setLabelUp] = useState(false);
   const [hasFocus, setHasFocus] = useState(false);
   const checkLabel = (focus) => {
@@ -40,10 +51,9 @@ const OtpInput = (props) => {
     if (value && !labelUp) setLabelUp(true);
   }, [value, labelUp]);
   const handleChange = (e, field) => {
-    const { onChange } = props;
     onChange?.(e, field);
   };
-  return /* @__PURE__ */ jsxs(Wrapper, { children: [
+  return /* @__PURE__ */ jsxs(Wrapper, { ...dataCyPrefix ? { "data-cy": `${dataCyPrefix}-wrapper` } : {}, children: [
     label && /* @__PURE__ */ jsx(Label, { isUp: true, style: { lineHeight: "inherit", top: "-5px" }, children: label }),
     /* @__PURE__ */ jsx(InputWrap, { children: /* @__PURE__ */ jsx(
       Input,
@@ -55,10 +65,14 @@ const OtpInput = (props) => {
         shouldAutoFocus,
         inputStyle,
         renderSeparator: /* @__PURE__ */ jsx(RenderSeparator, {}),
-        renderInput: (_props) => {
-          return /* @__PURE__ */ jsx("input", { ..._props });
-        },
-        ...props
+        renderInput: (inputProps, index) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...inputProps,
+            ...dataCyPrefix ? { "data-cy": `${dataCyPrefix}-digit-${index}` } : {}
+          }
+        ),
+        ...otpProps
       }
     ) })
   ] });

package/dist/components/Input/Select.js

@@ -22,6 +22,11 @@ const SelectMenuListWithScroll = (props) => {
 SelectMenuListWithScroll.propTypes = {
   children: PropTypes.node.isRequired
 };
+function createControlWithDataCy(dataCy) {
+  return function ControlWithDataCy(ctlProps) {
+    return /* @__PURE__ */ jsx(components.Control, { ...ctlProps, innerProps: { ...ctlProps.innerProps, "data-cy": dataCy } });
+  };
+}
 const Select = (props) => {
   const {
     id,
@@ -36,6 +41,7 @@ const Select = (props) => {
     menuHeight,
     creatable = false,
     formatCreateLabel = null,
+    dataCy,
     ...otherProps
   } = props;
   const [labelUp, setLabelUp] = useState(!!value);
@@ -87,7 +93,8 @@ const Select = (props) => {
   const selectComponents = {
     DropdownIndicator,
     IndicatorSeparator: null,
-    MenuList: SelectMenuListWithScroll
+    MenuList: SelectMenuListWithScroll,
+    ...dataCy ? { Control: createControlWithDataCy(dataCy) } : {}
   };
   const currentValue = creatable ? options?.find((option) => option.value === value) || (value ? { value, label: value } : null) : options?.find((option) => option.value === value);
   return /* @__PURE__ */ jsxs(Wrapper, { children: [
@@ -136,7 +143,9 @@ Select.propTypes = {
   formatCreateLabel: PropTypes.func,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,
-  onFocus: PropTypes.func
+  onFocus: PropTypes.func,
+  /** Playwright / autocapture: selector on the react-select control */
+  dataCy: PropTypes.string
 };
 export {
   Select,