@stokr/components-library 3.0.31 → 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/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/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,

package/dist/components/Input/TableFilterDropdown.js

@@ -80,6 +80,10 @@ const ClearAllOption = styled.div`
     background-color: ${colors.grey};
   }
 `;
+function slugForDataCy(text) {
+  if (text == null || text === "") return "";
+  return String(text).toLowerCase().trim().replace(/\s+/g, "-").replace(/[^a-z0-9_-]/g, "");
+}
 const TableFilterDropdown = ({
   label,
   options,
@@ -93,8 +97,10 @@ const TableFilterDropdown = ({
   menuTop = 8,
   showClearAll = false,
   clearAllText = "Clear all",
+  dataCy,
   ...props
 }) => {
+  const triggerDataCy = dataCy ?? (label ? `table-filter-${slugForDataCy(label)}` : "table-filter-dropdown");
   const [isOpen, setIsOpen] = useState(false);
   const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
   const containerRef = useRef(null);
@@ -191,19 +197,27 @@ const TableFilterDropdown = ({
         children: [
           /* @__PURE__ */ jsx(OptionsList, { children: options.map((option) => {
             const isSelected = value.includes(option.value);
-            return /* @__PURE__ */ jsxs(CheckboxWrapperDiv, { onClick: (e) => handleOptionClick(option.value, e), children: [
-              /* @__PURE__ */ jsx(CheckboxDiv, { isSelected, children: /* @__PURE__ */ jsx(SvgCheckIcon, {}) }),
-              /* @__PURE__ */ jsx(OptionLabel, { children: option.label })
-            ] }, option.value);
+            return /* @__PURE__ */ jsxs(
+              CheckboxWrapperDiv,
+              {
+                "data-cy": `${triggerDataCy}-option-${slugForDataCy(option.value)}`,
+                onClick: (e) => handleOptionClick(option.value, e),
+                children: [
+                  /* @__PURE__ */ jsx(CheckboxDiv, { isSelected, children: /* @__PURE__ */ jsx(SvgCheckIcon, {}) }),
+                  /* @__PURE__ */ jsx(OptionLabel, { children: option.label })
+                ]
+              },
+              option.value
+            );
           }) }),
-          showClearAll && hasActiveFilters && /* @__PURE__ */ jsx(ClearAllOption, { onClick: handleClearAll, children: clearAllText })
+          showClearAll && hasActiveFilters && /* @__PURE__ */ jsx(ClearAllOption, { "data-cy": `${triggerDataCy}-clear-all`, onClick: handleClearAll, children: clearAllText })
         ]
       }
     );
     return createPortal(menu, document.body);
   };
   return /* @__PURE__ */ jsxs(DropdownContainer, { ref: containerRef, ...props, children: [
-    /* @__PURE__ */ jsxs(TriggerContainer, { ref: triggerRef, onClick: handleTriggerClick, "data-clickable": "true", children: [
+    /* @__PURE__ */ jsxs(TriggerContainer, { ref: triggerRef, onClick: handleTriggerClick, "data-cy": triggerDataCy, "data-clickable": "true", children: [
       label && /* @__PURE__ */ jsx("span", { children: label }),
       /* @__PURE__ */ jsxs(IconWrapper, { children: [
         /* @__PURE__ */ jsx(IconComponent, {}),
@@ -240,7 +254,9 @@ TableFilterDropdown.propTypes = {
   /** Show "Clear all" option at the bottom of the list */
   showClearAll: PropTypes.bool,
   /** Custom text for the "Clear all" option */
-  clearAllText: PropTypes.string
+  clearAllText: PropTypes.string,
+  /** Override default `table-filter-{label}` data-cy on trigger */
+  dataCy: PropTypes.string
 };
 export {
   TableFilterDropdown