@dmsi/wedgekit-react 0.0.140 → 0.0.142

package/dist/components/SelectPaymentMethod.cjs

@@ -198,10 +198,11 @@ var gapUsingContainerPadding = (0, import_clsx.default)(
 var import_clsx2 = __toESM(require("clsx"), 1);
 var import_jsx_runtime = 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_runtime.jsx)(
     "div",
     __spreadProps(__spreadValues({}, rest), {
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         "rounded-sm p-desktop-layout-padding",
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",
@@ -219,17 +220,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_runtime2.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx3.default)(
         "icon",
         `icon-${size}`,
@@ -306,7 +310,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -342,14 +347,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_runtime3.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
@@ -424,7 +431,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -434,13 +442,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx5.default)(
         typography.paragraph,
@@ -464,7 +474,7 @@ Paragraph.displayName = "Paragraph";
 // src/components/Accordion.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Accordion(props) {
-  const { isOpen, onClick, className, disabled } = props;
+  const { isOpen, onClick, className, disabled, testid } = props;
   const {
     title,
     before,
@@ -495,11 +505,12 @@ function Accordion(props) {
       ),
       selected: isOpen,
       onClick: handleClick,
+      testid,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { sizing: "component", horizontal: true, justify: "between", items: "center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Stack, { sizing: "layout-group", horizontal: true, items: "center", children: [
             before,
-            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { className: "text-text-primary-normal", children: title }) : title
+            typeof title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Paragraph, { testid: testid ? `${testid}-title` : void 0, className: "text-text-primary-normal", children: title }) : title
           ] }),
           after
         ] }),
@@ -510,6 +521,7 @@ function Accordion(props) {
             style: {
               gridTemplateRows: isOpen ? "1fr" : "0fr"
             },
+            "data-testid": testid ? `${testid}-content-container` : void 0,
             children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
               "div",
               {
@@ -546,7 +558,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -560,7 +573,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx7.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -648,6 +662,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -657,7 +672,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -676,7 +691,8 @@ var Radio = (_a) => {
     disabled,
     checked,
     readOnly,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "label",
@@ -684,7 +700,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";
@@ -716,6 +733,7 @@ var Radio = (_a) => {
             "input",
             __spreadValues({
               id: radioId,
+              "data-testid": testid,
               type: "radio",
               className: "sr-only peer",
               disabled,
@@ -749,7 +767,7 @@ var Radio = (_a) => {
             }
           )
         ] }),
-        label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { id: `${radioId}-label`, padded: true, color: paragraphColor, children: label })
+        label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Paragraph, { id: radioId ? `${radioId}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, color: paragraphColor, children: label })
       ]
     }
   );
@@ -798,7 +816,8 @@ var Checkbox = (_a) => {
     onChange,
     indeterminate,
     paragraphClassName,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -808,7 +827,8 @@ var Checkbox = (_a) => {
     "onChange",
     "indeterminate",
     "paragraphClassName",
-    "id"
+    "id",
+    "testid"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = (0, import_clsx9.default)(
@@ -837,6 +857,7 @@ var Checkbox = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: id ? `${id}-input` : void 0,
       className: (0, import_clsx9.default)(
         "flex items-center",
@@ -850,6 +871,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,
@@ -881,6 +903,7 @@ var Checkbox = (_a) => {
           Paragraph,
           {
             id: id ? `${id}-label` : void 0,
+            testid: testid ? `${testid}-label` : void 0,
             as: "span",
             padded: true,
             className: (0, import_clsx9.default)(
@@ -915,7 +938,8 @@ var Subheader = (_a) => {
     align,
     color,
     tall,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -923,13 +947,15 @@ var Subheader = (_a) => {
     "align",
     "color",
     "tall",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx10.default)(
         typography.subheader,
         className,
@@ -963,18 +989,19 @@ function formatCurrencyDisplay(value) {
 // src/components/HorizontalDivider.tsx
 var import_clsx11 = __toESM(require("clsx"), 1);
 var import_jsx_runtime10 = require("react/jsx-runtime");
-function HorizontalDivider({ id, hideOnMobile }) {
+function HorizontalDivider({ id, testid, hideOnMobile }) {
   const hideOnMobileStyle = (0, import_clsx11.default)(hideOnMobile && "hidden desktop:block");
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", { id, className: (0, import_clsx11.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("hr", { id, "data-testid": testid, className: (0, import_clsx11.default)("w-full border-t border-border-primary-normal", hideOnMobileStyle) });
 }
 
 // src/components/Spinner.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var Spinner = ({ size = "small" }) => {
+var Spinner = ({ size = "small", testid }) => {
   const dimension = size === "large" ? 48 : 24;
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "svg",
     {
+      "data-testid": testid,
       width: dimension,
       height: dimension,
       viewBox: "0 0 24 24",
@@ -1094,7 +1121,8 @@ function SelectPaymentMethod(props) {
     isPayLoading,
     withCredits = false,
     isLoadingCCiframe,
-    cardPaymentUrl
+    cardPaymentUrl,
+    testid
   } = props;
   const payAllWithCredits = withCredits && amountToPay <= 0;
   (0, import_react.useEffect)(() => {
@@ -1111,6 +1139,7 @@ function SelectPaymentMethod(props) {
     !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       CreditsSelector,
       {
+        testid: testid ? `${testid}-credit-selector` : void 0,
         selectedCredits: selectedCredits || [],
         allCredits: allCredits || [],
         setSelectedCredits: props.setSelectedCredits || (() => {
@@ -1120,6 +1149,7 @@ function SelectPaymentMethod(props) {
     (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ACHSelector,
       {
+        testid: testid ? `${testid}-ach-selector` : void 0,
         selectedMethod,
         handleToggle,
         selectedBankGuid: selectedACHBankGuid || null,
@@ -1134,10 +1164,12 @@ function SelectPaymentMethod(props) {
     (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       Accordion,
       {
+        testid: testid ? `${testid}-cc-payment` : void 0,
         isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
         title: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Radio,
           {
+            testid: testid ? `${testid}-cc-payment-radio` : void 0,
             label: "Pay by Credit/Debit Card",
             checked: !payAllWithCredits && selectedMethod === "CCPayment",
             onChange: (e) => e.stopPropagation(),
@@ -1177,10 +1209,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_runtime12.jsx)(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    payAllWithCredits && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button, { testid: testid ? `${testid}-submit-payment-button` : void 0, block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -1190,7 +1223,8 @@ function ACHSelector(props) {
     selectedBankGuid,
     setSelectedBankGuid,
     customerBanks,
-    disabled
+    disabled,
+    testid
   } = props;
   function handleBankSelect(e, bankGuid) {
     if (disabled) return;
@@ -1201,6 +1235,7 @@ function ACHSelector(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime12.jsx)(
@@ -1217,7 +1252,7 @@ function ACHSelector(props) {
   )) });
 }
 function CreditsSelector(props) {
-  const { selectedCredits, allCredits, setSelectedCredits } = props;
+  const { selectedCredits, allCredits, setSelectedCredits, testid } = props;
   const [isOpen, setIsOpen] = (0, import_react.useState)(true);
   const handleCreditSelect = (credit) => {
     if (setSelectedCredits) {
@@ -1232,6 +1267,7 @@ function CreditsSelector(props) {
       isOpen,
       title: "Available Credits",
       onClick: () => setIsOpen((prev) => !prev),
+      testid,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HorizontalDivider, {}),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1256,9 +1292,11 @@ function CreditsSelector(props) {
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
                       flexGrow: 1,
+                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
                       children: /* @__PURE__ */ (0, import_jsx_runtime12.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)
@@ -1266,7 +1304,7 @@ function CreditsSelector(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Subheader, { className: " pr-desktop-component-padding", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
                     "$",
                     formatCurrencyDisplay(
                       `${Math.abs(credits.InvoiceBalanceDue)}`

package/dist/components/SelectPaymentMethod.js

@@ -1,19 +1,19 @@
 "use client";
 import {
   SelectPaymentMethod
-} from "../chunk-XCIBYDVK.js";
-import "../chunk-TTO4PL7Y.js";
-import "../chunk-4F6VQXKY.js";
-import "../chunk-3ZUSYRI7.js";
-import "../chunk-WT5XXW6G.js";
+} from "../chunk-GXSXCEAA.js";
+import "../chunk-BATIOCXB.js";
+import "../chunk-GG5JOFS6.js";
+import "../chunk-EPQLWHCL.js";
+import "../chunk-WFQEE2OO.js";
 import "../chunk-5UH6QUFB.js";
-import "../chunk-O4M2GISS.js";
-import "../chunk-QTD7K43M.js";
-import "../chunk-EO3JJWFW.js";
-import "../chunk-4OS6APPF.js";
-import "../chunk-VG4EPHJA.js";
-import "../chunk-H6LXXGX6.js";
-import "../chunk-IGQVA7SC.js";
+import "../chunk-CYZL57LH.js";
+import "../chunk-WSS2DFTP.js";
+import "../chunk-N6JVLYEE.js";
+import "../chunk-4LXG6QNT.js";
+import "../chunk-HVI3CL7Y.js";
+import "../chunk-FKMKHLQH.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/SideMenu.cjs

@@ -38,12 +38,14 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var SideMenu = ({
   children,
   cardStyle = false,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx.default)(
         "flex flex-col",
         cardStyle && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding rounded shadow-4 bg-background-primary-normal"

package/dist/components/SideMenu.js

@@ -6,12 +6,14 @@ import { jsx } from "react/jsx-runtime";
 var SideMenu = ({
   children,
   cardStyle = false,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
       id,
+      "data-testid": testid,
       className: clsx(
         "flex flex-col",
         cardStyle && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding rounded shadow-4 bg-background-primary-normal"

package/dist/components/SideMenuGroup.cjs

@@ -204,20 +204,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_runtime.jsx)(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography.label,
         align === "left" && "text-left",
@@ -297,7 +300,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -333,14 +337,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_runtime2.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
@@ -409,17 +415,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_runtime3.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: (0, import_clsx4.default)(
         "icon",
         `icon-${size}`,
@@ -438,6 +447,7 @@ function Icon(_a) {
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var SideMenuGroup = ({
   id,
+  testid,
   label,
   groupIndentLevel = 1,
   collapsed = false,
@@ -460,6 +470,7 @@ var SideMenuGroup = ({
       "div",
       __spreadProps(__spreadValues({
         id,
+        "data-testid": testid,
         className: (0, import_clsx5.default)(
           "group/sm-group flex rounded cursor-pointer",
           "bg-transparent",
@@ -496,7 +507,7 @@ var SideMenuGroup = ({
                   size: 24
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { id: id ? `${id}-label` : void 0, padded: true, children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Label, { id: id ? `${id}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, children: label })
             ]
           }
         )

package/dist/components/SideMenuGroup.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   Label
-} from "../chunk-S5K22XTH.js";
+} from "../chunk-JWCT72WR.js";
 import {
   Stack
-} from "../chunk-EO3JJWFW.js";
+} from "../chunk-N6JVLYEE.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import {
   baseTransition
 } from "../chunk-RDLEIAQU.js";
@@ -22,6 +22,7 @@ import { useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var SideMenuGroup = ({
   id,
+  testid,
   label,
   groupIndentLevel = 1,
   collapsed = false,
@@ -44,6 +45,7 @@ var SideMenuGroup = ({
       "div",
       __spreadProps(__spreadValues({
         id,
+        "data-testid": testid,
         className: clsx(
           "group/sm-group flex rounded cursor-pointer",
           "bg-transparent",
@@ -80,7 +82,7 @@ var SideMenuGroup = ({
                   size: 24
                 }
               ),
-              /* @__PURE__ */ jsx(Label, { id: id ? `${id}-label` : void 0, padded: true, children: label })
+              /* @__PURE__ */ jsx(Label, { id: id ? `${id}-label` : void 0, testid: testid ? `${testid}-label` : void 0, padded: true, children: label })
             ]
           }
         )

package/dist/components/SideMenuItem.cjs

@@ -252,7 +252,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -288,14 +289,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_runtime.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
@@ -370,7 +373,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -380,13 +384,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: (0, import_clsx3.default)(
         typography.paragraph,
@@ -411,6 +417,7 @@ Paragraph.displayName = "Paragraph";
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var SideMenuItem = ({
   id,
+  testid,
   label,
   leftIcon,
   rightIcon,
@@ -435,6 +442,7 @@ var SideMenuItem = ({
     "a",
     {
       id,
+      "data-testid": testid,
       href,
       className: (0, import_clsx4.default)(
         "group flex w-full rounded border-2 cursor-pointer",
@@ -467,6 +475,7 @@ var SideMenuItem = ({
               Paragraph,
               {
                 id: id ? `${id}-label` : void 0,
+                testid: testid ? `${testid}-label` : void 0,
                 as: "span",
                 padded: true,
                 className: "mr-auto !leading-6",