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

package/lib/components/PageTitle/PageTitle.js

@@ -7,6 +7,7 @@ exports.TabSlot = exports.RightSlot = exports.PageTitle = exports.PageName = exp
 var React = _interopRequireWildcard(require("react"));
 var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Text = require("../Text");
@@ -143,11 +144,16 @@ const TabSlot = _ref => {
   let {
     children,
     className,
+    testId,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
     className: (0, _classify.default)(_PageTitleModule.default.tabSlot, className),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -156,10 +162,15 @@ TabSlot.displayName = 'TabSlot';
 const RightSlot = _ref2 => {
   let {
     children,
+    testId,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -168,11 +179,16 @@ RightSlot.displayName = 'RightSlot';
 const PageName = _ref3 => {
   let {
     children,
+    testId,
     ...props
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ...props,
     className: _PageTitleModule.default.pageTitle,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -184,7 +200,8 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
     children,
     pageNameKey,
     showBackButton,
-    onBack
+    onBack,
+    testId
   } = _ref4;
   const getNamedComp = comp => {
     const childrenArray = React.Children.toArray(children);
@@ -206,7 +223,10 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
     onBack?.();
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    "data-testid": "PageTitle",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper),
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
@@ -217,14 +237,27 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
           title: "Navigate Back",
           delayMotionDuration: "slow",
           placement: "top-start",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'back-tooltip'
+          }),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
             onClick: handleBack,
             type: "tertiary",
             iconLeftName: "chevron-left",
-            ariaLabel: "Navigate Back Button"
+            ariaLabel: "Navigate Back Button",
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'back-button'
+            })
           })
         }), pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(PageName, {
+          testId: testId,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.TitleMedium, {
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'title'
+            }),
             children: [PAGE_NAME_LIST[pageNameKey].title, ' ']
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             type: PAGE_NAME_LIST[pageNameKey].iconType,
@@ -236,7 +269,11 @@ const PageTitle = exports.PageTitle = /*#__PURE__*/React.forwardRef((_ref4, ref)
               '--fa-secondary-color': _color.colorIconSecondary,
               '--fa-primary-opacity': '1.0',
               '--fa-secondary-opacity': '1.0'
-            }
+            },
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'icon'
+            })
           })]
         }) : getNamedComp('PageName')]
       }), getNamedComp('TabSlot')]

package/lib/components/Pagination/Pagination.d.ts

@@ -27,6 +27,7 @@ export interface PaginationProps extends Omit<{
     classNames?: ClassNames;
 }>, PaginationBaseProps {
     classNames?: ClassNames;
+    testId?: string;
 }
 export interface PaginationItemProps {
     id: string;
@@ -35,6 +36,7 @@ export interface PaginationItemProps {
     page: number | null | undefined;
     selected: boolean;
     type: PaginationItemType;
+    testId?: string;
 }
 export declare const Pagination: Flow.AbstractComponent<PaginationProps, HTMLDivElement>;
 export {};

package/lib/components/Pagination/Pagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAcrD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,KAClC,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACR;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,EAC5B,MAAM,mBAAmB,GAAG,MAAM;IAAC,UAAU,CAAC,EAAE,UAAU,CAAA;CAAC,CAC5D,EACD,mBAAmB;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAMD,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA0Ff,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/Pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAerD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC;AAE5D,MAAM,MAAM,kBAAkB,GAC1B,OAAO,GACP,UAAU,GACV,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,WAAW,mBAAmB;IAClC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACjC,KAAK,CAAC,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,KAClC,IAAI,CAAC;IACV,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CAChC;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACR;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,EAC5B,MAAM,mBAAmB,GAAG,MAAM;IAAC,UAAU,CAAC,EAAE,UAAU,CAAA;CAAC,CAC5D,EACD,mBAAmB;IACrB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC5D,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,kBAAkB,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA8Gf,CAAC"}

package/lib/components/Pagination/Pagination.js

@@ -9,6 +9,7 @@ var _usePagination = require("../../hooks/usePagination");
 var _useWindowSize = require("../../hooks/useWindowSize");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
+var _qa = require("../../utils/qa");
 var _Dropdown = require("../Dropdown");
 var _PaginationItem = require("./PaginationItem");
 var _Text = require("../Text");
@@ -33,6 +34,7 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
     showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
     showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
     staticPaginationLabel,
+    testId,
     ...restPaginationProps
   } = props;
   const showPageSelectionDropDown = style !== 'primary' && showExtraSecPaginationButtons;
@@ -57,13 +59,24 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
   }));
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
-    "data-testid": "Pagination",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     className: (0, _classify.default)(_PaginationModule.default.wrapper, classNames?.wrapper),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'children'
+      }),
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _PaginationModule.default.paginatorSlots,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'paginator-slots'
+      }),
       children: [style === 'secondary' && showPageSelectionDropDown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
           size: "small",
@@ -80,16 +93,33 @@ const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, re
             virtualization: menuVirtualization
           },
           dropdownInputText: currentPage.toString(),
-          onChange: option => onChange?.(parseInt(option.key))
+          onChange: option => onChange?.(parseInt(option.key)),
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'dropdown'
+          })
         }), !!totalPages && !!currentPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleExtraSmall, {
           color: "tertiary",
           className: _PaginationModule.default.secondaryLabel,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'label'
+          }),
           children: staticPaginationLabel ? staticPaginationLabel : `of ${totalPages} ${totalPages > 1 ? 'Pages' : 'Page'}`
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_PaginationModule.default.paginatorSlot, classNames?.paginator),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'paginator'
+        }),
         children: items?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.PaginationItem, {
-          ...item
+          ...item,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'item',
+            index: item.id
+          })
         }, item.id))
       })]
     })]

package/lib/components/Pagination/PaginationItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/PaginationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,sCAAsC,CAAC;AAM9E,eAAO,MAAM,gBAAgB,GAAI,OAAO,mBAAmB,kCAsG1D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAExD,CAAC"}
+{"version":3,"file":"PaginationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/PaginationItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,sCAAsC,CAAC;AAM9E,eAAO,MAAM,gBAAgB,GAAI,OAAO,mBAAmB,kCA8G1D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,sBAExD,CAAC"}

package/lib/components/Pagination/PaginationItem.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.PaginationItem = exports.PaginationButton = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Text = require("../Text");
 var _PaginationModule = _interopRequireDefault(require("./Pagination.module.css"));
@@ -18,7 +19,8 @@ const PaginationButton = props => {
     onClick,
     page,
     selected,
-    type
+    type,
+    testId
   } = props;
   const paginationBtnRef = React.useRef(null);
   React.useEffect(() => {
@@ -43,7 +45,11 @@ const PaginationButton = props => {
         disabled: disabled,
         ref: paginationBtnRef,
         iconLeftName: "chevrons-left",
-        ariaLabel: "First page"
+        ariaLabel: "First page",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'first'
+        })
       });
     case 'previous':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
@@ -61,7 +67,11 @@ const PaginationButton = props => {
         disabled: disabled,
         ref: paginationBtnRef,
         iconLeftName: "chevron-left",
-        ariaLabel: "Previous page"
+        ariaLabel: "Previous page",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'previous'
+        })
       });
     case 'page':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
@@ -76,12 +86,20 @@ const PaginationButton = props => {
         disabled: disabled,
         ref: paginationBtnRef,
         tabIndex: selected ? -1 : 0,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: `page-${page}`
+        }),
         children: page
       });
     case 'start-ellipsis':
     case 'end-ellipsis':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_PaginationModule.default.separator),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: type
+        }),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.ButtonTextSmall, {
           color: "disabled",
           children: "..."
@@ -103,7 +121,11 @@ const PaginationButton = props => {
         disabled: disabled,
         ref: paginationBtnRef,
         iconLeftName: "chevron-right",
-        ariaLabel: "Next page"
+        ariaLabel: "Next page",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'next'
+        })
       });
     case 'last':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
@@ -121,7 +143,11 @@ const PaginationButton = props => {
         disabled: disabled,
         ref: paginationBtnRef,
         iconLeftName: "chevrons-right",
-        ariaLabel: "Last page"
+        ariaLabel: "Last page",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'last'
+        })
       });
     default:
       break;

package/lib/components/Panel/Panel.d.ts

@@ -9,6 +9,7 @@ export interface PanelHeaderProps {
     onCloseButtonClick?: React.MouseEventHandler<HTMLButtonElement>;
     className?: string;
     size?: 'medium' | 'small';
+    testId?: string;
 }
 type FooterClassNames = Readonly<{
     wrapper?: string;
@@ -17,19 +18,22 @@ type FooterClassNames = Readonly<{
 export interface PanelFooterProps {
     children?: React.ReactNode;
     classNames?: FooterClassNames;
+    testId?: string;
 }
 export interface PanelBodyProps {
     children?: React.ReactNode;
     className?: string;
+    testId?: string;
 }
 export interface PanelProps extends Omit<ModalProps, 'allowBackgroundInteraction' | 'size' | 'anchor'> {
     allowBackgroundInteraction?: boolean;
     size?: PanelSize;
     anchor?: PanelAnchor;
+    testId?: string;
 }
-export declare const PanelHeader: ({ children, hideCloseBtn, onCloseButtonClick, className, size, }: PanelHeaderProps) => React.JSX.Element;
+export declare const PanelHeader: ({ children, hideCloseBtn, onCloseButtonClick, className, size, testId, }: PanelHeaderProps) => React.JSX.Element;
 export declare const PanelBody: Flow.AbstractComponent<PanelBodyProps, HTMLDivElement>;
-export declare const PanelFooter: ({ children, classNames }: PanelFooterProps) => React.JSX.Element;
-export declare const Panel: ({ children, isOpen, size, anchor, onClose, hideBackdrop, classNames, customAnimation, tapOutsideToClose, allowBackgroundInteraction, ...restPanelProps }: PanelProps) => React.JSX.Element;
+export declare const PanelFooter: ({ children, classNames, testId, }: PanelFooterProps) => React.JSX.Element;
+export declare const Panel: ({ children, isOpen, size, anchor, onClose, hideBackdrop, classNames, customAnimation, tapOutsideToClose, allowBackgroundInteraction, testId, ...restPanelProps }: PanelProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Panel.d.ts.map

package/lib/components/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAerD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAOrD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;CAC3B;AAED,KAAK,gBAAgB,GAAG,QAAQ,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAC/B;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,UAAU,EAAE,4BAA4B,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1E,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAmBD,eAAO,MAAM,WAAW,GAAI,kEAMzB,gBAAgB,sBAmBlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAO1E,CAAC;AAEJ,eAAO,MAAM,WAAW,GAAI,0BAAwB,gBAAgB,sBAUnE,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,0JAYnB,UAAU,sBA0CZ,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAgBrD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAOrD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,OAAO,CAAC;AAE3C,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kBAAkB,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,KAAK,gBAAgB,GAAG,QAAQ,CAAC;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,UAAU,EAAE,4BAA4B,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC1E,0BAA0B,CAAC,EAAE,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAmBD,eAAO,MAAM,WAAW,GAAI,0EAOzB,gBAAgB,sBAyBlB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,cAAc,CAW1E,CAAC;AAEJ,eAAO,MAAM,WAAW,GAAI,mCAIzB,gBAAgB,sBAgBlB,CAAC;AAEF,eAAO,MAAM,KAAK,GAAI,kKAanB,UAAU,sBA2CZ,CAAC"}

package/lib/components/Panel/Panel.js

@@ -9,6 +9,7 @@ var _useMountTransition = _interopRequireDefault(require("../../hooks/useMountTr
 var _motion = require("../../styles/variables/_motion");
 var _space = require("../../styles/variables/_space");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Modal = require("../Modal");
 var _Truncate = require("../Truncate");
@@ -38,14 +39,23 @@ const PanelHeader = _ref => {
     hideCloseBtn,
     onCloseButtonClick,
     className,
-    size
+    size,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: (0, _classify.default)(_PanelModule.default.panelHeader, className),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'header'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: _PanelModule.default.headerContent,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'title'
+          }),
           children: children
         })
       }), !hideCloseBtn && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
@@ -53,7 +63,11 @@ const PanelHeader = _ref => {
         type: "ghost",
         onClick: onCloseButtonClick,
         ariaLabel: "Close Button",
-        size: size
+        size: size,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'close-button'
+        })
       })]
     })
   });
@@ -62,24 +76,38 @@ exports.PanelHeader = PanelHeader;
 const PanelBody = exports.PanelBody = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
-    className
+    className,
+    testId
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
     className: (0, _classify.default)(_PanelModule.default.panelBody, className),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'body'
+    }),
     children: children
   });
 });
 const PanelFooter = _ref3 => {
   let {
     children,
-    classNames
+    classNames,
+    testId
   } = _ref3;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_PanelModule.default.panelFooter, classNames?.wrapper),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'footer'
+      }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: (0, _classify.default)(_PanelModule.default.panelFooterActions, classNames?.actions),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'actions'
+        }),
         children: children
       })
     })
@@ -98,6 +126,7 @@ const Panel = _ref4 => {
     customAnimation,
     tapOutsideToClose = true,
     allowBackgroundInteraction,
+    testId,
     ...restPanelProps
   } = _ref4;
   const isTransitioning = (0, _useMountTransition.default)(isOpen, parseInt(_motion.motionDurationNormal));
@@ -108,6 +137,7 @@ const Panel = _ref4 => {
     hideBackdrop: hideBackdrop,
     tapOutsideToClose: allowBackgroundInteraction ? false : tapOutsideToClose,
     allowBackgroundInteraction: allowBackgroundInteraction,
+    testId: testId,
     ...restPanelProps,
     classNames: {
       container: (0, _classify.default)(_PanelModule.default.panelContainer, {

package/lib/components/ProgressDonut/ProgressDonut.d.ts

@@ -7,6 +7,7 @@ export interface ProgressDonutProps {
     classNames?: ClassNames;
     color?: keyof typeof COLORS;
     percentage: number;
+    testId?: string;
 }
 export declare const ProgressDonut: Flow.AbstractComponent<ProgressDonutProps, HTMLDivElement>;
 export {};

package/lib/components/ProgressDonut/ProgressDonut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressDonut.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressDonut/ProgressDonut.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAiBtD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;CACpB;AAcD,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CAoEf,CAAC"}
+{"version":3,"file":"ProgressDonut.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressDonut/ProgressDonut.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAkBtD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,kBAAkB;IACjC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAcD,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CAuEf,CAAC"}

package/lib/components/ProgressDonut/ProgressDonut.js

@@ -7,6 +7,7 @@ exports.ProgressDonut = void 0;
 var React = _interopRequireWildcard(require("react"));
 var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Text = require("../Text");
 var _ProgressDonutModule = _interopRequireDefault(require("./ProgressDonut.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -35,7 +36,8 @@ const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_re
   let {
     classNames,
     percentage = 0,
-    color
+    color,
+    testId
   } = _ref;
   const donutPercentage = React.useMemo(() => Math.min(Math.max(percentage, MIN_PERCENTAGE), MAX_PERCENTAGE), [percentage]);
   const donutColor = React.useMemo(() => getProgressDonutColor(donutPercentage), [donutPercentage]);
@@ -44,7 +46,10 @@ const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_re
   const offset = React.useMemo(() => circumference - donutPercentage / MAX_PERCENTAGE * circumference, [circumference, donutPercentage]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     ref: ref,
-    "data-testid": "ProgressDonut",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'progressDonut'
+    }),
     className: (0, _classify.default)(_ProgressDonutModule.default.wrapper, classNames?.wrapper),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: _ProgressDonutModule.default.donutChart,
@@ -72,6 +77,10 @@ const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_re
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodyLargeBold, {
         className: _ProgressDonutModule.default.donutChartPercentage,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'percentage'
+        }),
         children: `${donutPercentage}%`
       })]
     })

package/lib/components/PromptChip/PromptChip.d.ts

@@ -7,6 +7,8 @@ type ClassNames = Readonly<{
     icon?: string;
     wrapper?: string;
     children?: string;
+    leftSlot?: string;
+    rightSlot?: string;
     container?: string;
 }>;
 export declare const PROMPT_CHIP_TYPE: Readonly<{
@@ -16,6 +18,7 @@ export declare const PROMPT_CHIP_TYPE: Readonly<{
 export type PromptChipType = (typeof PROMPT_CHIP_TYPE)[keyof typeof PROMPT_CHIP_TYPE];
 export type PromptChipProps = {
     classNames?: ClassNames;
+    testId?: string;
 } & ({
     onDismiss?: (e: React.SyntheticEvent<HTMLElement>) => unknown;
     dismissable: true;

package/lib/components/PromptChip/PromptChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PromptChip.d.ts","sourceRoot":"","sources":["../../../src/components/PromptChip/PromptChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAKrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB,GAAG,CACA;IACE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC9D,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EACJ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC,CAAC;AAEJ,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA4Hf,CAAC"}
+{"version":3,"file":"PromptChip.d.ts","sourceRoot":"","sources":["../../../src/components/PromptChip/PromptChip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAMrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAM7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,CACA;IACE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC;IAC9D,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,GACD;IACE,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,SAAS,CAAC,EAAE,KAAK,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB,CACJ,GAAG;IACA,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EACJ,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GACtD,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,eAAe,CAAC,EAAE,gBAAgB,CAAC;CACpC,CAAC;AAEJ,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,cAAc,CA6If,CAAC"}

package/lib/components/PromptChip/PromptChip.js

@@ -7,6 +7,7 @@ exports.PromptChip = exports.PROMPT_CHIP_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _typography = require("../../types/typography");
 var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
 var _ConditionalWrapper = require("../ConditionalWrapper");
 var _Icon = require("../Icon");
 var _Tooltip = require("../Tooltip");
@@ -30,7 +31,8 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
     classNames,
     dismissable,
     showInfoIcon,
-    infoIconTooltip
+    infoIconTooltip,
+    testId
   } = props;
   // Type narrowing to safely access properties only when they exist
   const onDismiss = dismissable === true && 'onDismiss' in props ? props.onDismiss : undefined;
@@ -46,7 +48,10 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: !dismissed && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       ref: ref,
-      "data-testid": "Prompt-Chip",
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'root'
+      }),
       className: (0, _classify.classify)(_PromptChipModule.default.promptChipWrapper, {
         [_PromptChipModule.default.primary]: type === PROMPT_CHIP_TYPE.primary,
         [_PromptChipModule.default.secondary]: type === PROMPT_CHIP_TYPE.secondary
@@ -60,8 +65,16 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
         className: (0, _classify.classify)(_PromptChipModule.default.promptChipContainer, {
           [_PromptChipModule.default.promptChipContainerHover]: !!onClick
         }, classNames?.container),
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'content'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: _PromptChipModule.default.leftSection,
+          className: (0, _classify.classify)(_PromptChipModule.default.leftSection, classNames?.leftSlot),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'left'
+          }),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
             size: _Icon.ICON_SIZE.small,
             name: iconName,
@@ -69,30 +82,54 @@ const PromptChip = exports.PromptChip = /*#__PURE__*/React.forwardRef((props, re
             color: iconColor,
             className: (0, _classify.classify)({
               [_PromptChipModule.default.chipIconDefaultColor]: !iconColor
-            }, classNames?.icon)
+            }, classNames?.icon),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'icon'
+            })
           }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: (0, _classify.classify)(_PromptChipModule.default.childrenWrapper, classNames?.children),
+            "data-testid": (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'text'
+            }),
             children: children
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: _PromptChipModule.default.rightSection,
+          className: (0, _classify.classify)(_PromptChipModule.default.rightSection, classNames?.rightSlot),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'right'
+          }),
           children: [rightSlot ? rightSlot : null, !!showInfoIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ConditionalWrapper.ConditionalWrapper, {
             condition: infoIconTooltip && typeof infoIconTooltip === 'object' && Object.keys(infoIconTooltip).length > 0,
             wrapper: children => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
               ...infoIconTooltip,
+              testId: (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'tooltip'
+              }),
               children: children
             }),
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
               size: _Icon.ICON_SIZE.small,
               name: "info-circle",
               color: _typography.TEXT_COLORS.primary,
-              className: classNames?.icon
+              className: classNames?.icon,
+              testId: (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'info-icon'
+              })
             })
           }), !!dismissable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.CloseIcon, {
             size: _Icon.ICON_SIZE.small,
             onClick: closeClickHandler,
             ariaLabel: "Dismiss",
-            className: _PromptChipModule.default.dismissIcon
+            className: _PromptChipModule.default.dismissIcon,
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'dismiss'
+            })
           })]
         })]
       })

package/lib/components/PromptInput/PromptInput.d.ts

@@ -32,6 +32,7 @@ export interface PromptInputProps {
     isButtonLoading?: boolean;
     buttonIconLeftName?: string;
     buttonIconLeftType?: IconType;
+    testId?: string;
 }
 export declare const PromptInput: Flow.AbstractComponent<PromptInputProps, HTMLDivElement>;
 export {};