pebble-web 2.26.0 → 2.26.1-alpha.0

package/dist/pebble-web.umd.js

@@ -1883,7 +1883,8 @@
         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
     };
@@ -1891,7 +1892,8 @@
       className: cx(spinnerStyle, className),
       style: {
         transform: "scale(".concat(scale, ")")
-      }
+      },
+      "data-testid": testId
     }, /*#__PURE__*/React.createElement("div", {
       style: style
     }), /*#__PURE__*/React.createElement("div", {
@@ -1916,7 +1918,8 @@
         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);
@@ -1926,7 +1929,8 @@
       style: {
         width: width
       },
-      disabled: disabled
+      disabled: disabled,
+      "data-testid": testId
     }, buttonProps), loading ? /*#__PURE__*/React.createElement(Loader, {
       color: colors.white.base,
       scale: 0.4
@@ -5040,6 +5044,77 @@
     return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime();
   }
 
+  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) {
@@ -5159,8 +5234,16 @@
             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__*/React.createElement("div", {
           className: cx(wrapperStyle, defineProperty({}, /*#__PURE__*/css( {
             name: "3jm1n8-Calendar",
@@ -5183,13 +5266,15 @@
             style: {
               fontSize: 14
             },
-            className: "pi pi-chevron-left"
+            className: "pi pi-chevron-left",
+            "data-testid": leftIconId
           }),
           nextLabel: /*#__PURE__*/React.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
@@ -5197,9 +5282,11 @@
           className: buttonsWrapper
         }, onClear && /*#__PURE__*/React.createElement(Button, {
           onClick: this.onClear,
-          type: "secondary"
+          type: "secondary",
+          testId: clearButtonId
         }, "Clear"), onApply && /*#__PURE__*/React.createElement(Button, {
-          onClick: this.onApply
+          onClick: this.onApply,
+          testId: applyButtonId
         }, "Apply")));
       }
     }]);
@@ -5210,13 +5297,13 @@
     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",
@@ -5241,7 +5328,8 @@
         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__*/React.createElement("div", {
       className: cx(controlStyle, className),
       role: type,
@@ -5255,7 +5343,8 @@
           value: value,
           checked: !checked
         }, e);
-      } : undefined
+      } : undefined,
+      "data-testid": testId
     }, children(props));
   }
   var ControlView = function ControlView(_ref) {
@@ -5340,13 +5429,16 @@
             selected = _this$props2.selected,
             className = _this$props2.className,
             name = _this$props2.name,
-            disabled = _this$props2.disabled;
-        var _children = React.Children.map(children, function (_checkbox) {
+            disabled = _this$props2.disabled,
+            testId = _this$props2.testId;
+        var _children = React.Children.map(children, function (_checkbox, i) {
+          var index = typeof i === "number" ? i : 0;
           var checkbox = _checkbox;
           return React.cloneElement(checkbox, {
             onChange: _this2.handleChange,
             checked: selected.indexOf(checkbox.props.value) >= 0,
-            disabled: disabled
+            disabled: disabled,
+            testId: testId ? getOptionTestId(testId, index) : undefined
           });
         });
         return /*#__PURE__*/React.createElement("div", {
@@ -9043,8 +9135,8 @@
     });
   }
 
-  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) {
@@ -9079,7 +9171,8 @@
             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__*/React.createElement(OutsideClick, {
           className: cx(wrapperStyle$1, className),
@@ -9106,14 +9199,15 @@
             isOpen: _isDropDownOpen,
             onClick: _this2.toggleDropdown,
             disabled: disabled,
-            className: labelClassName
+            className: labelClassName,
+            testId: testId
           }, buttonLabel));
         }), /*#__PURE__*/React.createElement(MountTransition, {
           visible: _isDropDownOpen
         }, function (transitionStyles) {
           return /*#__PURE__*/React.createElement(renderprops_cjs_7.div, {
             className: cx(dropDownStyle, dropDownClassName),
-            style: _objectSpread$6({
+            style: _objectSpread$7({
               padding: padding
             }, transitionStyles)
           }, /*#__PURE__*/React.createElement(Popper$1, Object.assign({}, _this2.props, {
@@ -9123,7 +9217,7 @@
                 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"),
@@ -9160,8 +9254,8 @@
     }
   };
 
-  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({
@@ -9181,7 +9275,7 @@
     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",
@@ -9233,7 +9327,7 @@
       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"
@@ -9243,8 +9337,8 @@
     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;"
@@ -9260,7 +9354,7 @@
     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",
@@ -9329,7 +9423,8 @@
             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);
@@ -9362,9 +9457,13 @@
           onClick: onClick
         }, /*#__PURE__*/React.createElement("div", {
           className: _inputWrapperClassName
-        }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/React.createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps)) : /*#__PURE__*/React.createElement("input", Object.assign({
+        }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/React.createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps, {
+          "data-testid": testId
+        })) : /*#__PURE__*/React.createElement("input", Object.assign({
           type: type
-        }, _inputProps, this.props.inputProps)), loading && /*#__PURE__*/React.createElement(Loader, {
+        }, _inputProps, this.props.inputProps, {
+          "data-testid": testId
+        })), loading && /*#__PURE__*/React.createElement(Loader, {
           color: colors.violet.base,
           scale: 0.6,
           className: _loadingStyle
@@ -9381,6 +9480,7 @@
           }
         }), _message && /*#__PURE__*/React.createElement("div", {
           className: messageStyle,
+          "data-testid": testId ? getMessageTestId(testId) : undefined,
           style: {
             color: getColor(errorMessage, successMessage)
           }
@@ -11147,7 +11247,8 @@
             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__*/React.createElement(Input, Object.assign({
           onChange: this.onDateInputChange,
           type: "date"
@@ -11156,7 +11257,8 @@
           placeholder: placeholder,
           fixLabelAtTop: true
         }, inputProps, {
-          disabled: disabled
+          disabled: disabled,
+          testId: testId
         }));
       }
     }]);
@@ -11201,8 +11303,8 @@
     return UserAgentInfoProvider;
   }(React.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() {};
@@ -11262,7 +11364,8 @@
             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__*/React.createElement(DropDown, {
@@ -11287,13 +11390,14 @@
                 },
                 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
               }));
             });
           },
@@ -11435,9 +11539,9 @@
     }));
   };
 
-  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), {}, {
@@ -11453,8 +11557,8 @@
 
   function mitt(n){return {all:n=n||new Map,on:function(t,e){var i=n.get(t);i&&i.push(e)||n.set(t,[e]);},off:function(t,e){var i=n.get(t);i&&i.splice(i.indexOf(e)>>>0,1);},emit:function(t,e){(n.get(t)||[]).slice().map(function(n){n(e);}),(n.get("*")||[]).slice().map(function(n){n(t,e);});}}}
 
-  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();
@@ -11593,19 +11697,25 @@
     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",
@@ -11616,13 +11726,13 @@
           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),
@@ -11630,13 +11740,13 @@
         }, function (show) {
           return show && function (styles) {
             return /*#__PURE__*/React.createElement(renderprops_cjs_7.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__*/React.createElement("i", {
               className: iconClass
-            }), _this2.state.text);
+            }), _this4.state.text);
           };
         });
       }
@@ -11662,9 +11772,9 @@
     return Toast;
   }(React.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,
@@ -11680,7 +11790,8 @@
   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",
@@ -11690,7 +11801,8 @@
       className: cx(messageWrapper, className),
       style: {
         backgroundColor: bColor
-      }
+      },
+      "data-testid": testId
     }, /*#__PURE__*/React.createElement("i", {
       className: iconClass
     }), text);
@@ -11771,9 +11883,9 @@
     return Modal;
   }(React.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",
@@ -11796,7 +11908,7 @@
   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({
@@ -12079,9 +12191,9 @@
     return defaultBehavior(compute(target, computeOptions), computeOptions.behavior);
   }
 
-  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"
@@ -12109,7 +12221,7 @@
       }
     }
   }), ";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,
@@ -12161,7 +12273,8 @@
             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",
@@ -12181,7 +12294,9 @@
           },
           ref: this.searchInputRef,
           value: value
-        }, inputProps)), loading && /*#__PURE__*/React.createElement(Loader, {
+        }, inputProps, {
+          "data-testid": testId
+        })), loading && /*#__PURE__*/React.createElement(Loader, {
           scale: 0.4,
           color: colors.violet.base
         }), clearable && /*#__PURE__*/React.createElement("div", {
@@ -12242,8 +12357,8 @@
     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) {
@@ -12337,10 +12452,12 @@
             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 = React.Children.map(children, function (_option, i) {
           var option = _option;
           var ref = _this3.optionsRefsSet.get(i);
@@ -12353,7 +12470,8 @@
             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));
@@ -12363,10 +12481,11 @@
         }, /*#__PURE__*/React.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
         }))), !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
           ref: this.optionRef,
           style: {
@@ -12374,37 +12493,39 @@
           },
           className: cx(optionsWrapper, className),
           role: multiSelect ? "group" : "radiogroup",
-          "data-test-id": "optiongroup",
+          "data-testid": testId,
           "aria-label": searchBoxProps && searchBoxProps.placeholder
         }, advancedOptions && advancedOptionsProps && /*#__PURE__*/React.createElement("div", {
           className: _class
         }, /*#__PURE__*/React.createElement("div", {
-          onClick: advancedOptionsProps.selectVisible
+          onClick: advancedOptionsProps.selectVisible,
+          "data-testid": testIds.selectVisibleId
         }, "Select Visible"), /*#__PURE__*/React.createElement("div", {
-          onClick: advancedOptionsProps.clearVisible
+          onClick: advancedOptionsProps.clearVisible,
+          "data-testid": testIds.clearVisibleId
         }, "Clear Visible")), _children));
       }
     }]);
     return OptionGroup;
   }(React.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) {
@@ -12461,25 +12582,30 @@
             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__*/React.createElement("div", {
           className: cx(optionGroupCheckBoxWrap, wrapClassName)
         }, /*#__PURE__*/React.createElement(OptionGroup, Object.assign({}, rest, {
           advancedOptionsProps: advancedOptionsProps,
           isSelected: isSelected || this.isSelected,
           handleChange: this.handleChange,
-          multiSelect: true
+          multiSelect: true,
+          testId: testId
         })), (onApply || onClear) && /*#__PURE__*/React.createElement("div", {
           className: optionGroupCheckBoxButtonWrap
         }, onClear && /*#__PURE__*/React.createElement(Button, {
           type: "secondary",
-          onClick: onClear
+          onClick: onClear,
+          testId: testIds.clearButtonId
         }, "Clear"), onApply && /*#__PURE__*/React.createElement(Button, {
-          onClick: this.onApply
+          onClick: this.onApply,
+          testId: testIds.applyButtonId
         }, "Apply")));
       }
     }]);
@@ -12587,7 +12713,14 @@
         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__*/React.createElement("div", {
       className: cx(selectWrapper, className, defineProperty({}, relativePosition, !!fullWidthDropdown))
     }, /*#__PURE__*/React.createElement(DropDown, {
@@ -12606,7 +12739,8 @@
           onClick: disabled ? undefined : function () {
             toggleDropdown();
             onDropdownToggle(isOpen);
-          }
+          },
+          "data-testid": singleSelectTestIds.inputId
         }, /*#__PURE__*/React.createElement(Input, Object.assign({
           className: selectInputWrapper,
           inputClassName: selectInput,
@@ -12652,7 +12786,9 @@
             onDropdownToggle(isOpen);
             toggle();
           }
-        }, commonProps), children);
+        }, commonProps, {
+          testId: multiSelectTestIds.optionGroupId
+        }), children);
       } else {
         return /*#__PURE__*/React.createElement(OptionGroupRadio, Object.assign({
           selected: props.selected,
@@ -12661,7 +12797,9 @@
             onDropdownToggle(isOpen);
             toggle();
           }
-        }, commonProps), children);
+        }, commonProps, {
+          testId: singleSelectTestIds.optionGroupId
+        }), children);
       }
     }));
   }
@@ -12716,7 +12854,9 @@
             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__*/React.createElement("div", {
           className: cx(wrapper, className)
         }, /*#__PURE__*/React.createElement("label", {
@@ -12731,12 +12871,15 @@
           value: countryCode + "",
           selected: countryCode
         }, selectProps, {
-          className: cx(selectStyle, selectProps && selectProps.className)
+          className: cx(selectStyle, selectProps && selectProps.className),
+          testId: testIds.countryId
         }), this.props.children), /*#__PURE__*/React.createElement(Input, Object.assign({
           onChange: this.onNumberChange,
           placeholder: "",
           value: phone
-        }, inputProps)));
+        }, inputProps, {
+          testId: testIds.phoneId
+        })));
       }
     }]);
     return PhoneNumberInput;
@@ -12767,8 +12910,8 @@
     }
   }, ";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) {
@@ -12834,7 +12977,7 @@
                 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")
@@ -12850,7 +12993,7 @@
             }), /*#__PURE__*/React.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
@@ -12866,8 +13009,8 @@
     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",
@@ -12881,7 +13024,7 @@
     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({
@@ -12907,7 +13050,14 @@
         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__*/React.createElement(Modal, {
       visible: visible,
       modalClassName: flexCenter
@@ -12915,27 +13065,32 @@
       className: modalContainer$1
     }, onClose && /*#__PURE__*/React.createElement("i", {
       className: cx("pi", "pi-close", iconCloseClassName),
-      onClick: onClose
+      onClick: onClose,
+      "data-testid": closeButtonId
     }), children, (onReject || onApprove) && /*#__PURE__*/React.createElement("div", {
       className: buttonsContainer
     }, onReject && /*#__PURE__*/React.createElement(Button, Object.assign({
       size: "large",
       type: "secondary",
       onClick: onReject
-    }, rejectButtonProps), rejectButtonText), onApprove && /*#__PURE__*/React.createElement(Button, Object.assign({
+    }, rejectButtonProps, {
+      testId: rejectButtonId
+    }), rejectButtonText), onApprove && /*#__PURE__*/React.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;" + ( "" ));
@@ -12976,7 +13131,7 @@
           var isSelected = _this2.state.selectedTab === tab;
           return /*#__PURE__*/React.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({
@@ -13182,13 +13337,16 @@
             selected = _this$props2.selected,
             className = _this$props2.className,
             name = _this$props2.name,
-            disabled = _this$props2.disabled;
-        var _children = React.Children.map(children, function (_radio) {
+            disabled = _this$props2.disabled,
+            testId = _this$props2.testId;
+        var testIds = getTestIds(testId, getRadioGroupTestIds);
+        var _children = React.Children.map(children, function (_radio, i) {
           var radio = _radio;
           return React.cloneElement(radio, {
             onChange: _this2.handleChange,
             checked: selected === radio.props.value,
-            disabled: disabled
+            disabled: disabled,
+            testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
           });
         });
         return /*#__PURE__*/React.createElement("div", {
@@ -13201,9 +13359,9 @@
     return RadioGroup;
   }(React.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( {
@@ -13305,8 +13463,8 @@
     return Rating;
   }(React.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;" + ( "" ));
@@ -13315,12 +13473,12 @@
     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;" + ( "" ));
@@ -13337,7 +13495,7 @@
       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",
@@ -13418,7 +13576,8 @@
             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 = {
@@ -13442,7 +13601,9 @@
           },
           onFocus: this.addFocus,
           onBlur: this.removeFocus
-        }, /*#__PURE__*/React.createElement("input", Object.assign({}, _inputProps, this.props.inputProps)), /*#__PURE__*/React.createElement("label", {
+        }, /*#__PURE__*/React.createElement("input", Object.assign({}, _inputProps, this.props.inputProps, {
+          "data-testid": testId
+        })), /*#__PURE__*/React.createElement("label", {
           className: placeholderClassName
         }, placeholder, required && /*#__PURE__*/React.createElement("span", {
           style: {
@@ -13455,6 +13616,7 @@
           scale: 0.4
         })), _message && /*#__PURE__*/React.createElement("div", {
           className: messageStyle$1,
+          "data-testid": testId ? getMessageTestId(testId) : undefined,
           style: {
             color: getColor$1(errorMessage, successMessage)
           }
@@ -14444,10 +14606,10 @@
   });
   var Rheostat = unwrapExports(Slider);
 
-  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 &": {
@@ -15039,8 +15201,8 @@
   }
   var asyncToGenerator = _asyncToGenerator;
 
-  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;"
@@ -15049,7 +15211,7 @@
     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,
@@ -15078,8 +15240,8 @@
     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() {}
@@ -15238,11 +15400,11 @@
               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)));
       }
@@ -15283,9 +15445,9 @@
     }
   };
 
-  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;" + ( "" ));
@@ -15381,9 +15543,9 @@
     return Switch;
   }(React.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,
@@ -15430,19 +15592,21 @@
     }, /*#__PURE__*/React.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);
   };
 
@@ -15570,7 +15734,7 @@
             toggleDropdown();
           },
           className: buttonStyle,
-          "data-test-id": "hour-label"
+          "data-testid": "hour-label"
         }, /*#__PURE__*/React.createElement("span", {
           className: /*#__PURE__*/css( {
             name: "1czd1rs-TimePicker",
@@ -15617,7 +15781,7 @@
             toggleDropdown();
           },
           className: buttonStyle,
-          "data-test-id": "minute-label"
+          "data-testid": "minute-label"
         }, /*#__PURE__*/React.createElement("span", {
           className: /*#__PURE__*/css( {
             name: "1czd1rs-TimePicker",
@@ -15654,9 +15818,9 @@
     }));
   };
 
-  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"
@@ -15764,17 +15928,17 @@
 
   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__*/React.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;
@@ -15788,7 +15952,8 @@
       errorMessage: props.errorMessage,
       loading: props.loading,
       required: props.required,
-      disabled: props.disabled
+      disabled: props.disabled,
+      testId: props.testId
     }));
   }
   var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
@@ -15834,7 +15999,9 @@
             _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;
@@ -15850,7 +16017,9 @@
           registerChange: this.registerChange,
           onFocus: this.onFocus,
           value: value
-        }, this.props), /*#__PURE__*/React.createElement(MountTransition, {
+        }, _objectSpread$v(_objectSpread$v({}, this.props), {}, {
+          testId: testIds.searchBoxId
+        })), /*#__PURE__*/React.createElement(MountTransition, {
           visible: showSuggestions,
           native: true
         }, function (transitionStyles) {
@@ -15858,7 +16027,8 @@
             style: transitionStyles,
             className: cx(optionsWrapper$1, dropdownClassName)
           }, /*#__PURE__*/React.createElement(OptionGroupRadio, {
-            onChange: _this2.onSelect
+            onChange: _this2.onSelect,
+            testId: testIds.optionGroupId
           }, children));
         }));
       }
@@ -15926,7 +16096,19 @@
     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
   });
 
   exports.BrowserBasedDateInput = BrowserBasedDateInput;
@@ -15974,6 +16156,18 @@
   exports.UserAgentInfoProvider = UserAgentInfoProvider;
   exports.colors = colors;
   exports.constants = constants;
+  exports.getCalendarTestIds = getCalendarTestIds;
+  exports.getMessageTestId = getMessageTestId;
+  exports.getOptionGroupCheckBoxTestIds = getOptionGroupCheckBoxTestIds;
+  exports.getOptionGroupRadioTestIds = getOptionGroupRadioTestIds;
+  exports.getOptionGroupTestIds = getOptionGroupTestIds;
+  exports.getOptionTestId = getOptionTestId;
+  exports.getPhoneNumberInputTestIds = getPhoneNumberInputTestIds;
+  exports.getPopUpTestIds = getPopUpTestIds;
+  exports.getRadioGroupTestIds = getRadioGroupTestIds;
+  exports.getSelectInputTestIds = getSelectInputTestIds;
+  exports.getTestIds = getTestIds;
+  exports.getTypeaheadTestIds = getTypeaheadTestIds;
   exports.mixins = mixins;
   exports.styles = styles;
   exports.typography = typography;