@dmsi/wedgekit-react 0.0.139 → 0.0.141

package/dist/{chunk-6DONKNDT.js → chunk-EWGHVZL5.js}

@@ -4,12 +4,14 @@ function Theme({
   theme,
   children,
   id,
+  testid,
   ref
 }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
       id,
+      "data-testid": testid,
       className: "contents",
       "data-theme": theme,
       ref: (e) => {

package/dist/{chunk-VH3EJNVE.js → chunk-FFU6FB3K.js}

@@ -3,13 +3,13 @@ import {
 } from "./chunk-WNQ53SVY.js";
 import {
   Label
-} from "./chunk-S5K22XTH.js";
+} from "./chunk-JWCT72WR.js";
 import {
   Paragraph
-} from "./chunk-VG4EPHJA.js";
+} from "./chunk-HVI3CL7Y.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   baseTransition,
   componentGap,
@@ -26,6 +26,7 @@ import { useId, useRef } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MenuOption = ({
   id,
+  testid,
   children,
   disabled = false,
   variant = "normal",
@@ -99,6 +100,7 @@ var MenuOption = ({
       "div",
       __spreadProps(__spreadValues({
         id,
+        "data-testid": testid,
         ref: actualRef,
         className: clsx(
           "flex items-center cursor-pointer w-full text-left relative outline-none",
@@ -167,6 +169,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);
         },

package/dist/{chunk-H6LXXGX6.js → chunk-FKMKHLQH.js}

@@ -29,7 +29,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -43,7 +44,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && clsx(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -131,6 +133,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -140,7 +143,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ jsx("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ jsx("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })

package/dist/{chunk-4F6VQXKY.js → chunk-GG5JOFS6.js}

@@ -1,10 +1,11 @@
 // src/components/Spinner.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
-var Spinner = ({ size = "small" }) => {
+var Spinner = ({ size = "small", testid }) => {
   const dimension = size === "large" ? 48 : 24;
   return /* @__PURE__ */ jsxs(
     "svg",
     {
+      "data-testid": testid,
       width: dimension,
       height: dimension,
       viewBox: "0 0 24 24",

package/dist/{chunk-XCIBYDVK.js → chunk-GXSXCEAA.js}

@@ -1,33 +1,33 @@
 import {
   Radio
-} from "./chunk-TTO4PL7Y.js";
+} from "./chunk-BATIOCXB.js";
 import {
   Spinner
-} from "./chunk-4F6VQXKY.js";
+} from "./chunk-GG5JOFS6.js";
 import {
   HorizontalDivider
-} from "./chunk-3ZUSYRI7.js";
+} from "./chunk-EPQLWHCL.js";
 import {
   Checkbox
-} from "./chunk-WT5XXW6G.js";
+} from "./chunk-WFQEE2OO.js";
 import {
   formatCurrencyDisplay
 } from "./chunk-5UH6QUFB.js";
 import {
   Subheader
-} from "./chunk-O4M2GISS.js";
+} from "./chunk-CYZL57LH.js";
 import {
   Accordion
-} from "./chunk-QTD7K43M.js";
+} from "./chunk-WSS2DFTP.js";
 import {
   Stack
-} from "./chunk-EO3JJWFW.js";
+} from "./chunk-N6JVLYEE.js";
 import {
   Card
-} from "./chunk-4OS6APPF.js";
+} from "./chunk-4LXG6QNT.js";
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-FKMKHLQH.js";
 
 // src/components/SelectPaymentMethod.tsx
 import { useEffect, useState } from "react";
@@ -47,7 +47,8 @@ function SelectPaymentMethod(props) {
     isPayLoading,
     withCredits = false,
     isLoadingCCiframe,
-    cardPaymentUrl
+    cardPaymentUrl,
+    testid
   } = props;
   const payAllWithCredits = withCredits && amountToPay <= 0;
   useEffect(() => {
@@ -64,6 +65,7 @@ function SelectPaymentMethod(props) {
     !!(allCredits == null ? void 0 : allCredits.length) && withCredits && /* @__PURE__ */ jsx(
       CreditsSelector,
       {
+        testid: testid ? `${testid}-credit-selector` : void 0,
         selectedCredits: selectedCredits || [],
         allCredits: allCredits || [],
         setSelectedCredits: props.setSelectedCredits || (() => {
@@ -73,6 +75,7 @@ function SelectPaymentMethod(props) {
     (allowedMethods == null ? void 0 : allowedMethods.includes("ACHPayment")) && !!(customerBanks == null ? void 0 : customerBanks.length) && /* @__PURE__ */ jsx(
       ACHSelector,
       {
+        testid: testid ? `${testid}-ach-selector` : void 0,
         selectedMethod,
         handleToggle,
         selectedBankGuid: selectedACHBankGuid || null,
@@ -87,10 +90,12 @@ function SelectPaymentMethod(props) {
     (allowedMethods == null ? void 0 : allowedMethods.includes("CCPayment")) && /* @__PURE__ */ jsx(
       Accordion,
       {
+        testid: testid ? `${testid}-cc-payment` : void 0,
         isOpen: !payAllWithCredits && selectedMethod === "CCPayment",
         title: /* @__PURE__ */ jsx(
           Radio,
           {
+            testid: testid ? `${testid}-cc-payment-radio` : void 0,
             label: "Pay by Credit/Debit Card",
             checked: !payAllWithCredits && selectedMethod === "CCPayment",
             onChange: (e) => e.stopPropagation(),
@@ -130,10 +135,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__ */ jsx(Button, { block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
+    payAllWithCredits && /* @__PURE__ */ jsx(Button, { testid: testid ? `${testid}-submit-payment-button` : void 0, block: true, onClick: onPay, disabled: isPayLoading, children: isPayLoading ? "Processing..." : "Submit Payment" })
   ] });
 }
 function ACHSelector(props) {
@@ -143,7 +149,8 @@ function ACHSelector(props) {
     selectedBankGuid,
     setSelectedBankGuid,
     customerBanks,
-    disabled
+    disabled,
+    testid
   } = props;
   function handleBankSelect(e, bankGuid) {
     if (disabled) return;
@@ -154,6 +161,7 @@ function ACHSelector(props) {
   return /* @__PURE__ */ jsx(Fragment, { children: customerBanks.map((bank) => /* @__PURE__ */ 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__ */ jsx(
@@ -170,7 +178,7 @@ function ACHSelector(props) {
   )) });
 }
 function CreditsSelector(props) {
-  const { selectedCredits, allCredits, setSelectedCredits } = props;
+  const { selectedCredits, allCredits, setSelectedCredits, testid } = props;
   const [isOpen, setIsOpen] = useState(true);
   const handleCreditSelect = (credit) => {
     if (setSelectedCredits) {
@@ -185,6 +193,7 @@ function CreditsSelector(props) {
       isOpen,
       title: "Available Credits",
       onClick: () => setIsOpen((prev) => !prev),
+      testid,
       children: [
         /* @__PURE__ */ jsx(HorizontalDivider, {}),
         /* @__PURE__ */ jsx(Stack, { sizing: "layout-group", width: "full", children: /* @__PURE__ */ jsx(
@@ -209,9 +218,11 @@ function CreditsSelector(props) {
                       onClick: () => handleCreditSelect(credits),
                       paddingY: true,
                       flexGrow: 1,
+                      testid: testid ? `${testid}-credit-${credits.InvoiceNumber}` : void 0,
                       children: /* @__PURE__ */ 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)
@@ -219,7 +230,7 @@ function CreditsSelector(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ jsxs(Subheader, { className: " pr-desktop-component-padding", children: [
+                  /* @__PURE__ */ jsxs(Subheader, { testid: testid ? `${testid}-credit-${credits.InvoiceNumber}-InvoiceBalanceDue` : void 0, className: " pr-desktop-component-padding", children: [
                     "$",
                     formatCurrencyDisplay(
                       `${Math.abs(credits.InvoiceBalanceDue)}`

package/dist/{chunk-VG4EPHJA.js → chunk-HVI3CL7Y.js}

@@ -21,7 +21,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -31,13 +32,15 @@ var Paragraph = (_a) => {
     "addOverflow",
     "children",
     "as",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
   return /* @__PURE__ */ jsx(
     Element,
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       className: clsx(
         typography.paragraph,

package/dist/{chunk-AOELEEUS.js → chunk-I6GEUF6Y.js}

@@ -22,7 +22,8 @@ var Link = (_a) => {
     color,
     paddedY,
     align,
-    underline = false
+    underline = false,
+    testid
   } = _b, props = __objRest(_b, [
     "as",
     "className",
@@ -32,7 +33,8 @@ var Link = (_a) => {
     "color",
     "paddedY",
     "align",
-    "underline"
+    "underline",
+    "testid"
   ]);
   const Component = as;
   const primaryStateStyles = variant === "primary" && !disabled && clsx(
@@ -80,7 +82,8 @@ var Link = (_a) => {
         color: color ? `var(--color-${color})` : void 0
       }),
       "aria-disabled": disabled,
-      tabIndex: disabled ? -1 : void 0
+      tabIndex: disabled ? -1 : void 0,
+      "data-testid": testid
     })
   );
 };

package/dist/{chunk-Z36QJ7ZF.js → chunk-J4E6Q5TM.js}

@@ -1,24 +1,24 @@
 import {
   SelectPaymentMethod
-} from "./chunk-XCIBYDVK.js";
+} from "./chunk-GXSXCEAA.js";
 import {
   Modal
-} from "./chunk-D2YP2BTN.js";
+} from "./chunk-5GOJRLQO.js";
 import {
   Input
-} from "./chunk-R5TLUWDD.js";
+} from "./chunk-4T3DRGLF.js";
 import {
   formatCurrencyDisplay
 } from "./chunk-5UH6QUFB.js";
 import {
   Stack
-} from "./chunk-EO3JJWFW.js";
+} from "./chunk-N6JVLYEE.js";
 import {
   Card
-} from "./chunk-4OS6APPF.js";
+} from "./chunk-4LXG6QNT.js";
 import {
   Paragraph
-} from "./chunk-VG4EPHJA.js";
+} from "./chunk-HVI3CL7Y.js";
 import {
   __spreadProps,
   __spreadValues
@@ -35,7 +35,8 @@ function PaymentOnAccountModal(props) {
     onAmountChange,
     cardPaymentUrl,
     setCardPaymentUrl,
-    isLoadingCCiframe
+    isLoadingCCiframe,
+    testid
   } = props;
   const [amount, setAmount] = useState(paymentProps.amountToPay);
   const { creditCardSettings, selectedMethod } = paymentProps;
@@ -63,10 +64,10 @@ function PaymentOnAccountModal(props) {
     }
     return 0;
   }, [creditCardSettings, amount, selectedMethod]);
-  return /* @__PURE__ */ jsx(Modal, { open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", width: "full", children: [
+  return /* @__PURE__ */ jsx(Modal, { testid, open: isOpen, onClose, title: "Payment on Account", children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout-group", width: "full", children: [
     selectedMethod === "CCPayment" && /* @__PURE__ */ jsxs(Stack, { horizontal: true, justify: "between", items: "center", children: [
       /* @__PURE__ */ jsx(Paragraph, { children: "Surcharge" }),
-      /* @__PURE__ */ jsxs(Paragraph, { children: [
+      /* @__PURE__ */ jsxs(Paragraph, { testid: testid ? `${testid}-surcharge` : void 0, children: [
         "$",
         formatCurrencyDisplay(creditCardSurcharge.toFixed(2))
       ] })
@@ -76,6 +77,7 @@ function PaymentOnAccountModal(props) {
       /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
         Input,
         {
+          testid: testid ? `${testid}-amount-to-pay` : void 0,
           type: "number",
           placeholder: "$0.00",
           align: "right",
@@ -88,6 +90,7 @@ function PaymentOnAccountModal(props) {
     /* @__PURE__ */ jsx(
       SelectPaymentMethod,
       __spreadProps(__spreadValues({}, paymentProps), {
+        testid: testid ? `${testid}-select-payment-method` : void 0,
         amountToPay: amount + creditCardSurcharge,
         cardPaymentUrl,
         setCardPaymentUrl,

package/dist/{chunk-S5K22XTH.js → chunk-JWCT72WR.js}

@@ -18,20 +18,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__ */ jsx(
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: clsx(
         typography.label,
         align === "left" && "text-left",

package/dist/{chunk-QNQ5K7NW.js → chunk-LM5MKBPM.js}

@@ -1,12 +1,12 @@
 import {
   Label
-} from "./chunk-S5K22XTH.js";
+} from "./chunk-JWCT72WR.js";
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-FKMKHLQH.js";
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   baseTransition,
   componentGap,
@@ -26,6 +26,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var OptionPill = (_a) => {
   var _b = _a, {
     id,
+    testid,
     selected = false,
     onClick,
     onRemove,
@@ -35,6 +36,7 @@ var OptionPill = (_a) => {
     className
   } = _b, props = __objRest(_b, [
     "id",
+    "testid",
     "selected",
     "onClick",
     "onRemove",
@@ -66,6 +68,7 @@ var OptionPill = (_a) => {
     "div",
     __spreadProps(__spreadValues(__spreadValues({
       id,
+      "data-testid": testid,
       onClick: handleOnClick
     }, props), additionalAttributes), {
       className: clsx(
@@ -83,6 +86,7 @@ var OptionPill = (_a) => {
           Label,
           {
             id: id ? `${id}-label` : void 0,
+            testid: testid ? `${testid}-label` : void 0,
             padded: true,
             className: componentPaddingYUsingComponentGap,
             children
@@ -92,6 +96,7 @@ var OptionPill = (_a) => {
           Button,
           {
             id: id ? `${id}-remove-button` : void 0,
+            testid: testid ? `${testid}-remove-button` : void 0,
             onClick: handleOnRemove,
             disabled,
             className: clsx(

package/dist/{chunk-EO3JJWFW.js → chunk-N6JVLYEE.js}

@@ -69,7 +69,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -105,14 +106,16 @@ var Stack = (_a) => {
     "id",
     "noGap",
     "marginTop",
-    "marginBottom"
+    "marginBottom",
+    "testid"
   ]);
   const flexClassNames = getFlexClassNames({ items, justify, grow });
   const gapClassNames = useGapClassNames(sizing);
   return /* @__PURE__ */ jsx(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,

package/dist/{chunk-IGQVA7SC.js → chunk-NKUETCDA.js}

@@ -11,17 +11,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__ */ jsx(
     "span",
     __spreadProps(__spreadValues({}, props), {
+      "data-testid": testid,
       className: clsx(
         "icon",
         `icon-${size}`,

package/dist/{chunk-PCCJ7L3N.js → chunk-NMVSRA5Y.js}

@@ -1,6 +1,6 @@
 import {
   Icon
-} from "./chunk-IGQVA7SC.js";
+} from "./chunk-NKUETCDA.js";
 import {
   componentPadding,
   layoutGap,
@@ -36,7 +36,8 @@ function DateCell(_a) {
     onMouseLeave,
     cellPadding = "",
     isRangeDisabled = false,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "date",
     "isInMonth",
@@ -51,12 +52,14 @@ function DateCell(_a) {
     "onMouseLeave",
     "cellPadding",
     "isRangeDisabled",
-    "id"
+    "id",
+    "testid"
   ]);
   return /* @__PURE__ */ jsx(
     "span",
     __spreadProps(__spreadValues({}, props), {
       id,
+      "data-testid": testid,
       className: clsx(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -103,7 +106,8 @@ function CalendarRange({
   mode = "double",
   cardStyle = false,
   disableRange = false,
-  id
+  id,
+  testid
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
@@ -196,6 +200,7 @@ function CalendarRange({
     "div",
     {
       id,
+      "data-testid": testid,
       className: clsx(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -236,6 +241,7 @@ function CalendarRange({
                             "button",
                             {
                               id: id ? `${id}-prev-month-button` : void 0,
+                              "data-testid": testid ? `${testid}-prev-month-button` : void 0,
                               type: "button",
                               className: clsx(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -254,6 +260,7 @@ function CalendarRange({
                             "button",
                             {
                               id: id ? `${id}-next-month-button` : void 0,
+                              "data-testid": testid ? `${testid}-next-month-button` : void 0,
                               type: "button",
                               className: clsx(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -297,6 +304,7 @@ function CalendarRange({
                         DateCell,
                         {
                           id: id ? `${id}-date-${date.toString()}` : void 0,
+                          testid: testid ? `${testid}-date-${date.toString()}` : void 0,
                           date,
                           isInMonth: !!isInMonth,
                           isToday: !!isToday,

package/dist/{chunk-X62XGQY7.js → chunk-NW2C4DL4.js}

@@ -1,6 +1,6 @@
 import {
   Button
-} from "./chunk-H6LXXGX6.js";
+} from "./chunk-FKMKHLQH.js";
 import {
   __objRest,
   __spreadProps,
@@ -9,7 +9,7 @@ import {
 
 // src/components/ContentTab.tsx
 import clsx from "clsx";
-import { useCallback, useState } from "react";
+import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ContentTab = (_a) => {
   var _b = _a, {
@@ -20,7 +20,8 @@ var ContentTab = (_a) => {
     onClick,
     ref,
     fullWidth,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "label",
     "selected",
@@ -29,9 +30,9 @@ var ContentTab = (_a) => {
     "onClick",
     "ref",
     "fullWidth",
-    "id"
+    "id",
+    "testid"
   ]);
-  const [active, setActive] = useState(false);
   const handleClick = useCallback(
     (e) => {
       if (!disabled) {
@@ -41,15 +42,14 @@ var ContentTab = (_a) => {
     [onClick, disabled]
   );
   const computedClassName = clsx(
-    "absolute left-0 right-0 bottom-0 transition-colors duration-200 ease-in-out hover:bg-border-action-hover z-10",
-    "rounded-px",
+    "absolute left-0 right-0 bottom-0 transition-colors duration-200 ease-in-out z-10",
+    "rounded-px ",
     "h-0.5",
-    active && "bg-text-action-primary-active",
-    !active && !disabled && "bg-text-action-primary-normal",
-    !active && disabled && "bg-text-action-primary-disabled",
+    !disabled && "bg-text-action-primary-normal peer-hover:bg-border-action-hover peer-active:bg-border-action-active",
+    disabled && "bg-text-action-primary-disabled",
     className
   );
-  return /* @__PURE__ */ jsxs("div", { id, className: clsx(
+  return /* @__PURE__ */ jsxs("div", { id, "data-testid": testid, className: clsx(
     "relative",
     fullWidth && "flex-1"
   ), children: [
@@ -57,16 +57,18 @@ var ContentTab = (_a) => {
       Button,
       __spreadProps(__spreadValues({
         id: id ? `${id}-button` : void 0,
+        testid: testid ? `${testid}-button` : void 0,
         block: fullWidth,
         ref,
         variant: "tertiary",
         disabled,
-        onMouseDown: () => setActive(true),
-        onMouseLeave: () => setActive(false),
-        onMouseUp: () => setActive(false),
         onClick: handleClick,
         role: "tab",
-        "aria-selected": selected
+        "aria-selected": selected,
+        className: clsx(
+          "peer",
+          !selected && "!text-text-secondary-normal hover:!text-text-action-primary-hover active:!text-text-action-primary-active"
+        )
       }, props), {
         children: label
       })
@@ -75,6 +77,7 @@ var ContentTab = (_a) => {
       "div",
       {
         id: id ? `${id}-indicator` : void 0,
+        "data-testid": testid ? `${testid}-indicator` : void 0,
         className: computedClassName,
         children: " "
       }