@spaced-out/ui-design-system 0.5.10 → 0.5.12-beta.0

package/lib/components/Text/Text.js

@@ -7,6 +7,7 @@ exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.S
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _string = require("../../utils/string");
 var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -18,7 +19,8 @@ const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     highlight,
     highlightClassName,
     caseSensitiveHighlighting,
-    highlightWithBackground
+    highlightWithBackground,
+    testId
   } = _ref;
   // Split text on highlight term, include term itself into parts, ignore case
   // Convert highlight to an array if it's not already
@@ -27,6 +29,10 @@ const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'highlight'
+    }),
     children: parts.map((part, idx) => {
       const isHighlighted = highlightArray.some(highlightTerm => caseSensitiveHighlighting ? (0, _string.escapeRegExp)(part).includes((0, _string.escapeRegExp)(highlightTerm)) : (0, _string.escapeRegExp)(part).toLowerCase().includes((0, _string.escapeRegExp)(highlightTerm).toLowerCase()));
       return isHighlighted ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
@@ -47,10 +53,15 @@ const JumboLarge = exports.JumboLarge = /*#__PURE__*/React.forwardRef((_ref2, re
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.jumboLarge, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -58,7 +69,8 @@ const JumboLarge = exports.JumboLarge = /*#__PURE__*/React.forwardRef((_ref2, re
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -71,10 +83,15 @@ const JumboMedium = exports.JumboMedium = /*#__PURE__*/React.forwardRef((_ref3,
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -82,7 +99,8 @@ const JumboMedium = exports.JumboMedium = /*#__PURE__*/React.forwardRef((_ref3,
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -95,10 +113,15 @@ const JumboSmall = exports.JumboSmall = /*#__PURE__*/React.forwardRef((_ref4, re
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref4;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.jumboSmall, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -106,7 +129,8 @@ const JumboSmall = exports.JumboSmall = /*#__PURE__*/React.forwardRef((_ref4, re
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -119,10 +143,15 @@ const TitleMedium = exports.TitleMedium = /*#__PURE__*/React.forwardRef((_ref5,
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref5;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -130,7 +159,8 @@ const TitleMedium = exports.TitleMedium = /*#__PURE__*/React.forwardRef((_ref5,
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -143,10 +173,15 @@ const SubTitleLarge = exports.SubTitleLarge = /*#__PURE__*/React.forwardRef((_re
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref6;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -154,7 +189,8 @@ const SubTitleLarge = exports.SubTitleLarge = /*#__PURE__*/React.forwardRef((_re
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -167,10 +203,15 @@ const SubTitleMedium = exports.SubTitleMedium = /*#__PURE__*/React.forwardRef((_
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref7;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -178,7 +219,8 @@ const SubTitleMedium = exports.SubTitleMedium = /*#__PURE__*/React.forwardRef((_
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -191,10 +233,15 @@ const SubTitleSmall = exports.SubTitleSmall = /*#__PURE__*/React.forwardRef((_re
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref8;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -202,7 +249,8 @@ const SubTitleSmall = exports.SubTitleSmall = /*#__PURE__*/React.forwardRef((_re
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -215,10 +263,15 @@ const SubTitleExtraSmall = exports.SubTitleExtraSmall = /*#__PURE__*/React.forwa
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref9;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("h5", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -226,7 +279,8 @@ const SubTitleExtraSmall = exports.SubTitleExtraSmall = /*#__PURE__*/React.forwa
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -239,10 +293,15 @@ const ButtonTextMedium = exports.ButtonTextMedium = /*#__PURE__*/React.forwardRe
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref0;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -250,7 +309,8 @@ const ButtonTextMedium = exports.ButtonTextMedium = /*#__PURE__*/React.forwardRe
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -263,10 +323,15 @@ const ButtonTextSmall = exports.ButtonTextSmall = /*#__PURE__*/React.forwardRef(
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref1;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -274,7 +339,8 @@ const ButtonTextSmall = exports.ButtonTextSmall = /*#__PURE__*/React.forwardRef(
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -287,10 +353,15 @@ const MenuTextMedium = exports.MenuTextMedium = /*#__PURE__*/React.forwardRef((_
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref10;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.menuTextMedium, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -298,7 +369,8 @@ const MenuTextMedium = exports.MenuTextMedium = /*#__PURE__*/React.forwardRef((_
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -311,10 +383,15 @@ const MenuTextSmall = exports.MenuTextSmall = /*#__PURE__*/React.forwardRef((_re
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref11;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.menuTextSmall, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -322,7 +399,8 @@ const MenuTextSmall = exports.MenuTextSmall = /*#__PURE__*/React.forwardRef((_re
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -335,10 +413,15 @@ const ButtonTextExtraSmall = exports.ButtonTextExtraSmall = /*#__PURE__*/React.f
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref12;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -346,7 +429,8 @@ const ButtonTextExtraSmall = exports.ButtonTextExtraSmall = /*#__PURE__*/React.f
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -359,10 +443,15 @@ const ButtonTextMediumUnderline = exports.ButtonTextMediumUnderline = /*#__PURE_
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref13;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -370,7 +459,8 @@ const ButtonTextMediumUnderline = exports.ButtonTextMediumUnderline = /*#__PURE_
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -383,10 +473,15 @@ const ButtonTextSmallUnderline = exports.ButtonTextSmallUnderline = /*#__PURE__*
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref14;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -394,7 +489,8 @@ const ButtonTextSmallUnderline = exports.ButtonTextSmallUnderline = /*#__PURE__*
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -407,10 +503,15 @@ const ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmallUnderline = /*
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref15;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -418,7 +519,8 @@ const ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmallUnderline = /*
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -431,10 +533,15 @@ const FormInputMedium = exports.FormInputMedium = /*#__PURE__*/React.forwardRef(
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref16;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -442,7 +549,8 @@ const FormInputMedium = exports.FormInputMedium = /*#__PURE__*/React.forwardRef(
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -455,10 +563,15 @@ const FormInputSmall = exports.FormInputSmall = /*#__PURE__*/React.forwardRef((_
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref17;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -466,7 +579,8 @@ const FormInputSmall = exports.FormInputSmall = /*#__PURE__*/React.forwardRef((_
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -479,10 +593,15 @@ const BodyLarge = exports.BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref18;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -490,7 +609,8 @@ const BodyLarge = exports.BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -503,10 +623,15 @@ const BodyMedium = exports.BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, r
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref19;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -514,7 +639,8 @@ const BodyMedium = exports.BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, r
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -527,10 +653,15 @@ const BodySmall = exports.BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref20;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -538,7 +669,8 @@ const BodySmall = exports.BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -551,10 +683,15 @@ const BodyLargeBold = exports.BodyLargeBold = /*#__PURE__*/React.forwardRef((_re
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref21;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -562,7 +699,8 @@ const BodyLargeBold = exports.BodyLargeBold = /*#__PURE__*/React.forwardRef((_re
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -575,10 +713,15 @@ const BodyMediumBold = exports.BodyMediumBold = /*#__PURE__*/React.forwardRef((_
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref22;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -586,7 +729,8 @@ const BodyMediumBold = exports.BodyMediumBold = /*#__PURE__*/React.forwardRef((_
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -599,10 +743,15 @@ const BodySmallBold = exports.BodySmallBold = /*#__PURE__*/React.forwardRef((_re
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref23;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default.bold, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -610,7 +759,8 @@ const BodySmallBold = exports.BodySmallBold = /*#__PURE__*/React.forwardRef((_re
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -623,10 +773,15 @@ const FormLabelMedium = exports.FormLabelMedium = /*#__PURE__*/React.forwardRef(
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref24;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -634,7 +789,8 @@ const FormLabelMedium = exports.FormLabelMedium = /*#__PURE__*/React.forwardRef(
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });
@@ -647,10 +803,15 @@ const FormLabelSmall = exports.FormLabelSmall = /*#__PURE__*/React.forwardRef((_
     highlightString,
     caseSensitiveHighlighting,
     highlightWithBackground,
+    testId,
     ...props
   } = _ref25;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'text'
+    }),
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
     ref: ref,
     children: !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(HighlightText, {
@@ -658,7 +819,8 @@ const FormLabelSmall = exports.FormLabelSmall = /*#__PURE__*/React.forwardRef((_
       highlight: highlightString,
       caseSensitiveHighlighting: caseSensitiveHighlighting,
       highlightClassName: highlightedTextClassName,
-      highlightWithBackground: highlightWithBackground
+      highlightWithBackground: highlightWithBackground,
+      testId: testId
     }) : children
   });
 });