pebble-web 3.0.0-alpha.0 → 3.0.0-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", {
@@ -1057,8 +1149,7 @@ var animationConfig = {
 };
 
 var MountTransition = function MountTransition(props) {
-  return /*#__PURE__*/React.createElement(reactSpring.Transition
-  , Object.assign({
+  return /*#__PURE__*/React.createElement(reactSpring.Transition, Object.assign({
     items: props.visible
   }, animationConfig, props), function (styles, show, _ref, index) {
     var phase = _ref.phase;
@@ -1067,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) {
@@ -1103,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),
@@ -1130,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(reactSpring.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, {
@@ -1147,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: transitionStyles.transform.to(function (t) {
               return "".concat(style.transform || "", " ").concat(t || "");
@@ -1186,8 +1279,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({
@@ -1207,7 +1300,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",
@@ -1259,7 +1352,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"
@@ -1269,8 +1362,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;"
@@ -1286,7 +1379,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",
@@ -1355,7 +1448,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);
@@ -1388,9 +1482,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
@@ -1407,6 +1505,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)
         }
@@ -1442,7 +1541,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"
@@ -1451,7 +1551,8 @@ var NativeDateInput = /*#__PURE__*/function (_React$PureComponent) {
         placeholder: placeholder,
         fixLabelAtTop: true
       }, inputProps, {
-        disabled: disabled
+        disabled: disabled,
+        testId: testId
       }));
     }
   }]);
@@ -1496,8 +1597,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() {};
@@ -1557,7 +1658,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, {
@@ -1582,13 +1684,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
             }));
           });
         },
@@ -1681,31 +1784,58 @@ var Logo = function Logo(_ref) {
   return /*#__PURE__*/React.createElement("svg", {
     version: "1.1",
     id: "Layer_1",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
+    xmlns: "http://www.w3.org/2000/svg",
     height: height,
-    viewBox: "0 0 655.35 175.08",
+    viewBox: "0 0 896 240",
     xmlSpace: "preserve",
     style: {
       fill: color
     }
   }, /*#__PURE__*/React.createElement("path", {
-    className: "st0",
-    d: "M168.92 65.96l-66.1-64.85v100.61h17.39V40.78l66.11 64.56V4.73h-17.4v61.23zm446.77-18.51L653.4 4.73h-20.6l-41.04 46.48V4.73h-17.4v96.99h17.4V73.34L604 59.84l30.19 41.88h20.33l-38.83-54.27zM422.66 2.92c-27.78 0-50.31 22.53-50.31 50.31s22.52 50.3 50.31 50.3c27.78 0 50.3-22.52 50.3-50.3s-22.52-50.31-50.3-50.31zm0 84.84c-19.05 0-34.54-15.49-34.54-34.53s15.49-34.54 34.54-34.54c19.04 0 34.54 15.49 34.54 34.54 0 19.04-15.5 34.53-34.54 34.53zM0 101.72h18.38L27 82.93h41.75l8.63 18.79h18.51L48.02 0 0 101.72zM33.55 67.9l14.32-31.58L62.21 67.9H33.55zm159.61 33.82h18.37l8.62-18.79h41.75l8.62 18.79h18.51L241.16 0l-48 101.72zm33.53-33.82l14.33-31.58 14.33 31.58h-28.66zm138.43-32.42c0-8.76-3.07-16-9.19-21.84-6.12-5.99-13.5-8.91-22.26-8.91h-37.71v96.99h17.4V67.21h17.25l20.73 34.51h19.62l-23.51-38.68c10.57-4.46 17.67-14.89 17.67-27.56zm-33.25 16.15h-18.51V20.46h19.9c8.34 0 14.6 6.4 14.6 15.31 0 9.32-6.54 15.86-15.99 15.86zm197.61-32.94c9.22 0 17.9 3.59 24.42 10.12l11.15-11.15c-9.82-9.83-22.7-14.74-35.57-14.74-12.87 0-25.75 4.91-35.56 14.74-19.65 19.64-19.65 51.49 0 71.14 9.82 9.82 22.69 14.73 35.56 14.73 12.87 0 25.75-4.91 35.57-14.73L553.9 77.65c-6.52 6.52-15.2 10.11-24.42 10.11-9.23 0-17.89-3.59-24.42-10.11-13.46-13.46-13.46-35.37 0-48.84 6.53-6.52 15.2-10.12 24.42-10.12z"
-  }), /*#__PURE__*/React.createElement("rect", {
-    y: "123.84",
-    className: "st1",
-    width: "654.52",
-    height: "4.26",
-    id: "XMLID_9_"
+    d: "M724.793 25.5855C737.421 25.5855 749.287 30.5009 758.217 39.4306L773.482 24.1653C760.041 10.7247 742.412 3.9979 724.793 3.9979C707.167 3.9979 689.548 10.7247 676.104 24.1653C649.213 51.0595 649.213 94.6559 676.104 121.55C689.548 134.997 707.167 141.718 724.793 141.718C742.412 141.718 760.041 134.997 773.482 121.55L758.217 106.282C749.287 115.211 737.421 120.127 724.793 120.127C712.164 120.127 700.292 115.211 691.369 106.282C672.938 87.8567 672.938 57.862 691.369 39.4306C700.292 30.5009 712.164 25.5855 724.793 25.5855ZM454.269 70.6648H428.936V27.9989H456.173C467.598 27.9989 476.175 36.7608 476.175 48.9553C476.175 61.7153 467.223 70.6648 454.269 70.6648ZM499.795 48.574C499.795 36.5735 495.603 26.6639 487.219 18.668C478.842 10.4748 468.748 6.47692 456.741 6.47692H405.123V139.238H428.936V91.9992H452.549L480.936 139.238H507.798L475.6 86.2818C490.076 80.1928 499.795 65.9106 499.795 48.574ZM310.299 92.9528L329.921 49.7214L349.542 92.9528H310.299ZM264.398 139.238H289.54L301.346 113.525H358.495L370.302 139.238H395.634L330.108 -0.000120201L264.398 139.238ZM578.561 120.127C552.499 120.127 531.292 98.9234 531.292 72.8609C531.292 46.7919 552.499 25.5855 578.561 25.5855C604.63 25.5855 625.836 46.7919 625.836 72.8609C625.836 98.9234 604.63 120.127 578.561 120.127ZM578.561 3.9979C540.528 3.9979 509.705 34.8243 509.705 72.8609C509.705 110.888 540.528 141.718 578.561 141.718C616.594 141.718 647.424 110.888 647.424 72.8609C647.424 34.8243 616.594 3.9979 578.561 3.9979ZM842.789 64.9504L894.414 6.47692H866.221L810.029 70.096V6.47692H786.216V139.238H810.029V100.383L826.797 81.909L868.128 139.238H895.933L842.789 64.9504ZM231.211 90.2831L140.73 1.5221V139.238H164.544V55.8104L255.018 144.19V6.47692H231.211"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M0 175.342H895.934V169.516H0V175.342Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M123.257 205.481H131.5L140.374 229.384L149.244 205.481H157.289L143.566 239.661H136.981"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M185.313 225.215L180.802 214.207L176.295 225.215H185.313ZM177.459 205.241H184.34L198.889 239.418H191.08L187.98 231.807H173.628L170.525 239.418H162.91"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M210.792 205.481H218.255V232.632H235.178V239.421H210.792"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M261.157 239.951C256.6 239.951 253.013 238.691 250.396 236.17C247.779 233.648 246.467 229.887 246.467 224.876V205.478H253.933V224.679C253.933 227.46 254.578 229.555 255.873 230.959C257.165 232.363 258.957 233.066 261.252 233.066C263.55 233.066 265.342 232.386 266.634 231.034C267.923 229.67 268.577 227.638 268.577 224.922V205.478H276.041V224.633C276.041 227.217 275.689 229.463 274.998 231.37C274.301 233.28 273.308 234.871 272.016 236.144C270.724 237.422 269.156 238.373 267.311 239.007C265.47 239.635 263.419 239.951 261.157 239.951Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M291.032 205.481H316.581V212.126H298.4V219.011H314.401V225.649H298.4V232.78H316.825V239.421H291.032"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M342.69 239.905C340.106 239.905 337.567 239.458 335.082 238.57C332.59 237.682 330.328 236.318 328.292 234.477L332.705 229.193C334.253 230.449 335.848 231.455 337.482 232.195C339.109 232.941 340.898 233.309 342.835 233.309C344.386 233.309 345.59 233.03 346.445 232.464C347.303 231.896 347.737 231.113 347.737 230.11V230.015C347.737 229.528 347.641 229.101 347.467 228.729C347.286 228.358 346.948 228.009 346.445 227.687C345.945 227.365 345.251 227.039 344.36 226.717C343.476 226.395 342.322 226.057 340.898 225.698C339.182 225.281 337.633 224.81 336.242 224.294C334.855 223.778 333.671 223.14 332.705 222.377C331.728 221.618 330.982 220.674 330.449 219.537C329.917 218.412 329.647 217.005 329.647 215.325V215.226C329.647 213.678 329.936 212.274 330.518 211.035C331.094 209.785 331.903 208.717 332.945 207.809C333.99 206.905 335.24 206.208 336.69 205.725C338.136 205.245 339.734 204.995 341.48 204.995C343.965 204.995 346.257 205.366 348.338 206.109C350.423 206.859 352.34 207.924 354.079 209.312L350.202 214.94C348.683 213.901 347.201 213.086 345.744 212.488C344.291 211.889 342.834 211.59 341.381 211.59C339.928 211.59 338.837 211.88 338.11 212.438C337.38 213.007 337.018 213.708 337.018 214.549V214.648C337.018 215.197 337.12 215.67 337.334 216.075C337.544 216.482 337.923 216.844 338.472 217.166C339.024 217.488 339.774 217.797 340.727 218.087C341.677 218.379 342.884 218.721 344.34 219.106C346.05 219.556 347.582 220.066 348.92 220.632C350.262 221.2 351.393 221.874 352.313 222.67C353.234 223.462 353.928 224.386 354.398 225.455C354.865 226.523 355.105 227.802 355.105 229.285V229.387C355.105 231.067 354.799 232.553 354.187 233.868C353.576 235.177 352.724 236.275 351.636 237.169C350.541 238.057 349.239 238.731 347.727 239.201C346.208 239.671 344.534 239.905 342.69 239.905Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M406.346 233.119C407.835 233.119 409.206 232.842 410.469 232.29C411.728 231.744 412.8 230.988 413.691 230.012C414.578 229.042 415.272 227.92 415.775 226.642C416.275 225.369 416.528 224.001 416.528 222.545V222.45C416.528 220.993 416.275 219.625 415.775 218.33C415.272 217.038 414.562 215.904 413.641 214.94C412.718 213.967 411.629 213.198 410.37 212.632C409.108 212.07 407.733 211.787 406.247 211.787C404.728 211.787 403.347 212.057 402.104 212.609C400.858 213.162 399.793 213.914 398.905 214.888C398.014 215.858 397.321 216.979 396.821 218.258C396.315 219.533 396.065 220.901 396.065 222.358V222.45C396.065 223.906 396.315 225.28 396.821 226.572C397.321 227.865 398.031 228.996 398.951 229.966C399.872 230.932 400.957 231.702 402.203 232.267C403.446 232.836 404.827 233.119 406.346 233.119ZM406.247 240C403.63 240 401.22 239.54 399.027 238.619C396.828 237.698 394.927 236.452 393.329 234.884C391.728 233.316 390.485 231.475 389.594 229.361C388.707 227.24 388.266 224.975 388.266 222.545V222.45C388.266 220.026 388.713 217.755 389.617 215.641C390.522 213.52 391.778 211.659 393.379 210.061C394.98 208.46 396.883 207.204 399.096 206.28C401.309 205.36 403.729 204.903 406.346 204.903C408.963 204.903 411.373 205.36 413.569 206.28C415.769 207.204 417.666 208.447 419.267 210.015C420.865 211.583 422.107 213.421 422.998 215.539C423.886 217.659 424.333 219.931 424.333 222.358V222.45C424.333 224.876 423.88 227.141 422.972 229.262C422.068 231.379 420.819 233.24 419.217 234.838C417.62 236.436 415.709 237.698 413.497 238.619C411.281 239.54 408.867 240 406.247 240Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M433.024 205.481H441.263L450.137 229.384L459.011 205.481H467.056L453.333 239.661H446.744"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M478.931 205.481H504.484V212.126H486.299V219.011H502.298V225.649H486.299V232.78H504.721V239.421H478.931"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M533.882 221.966C535.724 221.966 537.137 221.536 538.127 220.665C539.11 219.797 539.603 218.633 539.603 217.189V217.094C539.603 215.486 539.087 214.283 538.051 213.477C537.016 212.675 535.579 212.271 533.738 212.271H526.32V221.966H533.882ZM518.851 205.481H534.366C538.666 205.481 541.964 206.632 544.255 208.924C546.192 210.867 547.169 213.454 547.169 216.683V216.778C547.169 219.527 546.494 221.769 545.153 223.489C543.812 225.225 542.059 226.494 539.893 227.299L548.181 239.421H539.462L532.186 228.555H526.32V239.421H518.851"
   }), /*#__PURE__*/React.createElement("path", {
-    className: "st0",
-    d: "M90.05 150.11h6.02l6.48 17.46 6.48-17.46h5.88l-10.02 24.97h-4.81l-10.03-24.97zm39.59-.17h5.03l10.63 24.97h-5.7l-2.28-5.56h-10.47l-2.27 5.56h-5.56l10.62-24.97zm5.75 14.59l-3.3-8.04-3.29 8.04h6.59zM154 150.11h5.46v19.83h12.36v4.96H154v-24.79zm36.79 25.18c-3.33 0-5.95-.92-7.86-2.76-1.91-1.83-2.87-4.59-2.87-8.25v-14.16h5.46v14.02c0 2.03.46 3.56 1.41 4.58.94 1.03 2.26 1.54 3.93 1.54 1.68 0 2.98-.49 3.93-1.49.95-.99 1.42-2.48 1.42-4.46v-14.2h5.46v13.99c0 1.88-.26 3.53-.77 4.92-.51 1.39-1.23 2.55-2.17 3.49-.95.93-2.08 1.63-3.44 2.08-1.35.47-2.85.7-4.5.7zm21.83-25.18h18.66v4.85H218v5.03h11.7v4.85H218v5.2h13.46v4.86h-18.84v-24.79zm37.74 25.15c-1.89 0-3.75-.33-5.57-.98-1.82-.65-3.47-1.64-4.94-2.99l3.21-3.86c1.14.92 2.3 1.65 3.49 2.19 1.2.54 2.51.82 3.91.82 1.13 0 2.01-.21 2.64-.62.63-.41.94-.99.94-1.72v-.07c0-.36-.07-.67-.19-.94-.14-.27-.39-.53-.75-.77-.36-.23-.87-.47-1.52-.71s-1.49-.48-2.53-.74c-1.26-.31-2.38-.64-3.4-1.03-1.01-.38-1.88-.84-2.59-1.4a5.85 5.85 0 0 1-1.65-2.07c-.38-.82-.58-1.86-.58-3.08v-.07c0-1.13.21-2.16.63-3.07.42-.91 1.01-1.7 1.78-2.35.76-.66 1.67-1.17 2.73-1.52 1.06-.35 2.23-.54 3.5-.54 1.83 0 3.5.28 5.02.82 1.52.54 2.92 1.32 4.19 2.34l-2.83 4.11c-1.1-.76-2.2-1.35-3.26-1.79-1.06-.44-2.12-.66-3.19-.66-1.06 0-1.85.21-2.38.62-.53.41-.8.93-.8 1.54v.07c0 .4.08.75.23 1.04.15.29.43.56.84.79.39.24.94.46 1.64.67.7.21 1.57.47 2.63.75 1.26.33 2.37.7 3.35 1.11.98.41 1.81.91 2.48 1.49.68.58 1.18 1.25 1.52 2.04.34.78.52 1.71.52 2.8v.07c0 1.22-.23 2.32-.67 3.27a6.71 6.71 0 0 1-1.86 2.41c-.81.65-1.76 1.14-2.87 1.48-1.11.37-2.33.55-3.67.55zm46.42.07c-1.92 0-3.68-.34-5.28-1.01-1.61-.67-3-1.58-4.16-2.72-1.17-1.15-2.08-2.5-2.73-4.04-.65-1.55-.98-3.2-.98-4.98v-.07c0-1.77.32-3.42.99-4.97a12.64 12.64 0 0 1 2.74-4.07c1.16-1.17 2.57-2.09 4.18-2.77 1.62-.67 3.39-1.01 5.3-1.01 1.91 0 3.67.34 5.28 1.01 1.61.68 2.99 1.59 4.16 2.73 1.16 1.14 2.07 2.49 2.73 4.04.64 1.54.97 3.21.97 4.98v.07c0 1.77-.33 3.43-.99 4.98-.67 1.55-1.57 2.9-2.74 4.07-1.17 1.17-2.56 2.08-4.18 2.76-1.61.66-3.37 1-5.29 1zm.08-5.03c1.08 0 2.09-.2 3.01-.6.92-.4 1.71-.95 2.35-1.66.65-.71 1.16-1.53 1.53-2.47.36-.93.54-1.93.54-2.99v-.07c0-1.06-.18-2.06-.54-3.01-.36-.94-.89-1.77-1.56-2.47a7.49 7.49 0 0 0-2.39-1.68c-.91-.41-1.93-.62-3.01-.62-1.11 0-2.12.21-3.03.6-.91.4-1.69.96-2.34 1.66a7.76 7.76 0 0 0-1.52 2.46c-.37.94-.55 1.94-.55 3v.07c0 1.06.18 2.07.55 3.02.36.94.88 1.76 1.55 2.47.67.71 1.47 1.27 2.38 1.68.91.4 1.91.61 3.03.61zm19.48-20.19h6.02l6.48 17.46 6.48-17.46h5.88l-10.02 24.97h-4.81l-10.03-24.97zm33.54 0h18.66v4.85h-13.28v5.03h11.68v4.85h-11.68v5.2h13.46v4.86h-18.84v-24.79zm29.16 0h11.34c3.13 0 5.54.83 7.22 2.51 1.42 1.42 2.12 3.31 2.12 5.67v.07c0 2.01-.49 3.65-1.47 4.91-.98 1.26-2.26 2.19-3.84 2.77l6.05 8.86h-6.37l-5.31-7.94h-4.3v7.94h-5.45v-24.79zm10.98 12.04c1.35 0 2.39-.32 3.1-.95.72-.64 1.08-1.48 1.08-2.54v-.07c0-1.17-.37-2.06-1.13-2.64-.75-.59-1.8-.88-3.15-.88h-5.42v7.08h5.52zm33.05-12.04h6.02l6.48 17.46 6.48-17.46h5.87l-10.02 24.97h-4.81l-10.02-24.97zm39.59-.17h5.02l10.63 24.97h-5.7l-2.26-5.56h-10.48l-2.27 5.56h-5.56l10.62-24.97zm5.73 14.59l-3.29-8.04-3.29 8.04h6.58zm18.62-14.42h5.46v19.83h12.36v4.96h-17.82v-24.79zm36.8 25.18c-3.34 0-5.95-.92-7.87-2.76-1.91-1.83-2.87-4.59-2.87-8.25v-14.16h5.46v14.02c0 2.03.47 3.56 1.42 4.58.95 1.03 2.26 1.54 3.93 1.54 1.67 0 2.99-.49 3.94-1.49.94-.99 1.41-2.48 1.41-4.46v-14.2h5.46v13.99c0 1.88-.26 3.53-.76 4.92-.51 1.39-1.24 2.55-2.18 3.49-.95.93-2.09 1.63-3.44 2.08-1.36.47-2.85.7-4.5.7zm21.82-25.18h18.67v4.85h-13.28v5.03h11.69v4.85h-11.69v5.2h13.46v4.86h-18.85v-24.79z"
+    d: "M579.113 205.481H587.356L596.226 229.384L605.103 205.481H613.149L599.425 239.661H592.833"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M641.169 225.215L636.661 214.207L632.154 225.215H641.169ZM633.314 205.241H640.199L654.744 239.418H646.939L643.835 231.807H629.487L626.384 239.418H618.769"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M666.645 205.481H674.111V232.632H691.033V239.421H666.645"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M717.016 239.951C712.459 239.951 708.872 238.691 706.248 236.17C703.634 233.648 702.326 229.887 702.326 224.876V205.478H709.789V224.679C709.789 227.46 710.437 229.555 711.732 230.959C713.018 232.363 714.819 233.066 717.111 233.066C719.406 233.066 721.201 232.386 722.493 231.034C723.782 229.67 724.433 227.638 724.433 224.922V205.478H731.893V224.633C731.893 227.217 731.548 229.463 730.854 231.37C730.16 233.28 729.167 234.871 727.872 236.144C726.58 237.422 725.012 238.373 723.17 239.007C721.329 239.635 719.278 239.951 717.016 239.951Z"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M746.888 205.481H772.437V212.126H754.256V219.011H770.254V225.649H754.256V232.78H772.681V239.421H746.888"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M46.0351 92.9268L65.7915 49.7053L85.5545 92.9268H46.0351ZM0.0288086 139.239H25.3449L37.0824 113.614H94.1982L105.926 139.239H131.242L65.7915 0.000163794"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: "#A84D98",
+    d: "M77.562 25.0368L65.7916 0.000163794L0.0322266 139.239H25.3549L77.562 25.0368Z"
   }));
 };
 
-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), {}, {
@@ -1719,8 +1849,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();
@@ -1859,19 +1989,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",
@@ -1882,26 +2018,26 @@ 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),
         config: animationConfig.config
       }, function (styles, show) {
         return show && /*#__PURE__*/React.createElement(reactSpring.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);
       });
     }
   }], [{
@@ -1926,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,
@@ -1944,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",
@@ -1954,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);
@@ -2033,9 +2171,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",
@@ -2058,7 +2196,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({
@@ -2126,9 +2264,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"
@@ -2156,7 +2294,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,
@@ -2208,7 +2346,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",
@@ -2228,7 +2367,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", {
@@ -2289,8 +2430,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) {
@@ -2384,10 +2525,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);
@@ -2400,7 +2543,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));
@@ -2410,10 +2554,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: {
@@ -2421,37 +2566,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) {
@@ -2508,25 +2655,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")));
     }
   }]);
@@ -2634,7 +2786,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, {
@@ -2653,7 +2812,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,
@@ -2699,7 +2859,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,
@@ -2708,7 +2870,9 @@ function Select(props) {
           onDropdownToggle(isOpen);
           toggle();
         }
-      }, commonProps), children);
+      }, commonProps, {
+        testId: singleSelectTestIds.optionGroupId
+      }), children);
     }
   }));
 }
@@ -2763,7 +2927,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", {
@@ -2778,12 +2944,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;
@@ -2814,8 +2983,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) {
@@ -2881,7 +3050,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: transitionStyles.transform.to(function (t) {
               return "".concat(style.transform || "", " ").concat(t || "");
@@ -2899,7 +3068,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
@@ -2915,8 +3084,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",
@@ -2930,7 +3099,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({
@@ -2956,7 +3125,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
@@ -2964,27 +3140,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;" + ( "" ));
@@ -3025,7 +3206,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({
@@ -3231,28 +3412,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( {
@@ -3354,8 +3540,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;" + ( "" ));
@@ -3364,12 +3550,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;" + ( "" ));
@@ -3386,7 +3572,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",
@@ -3467,7 +3653,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 = {
@@ -3491,7 +3678,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: {
@@ -3504,6 +3693,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)
         }
@@ -3666,10 +3856,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 &": {
@@ -3730,8 +3920,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;"
@@ -3740,7 +3930,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,
@@ -3769,8 +3959,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() {}
@@ -3929,11 +4119,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)));
     }
@@ -3974,9 +4164,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;" + ( "" ));
@@ -4072,9 +4262,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,
@@ -4121,19 +4311,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);
 };
 
@@ -4222,7 +4414,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",
@@ -4269,7 +4461,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",
@@ -4306,9 +4498,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"
@@ -4393,17 +4585,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;
@@ -4417,7 +4609,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) {
@@ -4463,7 +4656,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;
@@ -4479,14 +4674,17 @@ 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
       }, function (transitionStyles) {
         return /*#__PURE__*/React.createElement(reactSpring.animated.div, {
           style: transitionStyles,
           className: emotion.cx(optionsWrapper$1, dropdownClassName)
         }, /*#__PURE__*/React.createElement(OptionGroupRadio, {
-          onChange: _this2.onSelect
+          onChange: _this2.onSelect,
+          testId: testIds.optionGroupId
         }, children));
       }));
     }
@@ -4554,7 +4752,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', {
@@ -4607,6 +4817,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;