@dmsi/wedgekit-react 0.0.140 → 0.0.141

package/dist/components/index.cjs

@@ -270,17 +270,20 @@ function Icon(_a) {
   var _b = _a, {
     name,
     size = 24,
-    variant = "outline"
+    variant = "outline",
+    testid
   } = _b, props = __objRest(_b, [
     "name",
     "size",
-    "variant"
+    "variant",
+    "testid"
   ]);
   const variantStyle = variant === "filled" ? '"FILL" 1' : '"FILL" 0';
   const weightStyle = size === 16 ? '"wght" 400' : '"wght" 300';
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         "icon",
         `icon-${size}`,
@@ -312,20 +315,23 @@ var Label = (_a) => {
     className,
     color,
     align,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "as",
     "padded",
     "className",
     "color",
     "align",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx3.default)(
         typography.label,
         align === "left" && "text-left",
@@ -381,6 +387,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var InputBase = (_a) => {
   var _b = _a, {
     id,
+    testid,
     before,
     after,
     type,
@@ -399,6 +406,7 @@ var InputBase = (_a) => {
     fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "before",
     "after",
     "type",
@@ -463,6 +471,7 @@ var InputBase = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: inputId,
       ref: inputContainerRef,
       className: (0, import_clsx4.default)(
@@ -515,6 +524,7 @@ var InputBase = (_a) => {
                   required
                 }, props), attributes), {
                   id: inputId,
+                  "data-testid": testid ? `${testid}-input` : void 0,
                   className: (0, import_clsx4.default)(
                     "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
                     "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
@@ -532,7 +542,7 @@ var InputBase = (_a) => {
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
       ]
     }
   );
@@ -547,7 +557,8 @@ var Input = (_a) => {
     onChange,
     onBlur,
     onClear,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "decimals",
@@ -557,30 +568,30 @@ var Input = (_a) => {
     "onChange",
     "onBlur",
     "onClear",
-    "id"
+    "id",
+    "testid"
   ]);
   const [internalValue, setInternalValue] = (0, import_react2.useState)("");
   const [displayValue, setDisplayValue] = (0, import_react2.useState)("");
   (0, import_react2.useEffect)(() => {
     var _a2;
     const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
-    if (variant === "currency") {
-      if (propValue === void 0 || propValue === "" || typeof propValue === "number" && isNaN(propValue)) {
-        setInternalValue("");
-        setDisplayValue("");
-      } else {
-        const numValue = typeof propValue === "string" ? parseFloat(propValue) : propValue;
-        if (!isNaN(numValue)) {
-          const formatted = numValue.toFixed(decimals != null ? decimals : 2);
-          setInternalValue(formatted);
-          setDisplayValue(formatCurrencyDisplay(formatted));
-        }
-      }
-    } else {
-      setInternalValue(stringValue);
-      setDisplayValue(stringValue);
+    setInternalValue(stringValue);
+    setDisplayValue(stringValue);
+  }, [propValue]);
+  (0, import_react2.useEffect)(() => {
+    var _a2;
+    if (variant !== "currency") {
+      return;
+    }
+    const stringValue = (_a2 = propValue == null ? void 0 : propValue.toString()) != null ? _a2 : "";
+    if (!stringValue) {
+      return;
     }
-  }, [propValue, decimals, variant]);
+    const formatted = formatDecimalValue(stringValue, decimals != null ? decimals : 2);
+    setInternalValue(formatted);
+    setDisplayValue(formatCurrencyDisplay(formatted));
+  }, []);
   const getInputProps = () => {
     var _a2;
     const baseProps = __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, props), {
@@ -633,6 +644,7 @@ var Input = (_a) => {
           Icon,
           {
             id: id ? `${id}-clear-button` : void 0,
+            testid: testid ? `${testid}-clear-button` : void 0,
             name: "close",
             onClick: handleSearchReset,
             className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
@@ -664,14 +676,6 @@ var Input = (_a) => {
   };
   const handleChange = (e) => {
     const rawValue = e.target.value;
-    if (variant === "search") {
-      setInternalValue(rawValue);
-      setDisplayValue(rawValue);
-      if (typeof onChange === "function") {
-        onChange(e);
-      }
-      return;
-    }
     if (variant === "currency") {
       const raw = rawValue.replace(/,/g, "");
       if (raw === "") {
@@ -708,6 +712,9 @@ var Input = (_a) => {
     }
   };
   const handleBlur = (e) => {
+    if (!internalValue) {
+      return;
+    }
     if (variant === "currency") {
       const formatted = formatDecimalValue(internalValue, decimals != null ? decimals : 2);
       setInternalValue(formatted);
@@ -732,7 +739,8 @@ var Input = (_a) => {
       before: getBeforeElement(),
       after: getAfterElement(),
       onChange: handleChange,
-      onBlur: handleBlur
+      onBlur: handleBlur,
+      testid
     })
   );
 };
@@ -765,6 +773,7 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var Search = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     error,
     children,
@@ -775,6 +784,7 @@ var Search = (_a) => {
     removeRoundness
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "error",
     "children",
@@ -804,6 +814,7 @@ var Search = (_a) => {
       Input,
       __spreadValues({
         id,
+        testid,
         variant: "search",
         inputContainerRef,
         ref: inputRef,
@@ -859,6 +870,7 @@ var Search = (_a) => {
     ),
     renderMenu ? renderMenu({
       id: id ? `${id}-menu` : void 0,
+      testid: testid ? `${testid}-menu` : void 0,
       positionTo: inputContainerRef,
       show,
       setShow,
@@ -1244,6 +1256,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var Menu = (_a) => {
   var _b = _a, {
     id,
+    testid,
     children,
     className,
     ref,
@@ -1261,6 +1274,7 @@ var Menu = (_a) => {
     menuName
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "children",
     "className",
     "ref",
@@ -1341,6 +1355,7 @@ var Menu = (_a) => {
       "div",
       __spreadProps(__spreadValues({
         id,
+        "data-testid": testid,
         ref: setRefs,
         className: (0, import_clsx5.default)(
           "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
@@ -1487,7 +1502,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -1497,13 +1513,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx6.default)(
         typography.paragraph,
@@ -1528,6 +1546,7 @@ Paragraph.displayName = "Paragraph";
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var MenuOption = ({
   id,
+  testid,
   children,
   disabled = false,
   variant = "normal",
@@ -1601,6 +1620,7 @@ var MenuOption = ({
       "div",
       __spreadProps(__spreadValues({
         id,
+        "data-testid": testid,
         ref: actualRef,
         className: (0, import_clsx7.default)(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
@@ -1669,6 +1689,7 @@ var MenuOption = ({
       MenuOption,
       {
         id: id ? `${id}-back` : void 0,
+        testid: testid ? `${testid}-back` : void 0,
         onClick: () => {
           closeSubMenuLevel == null ? void 0 : closeSubMenuLevel(currentSubMenuLevel != null ? currentSubMenuLevel : 0);
         },
@@ -1713,7 +1734,8 @@ var DataGridCell = (0, import_react10.memo)(
       error,
       warning,
       center,
-      width
+      width,
+      testid
     } = _b, props = __objRest(_b, [
       "id",
       "type",
@@ -1729,7 +1751,8 @@ var DataGridCell = (0, import_react10.memo)(
       "error",
       "warning",
       "center",
-      "width"
+      "width",
+      "testid"
     ]);
     const Element = type === "header" ? "th" : "td";
     const timerRef = (0, import_react10.useRef)(null);
@@ -1800,6 +1823,7 @@ var DataGridCell = (0, import_react10.memo)(
       Element,
       __spreadProps(__spreadValues({
         id,
+        "data-testid": testid,
         className: (0, import_clsx8.default)("flex h-10", !width && "flex-1"),
         style: { width }
       }, props), {
@@ -1831,6 +1855,7 @@ function DataCellHeader(_a) {
     setNodeRef,
     node,
     id,
+    testid,
     useMenuDefaultMinWidth
   } = _b, props = __objRest(_b, [
     "header",
@@ -1838,6 +1863,7 @@ function DataCellHeader(_a) {
     "setNodeRef",
     "node",
     "id",
+    "testid",
     "useMenuDefaultMinWidth"
   ]);
   var _a2;
@@ -1883,6 +1909,7 @@ function DataCellHeader(_a) {
     DataGridCell,
     __spreadProps(__spreadValues({
       id,
+      testid,
       ref: setNodeRef ? setNodeRef : ref,
       type: "header",
       component: "header",
@@ -1896,6 +1923,7 @@ function DataCellHeader(_a) {
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
+            testid: testid ? `${testid}-menu` : void 0,
             ref: menuRootRef,
             positionTo: node ? node : ref,
             show: showMenu,
@@ -1906,14 +1934,16 @@ function DataCellHeader(_a) {
               /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 MenuOption,
                 __spreadProps(__spreadValues({
-                  id: id ? `${id}-filter-option` : void 0
+                  id: id ? `${id}-filter-option` : void 0,
+                  testid: testid ? `${testid}-filter-option` : void 0
                 }, subMenuListeners), {
                   subMenu: (_b2) => {
                     var _c = _b2, { menuId, subMenuLevel } = _c, props2 = __objRest(_c, ["menuId", "subMenuLevel"]);
                     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       Menu,
                       __spreadProps(__spreadValues({
-                        id: id ? `${id}-filter-submenu` : void 0
+                        id: id ? `${id}-filter-submenu` : void 0,
+                        testid: testid ? `${testid}-filter-submenu` : void 0
                       }, props2), {
                         show: isMenuActive(menuId, subMenuLevel),
                         ref: (el) => {
@@ -1925,6 +1955,7 @@ function DataCellHeader(_a) {
                             Search,
                             {
                               id: id ? `${id}-filter-search` : void 0,
+                              testid: testid ? `${testid}-filter-search` : void 0,
                               onChange: (event) => {
                                 setFilter(event.target.value);
                               },
@@ -1940,6 +1971,7 @@ function DataCellHeader(_a) {
                             MenuOption,
                             {
                               id: id ? `${id}-filter-contains` : void 0,
+                              testid: testid ? `${testid}-filter-contains` : void 0,
                               onClick: handleFilterFnChange,
                               before: menuOptionIcon("includesString"),
                               children: "Contains"
@@ -1949,6 +1981,7 @@ function DataCellHeader(_a) {
                             MenuOption,
                             {
                               id: id ? `${id}-filter-startswith` : void 0,
+                              testid: testid ? `${testid}-filter-startswith` : void 0,
                               onClick: handleFilterFnChange,
                               before: menuOptionIcon("startsWith"),
                               children: "Starts with"
@@ -1958,6 +1991,7 @@ function DataCellHeader(_a) {
                             MenuOption,
                             {
                               id: id ? `${id}-filter-endswith` : void 0,
+                              testid: testid ? `${testid}-filter-endswith` : void 0,
                               onClick: handleFilterFnChange,
                               before: menuOptionIcon("endsWith"),
                               children: "Ends with"
@@ -2163,6 +2197,7 @@ var import_react11 = __toESM(require("react"), 1);
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function TableBodyRow({
   id,
+  testid,
   columnVirtualizer,
   row,
   // rowVirtualizer,
@@ -2194,6 +2229,8 @@ function TableBodyRow({
         isError && "!bg-background-action-critical-secondary-hover",
         showFilterRow ? "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal" : "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
       ),
+      id: id ? `${id}-row-${row.id}` : void 0,
+      "data-testid": testid ? `${testid}-row-${row.id}` : void 0,
       style: {
         display: "flex",
         position: "absolute",
@@ -2215,7 +2252,8 @@ function TableBodyRow({
           return ((_a2 = cell.column.columnDef.meta) == null ? void 0 : _a2.useCustomRenderer) ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react11.default.Fragment, { children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) }, cell.id) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             CellElement,
             {
-              id: id ? `${id}-cell-${cell.id}` : void 0,
+              id: id ? `${id}-row-${row.id}-cell-${cell.id}` : void 0,
+              testid: testid ? `${testid}-row-${row.id}-cell-${cell.id}` : void 0,
               cell,
               className: (0, import_clsx10.default)({
                 "justify-end": typeof cellValue === "number"
@@ -2225,6 +2263,7 @@ function TableBodyRow({
                 Tooltip,
                 {
                   id: id ? `${id}-tooltip-${cell.id}` : void 0,
+                  testid: testid ? `${testid}-tooltip-${cell.id}` : void 0,
                   showOnTruncation: true,
                   message: cellValue,
                   position: "bottom",
@@ -2250,22 +2289,25 @@ function TableBodyRow({
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function LoadingCell({
   id,
+  testid,
   column
 }) {
   const key = `loading-${column.id}`;
   if (column.cell === "checkbox") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, disabled: true }) }, key);
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, testid: testid ? `${testid}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Checkbox, { id: id ? `${id}-${key}-checkbox` : void 0, testid: testid ? `${testid}-${key}-checkbox` : void 0, disabled: true }) }, key);
   }
   if (column.cell === "input") {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       DataGridCell,
       {
         id: id ? `${id}-${key}` : void 0,
+        testid: testid ? `${testid}-${key}` : void 0,
         component: "input",
         children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Input,
           {
             id: id ? `${id}-${key}-input` : void 0,
+            testid: testid ? `${testid}-${key}-input` : void 0,
             align: "left",
             disabled: true,
             wrapperClassName: "!rounded-none !border-0"
@@ -2275,13 +2317,14 @@ function LoadingCell({
       key
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DataGridCell, { id: id ? `${id}-${key}` : void 0, testid: testid ? `${testid}-${key}` : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "bg-linear-270 to-neutral-300/[24%] from-neutral-300/[12%] rounded-xs w-full max-w-25 h-6" }) }, key);
 }
 
 // src/components/DataGrid/TableBody/index.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function TableBody({
   id,
+  testid,
   columnVirtualizer,
   table,
   tableContainerRef,
@@ -2336,6 +2379,7 @@ function TableBody({
               zIndex: 10
             },
             className: "even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal",
+            "data-testid": testid ? `${testid}-filter-row` : void 0,
             children: headerGroups.flatMap(
               (x) => x.headers.map((header) => {
                 var _a, _b, _c, _d, _e;
@@ -2343,6 +2387,7 @@ function TableBody({
                   CellElement,
                   {
                     id: id ? `${id}-filter-cell-${header.id}` : void 0,
+                    testid: testid ? `${testid}-filter-cell-${header.id}` : void 0,
                     noPadding: true,
                     cell: header,
                     width: ((_a = header.column.columnDef.meta) == null ? void 0 : _a.headerWidth) || (locked ? `${header.column.getSize()}px` : ""),
@@ -2353,6 +2398,7 @@ function TableBody({
                       Search,
                       {
                         id: id ? `${id}-filter-search-${header.id}` : void 0,
+                        testid: testid ? `${testid}-filter-search-${header.id}` : void 0,
                         removeRoundness: true,
                         onChange: (e) => header.column.setFilterValue(e.target.value),
                         value: (_d = header.column.getFilterValue()) != null ? _d : "",
@@ -2373,6 +2419,7 @@ function TableBody({
             TableBodyRow,
             {
               id,
+              testid,
               columnVirtualizer,
               row,
               rowVirtualizer,
@@ -2397,7 +2444,7 @@ function TableBody({
               transform: `translateY(${virtualRows[virtualRows.length - 1].start + 40}px)`
             },
             className: "odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal",
-            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoadingCell, { id, column: column.columnDef }, column.id))
+            children: table.getAllLeafColumns().map((column) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoadingCell, { id, testid, column: column.columnDef }, column.id))
           }
         )
       ]
@@ -2414,17 +2461,20 @@ function PinnedColumns(_a) {
     centerHeader,
     allSelectedAcrossPages,
     someSelectedAcrossPages,
-    toggleSelectAllAcrossPages
+    toggleSelectAllAcrossPages,
+    testid
   } = _b, props = __objRest(_b, [
     "pinDirection",
     "table",
     "centerHeader",
     "allSelectedAcrossPages",
     "someSelectedAcrossPages",
-    "toggleSelectAllAcrossPages"
+    "toggleSelectAllAcrossPages",
+    "testid"
   ]);
   var _a2;
   const headerGroups = pinDirection === "left" ? table.getLeftHeaderGroups() : table.getRightHeaderGroups();
+  const pinnedTestId = testid ? `${pinDirection}-pinned-${testid}` : void 0;
   return ((_a2 = headerGroups[0]) == null ? void 0 : _a2.headers.length) > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "table",
     {
@@ -2432,9 +2482,10 @@ function PinnedColumns(_a) {
         "flex flex-col min-h-min sticky z-20",
         pinDirection === "left" ? "left-0" : "right-0"
       ),
+      "data-testid": pinnedTestId,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("thead", { className: "sticky top-0 z-20 grid", children: headerGroups.map((headerGroup) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { className: "flex w-full", children: headerGroup.headers.map((header) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { "data-testid": pinnedTestId ? `${pinnedTestId}-header-row-${headerGroup.id}` : void 0, className: "flex w-full", children: headerGroup.headers.map((header) => {
             var _a3, _b2, _c;
             if (!header) {
               return;
@@ -2445,6 +2496,7 @@ function PinnedColumns(_a) {
                 DataCellHeader,
                 {
                   locked: true,
+                  testid: pinnedTestId ? `${pinnedTestId}-header-${header.id}` : void 0,
                   header,
                   center: centerHeader,
                   width: customHeaderWidth,
@@ -2498,7 +2550,9 @@ function PinnedColumns(_a) {
         }) }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           TableBody,
-          __spreadProps(__spreadValues({}, props), {
+          __spreadProps(__spreadValues({
+            testid: pinnedTestId
+          }, props), {
             table,
             locked: true,
             pinDirection
@@ -2517,15 +2571,17 @@ var import_react13 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function ColumnSelectorMenuOption({
   id,
+  testid,
   column,
   toggleColumnVisibility
 }) {
   const [isVisible, setIsVisible] = (0, import_react13.useState)(column.getIsVisible());
   const label = typeof column.columnDef.header === "string" ? column.columnDef.header : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { id, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MenuOption, { id, testid, selected: isVisible, defaultChecked: isVisible, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     Checkbox,
     {
       id: id ? `${id}-checkbox` : void 0,
+      testid: testid ? `${testid}-checkbox` : void 0,
       label: label != null ? label : "Unknown",
       checked: isVisible,
       onChange: (e) => {
@@ -2540,6 +2596,7 @@ function ColumnSelectorMenuOption({
 var import_jsx_runtime15 = require("react/jsx-runtime");
 function ColumnSelectorHeaderCell({
   id,
+  testid,
   table,
   toggleColumnVisibility,
   resetColumnVisibility
@@ -2550,6 +2607,7 @@ function ColumnSelectorHeaderCell({
     DataGridCell,
     {
       id,
+      testid,
       width: "48",
       type: "header",
       color: "text-secondary-normal",
@@ -2559,6 +2617,7 @@ function ColumnSelectorHeaderCell({
           Button,
           {
             id: id ? `${id}-button` : void 0,
+            testid: testid ? `${testid}-button` : void 0,
             onClick: () => setShow((prev) => !prev),
             variant: "navigation",
             iconOnly: true,
@@ -2569,6 +2628,7 @@ function ColumnSelectorHeaderCell({
           Menu,
           {
             id: id ? `${id}-menu` : void 0,
+            testid: testid ? `${testid}-menu` : void 0,
             positionTo: ref,
             position: "bottom-right",
             show,
@@ -2578,6 +2638,7 @@ function ColumnSelectorHeaderCell({
                 Button,
                 {
                   id: id ? `${id}-reset-button` : void 0,
+                  testid: testid ? `${testid}-reset-button` : void 0,
                   variant: "tertiary",
                   onClick: () => {
                     resetColumnVisibility();
@@ -2593,6 +2654,7 @@ function ColumnSelectorHeaderCell({
                 ColumnSelectorMenuOption,
                 {
                   id: id ? `${id}-option-${column.id}` : void 0,
+                  testid: testid ? `${testid}-option-${column.id}` : void 0,
                   column,
                   toggleColumnVisibility
                 },
@@ -2612,6 +2674,7 @@ var PAGE_SIZE_OPTIONS = [5, 10, 15, 20, 25, 30, 35];
 var NO_RESULTS_HEIGHT = "h-[120px]";
 function DataGrid({
   id,
+  testid,
   data,
   columns,
   status,
@@ -2818,6 +2881,7 @@ function DataGrid({
             "div",
             {
               id,
+              "data-testid": testid,
               className: "flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
@@ -2832,6 +2896,7 @@ function DataGrid({
                       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         PinnedColumns,
                         {
+                          testid,
                           pinDirection: "left",
                           table,
                           tableContainerRef: containerRef,
@@ -2843,7 +2908,7 @@ function DataGrid({
                         }
                       ),
                       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("table", { className: "flex-1 flex flex-col min-h-min", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { className: "flex w-full", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("thead", { className: "sticky top-0 z-10 grid", children: table.getCenterHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("tr", { "data-testid": testid ? `${testid}-header-row-${headerGroup.id}` : void 0, className: "flex w-full", children: [
                           virtualPaddingLeft ? (
                             // fake empty column to the left for virtualization scroll padding
                             /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2866,6 +2931,7 @@ function DataGrid({
                                 DraggableCellHeader,
                                 {
                                   id: id ? `${id}-header-${header.id}` : void 0,
+                                  testid: testid ? `${testid}-header-${header.id}` : void 0,
                                   header,
                                   locked: (_c2 = header.column.columnDef.meta) == null ? void 0 : _c2.locked,
                                   center: centerHeader,
@@ -2914,6 +2980,7 @@ function DataGrid({
                               DataGridCell,
                               {
                                 id: id ? `${id}-header-${header.id}` : void 0,
+                                testid: testid ? `${testid}-header-${header.id}` : void 0,
                                 type: "header",
                                 component: "checkbox",
                                 locked: true,
@@ -2921,6 +2988,7 @@ function DataGrid({
                                   Checkbox,
                                   {
                                     id: id ? `${id}-select-all-checkbox` : void 0,
+                                    testid: testid ? `${testid}-select-all-checkbox` : void 0,
                                     checked: allSelectedAcrossPages,
                                     indeterminate: someSelectedAcrossPages,
                                     onChange: toggleSelectAllAcrossPages
@@ -2945,6 +3013,7 @@ function DataGrid({
                             ColumnSelectorHeaderCell,
                             {
                               id: id ? `${id}-column-selector` : void 0,
+                              testid: testid ? `${testid}-column-selector` : void 0,
                               table,
                               toggleColumnVisibility,
                               resetColumnVisibility
@@ -2955,6 +3024,7 @@ function DataGrid({
                           TableBody,
                           {
                             id,
+                            testid,
                             columnVirtualizer,
                             table,
                             tableContainerRef: containerRef,
@@ -2971,6 +3041,7 @@ function DataGrid({
                       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         PinnedColumns,
                         {
+                          testid,
                           pinDirection: "right",
                           table,
                           tableContainerRef: containerRef,
@@ -2993,6 +3064,7 @@ function DataGrid({
                       componentGap,
                       componentPadding
                     ),
+                    "data-testid": testid ? `${testid}-no-results` : void 0,
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Subheader, { color: "text-secondary-normal", children: "No Results" }),
                       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Paragraph, { color: "text-secondary-normal", children: "To view results, enter or update your search criteria." })
@@ -3006,6 +3078,7 @@ function DataGrid({
                         Select,
                         {
                           id: id ? `${id}-pagesize-select` : void 0,
+                          testid: testid ? `${testid}-pagesize-select` : void 0,
                           wrapperClassName: "!w-20",
                           value: pagination.pageSize.toString(),
                           onChange: (e) => {
@@ -3016,6 +3089,7 @@ function DataGrid({
                             Menu,
                             __spreadProps(__spreadValues({}, props), {
                               id: id ? `${id}-pagesize-menu` : void 0,
+                              testid: testid ? `${testid}-pagesize-menu` : void 0,
                               children: PAGE_SIZE_OPTIONS.map((option) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                                 MenuOption,
                                 {
@@ -3040,6 +3114,7 @@ function DataGrid({
                         Button,
                         {
                           id: id ? `${id}-prev-page-button` : void 0,
+                          testid: testid ? `${testid}-prev-page-button` : void 0,
                           iconOnly: true,
                           leftIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron_left" }),
                           onClick: () => pagination.onPageChange(pagination.pageIndex - 1),
@@ -3063,6 +3138,7 @@ function DataGrid({
                         Button,
                         {
                           id: id ? `${id}-next-page-button` : void 0,
+                          testid: testid ? `${testid}-next-page-button` : void 0,
                           iconOnly: true,
                           leftIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron_right" }),
                           onClick: () => pagination.onPageChange(pagination.pageIndex + 1),
@@ -3072,7 +3148,7 @@ function DataGrid({
                       )
                     ] })
                   ] }),
-                  status && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Paragraph, { children: status })
+                  status && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Paragraph, { testid: testid ? `${testid}-status-text` : void 0, children: status })
                 ] })
               ]
             }
@@ -3098,6 +3174,7 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var Select = (_a) => {
   var _b = _a, {
     id,
+    testid,
     label,
     error,
     children,
@@ -3111,6 +3188,7 @@ var Select = (_a) => {
     value
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "label",
     "error",
     "children",
@@ -3140,6 +3218,7 @@ var Select = (_a) => {
       InputBase,
       __spreadProps(__spreadValues({
         id,
+        testid,
         inputContainerRef,
         ref: inputRef,
         label,
@@ -3200,7 +3279,8 @@ var Subheader = (_a) => {
     align,
     color,
     tall,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -3208,13 +3288,15 @@ var Subheader = (_a) => {
     "align",
     "color",
     "tall",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx15.default)(
         typography.subheader,
         className,
@@ -3246,7 +3328,8 @@ var Checkbox = (_a) => {
     onChange,
     indeterminate,
     paragraphClassName,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -3256,7 +3339,8 @@ var Checkbox = (_a) => {
     "onChange",
     "indeterminate",
     "paragraphClassName",
-    "id"
+    "id",
+    "testid"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = (0, import_clsx16.default)(
@@ -3285,6 +3369,7 @@ var Checkbox = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: id ? `${id}-input` : void 0,
       className: (0, import_clsx16.default)(
         "flex items-center",
@@ -3298,6 +3383,7 @@ var Checkbox = (_a) => {
             "input",
             __spreadValues({
               id: id ? `${id}-input` : void 0,
+              "data-testid": testid ? `${testid}-input` : void 0,
               type: "checkbox",
               className: "sr-only peer",
               disabled,
@@ -3329,6 +3415,7 @@ var Checkbox = (_a) => {
           Paragraph,
           {
             id: id ? `${id}-label` : void 0,
+            testid: testid ? `${testid}-label` : void 0,
             as: "span",
             padded: true,
             className: (0, import_clsx16.default)(
@@ -3369,7 +3456,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -3383,7 +3471,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx17.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -3471,6 +3560,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -3480,7 +3570,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -3495,6 +3585,7 @@ var import_react_dom2 = require("react-dom");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var Tooltip = ({
   id,
+  testid,
   message,
   position = "top",
   children,
@@ -3561,6 +3652,7 @@ var Tooltip = ({
     "div",
     {
       id,
+      "data-testid": testid,
       ref,
       className: "relative inline-grid grid-cols-[auto_1fr] items-center",
       onMouseEnter: handleMouseEnter,
@@ -3572,6 +3664,7 @@ var Tooltip = ({
             "div",
             {
               id: id ? `${id}-message` : void 0,
+              "data-testid": testid ? `${testid}-message` : void 0,
               ref: tooltipRef,
               style: {
                 position: "fixed",
@@ -3621,7 +3714,8 @@ var Heading = (_a) => {
     color,
     align,
     variant = "heading1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -3629,7 +3723,8 @@ var Heading = (_a) => {
     "color",
     "align",
     "variant",
-    "id"
+    "id",
+    "testid"
   ]);
   const defaultElement = variant === "heading1" ? "h1" : variant === "heading2" ? "h2" : "h3";
   const Element = as != null ? as : defaultElement;
@@ -3637,6 +3732,7 @@ var Heading = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx19.default)(
         typography[variant],
         className,
@@ -3668,12 +3764,14 @@ var ModalHeader = ({
   hideCloseIcon,
   headerIcon,
   onClose,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx20.default)(
         "flex justify-between items-center",
         layoutPaddding,
@@ -3682,12 +3780,13 @@ var ModalHeader = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: (0, import_clsx20.default)("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Heading2, { id: id ? `${id}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
         ] }),
         !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
@@ -3706,12 +3805,14 @@ var import_jsx_runtime24 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
-  id
+  id,
+  testid
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx21.default)(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,
@@ -3730,12 +3831,14 @@ var ModalButtons = ({
   onClose,
   onContinue,
   customActions,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx22.default)(
         "border-t border-neutral-300 flex justify-end",
         layoutPaddding,
@@ -3746,6 +3849,7 @@ var ModalButtons = ({
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             variant: "secondary",
             leftIcon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
@@ -3757,6 +3861,7 @@ var ModalButtons = ({
           Button,
           {
             id: id ? `${id}-continue-button` : void 0,
+            testid: testid ? `${testid}-continue-button` : void 0,
             variant: "primary",
             leftIcon: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
@@ -3779,12 +3884,14 @@ var ModalScrim = ({
   children,
   onClick,
   ref,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx23.default)(
         "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
@@ -3875,6 +3982,7 @@ var sizes = {
 };
 var Modal = ({
   id,
+  testid,
   title,
   open = false,
   size = "small",
@@ -3983,6 +4091,7 @@ var Modal = ({
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
+        testid: testid ? `${testid}-scrim` : void 0,
         size,
         ref: bgRef,
         show: open,
@@ -3991,6 +4100,7 @@ var Modal = ({
           "div",
           {
             id,
+            "data-testid": testid,
             ref: modalRef,
             className: (0, import_clsx24.default)(
               "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
@@ -4004,6 +4114,7 @@ var Modal = ({
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
+                  testid: testid ? `${testid}-header` : void 0,
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
@@ -4014,6 +4125,7 @@ var Modal = ({
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
+                  testid: testid ? `${testid}-content` : void 0,
                   fixedHeightScrolling: computedFixedHeightScrolling,
                   children
                 }
@@ -4022,6 +4134,7 @@ var Modal = ({
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
+                  testid: testid ? `${testid}-buttons` : void 0,
                   onClose: handleClose,
                   onContinue,
                   customActions
@@ -4099,7 +4212,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -4135,14 +4249,16 @@ var Stack = (_a) => {
     "id",
     "noGap",
     "marginTop",
-    "marginBottom"
+    "marginBottom",
+    "testid"
   ]);
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
@@ -4208,10 +4324,11 @@ var Stack = (_a) => {
 var import_clsx26 = __toESM(require("clsx"), 1);
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function Card(props) {
-  const _a = props, { children, selected } = _a, rest = __objRest(_a, ["children", "selected"]);
+  const _a = props, { children, selected, testid } = _a, rest = __objRest(_a, ["children", "selected", "testid"]);
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
+      "data-testid": testid,
       className: (0, import_clsx26.default)(
         "rounded-sm p-desktop-layout-padding",
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
@@ -4232,7 +4349,7 @@ var import_react20 = require("react");
 var import_clsx27 = __toESM(require("clsx"), 1);
 var import_jsx_runtime30 = require("react/jsx-runtime");
 function Accordion(props) {
-  const { isOpen, onClick, className, disabled } = props;
+  const { isOpen, onClick, className, disabled, testid } = props;
   const {
     title,
     before,
@@ -4263,11 +4380,12 @@ function Accordion(props) {
       ),
       selected: isOpen,
       onClick: handleClick,
+      testid,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
             before,
-            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Paragraph, { className: "text-text-primary-normal", children: title }) : title
+            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
           ] }),
           after
         ] }),
@@ -4278,6 +4396,7 @@ function Accordion(props) {
             style: {
               gridTemplateRows: isOpen ? "1fr" : "0fr"
             },
+            "data-testid": testid ? `${testid}-content-container` : void 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
               "div",
               {
@@ -4308,7 +4427,8 @@ var Radio = (_a) => {
     disabled,
     checked,
     readOnly,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "label",
@@ -4316,7 +4436,8 @@ var Radio = (_a) => {
     "disabled",
     "checked",
     "readOnly",
-    "id"
+    "id",
+    "testid"
   ]);
   const radioId = id;
   const paragraphColor = disabled ? "text-primary-disabled" : error ? "text-primary-error" : "text-primary-normal";
@@ -4348,6 +4469,7 @@ var Radio = (_a) => {
             "input",
             __spreadValues({
               id: radioId,
+              "data-testid": testid,
               type: "radio",
               className: "sr-only peer",
               disabled,
@@ -4381,7 +4503,7 @@ var Radio = (_a) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Paragraph, { id: `${radioId}-label`, padded: true, color: paragraphColor, children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
       ]
     }
   );
@@ -4420,18 +4542,19 @@ RadioIcon.displayName = "RadioIcon";
 // src/components/HorizontalDivider.tsx
 var import_clsx29 = __toESM(require("clsx"), 1);
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function HorizontalDivider({ id, hideOnMobile }) {
+function HorizontalDivider({ id, testid, hideOnMobile }) {
   const hideOnMobileStyle = (0, import_clsx29.default)(hideOnMobile && "hidden desktop:block");
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("hr", { id, className: (0, import_clsx29.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("hr", { id, "data-testid": testid, className: (0, import_clsx29.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 
 // src/components/Spinner.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var Spinner = ({ size = "small" }) => {
+var Spinner = ({ size = "small", testid }) => {
   const dimension = size === "large" ? 48 : 24;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "svg",
     {
+      "data-testid": testid,
       width: dimension,
       height: dimension,
       viewBox: "0 0 24 24",
@@ -4551,7 +4674,8 @@ function SelectPaymentMethod(props) {
     isPayLoading,
     withCredits = false,
     isLoadingCCiframe,
-    cardPaymentUrl
+    cardPaymentUrl,
+    testid
   } = props;
   const payAllWithCredits = withCredits && amountToPay <= 0;
   (0, import_react20.useEffect)(() => {
@@ -4568,6 +4692,7 @@ function SelectPaymentMethod(props) {
     !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       CreditsSelector,
       {
+        testid: testid ? `${testid}-credit-selector` : void 0,
         selectedCredits: selectedCredits || [],
         allCredits: allCredits || [],
         setSelectedCredits: props.setSelectedCredits || (() => {
@@ -4577,6 +4702,7 @@ function SelectPaymentMethod(props) {
     (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       ACHSelector,
       {
+        testid: testid ? `${testid}-ach-selector` : void 0,
         selectedMethod,
         handleToggle,
         selectedBankGuid: selectedACHBankGuid || null,
@@ -4591,10 +4717,12 @@ function SelectPaymentMethod(props) {
     (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       Accordion,
       {
+        testid: testid ? `${testid}-cc-payment` : void 0,
         isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
         title: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           Radio,
           {
+            testid: testid ? `${testid}-cc-payment-radio` : void 0,
             label: "Pay by Credit/Debit Card",
             checked: !payAllWithCredits && selectedMethod === "CCPayment",
             onChange: (e) => e.stopPropagation(),
@@ -4634,10 +4762,11 @@ function SelectPaymentMethod(props) {
         block: true,
         onClick: onPay,
         disabled: isPayLoading || amountToPay <= 0,
+        testid: testid ? `${testid}-submit-payment-button` : void 0,
         children: isPayLoading ? "Processing..." : "Submit Payment"
       }
     ),
-    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { testid: testid ? `${testid}-submit-payment-button` : void 0, block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -4647,7 +4776,8 @@ function ACHSelector(props) {
     selectedBankGuid,
     setSelectedBankGuid,
     customerBanks,
-    disabled
+    disabled,
+    testid
   } = props;
   function handleBankSelect(e, bankGuid) {
     if (disabled) return;
@@ -4658,6 +4788,7 @@ function ACHSelector(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     Card,
     {
+      testid: testid ? `${testid}-bank-${bank.CustBankGUID}` : void 0,
       onClick: (e) => handleBankSelect(e, bank.CustBankGUID),
       selected: !disabled && selectedMethod === "ACHPayment" && selectedBankGuid === bank.CustBankGUID,
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -4674,7 +4805,7 @@ function ACHSelector(props) {
   )) });
 }
 function CreditsSelector(props) {
-  const { selectedCredits, allCredits, setSelectedCredits } = props;
+  const { selectedCredits, allCredits, setSelectedCredits, testid } = props;
   const [isOpen, setIsOpen] = (0, import_react20.useState)(true);
   const handleCreditSelect = (credit) => {
     if (setSelectedCredits) {
@@ -4689,6 +4820,7 @@ function CreditsSelector(props) {
       isOpen,
       title: "Available Credits",
       onClick: () => setIsOpen((prev) => !prev),
+      testid,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(HorizontalDivider, {}),
         /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -4713,9 +4845,11 @@ function CreditsSelector(props) {
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
                       flexGrow: 1,
+                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
                       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                         Checkbox,
                         {
+                          testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-checkbox` : void 0,
                           label: credits.InvoiceNumber,
                           checked: selectedCredits == null ? void 0 : selectedCredits.includes(credits),
                           onChange: () => handleCreditSelect(credits)
@@ -4723,7 +4857,7 @@ function CreditsSelector(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
                     "$",
                     formatCurrencyDisplay(
                       `${Math.abs(credits.InvoiceBalanceDue)}`
@@ -4750,7 +4884,8 @@ function PaymentOnAccountModal(props) {
     onAmountChange,
     cardPaymentUrl,
     setCardPaymentUrl,
-    isLoadingCCiframe
+    isLoadingCCiframe,
+    testid
   } = props;
   const [amount, setAmount] = (0, import_react21.useState)(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } = paymentProps;
@@ -4778,10 +4913,10 @@ function PaymentOnAccountModal(props) {
     }
     return 0;
   }, [creditCardSettings, amount, selectedMethod]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Modal, { testid, open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { sizing: "layout-group", width: "full", children: [
     selectedMethod === "CCPayment" && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Stack, { horizontal: true, justify: "between", items: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Paragraph, { children: "Surcharge" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Paragraph, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Paragraph, { testid: testid ? `${testid}-surcharge` : void 0, children: [
         "$",
         formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
       ] })
@@ -4791,6 +4926,7 @@ function PaymentOnAccountModal(props) {
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         Input,
         {
+          testid: testid ? `${testid}-amount-to-pay` : void 0,
           type: "number",
           placeholder: "$0.00",
           align: "right",
@@ -4803,6 +4939,7 @@ function PaymentOnAccountModal(props) {
     /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       SelectPaymentMethod,
       __spreadProps(__spreadValues({}, paymentProps), {
+        testid: testid ? `${testid}-select-payment-method` : void 0,
         amountToPay: amount + creditCardSurcharge,
         cardPaymentUrl,
         setCardPaymentUrl,