@dmsi/wedgekit-react 0.0.140 → 0.0.141

package/dist/components/Button.cjs

@@ -206,7 +206,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -220,7 +221,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -308,6 +310,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -317,7 +320,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })

package/dist/components/Button.js

@@ -1,6 +1,6 @@
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-FKMKHLQH.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/CalendarRange.cjs

@@ -199,17 +199,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}`,
@@ -246,7 +249,8 @@ function DateCell(_a) {
     onMouseLeave,
     cellPadding = "",
     isRangeDisabled = false,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "date",
     "isInMonth",
@@ -261,12 +265,14 @@ function DateCell(_a) {
     "onMouseLeave",
     "cellPadding",
     "isRangeDisabled",
-    "id"
+    "id",
+    "testid"
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "span",
     __spreadProps(__spreadValues({}, props), {
       id,
+      "data-testid": testid,
       className: (0, import_clsx3.default)(
         "flex items-center justify-center aspect-square select-none transition-colors border duration-100 font-medium",
         typography.caption,
@@ -313,7 +319,8 @@ function CalendarRange({
   mode = "double",
   cardStyle = false,
   disableRange = false,
-  id
+  id,
+  testid
 }) {
   const weekDays = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const parseDate = (d) => {
@@ -406,6 +413,7 @@ function CalendarRange({
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx3.default)(
         "relative bg-background-grouped-primary-normal rounded-base w-fit",
         layoutPaddding,
@@ -446,6 +454,7 @@ function CalendarRange({
                             "button",
                             {
                               id: id ? `${id}-prev-month-button` : void 0,
+                              "data-testid": testid ? `${testid}-prev-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx3.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -464,6 +473,7 @@ function CalendarRange({
                             "button",
                             {
                               id: id ? `${id}-next-month-button` : void 0,
+                              "data-testid": testid ? `${testid}-next-month-button` : void 0,
                               type: "button",
                               className: (0, import_clsx3.default)(
                                 "flex items-center justify-center rounded-base hover:bg-action-100 active:bg-action-300 text-icon-action-primary-normal",
@@ -507,6 +517,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/components/CalendarRange.js

@@ -2,8 +2,8 @@ import {
   CalendarRange,
   CalendarRange_default,
   isWeekend
-} from "../chunk-PCCJ7L3N.js";
-import "../chunk-IGQVA7SC.js";
+} from "../chunk-NMVSRA5Y.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/Caption.cjs

@@ -197,17 +197,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}`,
@@ -232,7 +235,8 @@ var Caption = (_a) => {
     style = "default",
     color,
     align,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -240,14 +244,16 @@ var Caption = (_a) => {
     "style",
     "color",
     "align",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id, className: "flex gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id, "data-testid": testid, className: "flex gap-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       WhichIcon,
       {
         id,
+        testid,
         style,
         size: 16,
         className: "mt-[3px] desktop:mt-0"
@@ -257,6 +263,7 @@ var Caption = (_a) => {
       Element,
       __spreadProps(__spreadValues({
         id: id ? `${id}-text` : void 0,
+        "data-testid": testid ? `${testid}-text` : void 0,
         className: (0, import_clsx3.default)(
           typography.caption.replace("text-text-primary-normal", ""),
           (style === "default" || style === "info") && "text-text-secondary-normal",
@@ -281,13 +288,15 @@ var WhichIcon = ({
   style,
   size,
   className,
-  id
+  id,
+  testid
 }) => {
   if (style === "success") {
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "check_circle",
         size
@@ -299,6 +308,7 @@ var WhichIcon = ({
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "warning",
         size
@@ -310,6 +320,7 @@ var WhichIcon = ({
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "info",
         size
@@ -321,6 +332,7 @@ var WhichIcon = ({
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "info",
         size

package/dist/components/Caption.js

@@ -1,7 +1,7 @@
 import {
   Caption
-} from "../chunk-6HIALT5L.js";
-import "../chunk-IGQVA7SC.js";
+} from "../chunk-E7D24OHM.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/Card.cjs

@@ -65,10 +65,11 @@ module.exports = __toCommonJS(Card_exports);
 var import_clsx = __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_clsx.default)(
         "rounded-sm p-desktop-layout-padding",
         selected ? "border-2 border-border-primary-focus" : "border border-border-primary-normal",

package/dist/components/Card.js

@@ -1,6 +1,6 @@
 import {
   Card
-} from "../chunk-4OS6APPF.js";
+} from "../chunk-4LXG6QNT.js";
 import "../chunk-ORMEWXMH.js";
 export {
   Card

package/dist/components/Checkbox.cjs

@@ -198,17 +198,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}`,
@@ -236,7 +239,8 @@ var Paragraph = (_a) => {
     addOverflow,
     children,
     as = "p",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "color",
@@ -246,13 +250,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,
@@ -285,7 +291,8 @@ var Checkbox = (_a) => {
     onChange,
     indeterminate,
     paragraphClassName,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "label",
     "error",
@@ -295,7 +302,8 @@ var Checkbox = (_a) => {
     "onChange",
     "indeterminate",
     "paragraphClassName",
-    "id"
+    "id",
+    "testid"
   ]);
   const selected = indeterminate || checked;
   const normalClassName = (0, import_clsx4.default)(
@@ -324,6 +332,7 @@ var Checkbox = (_a) => {
     "label",
     {
       id,
+      "data-testid": testid,
       htmlFor: id ? `${id}-input` : void 0,
       className: (0, import_clsx4.default)(
         "flex items-center",
@@ -337,6 +346,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,
@@ -368,6 +378,7 @@ var Checkbox = (_a) => {
           Paragraph,
           {
             id: id ? `${id}-label` : void 0,
+            testid: testid ? `${testid}-label` : void 0,
             as: "span",
             padded: true,
             className: (0, import_clsx4.default)(

package/dist/components/Checkbox.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Checkbox
-} from "../chunk-WT5XXW6G.js";
-import "../chunk-VG4EPHJA.js";
-import "../chunk-IGQVA7SC.js";
+} from "../chunk-WFQEE2OO.js";
+import "../chunk-HVI3CL7Y.js";
+import "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/ContentTab.cjs

@@ -211,7 +211,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -225,7 +226,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -313,6 +315,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -322,7 +325,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -341,7 +344,8 @@ var ContentTab = (_a) => {
     onClick,
     ref,
     fullWidth,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "label",
     "selected",
@@ -350,9 +354,9 @@ var ContentTab = (_a) => {
     "onClick",
     "ref",
     "fullWidth",
-    "id"
+    "id",
+    "testid"
   ]);
-  const [active, setActive] = (0, import_react.useState)(false);
   const handleClick = (0, import_react.useCallback)(
     (e) => {
       if (!disabled) {
@@ -362,15 +366,14 @@ var ContentTab = (_a) => {
     [onClick, disabled]
   );
   const computedClassName = (0, import_clsx3.default)(
-    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { id, className: (0, import_clsx3.default)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id, "data-testid": testid, className: (0, import_clsx3.default)(
     "relative",
     fullWidth && "flex-1"
   ), children: [
@@ -378,16 +381,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: (0, import_clsx3.default)(
+          "peer",
+          !selected && "!text-text-secondary-normal hover:!text-text-action-primary-hover active:!text-text-action-primary-active"
+        )
       }, props), {
         children: label
       })
@@ -396,6 +401,7 @@ var ContentTab = (_a) => {
       "div",
       {
         id: id ? `${id}-indicator` : void 0,
+        "data-testid": testid ? `${testid}-indicator` : void 0,
         className: computedClassName,
         children: " "
       }

package/dist/components/ContentTab.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   ContentTab
-} from "../chunk-X62XGQY7.js";
-import "../chunk-H6LXXGX6.js";
+} from "../chunk-NW2C4DL4.js";
+import "../chunk-FKMKHLQH.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {

package/dist/components/ContentTabs.cjs

@@ -215,7 +215,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -229,7 +230,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx2.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -317,6 +319,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -326,7 +329,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -345,7 +348,8 @@ var ContentTab = (_a) => {
     onClick,
     ref,
     fullWidth,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "label",
     "selected",
@@ -354,9 +358,9 @@ var ContentTab = (_a) => {
     "onClick",
     "ref",
     "fullWidth",
-    "id"
+    "id",
+    "testid"
   ]);
-  const [active, setActive] = (0, import_react.useState)(false);
   const handleClick = (0, import_react.useCallback)(
     (e) => {
       if (!disabled) {
@@ -366,15 +370,14 @@ var ContentTab = (_a) => {
     [onClick, disabled]
   );
   const computedClassName = (0, import_clsx3.default)(
-    "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__ */ (0, import_jsx_runtime2.jsxs)("div", { id, className: (0, import_clsx3.default)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { id, "data-testid": testid, className: (0, import_clsx3.default)(
     "relative",
     fullWidth && "flex-1"
   ), children: [
@@ -382,16 +385,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: (0, import_clsx3.default)(
+          "peer",
+          !selected && "!text-text-secondary-normal hover:!text-text-action-primary-hover active:!text-text-action-primary-active"
+        )
       }, props), {
         children: label
       })
@@ -400,6 +405,7 @@ var ContentTab = (_a) => {
       "div",
       {
         id: id ? `${id}-indicator` : void 0,
+        "data-testid": testid ? `${testid}-indicator` : void 0,
         className: computedClassName,
         children: " "
       }
@@ -411,7 +417,7 @@ ContentTab.displayName = "ContentTab";
 // src/components/ContentTabs.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var afterClasses = "after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-border-primary-normal z-0";
-var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab }) => {
+var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, testid, selectedTab }) => {
   var _a, _b;
   const [selectedTabId, setSelectedTabId] = (0, import_react2.useState)(((_a = tabs[0]) == null ? void 0 : _a.id) || "");
   const [focusedTabIndex, setFocusedTabIndex] = (0, import_react2.useState)(0);
@@ -448,11 +454,12 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab }) => {
     setFocusedTabIndex(newIndex);
   };
   const selectedContent = (_b = tabs.find((tab) => tab.id === selectedTabId)) == null ? void 0 : _b.content;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { id, "data-testid": testid, children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "overflow-x-auto pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "div",
       {
         id: id ? `${id}-tablist` : void 0,
+        "data-testid": testid ? `${testid}-tablist` : void 0,
         role: "tablist",
         "aria-orientation": "horizontal",
         className: (0, import_clsx4.default)("flex relative", afterClasses),
@@ -464,6 +471,7 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab }) => {
             {
               fullWidth: fullWidthTabs,
               id: id ? `${id}-tab-${tab.id}` : void 0,
+              testid: testid ? `${testid}-tab-${tab.id}` : void 0,
               label: tab.label,
               selected: isSelected,
               onClick: () => handleTabClick(tab.id, index),
@@ -490,6 +498,7 @@ var ContentTabs = ({ tabs, onTabChange, fullWidthTabs, id, selectedTab }) => {
       "div",
       {
         id: (id ? `${id}-` : "") + `panel-${selectedTabId}`,
+        "data-testid": (testid ? `${testid}-` : "") + `panel-${selectedTabId}`,
         className: "mt-2",
         role: "tabpanel",
         "aria-labelledby": `tab-${selectedTabId}`,