pebble-web 2.25.2 → 2.26.1-alpha.0

package/dist/pebble-web.module.js

@@ -446,7 +446,8 @@ var Loader = function Loader(_ref) {
       color = _ref$color === void 0 ? colors.gray.darker : _ref$color,
       _ref$scale = _ref.scale,
       scale = _ref$scale === void 0 ? 1 : _ref$scale,
-      className = _ref.className;
+      className = _ref.className,
+      testId = _ref.testId;
   var style = {
     backgroundColor: color
   };
@@ -454,7 +455,8 @@ var Loader = function Loader(_ref) {
     className: cx(spinnerStyle, className),
     style: {
       transform: "scale(".concat(scale, ")")
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/createElement("div", {
     style: style
   }), /*#__PURE__*/createElement("div", {
@@ -479,7 +481,8 @@ var Button = function Button(_ref) {
       outline = _ref.outline,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "small" : _ref$size,
-      buttonProps = _ref.buttonProps;
+      buttonProps = _ref.buttonProps,
+      testId = _ref.testId;
   var disableAction = disabled || loading;
   var _outline = size === "x-small" || !!outline;
   var _className = cx(getButtonStyle(size, type, !!showShadow, !_outline), className);
@@ -489,7 +492,8 @@ var Button = function Button(_ref) {
     style: {
       width: width
     },
-    disabled: disabled
+    disabled: disabled,
+    "data-testid": testId
   }, buttonProps), loading ? /*#__PURE__*/createElement(Loader, {
     color: colors.white.base,
     scale: 0.4
@@ -636,6 +640,77 @@ var buttonsWrapper = /*#__PURE__*/css(_objectSpread$4(_objectSpread$4({}, flexSp
   marginTop: 20
 }), ";label:buttonsWrapper;" + ( "" ));
 
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function getTestIds(id, builder) {
+  return id ? builder(id) : {};
+}
+function getOptionTestId(id, index) {
+  return "".concat(id, "-").concat(index);
+}
+function getRadioGroupTestIds(id) {
+  return {
+    optionId: "".concat(id, "-option")
+  };
+}
+function getOptionGroupTestIds(id) {
+  return {
+    searchBoxId: "".concat(id, "-search"),
+    optionId: "".concat(id, "-option"),
+    selectVisibleId: "".concat(id, "-select-visible"),
+    clearVisibleId: "".concat(id, "-clear-visible")
+  };
+}
+var getOptionGroupRadioTestIds = function getOptionGroupRadioTestIds(id) {
+  return getOptionGroupTestIds(id);
+};
+function getOptionGroupCheckBoxTestIds(id) {
+  return _objectSpread$5({
+    applyButtonId: "".concat(id, "-apply-btn"),
+    clearButtonId: "".concat(id, "-clear-btn")
+  }, getOptionGroupTestIds(id));
+}
+function getPhoneNumberInputTestIds(id) {
+  return {
+    phoneId: "".concat(id, "-phone"),
+    countryId: "".concat(id, "-country"),
+    countryInputIds: getSelectInputTestIds("".concat(id, "-country"))
+  };
+}
+function getMessageTestId(id) {
+  return "".concat(id, "-message");
+}
+function getSelectInputTestIds(id) {
+  var multiSelect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var optionGroupId = "".concat(id, "-option-group");
+  var baseIds = {
+    inputId: "".concat(id, "-input"),
+    optionGroupId: optionGroupId
+  };
+  return _objectSpread$5(_objectSpread$5({}, multiSelect ? getOptionGroupCheckBoxTestIds(optionGroupId) : getOptionGroupRadioTestIds(optionGroupId)), baseIds);
+}
+function getTypeaheadTestIds(id) {
+  var optionGroupId = "".concat(id, "-option-group");
+  return _objectSpread$5({
+    optionGroupId: optionGroupId
+  }, getOptionGroupRadioTestIds(optionGroupId));
+}
+function getCalendarTestIds(id) {
+  return {
+    leftIconId: "".concat(id, "-left-icon"),
+    rightIconId: "".concat(id, "-right-icon"),
+    applyButtonId: "".concat(id, "-apply-btn"),
+    clearButtonId: "".concat(id, "-clear-btn")
+  };
+}
+function getPopUpTestIds(id) {
+  return {
+    closeButtonId: "".concat(id, "-close-btn"),
+    approveButtonId: "".concat(id, "-approve-btn"),
+    rejectButtonId: "".concat(id, "-reject-btn")
+  };
+}
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var Calendar = /*#__PURE__*/function (_React$PureComponent) {
@@ -755,8 +830,16 @@ var Calendar = /*#__PURE__*/function (_React$PureComponent) {
           onClear = _this$props.onClear,
           maxDate = _this$props.maxDate,
           minDate = _this$props.minDate,
-          rest = _objectWithoutProperties(_this$props, ["range", "selected", "hideShadow", "className", "onApply", "onClear", "maxDate", "minDate"]);
+          testId = _this$props.testId,
+          rest = _objectWithoutProperties(_this$props, ["range", "selected", "hideShadow", "className", "onApply", "onClear", "maxDate", "minDate", "testId"]);
       var maxRangeDates = this.state.maxRangeDates;
+      var _getTestIds = getTestIds(testId, function (id) {
+        return getCalendarTestIds(id);
+      }),
+          leftIconId = _getTestIds.leftIconId,
+          rightIconId = _getTestIds.rightIconId,
+          clearButtonId = _getTestIds.clearButtonId,
+          applyButtonId = _getTestIds.applyButtonId;
       return /*#__PURE__*/createElement("div", {
         className: cx(wrapperStyle, _defineProperty({}, /*#__PURE__*/css( {
           name: "3jm1n8-Calendar",
@@ -779,13 +862,15 @@ var Calendar = /*#__PURE__*/function (_React$PureComponent) {
           style: {
             fontSize: 14
           },
-          className: "pi pi-chevron-left"
+          className: "pi pi-chevron-left",
+          "data-testid": leftIconId
         }),
         nextLabel: /*#__PURE__*/createElement("i", {
           style: {
             fontSize: 14
           },
-          className: "pi pi-arrow-right"
+          className: "pi pi-arrow-right",
+          "data-testid": rightIconId
         }),
         maxDate: maxDate || maxRangeDates && maxRangeDates.future,
         minDate: minDate || maxRangeDates && maxRangeDates.past
@@ -793,9 +878,11 @@ var Calendar = /*#__PURE__*/function (_React$PureComponent) {
         className: buttonsWrapper
       }, onClear && /*#__PURE__*/createElement(Button, {
         onClick: this.onClear,
-        type: "secondary"
+        type: "secondary",
+        testId: clearButtonId
       }, "Clear"), onApply && /*#__PURE__*/createElement(Button, {
-        onClick: this.onApply
+        onClick: this.onApply,
+        testId: applyButtonId
       }, "Apply")));
     }
   }]);
@@ -806,13 +893,13 @@ Calendar.defaultProps = {
   tileDots: []
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var radioIconStyle = /*#__PURE__*/css( {
   name: "i5unie-radioIconStyle",
   styles: "margin-right:10px;font-size:16px;padding-top:2px;height:18px;;label:radioIconStyle;"
 } );
-var controlStyle = /*#__PURE__*/css(_objectSpread$5(_objectSpread$5({
+var controlStyle = /*#__PURE__*/css(_objectSpread$6(_objectSpread$6({
   cursor: "pointer",
   display: "flex",
   outline: "none",
@@ -837,7 +924,8 @@ function Control(props) {
       children = _props$children === void 0 ? ControlView : _props$children,
       type = props.type,
       className = props.className,
-      indeterminate = props.indeterminate;
+      indeterminate = props.indeterminate,
+      testId = props.testId;
   return /*#__PURE__*/createElement("div", {
     className: cx(controlStyle, className),
     role: type,
@@ -851,7 +939,8 @@ function Control(props) {
         value: value,
         checked: !checked
       }, e);
-    } : undefined
+    } : undefined,
+    "data-testid": testId
   }, children(props));
 }
 var ControlView = function ControlView(_ref) {
@@ -936,13 +1025,16 @@ var CheckboxGroup = /*#__PURE__*/function (_React$PureComponent) {
           selected = _this$props2.selected,
           className = _this$props2.className,
           name = _this$props2.name,
-          disabled = _this$props2.disabled;
-      var _children = Children.map(children, function (_checkbox) {
+          disabled = _this$props2.disabled,
+          testId = _this$props2.testId;
+      var _children = Children.map(children, function (_checkbox, i) {
+        var index = typeof i === "number" ? i : 0;
         var checkbox = _checkbox;
         return cloneElement(checkbox, {
           onChange: _this2.handleChange,
           checked: selected.indexOf(checkbox.props.value) >= 0,
-          disabled: disabled
+          disabled: disabled,
+          testId: testId ? getOptionTestId(testId, index) : undefined
         });
       });
       return /*#__PURE__*/createElement("div", {
@@ -1060,8 +1152,8 @@ var MountTransition = function MountTransition(props) {
   });
 };
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var DropDown = /*#__PURE__*/function (_React$PureComponent) {
@@ -1096,7 +1188,8 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
           disabled = _this$props.disabled,
           labelClassName = _this$props.labelClassName,
           controlled = _this$props.controlled,
-          _onOutsideClick = _this$props.onOutsideClick;
+          _onOutsideClick = _this$props.onOutsideClick,
+          testId = _this$props.testId;
       var _isDropDownOpen = controlled ? !!this.props.isOpen : this.state.isOpen;
       return /*#__PURE__*/createElement(OutsideClick, {
         className: cx(wrapperStyle$1, className),
@@ -1123,14 +1216,15 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
           isOpen: _isDropDownOpen,
           onClick: _this2.toggleDropdown,
           disabled: disabled,
-          className: labelClassName
+          className: labelClassName,
+          testId: testId
         }, buttonLabel));
       }), /*#__PURE__*/createElement(MountTransition, {
         visible: _isDropDownOpen
       }, function (transitionStyles) {
         return /*#__PURE__*/createElement(animated.div, {
           className: cx(dropDownStyle, dropDownClassName),
-          style: _objectSpread$6({
+          style: _objectSpread$7({
             padding: padding
           }, transitionStyles)
         }, /*#__PURE__*/createElement(Popper, Object.assign({}, _this2.props, {
@@ -1140,7 +1234,7 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
               style = _ref2.style,
               placement = _ref2.placement,
               arrowProps = _ref2.arrowProps;
-          var popperWrapperStyle = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, style), transitionStyles), {}, {
+          var popperWrapperStyle = _objectSpread$7(_objectSpread$7(_objectSpread$7({}, style), transitionStyles), {}, {
             backgroundColor: colors.white.base,
             transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px"),
@@ -1177,8 +1271,8 @@ DropDown.defaultProps = {
   }
 };
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var animation = "all 0.3s cubic-bezier(.64,.09,.08,1)";
 var inputMarginBottom = 20;
 var wrapperStyle$2 = /*#__PURE__*/css({
@@ -1198,7 +1292,7 @@ var inputWrapperStyle = /*#__PURE__*/css({
   alignItems: "baseline",
   borderBottom: "1px solid ".concat(colors.gray.lighter)
 }, ";label:inputWrapperStyle;" + ( "" ));
-var inputStyle = /*#__PURE__*/css(_objectSpread$7(_objectSpread$7(_objectSpread$7({
+var inputStyle = /*#__PURE__*/css(_objectSpread$8(_objectSpread$8(_objectSpread$8({
   outline: 0,
   border: 0,
   padding: "24px 0 12px 0",
@@ -1250,7 +1344,7 @@ var labelStyle = /*#__PURE__*/css({
     color: colors.gray.dark
   }
 }, ";label:labelStyle;" + ( "" ));
-var messageStyle = /*#__PURE__*/css(_objectSpread$7(_objectSpread$7({}, typography.s.regular), {}, {
+var messageStyle = /*#__PURE__*/css(_objectSpread$8(_objectSpread$8({}, typography.s.regular), {}, {
   marginTop: 9,
   lineHeight: "10px",
   textAlign: "left"
@@ -1260,8 +1354,8 @@ var loadingStyle = /*#__PURE__*/css( {
   styles: "position:relative;top:4px;;label:loadingStyle;"
 } );
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var dateClass = /*#__PURE__*/css( {
   name: "1ydb6k9-dateClass",
   styles: "padding:20px;width:100%;;label:dateClass;"
@@ -1277,7 +1371,7 @@ var wrapperStyle$3 = /*#__PURE__*/css( {
   name: "h7juj2-wrapperStyle",
   styles: "margin-bottom:20px;;label:wrapperStyle;"
 } );
-var errorStyle = /*#__PURE__*/css(_objectSpread$8(_objectSpread$8({}, typography.s.bold), {}, {
+var errorStyle = /*#__PURE__*/css(_objectSpread$9(_objectSpread$9({}, typography.s.bold), {}, {
   backgroundColor: colors.red.lightest,
   color: colors.red.darker,
   textAlign: "left",
@@ -1346,7 +1440,8 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
           onClick = _this$props.onClick,
           loading = _this$props.loading,
           leftElement = _this$props.leftElement,
-          rightElement = _this$props.rightElement;
+          rightElement = _this$props.rightElement,
+          testId = _this$props.testId;
       var isFocused = this.state.isFocused;
       var _message = errorMessage || successMessage || message;
       var _inputWrapperClassName = cx(inputWrapperStyle, inputWrapperClassName);
@@ -1379,9 +1474,13 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
         onClick: onClick
       }, /*#__PURE__*/createElement("div", {
         className: _inputWrapperClassName
-      }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps)) : /*#__PURE__*/createElement("input", Object.assign({
+      }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps, {
+        "data-testid": testId
+      })) : /*#__PURE__*/createElement("input", Object.assign({
         type: type
-      }, _inputProps, this.props.inputProps)), loading && /*#__PURE__*/createElement(Loader, {
+      }, _inputProps, this.props.inputProps, {
+        "data-testid": testId
+      })), loading && /*#__PURE__*/createElement(Loader, {
         color: colors.violet.base,
         scale: 0.6,
         className: _loadingStyle
@@ -1398,6 +1497,7 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
         }
       }), _message && /*#__PURE__*/createElement("div", {
         className: messageStyle,
+        "data-testid": testId ? getMessageTestId(testId) : undefined,
         style: {
           color: getColor(errorMessage, successMessage)
         }
@@ -1433,7 +1533,8 @@ var NativeDateInput = /*#__PURE__*/function (_React$PureComponent) {
           inputProps = _this$props.inputProps,
           placeholder = _this$props.placeholder,
           value = _this$props.value,
-          disabled = _this$props.disabled;
+          disabled = _this$props.disabled,
+          testId = _this$props.testId;
       return /*#__PURE__*/createElement(Input, Object.assign({
         onChange: this.onDateInputChange,
         type: "date"
@@ -1442,7 +1543,8 @@ var NativeDateInput = /*#__PURE__*/function (_React$PureComponent) {
         placeholder: placeholder,
         fixLabelAtTop: true
       }, inputProps, {
-        disabled: disabled
+        disabled: disabled,
+        testId: testId
       }));
     }
   }]);
@@ -1487,8 +1589,8 @@ var UserAgentInfoProvider = /*#__PURE__*/function (_React$PureComponent) {
   return UserAgentInfoProvider;
 }(PureComponent);
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var noop = function noop() {};
@@ -1548,7 +1650,8 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
           initiallyOpen = _this$props.initiallyOpen,
           onOutsideClick = _this$props.onOutsideClick,
           controlled = _this$props.controlled,
-          isOpen = _this$props.isOpen;
+          isOpen = _this$props.isOpen,
+          testId = _this$props.testId;
       var _wrapperClassName = cx(wrapperStyle$3, wrapperClassName);
       var _dropDownClassName = cx(dropDownClassName, this.props.dropDownClassName);
       return /*#__PURE__*/createElement(DropDown, {
@@ -1573,13 +1676,14 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
               },
               fixLabelAtTop: true
             }, inputProps, {
-              inputProps: _objectSpread$9(_objectSpread$9({
+              inputProps: _objectSpread$a(_objectSpread$a({
                 placeholder: "DD/MM/YYYY"
               }, inputProps && inputProps.inputProps), {}, {
                 onChange: onChange
               }),
               className: cx(inputStyle$1, inputProps && inputProps.className),
-              disabled: disabled
+              disabled: disabled,
+              testId: testId
             }));
           });
         },
@@ -1721,9 +1825,9 @@ var Logo = function Logo(_ref) {
   }));
 };
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var toastWrapper = /*#__PURE__*/css(_objectSpread$a(_objectSpread$a({
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var toastWrapper = /*#__PURE__*/css(_objectSpread$b(_objectSpread$b({
   position: "fixed",
   borderRadius: constants.borderRadius
 }, typography.normal.regular), {}, {
@@ -1737,8 +1841,8 @@ var toastWrapper = /*#__PURE__*/css(_objectSpread$a(_objectSpread$a({
   }
 }), ";label:toastWrapper;" + ( "" ));
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var emitter = /*#__PURE__*/mitt();
@@ -1877,19 +1981,25 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(Toast, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      emitter.on("showToast", this.show);
+      var _this2 = this;
+      emitter.on("showToast", function (e) {
+        return e && _this2.show(e);
+      });
       emitter.on("hideToast", this.hide);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      emitter.off("showToast", this.show);
+      var _this3 = this;
+      emitter.off("showToast", function (e) {
+        return e && _this3.show(e);
+      });
       emitter.off("hideToast", this.hide);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
       var bColor = _colors[this.state.type];
       var iconClass = cx("pi", {
         "pi-radio-check-filled": this.state.type === "success",
@@ -1900,13 +2010,13 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
         native: true,
         items: this.state.show,
         key: position,
-        from: _objectSpread$b({
+        from: _objectSpread$c({
           opacity: 0
         }, customStyles[position].transitions.from),
-        enter: _objectSpread$b({
+        enter: _objectSpread$c({
           opacity: 1
         }, customStyles[position].transitions.enter),
-        leave: _objectSpread$b({
+        leave: _objectSpread$c({
           opacity: 0,
           pointerEvents: "none"
         }, customStyles[position].transitions.leave),
@@ -1914,13 +2024,13 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
       }, function (show) {
         return show && function (styles) {
           return /*#__PURE__*/createElement(animated.div, {
-            className: cx(toastWrapper, _this2.props.className),
-            style: _objectSpread$b(_objectSpread$b({
+            className: cx(toastWrapper, _this4.props.className),
+            style: _objectSpread$c(_objectSpread$c({
               backgroundColor: bColor
             }, styles), customStyles[position].style)
           }, /*#__PURE__*/createElement("i", {
             className: iconClass
-          }), _this2.state.text);
+          }), _this4.state.text);
         };
       });
     }
@@ -1946,9 +2056,9 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
   return Toast;
 }(PureComponent);
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var messageWrapper = /*#__PURE__*/css(_objectSpread$c(_objectSpread$c({
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var messageWrapper = /*#__PURE__*/css(_objectSpread$d(_objectSpread$d({
   borderRadius: constants.borderRadius
 }, typography.normal.regular), {}, {
   color: colors.white.base,
@@ -1964,7 +2074,8 @@ var messageWrapper = /*#__PURE__*/css(_objectSpread$c(_objectSpread$c({
 var Message = function Message(_ref) {
   var intent = _ref.intent,
       className = _ref.className,
-      text = _ref.text;
+      text = _ref.text,
+      testId = _ref.testId;
   var bColor = _colors[intent];
   var iconClass = cx("pi", {
     "pi-radio-check-filled": intent === "success",
@@ -1974,7 +2085,8 @@ var Message = function Message(_ref) {
     className: cx(messageWrapper, className),
     style: {
       backgroundColor: bColor
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/createElement("i", {
     className: iconClass
   }), text);
@@ -2052,9 +2164,9 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
   return Modal;
 }(PureComponent);
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$d(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var rowWrapper = /*#__PURE__*/css(_objectSpread$d(_objectSpread$d(_objectSpread$d({}, typography.normal.regular), {}, {
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var rowWrapper = /*#__PURE__*/css(_objectSpread$e(_objectSpread$e(_objectSpread$e({}, typography.normal.regular), {}, {
   cursor: "pointer",
   padding: "12px 18px",
   position: "relative",
@@ -2077,7 +2189,7 @@ var labelWrap = /*#__PURE__*/css( {
 var activeRow = /*#__PURE__*/css({
   backgroundColor: colors.gray.lightest
 }, ";label:activeRow;" + ( "" ));
-var selectedRow = /*#__PURE__*/css(_objectSpread$d({
+var selectedRow = /*#__PURE__*/css(_objectSpread$e({
   color: colors.violet.base
 }, typography.normal.bold), ";label:selectedRow;" + ( "" ));
 var advancedActionsWrapper = /*#__PURE__*/css({
@@ -2145,9 +2257,9 @@ var Option = /*#__PURE__*/function (_React$Component) {
 }(Component);
 Option.defaultProps = defaultProps;
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var searchWrapperStyle = /*#__PURE__*/css(_objectSpread$e(_objectSpread$e({
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var searchWrapperStyle = /*#__PURE__*/css(_objectSpread$f(_objectSpread$f({
   minWidth: "200px",
   borderRadius: constants.borderRadius,
   padding: "0 20px"
@@ -2175,7 +2287,7 @@ var searchWrapperStyle = /*#__PURE__*/css(_objectSpread$e(_objectSpread$e({
     }
   }
 }), ";label:searchWrapperStyle;" + ( "" ));
-var searchStyle = /*#__PURE__*/css(_objectSpread$e(_objectSpread$e(_objectSpread$e(_objectSpread$e({
+var searchStyle = /*#__PURE__*/css(_objectSpread$f(_objectSpread$f(_objectSpread$f(_objectSpread$f({
   borderRadius: constants.borderRadius,
   outline: "none",
   border: 0,
@@ -2227,7 +2339,8 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
           className = _this$props.className,
           clearable = _this$props.clearable,
           value = _this$props.value,
-          loading = _this$props.loading;
+          loading = _this$props.loading,
+          testId = _this$props.testId;
       var wrapperClassName = cx(searchWrapperStyle, {
         __pebble__search__small: type === "small",
         __pebble__search__large: type === "large",
@@ -2247,7 +2360,9 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
         },
         ref: this.searchInputRef,
         value: value
-      }, inputProps)), loading && /*#__PURE__*/createElement(Loader, {
+      }, inputProps, {
+        "data-testid": testId
+      })), loading && /*#__PURE__*/createElement(Loader, {
         scale: 0.4,
         color: colors.violet.base
       }), clearable && /*#__PURE__*/createElement("div", {
@@ -2308,8 +2423,8 @@ var searchBoxScrolledStyle = /*#__PURE__*/css({
   padding: onScrollPadding
 }, ";label:searchBoxScrolledStyle;" + ( "" ));
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
@@ -2403,10 +2518,12 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
           className = _this$props2.className,
           isSelected = _this$props2.isSelected,
           handleChange = _this$props2.handleChange,
-          searchBoxProps = _this$props2.searchBoxProps;
+          searchBoxProps = _this$props2.searchBoxProps,
+          testId = _this$props2.testId;
       var _this$state = this.state,
           isScrolled = _this$state.isScrolled,
           highlighted = _this$state.highlighted;
+      var testIds = getTestIds(testId, getOptionGroupTestIds);
       var _children = Children.map(children, function (_option, i) {
         var option = _option;
         var ref = _this3.optionsRefsSet.get(i);
@@ -2419,7 +2536,8 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
           isActive: highlighted === i,
           isSelected: isSelected(option.props.value),
           multiSelect: multiSelect,
-          ref: ref
+          ref: ref,
+          testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
         });
       });
       var searchBoxClassName = cx(searchBoxWrapper, _defineProperty({}, searchBoxScrolledStyle, isScrolled));
@@ -2429,10 +2547,11 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/createElement(Search, Object.assign({
         type: "small"
       }, searchBoxProps, {
-        inputProps: _objectSpread$f(_objectSpread$f({}, searchBoxProps && searchBoxProps.inputProps), {}, {
+        inputProps: _objectSpread$g(_objectSpread$g({}, searchBoxProps && searchBoxProps.inputProps), {}, {
           onKeyDown: this.handleKeyPress,
           autoFocus: true
-        })
+        }),
+        testId: testIds.searchBoxId
       }))), !!Children.count(children) && /*#__PURE__*/createElement("div", {
         ref: this.optionRef,
         style: {
@@ -2440,37 +2559,39 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
         },
         className: cx(optionsWrapper, className),
         role: multiSelect ? "group" : "radiogroup",
-        "data-test-id": "optiongroup",
+        "data-testid": testId,
         "aria-label": searchBoxProps && searchBoxProps.placeholder
       }, advancedOptions && advancedOptionsProps && /*#__PURE__*/createElement("div", {
         className: _class
       }, /*#__PURE__*/createElement("div", {
-        onClick: advancedOptionsProps.selectVisible
+        onClick: advancedOptionsProps.selectVisible,
+        "data-testid": testIds.selectVisibleId
       }, "Select Visible"), /*#__PURE__*/createElement("div", {
-        onClick: advancedOptionsProps.clearVisible
+        onClick: advancedOptionsProps.clearVisible,
+        "data-testid": testIds.clearVisibleId
       }, "Clear Visible")), _children));
     }
   }]);
   return OptionGroup;
 }(PureComponent);
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var optionGroupCheckBoxButtonWrapPadding = 20;
 var optionGroupCheckBoxButtonWrapPaddingTop = 10;
 var optionGroupCheckBoxWrap = /*#__PURE__*/css({
   maxHeight: optionWrapperMaxHeight + searchBoxHeight + 2 * (initialPadding - onScrollPadding) + optionGroupCheckBoxButtonWrapPadding + optionGroupCheckBoxButtonWrapPaddingTop + smallButtonHeight,
   position: "relative"
 }, ";label:optionGroupCheckBoxWrap;" + ( "" ));
-var optionGroupCheckBoxButtonWrap = /*#__PURE__*/css(_objectSpread$g(_objectSpread$g({}, flexSpaceBetween), {}, {
+var optionGroupCheckBoxButtonWrap = /*#__PURE__*/css(_objectSpread$h(_objectSpread$h({}, flexSpaceBetween), {}, {
   gap: 60,
   padding: optionGroupCheckBoxButtonWrapPadding,
   paddingTop: optionGroupCheckBoxButtonWrapPaddingTop,
   backgroundColor: colors.white.base
 }), ";label:optionGroupCheckBoxButtonWrap;" + ( "" ));
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$d(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$d() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var OptionGroupCheckBox = /*#__PURE__*/function (_React$PureComponent) {
@@ -2527,25 +2648,30 @@ var OptionGroupCheckBox = /*#__PURE__*/function (_React$PureComponent) {
           onClear = _this$props2.onClear,
           isSelected = _this$props2.isSelected,
           onChange = _this$props2.onChange,
-          rest = _objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange"]);
-      var advancedOptionsProps = _objectSpread$h({
+          testId = _this$props2.testId,
+          rest = _objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange", "testId"]);
+      var advancedOptionsProps = _objectSpread$i({
         selectVisible: this.selectVisible,
         clearVisible: this.clearVisible
       }, this.props.advancedOptionsProps);
+      var testIds = getTestIds(testId, getOptionGroupCheckBoxTestIds);
       return /*#__PURE__*/createElement("div", {
         className: cx(optionGroupCheckBoxWrap, wrapClassName)
       }, /*#__PURE__*/createElement(OptionGroup, Object.assign({}, rest, {
         advancedOptionsProps: advancedOptionsProps,
         isSelected: isSelected || this.isSelected,
         handleChange: this.handleChange,
-        multiSelect: true
+        multiSelect: true,
+        testId: testId
       })), (onApply || onClear) && /*#__PURE__*/createElement("div", {
         className: optionGroupCheckBoxButtonWrap
       }, onClear && /*#__PURE__*/createElement(Button, {
         type: "secondary",
-        onClick: onClear
+        onClick: onClear,
+        testId: testIds.clearButtonId
       }, "Clear"), onApply && /*#__PURE__*/createElement(Button, {
-        onClick: this.onApply
+        onClick: this.onApply,
+        testId: testIds.applyButtonId
       }, "Apply")));
     }
   }]);
@@ -2653,7 +2779,14 @@ function Select(props) {
       disabled = props.disabled,
       isSelected = props.isSelected,
       placement = props.placement,
-      modifiers = props.modifiers;
+      modifiers = props.modifiers,
+      testId = props.testId;
+  var singleSelectTestIds = getTestIds(testId, function (id) {
+    return getSelectInputTestIds(id, false);
+  });
+  var multiSelectTestIds = getTestIds(testId, function (id) {
+    return getSelectInputTestIds(id, true);
+  });
   return /*#__PURE__*/createElement("div", {
     className: cx(selectWrapper, className, _defineProperty({}, relativePosition, !!fullWidthDropdown))
   }, /*#__PURE__*/createElement(DropDown, {
@@ -2672,7 +2805,8 @@ function Select(props) {
         onClick: disabled ? undefined : function () {
           toggleDropdown();
           onDropdownToggle(isOpen);
-        }
+        },
+        "data-testid": singleSelectTestIds.inputId
       }, /*#__PURE__*/createElement(Input, Object.assign({
         className: selectInputWrapper,
         inputClassName: selectInput,
@@ -2718,7 +2852,9 @@ function Select(props) {
           onDropdownToggle(isOpen);
           toggle();
         }
-      }, commonProps), children);
+      }, commonProps, {
+        testId: multiSelectTestIds.optionGroupId
+      }), children);
     } else {
       return /*#__PURE__*/createElement(OptionGroupRadio, Object.assign({
         selected: props.selected,
@@ -2727,7 +2863,9 @@ function Select(props) {
           onDropdownToggle(isOpen);
           toggle();
         }
-      }, commonProps), children);
+      }, commonProps, {
+        testId: singleSelectTestIds.optionGroupId
+      }), children);
     }
   }));
 }
@@ -2782,7 +2920,9 @@ var PhoneNumberInput = /*#__PURE__*/function (_React$Component) {
           selectProps = _this$props.selectProps,
           inputProps = _this$props.inputProps,
           required = _this$props.required,
-          placeholder = _this$props.placeholder;
+          placeholder = _this$props.placeholder,
+          testId = _this$props.testId;
+      var testIds = getTestIds(testId, getPhoneNumberInputTestIds);
       return /*#__PURE__*/createElement("div", {
         className: cx(wrapper, className)
       }, /*#__PURE__*/createElement("label", {
@@ -2797,12 +2937,15 @@ var PhoneNumberInput = /*#__PURE__*/function (_React$Component) {
         value: countryCode + "",
         selected: countryCode
       }, selectProps, {
-        className: cx(selectStyle, selectProps && selectProps.className)
+        className: cx(selectStyle, selectProps && selectProps.className),
+        testId: testIds.countryId
       }), this.props.children), /*#__PURE__*/createElement(Input, Object.assign({
         onChange: this.onNumberChange,
         placeholder: "",
         value: phone
-      }, inputProps)));
+      }, inputProps, {
+        testId: testIds.phoneId
+      })));
     }
   }]);
   return PhoneNumberInput;
@@ -2833,8 +2976,8 @@ var arrowStyle = /*#__PURE__*/css({
   }
 }, ";label:arrowStyle;" + ( "" ));
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
@@ -2900,7 +3043,7 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
               style = _ref2.style,
               placement = _ref2.placement,
               arrowProps = _ref2.arrowProps;
-          var wrapperStyle = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, style), transitionStyles), {}, {
+          var wrapperStyle = _objectSpread$j(_objectSpread$j(_objectSpread$j({}, style), transitionStyles), {}, {
             backgroundColor: popperBackgroundColor,
             transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
@@ -2916,7 +3059,7 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
           }), /*#__PURE__*/createElement("div", {
             className: arrowStyle,
             ref: arrowProps.ref,
-            style: _objectSpread$i(_objectSpread$i({}, arrowProps.style), {}, {
+            style: _objectSpread$j(_objectSpread$j({}, arrowProps.style), {}, {
               color: popperBackgroundColor
             }),
             "data-placement": placement
@@ -2932,8 +3075,8 @@ PebblePopper.defaultProps = {
   closeOnOutsideClick: true
 };
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var modalPadding = 30;
 var modalContainer$1 = /*#__PURE__*/css({
   background: "white",
@@ -2947,7 +3090,7 @@ var flexCenter = /*#__PURE__*/css( {
   name: "7sl85e-flexCenter",
   styles: "display:flex;align-items:center;justify-content:center;height:100%;;label:flexCenter;"
 } );
-var buttonsContainer = /*#__PURE__*/css(_objectSpread$j(_objectSpread$j({}, flexSpaceBetween), {}, {
+var buttonsContainer = /*#__PURE__*/css(_objectSpread$k(_objectSpread$k({}, flexSpaceBetween), {}, {
   marginTop: "40px"
 }), ";label:buttonsContainer;" + ( "" ));
 var iconCloseClassName = /*#__PURE__*/css({
@@ -2973,7 +3116,14 @@ var PopUp = function PopUp(props) {
       rejectButtonText = _props$rejectButtonTe === void 0 ? "No" : _props$rejectButtonTe,
       children = props.children,
       approveButtonProps = props.approveButtonProps,
-      rejectButtonProps = props.rejectButtonProps;
+      rejectButtonProps = props.rejectButtonProps,
+      testId = props.testId;
+  var _getTestIds = getTestIds(testId, function (id) {
+    return getPopUpTestIds(id);
+  }),
+      closeButtonId = _getTestIds.closeButtonId,
+      approveButtonId = _getTestIds.approveButtonId,
+      rejectButtonId = _getTestIds.rejectButtonId;
   return /*#__PURE__*/createElement(Modal, {
     visible: visible,
     modalClassName: flexCenter
@@ -2981,27 +3131,32 @@ var PopUp = function PopUp(props) {
     className: modalContainer$1
   }, onClose && /*#__PURE__*/createElement("i", {
     className: cx("pi", "pi-close", iconCloseClassName),
-    onClick: onClose
+    onClick: onClose,
+    "data-testid": closeButtonId
   }), children, (onReject || onApprove) && /*#__PURE__*/createElement("div", {
     className: buttonsContainer
   }, onReject && /*#__PURE__*/createElement(Button, Object.assign({
     size: "large",
     type: "secondary",
     onClick: onReject
-  }, rejectButtonProps), rejectButtonText), onApprove && /*#__PURE__*/createElement(Button, Object.assign({
+  }, rejectButtonProps, {
+    testId: rejectButtonId
+  }), rejectButtonText), onApprove && /*#__PURE__*/createElement(Button, Object.assign({
     size: "large",
     type: "primary",
     onClick: onApprove
-  }, approveButtonProps), approveButtonText))));
+  }, approveButtonProps, {
+    testId: approveButtonId
+  }), approveButtonText))));
 };
 
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$l(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var selectedTabStyle = /*#__PURE__*/css({
   borderBottom: "2px solid ".concat(colors.violet.base),
   color: colors.violet.base
 }, ";label:selectedTabStyle;" + ( "" ));
-var tabStyle = /*#__PURE__*/css(_objectSpread$k({
+var tabStyle = /*#__PURE__*/css(_objectSpread$l({
   padding: "10px 20px 20px",
   cursor: "pointer"
 }, typography.s.bold), ";label:tabStyle;" + ( "" ));
@@ -3042,7 +3197,7 @@ var Tabs = /*#__PURE__*/function (_React$PureComponent) {
         var isSelected = _this2.state.selectedTab === tab;
         return /*#__PURE__*/createElement("span", {
           key: "".concat(tab, "-").concat(i),
-          "data-test-id": "".concat(tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()),
+          "data-testid": "".concat(tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()),
           className: cx(_className, isSelected && selectedTabStyle, isSelected && _this2.props.selectedTabClassName),
           onClick: function onClick() {
             _this2.setState({
@@ -3248,13 +3403,16 @@ var RadioGroup = /*#__PURE__*/function (_React$PureComponent) {
           selected = _this$props2.selected,
           className = _this$props2.className,
           name = _this$props2.name,
-          disabled = _this$props2.disabled;
-      var _children = Children.map(children, function (_radio) {
+          disabled = _this$props2.disabled,
+          testId = _this$props2.testId;
+      var testIds = getTestIds(testId, getRadioGroupTestIds);
+      var _children = Children.map(children, function (_radio, i) {
         var radio = _radio;
         return cloneElement(radio, {
           onChange: _this2.handleChange,
           checked: selected === radio.props.value,
-          disabled: disabled
+          disabled: disabled,
+          testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
         });
       });
       return /*#__PURE__*/createElement("div", {
@@ -3267,9 +3425,9 @@ var RadioGroup = /*#__PURE__*/function (_React$PureComponent) {
   return RadioGroup;
 }(PureComponent);
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$l(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var wrapStyle = /*#__PURE__*/css(_objectSpread$l(_objectSpread$l({}, flexRow), {}, {
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var wrapStyle = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, flexRow), {}, {
   cursor: "pointer"
 }), ";label:wrapStyle;" + ( "" ));
 var disabledStyle = /*#__PURE__*/css( {
@@ -3371,8 +3529,8 @@ var Rating = /*#__PURE__*/function (_React$PureComponent) {
   return Rating;
 }(PureComponent);
 
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var inputReadOnlyStyle$1 = /*#__PURE__*/css({
   color: colors.gray.dark
 }, ";label:inputReadOnlyStyle;" + ( "" ));
@@ -3381,12 +3539,12 @@ var inputDisabledStyle$1 = /*#__PURE__*/css({
   pointerEvents: "none",
   color: colors.gray.base
 }, ";label:inputDisabledStyle;" + ( "" ));
-var messageStyle$1 = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, typography.s.regular), {}, {
+var messageStyle$1 = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, typography.s.regular), {}, {
   marginTop: 10,
   lineHeight: "10px",
   textAlign: "left"
 }), ";label:messageStyle;" + ( "" ));
-var infoTextStyle = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, typography.s.light), {}, {
+var infoTextStyle = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, typography.s.light), {}, {
   marginRight: "15px",
   lineHeight: "12px"
 }), ";label:infoTextStyle;" + ( "" ));
@@ -3403,7 +3561,7 @@ var placeholderStyle = /*#__PURE__*/css({
     transform: "translate(0, -10px)"
   }
 }, ";label:placeholderStyle;" + ( "" ));
-var inputStyle$2 = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({
+var inputStyle$2 = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({
   border: 0,
   outline: 0,
   borderRadius: "3px",
@@ -3484,7 +3642,8 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
           message = _this$props.message,
           readOnly = _this$props.readOnly,
           loading = _this$props.loading,
-          className = _this$props.className;
+          className = _this$props.className,
+          testId = _this$props.testId;
       var isFocused = this.state.isFocused;
       var _message = errorMessage || successMessage || message;
       var _inputProps = {
@@ -3508,7 +3667,9 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
         },
         onFocus: this.addFocus,
         onBlur: this.removeFocus
-      }, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps)), /*#__PURE__*/createElement("label", {
+      }, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps, {
+        "data-testid": testId
+      })), /*#__PURE__*/createElement("label", {
         className: placeholderClassName
       }, placeholder, required && /*#__PURE__*/createElement("span", {
         style: {
@@ -3521,6 +3682,7 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
         scale: 0.4
       })), _message && /*#__PURE__*/createElement("div", {
         className: messageStyle$1,
+        "data-testid": testId ? getMessageTestId(testId) : undefined,
         style: {
           color: getColor$1(errorMessage, successMessage)
         }
@@ -3683,10 +3845,10 @@ SideBar.defaultProps = {
   closeOnOutsideClick: true
 };
 
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var rheostatOverrides = "\n.rheostat {\n  overflow: visible;\n}\n\n.rheostat-background {\n  background-color: ".concat(colors.violet.lightest, ";\n  position: relative;\n  border-radius: 2px;\n  overflow: hidden;\n  height: 4px;\n  top: 0;\n  width: 100%;\n}\n\n.rheostat-progress {\n  background-color: ").concat(colors.violet.base, ";\n  position: absolute;\n  height: 4px;\n  border-radius: 2px;\n  top: 0;\n}\n\n.rheostat-handle {\n  background-color: ").concat(colors.violet.base, ";\n  border-radius: 50%;\n  height: 20px;\n  outline: none;\n  z-index: 2;\n  width: 20px;\n  margin-left: -10px;\n  top: -8px;\n  border: 0;\n  cursor: pointer;\n  box-shadow: ").concat(constants.boxShadow.xElevated, ";\n}\n\n.__pebble__slider__large .rheostat-handle {\n  width: 24px;\n  height: 24px;\n  margin-left: -12px;\n  top: -10px;\n}\n\n.rheostat-handle:hover {\n  background-color: ").concat(colors.violet.light, ";\n}\n\n.__pebble__slider__disabled .rheostat-handle {\n  background-color: ").concat(colors.violet.lighter, ";\n  cursor: inherit;\n}\n\n.rheostat-horizontal {\n  height: 4px;\n}\n");
-var sliderHeader = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, flexSpaceBetween), {}, {
+var sliderHeader = /*#__PURE__*/css(_objectSpread$o(_objectSpread$o({}, flexSpaceBetween), {}, {
   marginBottom: 25,
   alignItems: "center",
   ".__pebble__slider__large &": {
@@ -3747,8 +3909,8 @@ var Slider = function Slider(_ref) {
   }, rest)));
 };
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$p(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var headStyle = /*#__PURE__*/css( {
   name: "1ehjdcc-headStyle",
   styles: "display:flex;flex-direction:row;position:relative;;label:headStyle;"
@@ -3757,7 +3919,7 @@ var headSection = /*#__PURE__*/css( {
   name: "1hilual-headSection",
   styles: "flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;> div{font-size:14px;};label:headSection;"
 } );
-var headingStyle = /*#__PURE__*/css(_objectSpread$o({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
+var headingStyle = /*#__PURE__*/css(_objectSpread$p({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
 var dotStyle$1 = /*#__PURE__*/css({
   height: 20,
   width: 20,
@@ -3786,8 +3948,8 @@ var stepperLineStyle = /*#__PURE__*/css({
   backgroundColor: colors.violet.base
 }, ";label:stepperLineStyle;" + ( "" ));
 
-function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$p(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$q(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 function noop$2() {}
@@ -3946,11 +4108,11 @@ var Stepper = /*#__PURE__*/function (_React$PureComponent) {
             name: "fxyzre-Stepper",
             styles: "display:none;;label:Stepper;"
           } ), i !== _this2.state.active))
-        }, renderContentElement(_objectSpread$p({
+        }, renderContentElement(_objectSpread$q({
           item: datum,
           isSelected: i === _this2.state.active
         }, args)));
-      }), renderFooterElement(_objectSpread$p({
+      }), renderFooterElement(_objectSpread$q({
         activeIndex: this.state.active
       }, args), this.props)));
     }
@@ -3991,9 +4153,9 @@ Stepper.defaultProps = {
   }
 };
 
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$q(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var labelTextStyle = /*#__PURE__*/css(_objectSpread$q(_objectSpread$q({}, typography.s.bold), {}, {
+function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$r(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var labelTextStyle = /*#__PURE__*/css(_objectSpread$r(_objectSpread$r({}, typography.s.bold), {}, {
   color: colors.gray.dark,
   marginRight: "10px"
 }), ";label:labelTextStyle;" + ( "" ));
@@ -4089,9 +4251,9 @@ var Switch = /*#__PURE__*/function (_React$PureComponent) {
   return Switch;
 }(PureComponent);
 
-function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$r(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var tagStyle = /*#__PURE__*/css(_objectSpread$r(_objectSpread$r(_objectSpread$r({}, typography.s.bold), flexSpaceBetween), {}, {
+function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$s(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var tagStyle = /*#__PURE__*/css(_objectSpread$s(_objectSpread$s(_objectSpread$s({}, typography.s.bold), flexSpaceBetween), {}, {
   borderRadius: constants.borderRadius,
   padding: "0 10px",
   height: 28,
@@ -4138,19 +4300,21 @@ var Tag = function Tag(_ref) {
   }, /*#__PURE__*/createElement(Ink, null)));
 };
 
-function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$s(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$t(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var Text = function Text(_ref) {
   var typography = _ref.typography,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? colors.gray.darker : _ref$color,
       children = _ref.children,
-      className = _ref.className;
-  var _className = /*#__PURE__*/css(_objectSpread$s(_objectSpread$s({}, typography), {}, {
+      className = _ref.className,
+      testId = _ref.testId;
+  var _className = /*#__PURE__*/css(_objectSpread$t(_objectSpread$t({}, typography), {}, {
     color: color
   }),  "" );
   return /*#__PURE__*/React__default.createElement("span", {
-    className: cx(_className, className)
+    className: cx(_className, className),
+    "data-testid": testId
   }, children);
 };
 
@@ -4239,7 +4403,7 @@ var TimePicker = function TimePicker(props) {
           toggleDropdown();
         },
         className: buttonStyle,
-        "data-test-id": "hour-label"
+        "data-testid": "hour-label"
       }, /*#__PURE__*/createElement("span", {
         className: /*#__PURE__*/css( {
           name: "1czd1rs-TimePicker",
@@ -4286,7 +4450,7 @@ var TimePicker = function TimePicker(props) {
           toggleDropdown();
         },
         className: buttonStyle,
-        "data-test-id": "minute-label"
+        "data-testid": "minute-label"
       }, /*#__PURE__*/createElement("span", {
         className: /*#__PURE__*/css( {
           name: "1czd1rs-TimePicker",
@@ -4323,9 +4487,9 @@ var TimePicker = function TimePicker(props) {
   }));
 };
 
-function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$t(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var textStyle = /*#__PURE__*/css(_objectSpread$t(_objectSpread$t({}, typography.s.regular), {}, {
+function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$u(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var textStyle = /*#__PURE__*/css(_objectSpread$u(_objectSpread$u({}, typography.s.regular), {}, {
   color: colors.white.base,
   display: "block",
   padding: "10px 16px"
@@ -4410,17 +4574,17 @@ var optionsWrapper$1 = /*#__PURE__*/css({
 
 function _createSuper$q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$q(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$u(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$v(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function defaultSearchBox(_ref, props) {
   var registerChange = _ref.registerChange,
       onFocus = _ref.onFocus,
       value = _ref.value;
-  var _inputProps = props.inputProps ? _objectSpread$u({}, props.inputProps.inputProps) : {};
+  var _inputProps = props.inputProps ? _objectSpread$v({}, props.inputProps.inputProps) : {};
   return /*#__PURE__*/createElement(Input, Object.assign({}, props.inputProps, {
     onChange: registerChange,
     placeholder: props.placeholder,
-    inputProps: _objectSpread$u(_objectSpread$u({}, _inputProps), {}, {
+    inputProps: _objectSpread$v(_objectSpread$v({}, _inputProps), {}, {
       onFocus: onFocus,
       onKeyDown: function onKeyDown(e) {
         if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
@@ -4434,7 +4598,8 @@ function defaultSearchBox(_ref, props) {
     errorMessage: props.errorMessage,
     loading: props.loading,
     required: props.required,
-    disabled: props.disabled
+    disabled: props.disabled,
+    testId: props.testId
   }));
 }
 var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
@@ -4480,7 +4645,9 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
           _this$props$searchBox = _this$props.searchBox,
           searchBox = _this$props$searchBox === void 0 ? defaultSearchBox : _this$props$searchBox,
           dropdownClassName = _this$props.dropdownClassName,
-          children = _this$props.children;
+          children = _this$props.children,
+          testId = _this$props.testId;
+      var testIds = getTestIds(testId, getTypeaheadTestIds);
       var _this$state = this.state,
           showSuggestions = _this$state.showSuggestions,
           value = _this$state.value;
@@ -4496,7 +4663,9 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
         registerChange: this.registerChange,
         onFocus: this.onFocus,
         value: value
-      }, this.props), /*#__PURE__*/createElement(MountTransition, {
+      }, _objectSpread$v(_objectSpread$v({}, this.props), {}, {
+        testId: testIds.searchBoxId
+      })), /*#__PURE__*/createElement(MountTransition, {
         visible: showSuggestions,
         native: true
       }, function (transitionStyles) {
@@ -4504,7 +4673,8 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
           style: transitionStyles,
           className: cx(optionsWrapper$1, dropdownClassName)
         }, /*#__PURE__*/createElement(OptionGroupRadio, {
-          onChange: _this2.onSelect
+          onChange: _this2.onSelect,
+          testId: testIds.optionGroupId
         }, children));
       }));
     }
@@ -4572,8 +4742,20 @@ var index = /*#__PURE__*/Object.freeze({
     capitalize: capitalize,
     getShortenedNumber: getShortenedNumber,
     initGoogleAnalytics: initGoogleAnalytics,
-    isDesktop: isDesktop
+    isDesktop: isDesktop,
+    getTestIds: getTestIds,
+    getOptionTestId: getOptionTestId,
+    getRadioGroupTestIds: getRadioGroupTestIds,
+    getOptionGroupTestIds: getOptionGroupTestIds,
+    getOptionGroupRadioTestIds: getOptionGroupRadioTestIds,
+    getOptionGroupCheckBoxTestIds: getOptionGroupCheckBoxTestIds,
+    getPhoneNumberInputTestIds: getPhoneNumberInputTestIds,
+    getMessageTestId: getMessageTestId,
+    getSelectInputTestIds: getSelectInputTestIds,
+    getTypeaheadTestIds: getTypeaheadTestIds,
+    getCalendarTestIds: getCalendarTestIds,
+    getPopUpTestIds: getPopUpTestIds
 });
 
-export { BrowserBasedDateInput, Button, Calendar, Checkbox, CheckboxGroup, DateInput, DropDown, DropDownButton, Input, Loader, Logo, Message, Modal, NativeDateInput, Option, OptionGroup, OptionGroupCheckBox, OptionGroupRadio, OutsideClick, PhoneNumberInput, PopUp, PebblePopper as Popper, PresetCalendar, Radio, RadioGroup, Rating, Search, SecondaryInput, Select, SideBar, Slider, Stepper, Switch, TabSection, Tabs, Tag, Text, TimePicker, Toast, Tooltip, TypeAhead, UserAgentInfoContext, UserAgentInfoProvider, constants, mixins, styles, typography, index as utils };
+export { BrowserBasedDateInput, Button, Calendar, Checkbox, CheckboxGroup, DateInput, DropDown, DropDownButton, Input, Loader, Logo, Message, Modal, NativeDateInput, Option, OptionGroup, OptionGroupCheckBox, OptionGroupRadio, OutsideClick, PhoneNumberInput, PopUp, PebblePopper as Popper, PresetCalendar, Radio, RadioGroup, Rating, Search, SecondaryInput, Select, SideBar, Slider, Stepper, Switch, TabSection, Tabs, Tag, Text, TimePicker, Toast, Tooltip, TypeAhead, UserAgentInfoContext, UserAgentInfoProvider, constants, getCalendarTestIds, getMessageTestId, getOptionGroupCheckBoxTestIds, getOptionGroupRadioTestIds, getOptionGroupTestIds, getOptionTestId, getPhoneNumberInputTestIds, getPopUpTestIds, getRadioGroupTestIds, getSelectInputTestIds, getTestIds, getTypeaheadTestIds, mixins, styles, typography, index as utils };
 //# sourceMappingURL=pebble-web.module.js.map