@dmsi/wedgekit-react 0.0.140 → 0.0.141

package/dist/components/PDFViewer.cjs

@@ -209,7 +209,8 @@ var Heading = (_a) => {
     color,
     align,
     variant = "heading1",
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -217,7 +218,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;
@@ -225,6 +227,7 @@ var Heading = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       className: (0, import_clsx2.default)(
         typography[variant],
         className,
@@ -265,7 +268,8 @@ var Button = (_a) => {
     iconOnly = false,
     colorClassName,
     href,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "variant",
     "as",
@@ -279,7 +283,8 @@ var Button = (_a) => {
     "iconOnly",
     "colorClassName",
     "href",
-    "id"
+    "id",
+    "testid"
   ]);
   const primaryVariantStyles = variant === "primary" && (0, import_clsx3.default)(
     (colorClassName == null ? void 0 : colorClassName.trim()) ? colorClassName : "text-text-on-action-primary-normal",
@@ -367,6 +372,7 @@ var Button = (_a) => {
     Element,
     __spreadProps(__spreadValues({
       id,
+      "data-testid": testid,
       type: Element === "button" ? "button" : void 0,
       className: buttonClasses
     }, props), {
@@ -376,7 +382,7 @@ var Button = (_a) => {
       "data-theme": variant === "navigation" ? "brand" : void 0,
       children: [
         leftIcon && leftIcon,
-        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, className: labelClasses, children }),
+        !iconOnly && children && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { id: id ? `${id}-label` : void 0, "data-testid": testid ? `${testid}-label` : void 0, className: labelClasses, children }),
         rightIcon && rightIcon
       ]
     })
@@ -391,17 +397,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}`,
@@ -424,12 +433,14 @@ var ModalHeader = ({
   hideCloseIcon,
   headerIcon,
   onClose,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx5.default)(
         "flex justify-between items-center",
         layoutPaddding,
@@ -438,12 +449,13 @@ var ModalHeader = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx5.default)("flex items-center", layoutGroupGap), children: [
           headerIcon,
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, as: "p", children: title })
+          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Heading2, { id: id ? `${id}-title` : void 0, testid: testid ? `${testid}-title` : void 0, as: "p", children: title })
         ] }),
         !hideCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Button,
           {
             id: id ? `${id}-close-button` : void 0,
+            testid: testid ? `${testid}-close-button` : void 0,
             iconOnly: true,
             variant: "tertiary",
             onClick: onClose,
@@ -462,12 +474,14 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 function ModalContent({
   fixedHeightScrolling,
   children,
-  id
+  id,
+  testid
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx6.default)(
         "flex-grow desktop:flex-grow-0",
         layoutPaddding,
@@ -486,12 +500,14 @@ var ModalButtons = ({
   onClose,
   onContinue,
   customActions,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx7.default)(
         "border-t border-neutral-300 flex justify-end",
         layoutPaddding,
@@ -502,6 +518,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_runtime6.jsx)(Icon, { name: "close", size: 24 }),
             onClick: onClose,
@@ -513,6 +530,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_runtime6.jsx)(Icon, { name: "check", size: 24 }),
             className: "max-sm:w-full",
@@ -535,12 +553,14 @@ var ModalScrim = ({
   children,
   onClick,
   ref,
-  id
+  id,
+  testid
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       id,
+      "data-testid": testid,
       className: (0, import_clsx8.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",
@@ -677,6 +697,7 @@ var sizes = {
 };
 var Modal = ({
   id,
+  testid,
   title,
   open = false,
   size = "small",
@@ -785,6 +806,7 @@ var Modal = ({
       ModalScrim,
       {
         id: id ? `${id}-scrim` : void 0,
+        testid: testid ? `${testid}-scrim` : void 0,
         size,
         ref: bgRef,
         show: open,
@@ -793,6 +815,7 @@ var Modal = ({
           "div",
           {
             id,
+            "data-testid": testid,
             ref: modalRef,
             className: (0, import_clsx9.default)(
               "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
@@ -806,6 +829,7 @@ var Modal = ({
                 ModalHeader,
                 {
                   id: id ? `${id}-header` : void 0,
+                  testid: testid ? `${testid}-header` : void 0,
                   title,
                   onClose: handleClose,
                   hideCloseIcon,
@@ -816,6 +840,7 @@ var Modal = ({
                 ModalContent,
                 {
                   id: id ? `${id}-content` : void 0,
+                  testid: testid ? `${testid}-content` : void 0,
                   fixedHeightScrolling: computedFixedHeightScrolling,
                   children
                 }
@@ -824,6 +849,7 @@ var Modal = ({
                 ModalButtons,
                 {
                   id: id ? `${id}-buttons` : void 0,
+                  testid: testid ? `${testid}-buttons` : void 0,
                   onClose: handleClose,
                   onContinue,
                   customActions
@@ -901,7 +927,8 @@ var Stack = (_a) => {
     id,
     noGap,
     marginTop,
-    marginBottom
+    marginBottom,
+    testid
   } = _b, props = __objRest(_b, [
     "children",
     "items",
@@ -937,14 +964,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_runtime9.jsx)(
     "div",
     __spreadProps(__spreadValues({
-      id
+      id,
+      "data-testid": testid
     }, props), {
       style: {
         height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
@@ -1017,7 +1046,8 @@ var Caption = (_a) => {
     style = "default",
     color,
     align,
-    id
+    id,
+    testid
   } = _b, props = __objRest(_b, [
     "className",
     "children",
@@ -1025,14 +1055,16 @@ var Caption = (_a) => {
     "style",
     "color",
     "align",
-    "id"
+    "id",
+    "testid"
   ]);
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { id, className: "flex gap-1", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { id, "data-testid": testid, className: "flex gap-1", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       WhichIcon,
       {
         id,
+        testid,
         style,
         size: 16,
         className: "mt-[3px] desktop:mt-0"
@@ -1042,6 +1074,7 @@ var Caption = (_a) => {
       Element,
       __spreadProps(__spreadValues({
         id: id ? `${id}-text` : void 0,
+        "data-testid": testid ? `${testid}-text` : void 0,
         className: (0, import_clsx11.default)(
           typography.caption.replace("text-text-primary-normal", ""),
           (style === "default" || style === "info") && "text-text-secondary-normal",
@@ -1066,13 +1099,15 @@ var WhichIcon = ({
   style,
   size,
   className,
-  id
+  id,
+  testid
 }) => {
   if (style === "success") {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "check_circle",
         size
@@ -1084,6 +1119,7 @@ var WhichIcon = ({
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "warning",
         size
@@ -1095,6 +1131,7 @@ var WhichIcon = ({
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "info",
         size
@@ -1106,6 +1143,7 @@ var WhichIcon = ({
       Icon,
       {
         id: id ? `${id}-icon` : void 0,
+        testid: testid ? `${testid}-icon` : void 0,
         className,
         name: "info",
         size
@@ -1119,7 +1157,7 @@ Caption.displayName = "Caption";
 // src/components/PDFViewer.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function PDFViewer(props) {
-  const { isOpen, onClose, encodedPdfs, customActions } = props;
+  const { isOpen, onClose, encodedPdfs, customActions, testid } = props;
   const [currentIndex, setCurrentIndex] = (0, import_react6.useState)(0);
   const [isDownloading, setIsDownloading] = (0, import_react6.useState)(false);
   const handleDownload = (0, import_react6.useCallback)(() => {
@@ -1136,16 +1174,18 @@ function PDFViewer(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Modal,
     {
+      testid,
       open: isOpen,
       onClose,
       showButtons: !!customActions,
       customActions,
-      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DownloadIcon, { onClick: handleDownload, isDownloading }),
+      headerIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DownloadIcon, { testid: testid ? `${testid}-download-icon` : void 0, onClick: handleDownload, isDownloading }),
       children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Stack, { sizing: "layout", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PDFElement, { b64: encodedPdfs[currentIndex].base64 }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           Button,
           {
+            testid: testid ? `${testid}-${pdf.fileName}-button` : void 0,
             variant: index === currentIndex ? "primary" : "secondary",
             onClick: (e) => {
               setCurrentIndex(index);
@@ -1169,11 +1209,13 @@ function PDFViewer(props) {
 }
 function DownloadIcon({
   onClick,
-  isDownloading
+  isDownloading,
+  testid
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     Button,
     {
+      testid,
       iconOnly: true,
       variant: "tertiary",
       leftIcon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { name: isDownloading ? "cached" : "download" }),
@@ -1181,7 +1223,7 @@ function DownloadIcon({
     }
   );
 }
-function PDFElement({ b64 }) {
+function PDFElement({ b64, testid }) {
   const [page, setPage] = (0, import_react6.useState)(1);
   const canvasRef = (0, import_react6.useRef)(null);
   const { pdfDocument } = (0, import_react_pdf.usePdf)({
@@ -1192,26 +1234,28 @@ function PDFElement({ b64 }) {
     scale: 1
   });
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col space-y-4", children: [
-    pdfDocument ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("canvas", { ref: canvasRef }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: "Loading PDF..." }),
-    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("ul", { className: "flex flex-row justify-between items-center", children: [
+    pdfDocument ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("canvas", { "data-testid": testid ? `${testid}-pdf-content` : void 0, ref: canvasRef }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
+    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("ul", { className: "flex flex-row justify-between items-center", "data-testid": testid ? `${testid}-pdf-pagination` : void 0, children: [
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "previous", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
+          "data-testid": testid ? `${testid}-pdf-pagination-previous-button` : void 0,
           disabled: page === 1,
           onClick: () => setPage(page - 1),
           className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
           children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Caption, { children: "Previous" })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { className: "text-label-desktop text-text-on-action-primary-normal", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("li", { "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0, className: "text-label-desktop text-text-on-action-primary-normal", children: [
         "Page ",
-        page,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0, children: page }),
         " of ",
-        pdfDocument.numPages
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0, children: pdfDocument.numPages })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { className: "next", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
+          "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
           disabled: page === pdfDocument.numPages,
           onClick: () => setPage(page + 1),
           className: "not-disabled:cursor-pointer not-disabled:hover:underline ",

package/dist/components/PDFViewer.js

@@ -1,27 +1,27 @@
 "use client";
 import {
   Modal
-} from "../chunk-D2YP2BTN.js";
+} from "../chunk-5GOJRLQO.js";
 import "../chunk-4RJKB7LC.js";
-import "../chunk-CG2NIXZE.js";
-import "../chunk-FWPJ73IK.js";
-import "../chunk-6UI5GABI.js";
-import "../chunk-4JLU7TAC.js";
-import "../chunk-J6LETUNM.js";
+import "../chunk-C4JGTH6G.js";
+import "../chunk-SYEJVSE4.js";
+import "../chunk-R7ELP5C5.js";
+import "../chunk-ZFOANBWG.js";
+import "../chunk-AZ7LVLOK.js";
 import {
   Caption
-} from "../chunk-6HIALT5L.js";
+} from "../chunk-E7D24OHM.js";
 import "../chunk-WNQ53SVY.js";
 import "../chunk-4T7F5BZZ.js";
 import {
   Stack
-} from "../chunk-EO3JJWFW.js";
+} from "../chunk-N6JVLYEE.js";
 import {
   Button
-} from "../chunk-H6LXXGX6.js";
+} from "../chunk-FKMKHLQH.js";
 import {
   Icon
-} from "../chunk-IGQVA7SC.js";
+} from "../chunk-NKUETCDA.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 
@@ -30,7 +30,7 @@ import { usePdf } from "@mikecousins/react-pdf";
 import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function PDFViewer(props) {
-  const { isOpen, onClose, encodedPdfs, customActions } = props;
+  const { isOpen, onClose, encodedPdfs, customActions, testid } = props;
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isDownloading, setIsDownloading] = useState(false);
   const handleDownload = useCallback(() => {
@@ -47,16 +47,18 @@ function PDFViewer(props) {
   return /* @__PURE__ */ jsx(
     Modal,
     {
+      testid,
       open: isOpen,
       onClose,
       showButtons: !!customActions,
       customActions,
-      headerIcon: /* @__PURE__ */ jsx(DownloadIcon, { onClick: handleDownload, isDownloading }),
+      headerIcon: /* @__PURE__ */ jsx(DownloadIcon, { testid: testid ? `${testid}-download-icon` : void 0, onClick: handleDownload, isDownloading }),
       children: /* @__PURE__ */ jsxs(Stack, { sizing: "layout", children: [
-        /* @__PURE__ */ jsx(PDFElement, { b64: encodedPdfs[currentIndex].base64 }),
+        /* @__PURE__ */ jsx(PDFElement, { testid, b64: encodedPdfs[currentIndex].base64 }),
         /* @__PURE__ */ jsx(Stack, { horizontal: true, overflowX: "auto", sizing: "layout-group", children: encodedPdfs.map((pdf, index) => /* @__PURE__ */ jsx(
           Button,
           {
+            testid: testid ? `${testid}-${pdf.fileName}-button` : void 0,
             variant: index === currentIndex ? "primary" : "secondary",
             onClick: (e) => {
               setCurrentIndex(index);
@@ -80,11 +82,13 @@ function PDFViewer(props) {
 }
 function DownloadIcon({
   onClick,
-  isDownloading
+  isDownloading,
+  testid
 }) {
   return /* @__PURE__ */ jsx(
     Button,
     {
+      testid,
       iconOnly: true,
       variant: "tertiary",
       leftIcon: /* @__PURE__ */ jsx(Icon, { name: isDownloading ? "cached" : "download" }),
@@ -92,7 +96,7 @@ function DownloadIcon({
     }
   );
 }
-function PDFElement({ b64 }) {
+function PDFElement({ b64, testid }) {
   const [page, setPage] = useState(1);
   const canvasRef = useRef(null);
   const { pdfDocument } = usePdf({
@@ -103,26 +107,28 @@ function PDFElement({ b64 }) {
     scale: 1
   });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-4", children: [
-    pdfDocument ? /* @__PURE__ */ jsx("canvas", { ref: canvasRef }) : /* @__PURE__ */ jsx("div", { children: "Loading PDF..." }),
-    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ jsxs("ul", { className: "flex flex-row justify-between items-center", children: [
+    pdfDocument ? /* @__PURE__ */ jsx("canvas", { "data-testid": testid ? `${testid}-pdf-content` : void 0, ref: canvasRef }) : /* @__PURE__ */ jsx("div", { "data-testid": testid ? `${testid}-pdf-loading` : void 0, children: "Loading PDF..." }),
+    (pdfDocument == null ? void 0 : pdfDocument.numPages) && pdfDocument.numPages > 1 && /* @__PURE__ */ jsxs("ul", { className: "flex flex-row justify-between items-center", "data-testid": testid ? `${testid}-pdf-pagination` : void 0, children: [
       /* @__PURE__ */ jsx("li", { className: "previous", children: /* @__PURE__ */ jsx(
         "button",
         {
+          "data-testid": testid ? `${testid}-pdf-pagination-previous-button` : void 0,
           disabled: page === 1,
           onClick: () => setPage(page - 1),
           className: "not-disabled:cursor-pointer not-disabled:hover:underline ",
           children: /* @__PURE__ */ jsx(Caption, { children: "Previous" })
         }
       ) }),
-      /* @__PURE__ */ jsxs("li", { className: "text-label-desktop text-text-on-action-primary-normal", children: [
+      /* @__PURE__ */ jsxs("li", { "data-testid": testid ? `${testid}-pdf-pagination-text` : void 0, className: "text-label-desktop text-text-on-action-primary-normal", children: [
         "Page ",
-        page,
+        /* @__PURE__ */ jsx("span", { "data-testid": testid ? `${testid}-pdf-pagination-page-${page}` : void 0, children: page }),
         " of ",
-        pdfDocument.numPages
+        /* @__PURE__ */ jsx("span", { "data-testid": testid ? `${testid}-pdf-pagination-total-page-${pdfDocument.numPages}` : void 0, children: pdfDocument.numPages })
       ] }),
       /* @__PURE__ */ jsx("li", { className: "next", children: /* @__PURE__ */ jsx(
         "button",
         {
+          "data-testid": testid ? `${testid}-pdf-pagination-next-button` : void 0,
           disabled: page === pdfDocument.numPages,
           onClick: () => setPage(page + 1),
           className: "not-disabled:cursor-pointer not-disabled:hover:underline ",

package/dist/components/Paragraph.cjs

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

package/dist/components/Paragraph.js

@@ -1,6 +1,6 @@
 import {
   Paragraph
-} from "../chunk-VG4EPHJA.js";
+} from "../chunk-HVI3CL7Y.js";
 import "../chunk-RDLEIAQU.js";
 import "../chunk-ORMEWXMH.js";
 export {