pebble-web 2.26.0 → 2.26.1-alpha.1

package/dist/pebble-web.js

@@ -452,7 +452,8 @@ var Loader = function Loader(_ref) {
       color = _ref$color === void 0 ? pebbleShared.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
   };
@@ -460,7 +461,8 @@ var Loader = function Loader(_ref) {
     className: emotion.cx(spinnerStyle, className),
     style: {
       transform: "scale(".concat(scale, ")")
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement("div", {
     style: style
   }), /*#__PURE__*/React.createElement("div", {
@@ -485,7 +487,8 @@ var Button = function Button(_ref) {
       outline = _ref.outline,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "small" : _ref$size,
-      buttonProps = _ref.buttonProps;
+      buttonProps = _ref.buttonProps,
+      testId = _ref.testId;
   var disableAction = disabled || loading;
   var _outline = size === "x-small" || !!outline;
   var _className = emotion.cx(getButtonStyle(size, type, !!showShadow, !_outline), className);
@@ -495,7 +498,8 @@ var Button = function Button(_ref) {
     style: {
       width: width
     },
-    disabled: disabled
+    disabled: disabled,
+    "data-testid": testId
   }, buttonProps), loading ? /*#__PURE__*/React.createElement(Loader, {
     color: pebbleShared.colors.white.base,
     scale: 0.4
@@ -642,6 +646,77 @@ var buttonsWrapper = /*#__PURE__*/emotion.css(_objectSpread$4(_objectSpread$4({}
   marginTop: 20
 }), ";label:buttonsWrapper;" + ( "" ));
 
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function getTestIds(id, builder) {
+  return id ? builder(id) : {};
+}
+function getOptionTestId(id, index) {
+  return "".concat(id, "-").concat(index);
+}
+function getRadioGroupTestIds(id) {
+  return {
+    optionId: "".concat(id, "-option")
+  };
+}
+function getOptionGroupTestIds(id) {
+  return {
+    searchBoxId: "".concat(id, "-search"),
+    optionId: "".concat(id, "-option"),
+    selectVisibleId: "".concat(id, "-select-visible"),
+    clearVisibleId: "".concat(id, "-clear-visible")
+  };
+}
+var getOptionGroupRadioTestIds = function getOptionGroupRadioTestIds(id) {
+  return getOptionGroupTestIds(id);
+};
+function getOptionGroupCheckBoxTestIds(id) {
+  return _objectSpread$5({
+    applyButtonId: "".concat(id, "-apply-btn"),
+    clearButtonId: "".concat(id, "-clear-btn")
+  }, getOptionGroupTestIds(id));
+}
+function getPhoneNumberInputTestIds(id) {
+  return {
+    phoneId: "".concat(id, "-phone"),
+    countryId: "".concat(id, "-country"),
+    countryInputIds: getSelectInputTestIds("".concat(id, "-country"))
+  };
+}
+function getMessageTestId(id) {
+  return "".concat(id, "-message");
+}
+function getSelectInputTestIds(id) {
+  var multiSelect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var optionGroupId = "".concat(id, "-option-group");
+  var baseIds = {
+    inputId: "".concat(id, "-input"),
+    optionGroupId: optionGroupId
+  };
+  return _objectSpread$5(_objectSpread$5({}, multiSelect ? getOptionGroupCheckBoxTestIds(optionGroupId) : getOptionGroupRadioTestIds(optionGroupId)), baseIds);
+}
+function getTypeaheadTestIds(id) {
+  var optionGroupId = "".concat(id, "-option-group");
+  return _objectSpread$5({
+    optionGroupId: optionGroupId
+  }, getOptionGroupRadioTestIds(optionGroupId));
+}
+function getCalendarTestIds(id) {
+  return {
+    leftIconId: "".concat(id, "-left-icon"),
+    rightIconId: "".concat(id, "-right-icon"),
+    applyButtonId: "".concat(id, "-apply-btn"),
+    clearButtonId: "".concat(id, "-clear-btn")
+  };
+}
+function getPopUpTestIds(id) {
+  return {
+    closeButtonId: "".concat(id, "-close-btn"),
+    approveButtonId: "".concat(id, "-approve-btn"),
+    rejectButtonId: "".concat(id, "-reject-btn")
+  };
+}
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var Calendar = /*#__PURE__*/function (_React$PureComponent) {
@@ -761,8 +836,16 @@ var Calendar = /*#__PURE__*/function (_React$PureComponent) {
           onClear = _this$props.onClear,
           maxDate = _this$props.maxDate,
           minDate = _this$props.minDate,
-          rest = _objectWithoutProperties(_this$props, ["range", "selected", "hideShadow", "className", "onApply", "onClear", "maxDate", "minDate"]);
+          testId = _this$props.testId,
+          rest = _objectWithoutProperties(_this$props, ["range", "selected", "hideShadow", "className", "onApply", "onClear", "maxDate", "minDate", "testId"]);
       var maxRangeDates = this.state.maxRangeDates;
+      var _getTestIds = getTestIds(testId, function (id) {
+        return getCalendarTestIds(id);
+      }),
+          leftIconId = _getTestIds.leftIconId,
+          rightIconId = _getTestIds.rightIconId,
+          clearButtonId = _getTestIds.clearButtonId,
+          applyButtonId = _getTestIds.applyButtonId;
       return /*#__PURE__*/React.createElement("div", {
         className: emotion.cx(wrapperStyle, _defineProperty({}, /*#__PURE__*/emotion.css( {
           name: "3jm1n8-Calendar",
@@ -785,13 +868,15 @@ var Calendar = /*#__PURE__*/function (_React$PureComponent) {
           style: {
             fontSize: 14
           },
-          className: "pi pi-chevron-left"
+          className: "pi pi-chevron-left",
+          "data-testid": leftIconId
         }),
         nextLabel: /*#__PURE__*/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
@@ -799,9 +884,11 @@ var Calendar = /*#__PURE__*/function (_React$PureComponent) {
         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")));
     }
   }]);
@@ -812,13 +899,13 @@ Calendar.defaultProps = {
   tileDots: []
 };
 
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$5(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var radioIconStyle = /*#__PURE__*/emotion.css( {
   name: "i5unie-radioIconStyle",
   styles: "margin-right:10px;font-size:16px;padding-top:2px;height:18px;;label:radioIconStyle;"
 } );
-var controlStyle = /*#__PURE__*/emotion.css(_objectSpread$5(_objectSpread$5({
+var controlStyle = /*#__PURE__*/emotion.css(_objectSpread$6(_objectSpread$6({
   cursor: "pointer",
   display: "flex",
   outline: "none",
@@ -843,7 +930,8 @@ function Control(props) {
       children = _props$children === void 0 ? ControlView : _props$children,
       type = props.type,
       className = props.className,
-      indeterminate = props.indeterminate;
+      indeterminate = props.indeterminate,
+      testId = props.testId;
   return /*#__PURE__*/React.createElement("div", {
     className: emotion.cx(controlStyle, className),
     role: type,
@@ -857,7 +945,8 @@ function Control(props) {
         value: value,
         checked: !checked
       }, e);
-    } : undefined
+    } : undefined,
+    "data-testid": testId
   }, children(props));
 }
 var ControlView = function ControlView(_ref) {
@@ -942,13 +1031,16 @@ var CheckboxGroup = /*#__PURE__*/function (_React$PureComponent) {
           selected = _this$props2.selected,
           className = _this$props2.className,
           name = _this$props2.name,
-          disabled = _this$props2.disabled;
-      var _children = 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", {
@@ -1066,8 +1158,8 @@ var MountTransition = function MountTransition(props) {
   });
 };
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var DropDown = /*#__PURE__*/function (_React$PureComponent) {
@@ -1102,7 +1194,8 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
           disabled = _this$props.disabled,
           labelClassName = _this$props.labelClassName,
           controlled = _this$props.controlled,
-          _onOutsideClick = _this$props.onOutsideClick;
+          _onOutsideClick = _this$props.onOutsideClick,
+          testId = _this$props.testId;
       var _isDropDownOpen = controlled ? !!this.props.isOpen : this.state.isOpen;
       return /*#__PURE__*/React.createElement(OutsideClick, {
         className: emotion.cx(wrapperStyle$1, className),
@@ -1129,14 +1222,15 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
           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.animated.div, {
           className: emotion.cx(dropDownStyle, dropDownClassName),
-          style: _objectSpread$6({
+          style: _objectSpread$7({
             padding: padding
           }, transitionStyles)
         }, /*#__PURE__*/React.createElement(reactPopper.Popper, Object.assign({}, _this2.props, {
@@ -1146,7 +1240,7 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
               style = _ref2.style,
               placement = _ref2.placement,
               arrowProps = _ref2.arrowProps;
-          var popperWrapperStyle = _objectSpread$6(_objectSpread$6(_objectSpread$6({}, style), transitionStyles), {}, {
+          var popperWrapperStyle = _objectSpread$7(_objectSpread$7(_objectSpread$7({}, style), transitionStyles), {}, {
             backgroundColor: pebbleShared.colors.white.base,
             transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px"),
@@ -1183,8 +1277,8 @@ DropDown.defaultProps = {
   }
 };
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var animation = "all 0.3s cubic-bezier(.64,.09,.08,1)";
 var inputMarginBottom = 20;
 var wrapperStyle$2 = /*#__PURE__*/emotion.css({
@@ -1204,7 +1298,7 @@ var inputWrapperStyle = /*#__PURE__*/emotion.css({
   alignItems: "baseline",
   borderBottom: "1px solid ".concat(pebbleShared.colors.gray.lighter)
 }, ";label:inputWrapperStyle;" + ( "" ));
-var inputStyle = /*#__PURE__*/emotion.css(_objectSpread$7(_objectSpread$7(_objectSpread$7({
+var inputStyle = /*#__PURE__*/emotion.css(_objectSpread$8(_objectSpread$8(_objectSpread$8({
   outline: 0,
   border: 0,
   padding: "24px 0 12px 0",
@@ -1256,7 +1350,7 @@ var labelStyle = /*#__PURE__*/emotion.css({
     color: pebbleShared.colors.gray.dark
   }
 }, ";label:labelStyle;" + ( "" ));
-var messageStyle = /*#__PURE__*/emotion.css(_objectSpread$7(_objectSpread$7({}, typography.s.regular), {}, {
+var messageStyle = /*#__PURE__*/emotion.css(_objectSpread$8(_objectSpread$8({}, typography.s.regular), {}, {
   marginTop: 9,
   lineHeight: "10px",
   textAlign: "left"
@@ -1266,8 +1360,8 @@ var loadingStyle = /*#__PURE__*/emotion.css( {
   styles: "position:relative;top:4px;;label:loadingStyle;"
 } );
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$9(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var dateClass = /*#__PURE__*/emotion.css( {
   name: "1ydb6k9-dateClass",
   styles: "padding:20px;width:100%;;label:dateClass;"
@@ -1283,7 +1377,7 @@ var wrapperStyle$3 = /*#__PURE__*/emotion.css( {
   name: "h7juj2-wrapperStyle",
   styles: "margin-bottom:20px;;label:wrapperStyle;"
 } );
-var errorStyle = /*#__PURE__*/emotion.css(_objectSpread$8(_objectSpread$8({}, typography.s.bold), {}, {
+var errorStyle = /*#__PURE__*/emotion.css(_objectSpread$9(_objectSpread$9({}, typography.s.bold), {}, {
   backgroundColor: pebbleShared.colors.red.lightest,
   color: pebbleShared.colors.red.darker,
   textAlign: "left",
@@ -1352,7 +1446,8 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
           onClick = _this$props.onClick,
           loading = _this$props.loading,
           leftElement = _this$props.leftElement,
-          rightElement = _this$props.rightElement;
+          rightElement = _this$props.rightElement,
+          testId = _this$props.testId;
       var isFocused = this.state.isFocused;
       var _message = errorMessage || successMessage || message;
       var _inputWrapperClassName = emotion.cx(inputWrapperStyle, inputWrapperClassName);
@@ -1385,9 +1480,13 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
         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: pebbleShared.colors.violet.base,
         scale: 0.6,
         className: _loadingStyle
@@ -1404,6 +1503,7 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
         }
       }), _message && /*#__PURE__*/React.createElement("div", {
         className: messageStyle,
+        "data-testid": testId ? getMessageTestId(testId) : undefined,
         style: {
           color: getColor(errorMessage, successMessage)
         }
@@ -1439,7 +1539,8 @@ var NativeDateInput = /*#__PURE__*/function (_React$PureComponent) {
           inputProps = _this$props.inputProps,
           placeholder = _this$props.placeholder,
           value = _this$props.value,
-          disabled = _this$props.disabled;
+          disabled = _this$props.disabled,
+          testId = _this$props.testId;
       return /*#__PURE__*/React.createElement(Input, Object.assign({
         onChange: this.onDateInputChange,
         type: "date"
@@ -1448,7 +1549,8 @@ var NativeDateInput = /*#__PURE__*/function (_React$PureComponent) {
         placeholder: placeholder,
         fixLabelAtTop: true
       }, inputProps, {
-        disabled: disabled
+        disabled: disabled,
+        testId: testId
       }));
     }
   }]);
@@ -1493,8 +1595,8 @@ var UserAgentInfoProvider = /*#__PURE__*/function (_React$PureComponent) {
   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() {};
@@ -1554,7 +1656,8 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
           initiallyOpen = _this$props.initiallyOpen,
           onOutsideClick = _this$props.onOutsideClick,
           controlled = _this$props.controlled,
-          isOpen = _this$props.isOpen;
+          isOpen = _this$props.isOpen,
+          testId = _this$props.testId;
       var _wrapperClassName = emotion.cx(wrapperStyle$3, wrapperClassName);
       var _dropDownClassName = emotion.cx(dropDownClassName, this.props.dropDownClassName);
       return /*#__PURE__*/React.createElement(DropDown, {
@@ -1579,13 +1682,14 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
               },
               fixLabelAtTop: true
             }, inputProps, {
-              inputProps: _objectSpread$9(_objectSpread$9({
+              inputProps: _objectSpread$a(_objectSpread$a({
                 placeholder: "DD/MM/YYYY"
               }, inputProps && inputProps.inputProps), {}, {
                 onChange: onChange
               }),
               className: emotion.cx(inputStyle$1, inputProps && inputProps.className),
-              disabled: disabled
+              disabled: disabled,
+              testId: testId
             }));
           });
         },
@@ -1727,9 +1831,9 @@ var Logo = function Logo(_ref) {
   }));
 };
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var toastWrapper = /*#__PURE__*/emotion.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__*/emotion.css(_objectSpread$b(_objectSpread$b({
   position: "fixed",
   borderRadius: constants.borderRadius
 }, typography.normal.regular), {}, {
@@ -1743,8 +1847,8 @@ var toastWrapper = /*#__PURE__*/emotion.css(_objectSpread$a(_objectSpread$a({
   }
 }), ";label:toastWrapper;" + ( "" ));
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$c(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var emitter = /*#__PURE__*/mitt();
@@ -1883,19 +1987,25 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(Toast, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      emitter.on("showToast", this.show);
+      var _this2 = this;
+      emitter.on("showToast", function (e) {
+        return e && _this2.show(e);
+      });
       emitter.on("hideToast", this.hide);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      emitter.off("showToast", this.show);
+      var _this3 = this;
+      emitter.off("showToast", function (e) {
+        return e && _this3.show(e);
+      });
       emitter.off("hideToast", this.hide);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
       var bColor = _colors[this.state.type];
       var iconClass = emotion.cx("pi", {
         "pi-radio-check-filled": this.state.type === "success",
@@ -1906,13 +2016,13 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
         native: true,
         items: this.state.show,
         key: position,
-        from: _objectSpread$b({
+        from: _objectSpread$c({
           opacity: 0
         }, customStyles[position].transitions.from),
-        enter: _objectSpread$b({
+        enter: _objectSpread$c({
           opacity: 1
         }, customStyles[position].transitions.enter),
-        leave: _objectSpread$b({
+        leave: _objectSpread$c({
           opacity: 0,
           pointerEvents: "none"
         }, customStyles[position].transitions.leave),
@@ -1920,13 +2030,13 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
       }, function (show) {
         return show && function (styles) {
           return /*#__PURE__*/React.createElement(renderprops_cjs.animated.div, {
-            className: emotion.cx(toastWrapper, _this2.props.className),
-            style: _objectSpread$b(_objectSpread$b({
+            className: emotion.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);
         };
       });
     }
@@ -1952,9 +2062,9 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
   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__*/emotion.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__*/emotion.css(_objectSpread$d(_objectSpread$d({
   borderRadius: constants.borderRadius
 }, typography.normal.regular), {}, {
   color: pebbleShared.colors.white.base,
@@ -1970,7 +2080,8 @@ var messageWrapper = /*#__PURE__*/emotion.css(_objectSpread$c(_objectSpread$c({
 var Message = function Message(_ref) {
   var intent = _ref.intent,
       className = _ref.className,
-      text = _ref.text;
+      text = _ref.text,
+      testId = _ref.testId;
   var bColor = _colors[intent];
   var iconClass = emotion.cx("pi", {
     "pi-radio-check-filled": intent === "success",
@@ -1980,7 +2091,8 @@ var Message = function Message(_ref) {
     className: emotion.cx(messageWrapper, className),
     style: {
       backgroundColor: bColor
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/React.createElement("i", {
     className: iconClass
   }), text);
@@ -2058,9 +2170,9 @@ var Modal = /*#__PURE__*/function (_React$PureComponent) {
   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__*/emotion.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__*/emotion.css(_objectSpread$e(_objectSpread$e(_objectSpread$e({}, typography.normal.regular), {}, {
   cursor: "pointer",
   padding: "12px 18px",
   position: "relative",
@@ -2083,7 +2195,7 @@ var labelWrap = /*#__PURE__*/emotion.css( {
 var activeRow = /*#__PURE__*/emotion.css({
   backgroundColor: pebbleShared.colors.gray.lightest
 }, ";label:activeRow;" + ( "" ));
-var selectedRow = /*#__PURE__*/emotion.css(_objectSpread$d({
+var selectedRow = /*#__PURE__*/emotion.css(_objectSpread$e({
   color: pebbleShared.colors.violet.base
 }, typography.normal.bold), ";label:selectedRow;" + ( "" ));
 var advancedActionsWrapper = /*#__PURE__*/emotion.css({
@@ -2151,9 +2263,9 @@ var Option = /*#__PURE__*/function (_React$Component) {
 }(React.Component);
 Option.defaultProps = defaultProps;
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$e(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var searchWrapperStyle = /*#__PURE__*/emotion.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__*/emotion.css(_objectSpread$f(_objectSpread$f({
   minWidth: "200px",
   borderRadius: constants.borderRadius,
   padding: "0 20px"
@@ -2181,7 +2293,7 @@ var searchWrapperStyle = /*#__PURE__*/emotion.css(_objectSpread$e(_objectSpread$
     }
   }
 }), ";label:searchWrapperStyle;" + ( "" ));
-var searchStyle = /*#__PURE__*/emotion.css(_objectSpread$e(_objectSpread$e(_objectSpread$e(_objectSpread$e({
+var searchStyle = /*#__PURE__*/emotion.css(_objectSpread$f(_objectSpread$f(_objectSpread$f(_objectSpread$f({
   borderRadius: constants.borderRadius,
   outline: "none",
   border: 0,
@@ -2233,7 +2345,8 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
           className = _this$props.className,
           clearable = _this$props.clearable,
           value = _this$props.value,
-          loading = _this$props.loading;
+          loading = _this$props.loading,
+          testId = _this$props.testId;
       var wrapperClassName = emotion.cx(searchWrapperStyle, {
         __pebble__search__small: type === "small",
         __pebble__search__large: type === "large",
@@ -2253,7 +2366,9 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
         },
         ref: this.searchInputRef,
         value: value
-      }, inputProps)), loading && /*#__PURE__*/React.createElement(Loader, {
+      }, inputProps, {
+        "data-testid": testId
+      })), loading && /*#__PURE__*/React.createElement(Loader, {
         scale: 0.4,
         color: pebbleShared.colors.violet.base
       }), clearable && /*#__PURE__*/React.createElement("div", {
@@ -2314,8 +2429,8 @@ var searchBoxScrolledStyle = /*#__PURE__*/emotion.css({
   padding: onScrollPadding
 }, ";label:searchBoxScrolledStyle;" + ( "" ));
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
@@ -2409,10 +2524,12 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
           className = _this$props2.className,
           isSelected = _this$props2.isSelected,
           handleChange = _this$props2.handleChange,
-          searchBoxProps = _this$props2.searchBoxProps;
+          searchBoxProps = _this$props2.searchBoxProps,
+          testId = _this$props2.testId;
       var _this$state = this.state,
           isScrolled = _this$state.isScrolled,
           highlighted = _this$state.highlighted;
+      var testIds = getTestIds(testId, getOptionGroupTestIds);
       var _children = React.Children.map(children, function (_option, i) {
         var option = _option;
         var ref = _this3.optionsRefsSet.get(i);
@@ -2425,7 +2542,8 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
           isActive: highlighted === i,
           isSelected: isSelected(option.props.value),
           multiSelect: multiSelect,
-          ref: ref
+          ref: ref,
+          testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
         });
       });
       var searchBoxClassName = emotion.cx(searchBoxWrapper, _defineProperty({}, searchBoxScrolledStyle, isScrolled));
@@ -2435,10 +2553,11 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__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: {
@@ -2446,37 +2565,39 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
         },
         className: emotion.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__*/emotion.css({
   maxHeight: optionWrapperMaxHeight + searchBoxHeight + 2 * (initialPadding - onScrollPadding) + optionGroupCheckBoxButtonWrapPadding + optionGroupCheckBoxButtonWrapPaddingTop + smallButtonHeight,
   position: "relative"
 }, ";label:optionGroupCheckBoxWrap;" + ( "" ));
-var optionGroupCheckBoxButtonWrap = /*#__PURE__*/emotion.css(_objectSpread$g(_objectSpread$g({}, flexSpaceBetween), {}, {
+var optionGroupCheckBoxButtonWrap = /*#__PURE__*/emotion.css(_objectSpread$h(_objectSpread$h({}, flexSpaceBetween), {}, {
   gap: 60,
   padding: optionGroupCheckBoxButtonWrapPadding,
   paddingTop: optionGroupCheckBoxButtonWrapPaddingTop,
   backgroundColor: pebbleShared.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) {
@@ -2533,25 +2654,30 @@ var OptionGroupCheckBox = /*#__PURE__*/function (_React$PureComponent) {
           onClear = _this$props2.onClear,
           isSelected = _this$props2.isSelected,
           onChange = _this$props2.onChange,
-          rest = _objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange"]);
-      var advancedOptionsProps = _objectSpread$h({
+          testId = _this$props2.testId,
+          rest = _objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange", "testId"]);
+      var advancedOptionsProps = _objectSpread$i({
         selectVisible: this.selectVisible,
         clearVisible: this.clearVisible
       }, this.props.advancedOptionsProps);
+      var testIds = getTestIds(testId, getOptionGroupCheckBoxTestIds);
       return /*#__PURE__*/React.createElement("div", {
         className: emotion.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")));
     }
   }]);
@@ -2659,7 +2785,14 @@ function Select(props) {
       disabled = props.disabled,
       isSelected = props.isSelected,
       placement = props.placement,
-      modifiers = props.modifiers;
+      modifiers = props.modifiers,
+      testId = props.testId;
+  var singleSelectTestIds = getTestIds(testId, function (id) {
+    return getSelectInputTestIds(id, false);
+  });
+  var multiSelectTestIds = getTestIds(testId, function (id) {
+    return getSelectInputTestIds(id, true);
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: emotion.cx(selectWrapper, className, _defineProperty({}, relativePosition, !!fullWidthDropdown))
   }, /*#__PURE__*/React.createElement(DropDown, {
@@ -2678,7 +2811,8 @@ function Select(props) {
         onClick: disabled ? undefined : function () {
           toggleDropdown();
           onDropdownToggle(isOpen);
-        }
+        },
+        "data-testid": singleSelectTestIds.inputId
       }, /*#__PURE__*/React.createElement(Input, Object.assign({
         className: selectInputWrapper,
         inputClassName: selectInput,
@@ -2724,7 +2858,9 @@ function Select(props) {
           onDropdownToggle(isOpen);
           toggle();
         }
-      }, commonProps), children);
+      }, commonProps, {
+        testId: multiSelectTestIds.optionGroupId
+      }), children);
     } else {
       return /*#__PURE__*/React.createElement(OptionGroupRadio, Object.assign({
         selected: props.selected,
@@ -2733,7 +2869,9 @@ function Select(props) {
           onDropdownToggle(isOpen);
           toggle();
         }
-      }, commonProps), children);
+      }, commonProps, {
+        testId: singleSelectTestIds.optionGroupId
+      }), children);
     }
   }));
 }
@@ -2788,7 +2926,9 @@ var PhoneNumberInput = /*#__PURE__*/function (_React$Component) {
           selectProps = _this$props.selectProps,
           inputProps = _this$props.inputProps,
           required = _this$props.required,
-          placeholder = _this$props.placeholder;
+          placeholder = _this$props.placeholder,
+          testId = _this$props.testId;
+      var testIds = getTestIds(testId, getPhoneNumberInputTestIds);
       return /*#__PURE__*/React.createElement("div", {
         className: emotion.cx(wrapper, className)
       }, /*#__PURE__*/React.createElement("label", {
@@ -2803,12 +2943,15 @@ var PhoneNumberInput = /*#__PURE__*/function (_React$Component) {
         value: countryCode + "",
         selected: countryCode
       }, selectProps, {
-        className: emotion.cx(selectStyle, selectProps && selectProps.className)
+        className: emotion.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;
@@ -2839,8 +2982,8 @@ var arrowStyle = /*#__PURE__*/emotion.css({
   }
 }, ";label:arrowStyle;" + ( "" ));
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
@@ -2906,7 +3049,7 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
               style = _ref2.style,
               placement = _ref2.placement,
               arrowProps = _ref2.arrowProps;
-          var wrapperStyle = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, style), transitionStyles), {}, {
+          var wrapperStyle = _objectSpread$j(_objectSpread$j(_objectSpread$j({}, style), transitionStyles), {}, {
             backgroundColor: popperBackgroundColor,
             transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
@@ -2922,7 +3065,7 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
           }), /*#__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
@@ -2938,8 +3081,8 @@ PebblePopper.defaultProps = {
   closeOnOutsideClick: true
 };
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var modalPadding = 30;
 var modalContainer$1 = /*#__PURE__*/emotion.css({
   background: "white",
@@ -2953,7 +3096,7 @@ var flexCenter = /*#__PURE__*/emotion.css( {
   name: "7sl85e-flexCenter",
   styles: "display:flex;align-items:center;justify-content:center;height:100%;;label:flexCenter;"
 } );
-var buttonsContainer = /*#__PURE__*/emotion.css(_objectSpread$j(_objectSpread$j({}, flexSpaceBetween), {}, {
+var buttonsContainer = /*#__PURE__*/emotion.css(_objectSpread$k(_objectSpread$k({}, flexSpaceBetween), {}, {
   marginTop: "40px"
 }), ";label:buttonsContainer;" + ( "" ));
 var iconCloseClassName = /*#__PURE__*/emotion.css({
@@ -2979,7 +3122,14 @@ var PopUp = function PopUp(props) {
       rejectButtonText = _props$rejectButtonTe === void 0 ? "No" : _props$rejectButtonTe,
       children = props.children,
       approveButtonProps = props.approveButtonProps,
-      rejectButtonProps = props.rejectButtonProps;
+      rejectButtonProps = props.rejectButtonProps,
+      testId = props.testId;
+  var _getTestIds = getTestIds(testId, function (id) {
+    return getPopUpTestIds(id);
+  }),
+      closeButtonId = _getTestIds.closeButtonId,
+      approveButtonId = _getTestIds.approveButtonId,
+      rejectButtonId = _getTestIds.rejectButtonId;
   return /*#__PURE__*/React.createElement(Modal, {
     visible: visible,
     modalClassName: flexCenter
@@ -2987,27 +3137,32 @@ var PopUp = function PopUp(props) {
     className: modalContainer$1
   }, onClose && /*#__PURE__*/React.createElement("i", {
     className: emotion.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__*/emotion.css({
   borderBottom: "2px solid ".concat(pebbleShared.colors.violet.base),
   color: pebbleShared.colors.violet.base
 }, ";label:selectedTabStyle;" + ( "" ));
-var tabStyle = /*#__PURE__*/emotion.css(_objectSpread$k({
+var tabStyle = /*#__PURE__*/emotion.css(_objectSpread$l({
   padding: "10px 20px 20px",
   cursor: "pointer"
 }, typography.s.bold), ";label:tabStyle;" + ( "" ));
@@ -3048,7 +3203,7 @@ var Tabs = /*#__PURE__*/function (_React$PureComponent) {
         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: emotion.cx(_className, isSelected && selectedTabStyle, isSelected && _this2.props.selectedTabClassName),
           onClick: function onClick() {
             _this2.setState({
@@ -3254,28 +3409,33 @@ var RadioGroup = /*#__PURE__*/function (_React$PureComponent) {
           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 _getTestIds = getTestIds(testId, getRadioGroupTestIds),
+          optionId = _getTestIds.optionId;
+      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: optionId ? getOptionTestId(optionId, i) : undefined
         });
       });
       return /*#__PURE__*/React.createElement("div", {
         role: "radiogroup",
         "aria-label": name,
-        className: className
+        className: className,
+        "data-testid": testId
       }, _children);
     }
   }]);
   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__*/emotion.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__*/emotion.css(_objectSpread$m(_objectSpread$m({}, flexRow), {}, {
   cursor: "pointer"
 }), ";label:wrapStyle;" + ( "" ));
 var disabledStyle = /*#__PURE__*/emotion.css( {
@@ -3377,8 +3537,8 @@ var Rating = /*#__PURE__*/function (_React$PureComponent) {
   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__*/emotion.css({
   color: pebbleShared.colors.gray.dark
 }, ";label:inputReadOnlyStyle;" + ( "" ));
@@ -3387,12 +3547,12 @@ var inputDisabledStyle$1 = /*#__PURE__*/emotion.css({
   pointerEvents: "none",
   color: pebbleShared.colors.gray.base
 }, ";label:inputDisabledStyle;" + ( "" ));
-var messageStyle$1 = /*#__PURE__*/emotion.css(_objectSpread$m(_objectSpread$m({}, typography.s.regular), {}, {
+var messageStyle$1 = /*#__PURE__*/emotion.css(_objectSpread$n(_objectSpread$n({}, typography.s.regular), {}, {
   marginTop: 10,
   lineHeight: "10px",
   textAlign: "left"
 }), ";label:messageStyle;" + ( "" ));
-var infoTextStyle = /*#__PURE__*/emotion.css(_objectSpread$m(_objectSpread$m({}, typography.s.light), {}, {
+var infoTextStyle = /*#__PURE__*/emotion.css(_objectSpread$n(_objectSpread$n({}, typography.s.light), {}, {
   marginRight: "15px",
   lineHeight: "12px"
 }), ";label:infoTextStyle;" + ( "" ));
@@ -3409,7 +3569,7 @@ var placeholderStyle = /*#__PURE__*/emotion.css({
     transform: "translate(0, -10px)"
   }
 }, ";label:placeholderStyle;" + ( "" ));
-var inputStyle$2 = /*#__PURE__*/emotion.css(_objectSpread$m(_objectSpread$m({
+var inputStyle$2 = /*#__PURE__*/emotion.css(_objectSpread$n(_objectSpread$n({
   border: 0,
   outline: 0,
   borderRadius: "3px",
@@ -3490,7 +3650,8 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
           message = _this$props.message,
           readOnly = _this$props.readOnly,
           loading = _this$props.loading,
-          className = _this$props.className;
+          className = _this$props.className,
+          testId = _this$props.testId;
       var isFocused = this.state.isFocused;
       var _message = errorMessage || successMessage || message;
       var _inputProps = {
@@ -3514,7 +3675,9 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
         },
         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: {
@@ -3527,6 +3690,7 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
         scale: 0.4
       })), _message && /*#__PURE__*/React.createElement("div", {
         className: messageStyle$1,
+        "data-testid": testId ? getMessageTestId(testId) : undefined,
         style: {
           color: getColor$1(errorMessage, successMessage)
         }
@@ -3689,10 +3853,10 @@ SideBar.defaultProps = {
   closeOnOutsideClick: true
 };
 
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var rheostatOverrides = "\n.rheostat {\n  overflow: visible;\n}\n\n.rheostat-background {\n  background-color: ".concat(pebbleShared.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(pebbleShared.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(pebbleShared.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(pebbleShared.colors.violet.light, ";\n}\n\n.__pebble__slider__disabled .rheostat-handle {\n  background-color: ").concat(pebbleShared.colors.violet.lighter, ";\n  cursor: inherit;\n}\n\n.rheostat-horizontal {\n  height: 4px;\n}\n");
-var sliderHeader = /*#__PURE__*/emotion.css(_objectSpread$n(_objectSpread$n({}, flexSpaceBetween), {}, {
+var sliderHeader = /*#__PURE__*/emotion.css(_objectSpread$o(_objectSpread$o({}, flexSpaceBetween), {}, {
   marginBottom: 25,
   alignItems: "center",
   ".__pebble__slider__large &": {
@@ -3753,8 +3917,8 @@ var Slider = function Slider(_ref) {
   }, rest)));
 };
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$p(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var headStyle = /*#__PURE__*/emotion.css( {
   name: "1ehjdcc-headStyle",
   styles: "display:flex;flex-direction:row;position:relative;;label:headStyle;"
@@ -3763,7 +3927,7 @@ var headSection = /*#__PURE__*/emotion.css( {
   name: "1hilual-headSection",
   styles: "flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;> div{font-size:14px;};label:headSection;"
 } );
-var headingStyle = /*#__PURE__*/emotion.css(_objectSpread$o({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
+var headingStyle = /*#__PURE__*/emotion.css(_objectSpread$p({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
 var dotStyle$1 = /*#__PURE__*/emotion.css({
   height: 20,
   width: 20,
@@ -3792,8 +3956,8 @@ var stepperLineStyle = /*#__PURE__*/emotion.css({
   backgroundColor: pebbleShared.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() {}
@@ -3952,11 +4116,11 @@ var Stepper = /*#__PURE__*/function (_React$PureComponent) {
             name: "fxyzre-Stepper",
             styles: "display:none;;label:Stepper;"
           } ), i !== _this2.state.active))
-        }, renderContentElement(_objectSpread$p({
+        }, renderContentElement(_objectSpread$q({
           item: datum,
           isSelected: i === _this2.state.active
         }, args)));
-      }), renderFooterElement(_objectSpread$p({
+      }), renderFooterElement(_objectSpread$q({
         activeIndex: this.state.active
       }, args), this.props)));
     }
@@ -3997,9 +4161,9 @@ Stepper.defaultProps = {
   }
 };
 
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$q(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var labelTextStyle = /*#__PURE__*/emotion.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__*/emotion.css(_objectSpread$r(_objectSpread$r({}, typography.s.bold), {}, {
   color: pebbleShared.colors.gray.dark,
   marginRight: "10px"
 }), ";label:labelTextStyle;" + ( "" ));
@@ -4095,9 +4259,9 @@ var Switch = /*#__PURE__*/function (_React$PureComponent) {
   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__*/emotion.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__*/emotion.css(_objectSpread$s(_objectSpread$s(_objectSpread$s({}, typography.s.bold), flexSpaceBetween), {}, {
   borderRadius: constants.borderRadius,
   padding: "0 10px",
   height: 28,
@@ -4144,19 +4308,21 @@ var Tag = function Tag(_ref) {
   }, /*#__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 ? pebbleShared.colors.gray.darker : _ref$color,
       children = _ref.children,
-      className = _ref.className;
-  var _className = /*#__PURE__*/emotion.css(_objectSpread$s(_objectSpread$s({}, typography), {}, {
+      className = _ref.className,
+      testId = _ref.testId;
+  var _className = /*#__PURE__*/emotion.css(_objectSpread$t(_objectSpread$t({}, typography), {}, {
     color: color
   }),  "" );
   return /*#__PURE__*/React__default.createElement("span", {
-    className: emotion.cx(_className, className)
+    className: emotion.cx(_className, className),
+    "data-testid": testId
   }, children);
 };
 
@@ -4245,7 +4411,7 @@ var TimePicker = function TimePicker(props) {
           toggleDropdown();
         },
         className: buttonStyle,
-        "data-test-id": "hour-label"
+        "data-testid": "hour-label"
       }, /*#__PURE__*/React.createElement("span", {
         className: /*#__PURE__*/emotion.css( {
           name: "1czd1rs-TimePicker",
@@ -4292,7 +4458,7 @@ var TimePicker = function TimePicker(props) {
           toggleDropdown();
         },
         className: buttonStyle,
-        "data-test-id": "minute-label"
+        "data-testid": "minute-label"
       }, /*#__PURE__*/React.createElement("span", {
         className: /*#__PURE__*/emotion.css( {
           name: "1czd1rs-TimePicker",
@@ -4329,9 +4495,9 @@ var TimePicker = function TimePicker(props) {
   }));
 };
 
-function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$t(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var textStyle = /*#__PURE__*/emotion.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__*/emotion.css(_objectSpread$u(_objectSpread$u({}, typography.s.regular), {}, {
   color: pebbleShared.colors.white.base,
   display: "block",
   padding: "10px 16px"
@@ -4416,17 +4582,17 @@ var optionsWrapper$1 = /*#__PURE__*/emotion.css({
 
 function _createSuper$q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$q(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$u(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$v(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function defaultSearchBox(_ref, props) {
   var registerChange = _ref.registerChange,
       onFocus = _ref.onFocus,
       value = _ref.value;
-  var _inputProps = props.inputProps ? _objectSpread$u({}, props.inputProps.inputProps) : {};
+  var _inputProps = props.inputProps ? _objectSpread$v({}, props.inputProps.inputProps) : {};
   return /*#__PURE__*/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;
@@ -4440,7 +4606,8 @@ function defaultSearchBox(_ref, props) {
     errorMessage: props.errorMessage,
     loading: props.loading,
     required: props.required,
-    disabled: props.disabled
+    disabled: props.disabled,
+    testId: props.testId
   }));
 }
 var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
@@ -4486,7 +4653,9 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
           _this$props$searchBox = _this$props.searchBox,
           searchBox = _this$props$searchBox === void 0 ? defaultSearchBox : _this$props$searchBox,
           dropdownClassName = _this$props.dropdownClassName,
-          children = _this$props.children;
+          children = _this$props.children,
+          testId = _this$props.testId;
+      var testIds = getTestIds(testId, getTypeaheadTestIds);
       var _this$state = this.state,
           showSuggestions = _this$state.showSuggestions,
           value = _this$state.value;
@@ -4502,7 +4671,9 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
         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) {
@@ -4510,7 +4681,8 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
           style: transitionStyles,
           className: emotion.cx(optionsWrapper$1, dropdownClassName)
         }, /*#__PURE__*/React.createElement(OptionGroupRadio, {
-          onChange: _this2.onSelect
+          onChange: _this2.onSelect,
+          testId: testIds.optionGroupId
         }, children));
       }));
     }
@@ -4578,7 +4750,19 @@ var index = /*#__PURE__*/Object.freeze({
     capitalize: capitalize,
     getShortenedNumber: getShortenedNumber,
     initGoogleAnalytics: initGoogleAnalytics,
-    isDesktop: isDesktop
+    isDesktop: isDesktop,
+    getTestIds: getTestIds,
+    getOptionTestId: getOptionTestId,
+    getRadioGroupTestIds: getRadioGroupTestIds,
+    getOptionGroupTestIds: getOptionGroupTestIds,
+    getOptionGroupRadioTestIds: getOptionGroupRadioTestIds,
+    getOptionGroupCheckBoxTestIds: getOptionGroupCheckBoxTestIds,
+    getPhoneNumberInputTestIds: getPhoneNumberInputTestIds,
+    getMessageTestId: getMessageTestId,
+    getSelectInputTestIds: getSelectInputTestIds,
+    getTypeaheadTestIds: getTypeaheadTestIds,
+    getCalendarTestIds: getCalendarTestIds,
+    getPopUpTestIds: getPopUpTestIds
 });
 
 Object.defineProperty(exports, 'colors', {
@@ -4631,6 +4815,18 @@ exports.TypeAhead = TypeAhead;
 exports.UserAgentInfoContext = UserAgentInfoContext;
 exports.UserAgentInfoProvider = UserAgentInfoProvider;
 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;