pebble-web 2.25.1 → 2.25.2-alpha.0

package/dist/pebble-web.module.js

@@ -446,7 +446,8 @@ var Loader = function Loader(_ref) {
       color = _ref$color === void 0 ? colors.gray.darker : _ref$color,
       _ref$scale = _ref.scale,
       scale = _ref$scale === void 0 ? 1 : _ref$scale,
-      className = _ref.className;
+      className = _ref.className,
+      testId = _ref.testId;
   var style = {
     backgroundColor: color
   };
@@ -454,7 +455,8 @@ var Loader = function Loader(_ref) {
     className: cx(spinnerStyle, className),
     style: {
       transform: "scale(".concat(scale, ")")
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/createElement("div", {
     style: style
   }), /*#__PURE__*/createElement("div", {
@@ -479,7 +481,8 @@ var Button = function Button(_ref) {
       outline = _ref.outline,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "small" : _ref$size,
-      buttonProps = _ref.buttonProps;
+      buttonProps = _ref.buttonProps,
+      testId = _ref.testId;
   var disableAction = disabled || loading;
   var _outline = size === "x-small" || !!outline;
   var _className = cx(getButtonStyle(size, type, !!showShadow, !_outline), className);
@@ -489,7 +492,8 @@ var Button = function Button(_ref) {
     style: {
       width: width
     },
-    disabled: disabled
+    disabled: disabled,
+    "data-testid": testId
   }, buttonProps), loading ? /*#__PURE__*/createElement(Loader, {
     color: colors.white.base,
     scale: 0.4
@@ -837,7 +841,8 @@ function Control(props) {
       children = _props$children === void 0 ? ControlView : _props$children,
       type = props.type,
       className = props.className,
-      indeterminate = props.indeterminate;
+      indeterminate = props.indeterminate,
+      testId = props.testId;
   return /*#__PURE__*/createElement("div", {
     className: cx(controlStyle, className),
     role: type,
@@ -851,7 +856,8 @@ function Control(props) {
         value: value,
         checked: !checked
       }, e);
-    } : undefined
+    } : undefined,
+    "data-testid": testId
   }, children(props));
 }
 var ControlView = function ControlView(_ref) {
@@ -1096,7 +1102,8 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
           disabled = _this$props.disabled,
           labelClassName = _this$props.labelClassName,
           controlled = _this$props.controlled,
-          _onOutsideClick = _this$props.onOutsideClick;
+          _onOutsideClick = _this$props.onOutsideClick,
+          testId = _this$props.testId;
       var _isDropDownOpen = controlled ? !!this.props.isOpen : this.state.isOpen;
       return /*#__PURE__*/createElement(OutsideClick, {
         className: cx(wrapperStyle$1, className),
@@ -1123,7 +1130,8 @@ var DropDown = /*#__PURE__*/function (_React$PureComponent) {
           isOpen: _isDropDownOpen,
           onClick: _this2.toggleDropdown,
           disabled: disabled,
-          className: labelClassName
+          className: labelClassName,
+          testId: testId
         }, buttonLabel));
       }), /*#__PURE__*/createElement(MountTransition, {
         visible: _isDropDownOpen
@@ -1346,7 +1354,8 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
           onClick = _this$props.onClick,
           loading = _this$props.loading,
           leftElement = _this$props.leftElement,
-          rightElement = _this$props.rightElement;
+          rightElement = _this$props.rightElement,
+          testId = _this$props.testId;
       var isFocused = this.state.isFocused;
       var _message = errorMessage || successMessage || message;
       var _inputWrapperClassName = cx(inputWrapperStyle, inputWrapperClassName);
@@ -1379,9 +1388,13 @@ var Input = /*#__PURE__*/function (_React$PureComponent) {
         onClick: onClick
       }, /*#__PURE__*/createElement("div", {
         className: _inputWrapperClassName
-      }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps)) : /*#__PURE__*/createElement("input", Object.assign({
+      }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps, {
+        "data-testid": testId
+      })) : /*#__PURE__*/createElement("input", Object.assign({
         type: type
-      }, _inputProps, this.props.inputProps)), loading && /*#__PURE__*/createElement(Loader, {
+      }, _inputProps, this.props.inputProps, {
+        "data-testid": testId
+      })), loading && /*#__PURE__*/createElement(Loader, {
         color: colors.violet.base,
         scale: 0.6,
         className: _loadingStyle
@@ -1433,7 +1446,8 @@ var NativeDateInput = /*#__PURE__*/function (_React$PureComponent) {
           inputProps = _this$props.inputProps,
           placeholder = _this$props.placeholder,
           value = _this$props.value,
-          disabled = _this$props.disabled;
+          disabled = _this$props.disabled,
+          testId = _this$props.testId;
       return /*#__PURE__*/createElement(Input, Object.assign({
         onChange: this.onDateInputChange,
         type: "date"
@@ -1442,7 +1456,8 @@ var NativeDateInput = /*#__PURE__*/function (_React$PureComponent) {
         placeholder: placeholder,
         fixLabelAtTop: true
       }, inputProps, {
-        disabled: disabled
+        disabled: disabled,
+        testId: testId
       }));
     }
   }]);
@@ -1548,7 +1563,8 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
           initiallyOpen = _this$props.initiallyOpen,
           onOutsideClick = _this$props.onOutsideClick,
           controlled = _this$props.controlled,
-          isOpen = _this$props.isOpen;
+          isOpen = _this$props.isOpen,
+          testId = _this$props.testId;
       var _wrapperClassName = cx(wrapperStyle$3, wrapperClassName);
       var _dropDownClassName = cx(dropDownClassName, this.props.dropDownClassName);
       return /*#__PURE__*/createElement(DropDown, {
@@ -1579,7 +1595,8 @@ var DateInput = /*#__PURE__*/function (_React$PureComponent) {
                 onChange: onChange
               }),
               className: cx(inputStyle$1, inputProps && inputProps.className),
-              disabled: disabled
+              disabled: disabled,
+              testId: testId
             }));
           });
         },
@@ -1877,19 +1894,25 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(Toast, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      emitter.on("showToast", this.show);
+      var _this2 = this;
+      emitter.on("showToast", function (e) {
+        return e && _this2.show(e);
+      });
       emitter.on("hideToast", this.hide);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      emitter.off("showToast", this.show);
+      var _this3 = this;
+      emitter.off("showToast", function (e) {
+        return e && _this3.show(e);
+      });
       emitter.off("hideToast", this.hide);
     }
   }, {
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _this4 = this;
       var bColor = _colors[this.state.type];
       var iconClass = cx("pi", {
         "pi-radio-check-filled": this.state.type === "success",
@@ -1914,13 +1937,13 @@ var Toast = /*#__PURE__*/function (_React$PureComponent) {
       }, function (show) {
         return show && function (styles) {
           return /*#__PURE__*/createElement(animated.div, {
-            className: cx(toastWrapper, _this2.props.className),
+            className: cx(toastWrapper, _this4.props.className),
             style: _objectSpread$b(_objectSpread$b({
               backgroundColor: bColor
             }, styles), customStyles[position].style)
           }, /*#__PURE__*/createElement("i", {
             className: iconClass
-          }), _this2.state.text);
+          }), _this4.state.text);
         };
       });
     }
@@ -1964,7 +1987,8 @@ var messageWrapper = /*#__PURE__*/css(_objectSpread$c(_objectSpread$c({
 var Message = function Message(_ref) {
   var intent = _ref.intent,
       className = _ref.className,
-      text = _ref.text;
+      text = _ref.text,
+      testId = _ref.testId;
   var bColor = _colors[intent];
   var iconClass = cx("pi", {
     "pi-radio-check-filled": intent === "success",
@@ -1974,7 +1998,8 @@ var Message = function Message(_ref) {
     className: cx(messageWrapper, className),
     style: {
       backgroundColor: bColor
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/createElement("i", {
     className: iconClass
   }), text);
@@ -2227,7 +2252,8 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
           className = _this$props.className,
           clearable = _this$props.clearable,
           value = _this$props.value,
-          loading = _this$props.loading;
+          loading = _this$props.loading,
+          testId = _this$props.testId;
       var wrapperClassName = cx(searchWrapperStyle, {
         __pebble__search__small: type === "small",
         __pebble__search__large: type === "large",
@@ -2247,7 +2273,9 @@ var Search = /*#__PURE__*/function (_React$PureComponent) {
         },
         ref: this.searchInputRef,
         value: value
-      }, inputProps)), loading && /*#__PURE__*/createElement(Loader, {
+      }, inputProps, {
+        "data-testid": testId
+      })), loading && /*#__PURE__*/createElement(Loader, {
         scale: 0.4,
         color: colors.violet.base
       }), clearable && /*#__PURE__*/createElement("div", {
@@ -2310,6 +2338,59 @@ var searchBoxScrolledStyle = /*#__PURE__*/css({
 
 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 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$f({
+    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 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$f(_objectSpread$f({}, multiSelect ? getOptionGroupCheckBoxTestIds(optionGroupId) : getOptionGroupRadioTestIds(optionGroupId)), baseIds);
+}
+function getTypeaheadTestIds(id) {
+  var optionGroupId = "".concat(id, "-option-group");
+  return _objectSpread$f({
+    optionGroupId: optionGroupId
+  }, getOptionGroupRadioTestIds(optionGroupId));
+}
+
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
@@ -2403,10 +2484,12 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
           className = _this$props2.className,
           isSelected = _this$props2.isSelected,
           handleChange = _this$props2.handleChange,
-          searchBoxProps = _this$props2.searchBoxProps;
+          searchBoxProps = _this$props2.searchBoxProps,
+          testId = _this$props2.testId;
       var _this$state = this.state,
           isScrolled = _this$state.isScrolled,
           highlighted = _this$state.highlighted;
+      var testIds = getTestIds(testId, getOptionGroupTestIds);
       var _children = Children.map(children, function (_option, i) {
         var option = _option;
         var ref = _this3.optionsRefsSet.get(i);
@@ -2419,7 +2502,8 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
           isActive: highlighted === i,
           isSelected: isSelected(option.props.value),
           multiSelect: multiSelect,
-          ref: ref
+          ref: ref,
+          testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
         });
       });
       var searchBoxClassName = cx(searchBoxWrapper, _defineProperty({}, searchBoxScrolledStyle, isScrolled));
@@ -2429,10 +2513,11 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/createElement(Search, Object.assign({
         type: "small"
       }, searchBoxProps, {
-        inputProps: _objectSpread$f(_objectSpread$f({}, searchBoxProps && searchBoxProps.inputProps), {}, {
+        inputProps: _objectSpread$g(_objectSpread$g({}, searchBoxProps && searchBoxProps.inputProps), {}, {
           onKeyDown: this.handleKeyPress,
           autoFocus: true
-        })
+        }),
+        testId: testIds.searchBoxId
       }))), !!Children.count(children) && /*#__PURE__*/createElement("div", {
         ref: this.optionRef,
         style: {
@@ -2440,37 +2525,39 @@ var OptionGroup = /*#__PURE__*/function (_React$PureComponent) {
         },
         className: cx(optionsWrapper, className),
         role: multiSelect ? "group" : "radiogroup",
-        "data-test-id": "optiongroup",
+        "data-testid": testId,
         "aria-label": searchBoxProps && searchBoxProps.placeholder
       }, advancedOptions && advancedOptionsProps && /*#__PURE__*/createElement("div", {
         className: _class
       }, /*#__PURE__*/createElement("div", {
-        onClick: advancedOptionsProps.selectVisible
+        onClick: advancedOptionsProps.selectVisible,
+        "data-testid": testIds.selectVisibleId
       }, "Select Visible"), /*#__PURE__*/createElement("div", {
-        onClick: advancedOptionsProps.clearVisible
+        onClick: advancedOptionsProps.clearVisible,
+        "data-testid": testIds.clearVisibleId
       }, "Clear Visible")), _children));
     }
   }]);
   return OptionGroup;
 }(PureComponent);
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var optionGroupCheckBoxButtonWrapPadding = 20;
 var optionGroupCheckBoxButtonWrapPaddingTop = 10;
 var optionGroupCheckBoxWrap = /*#__PURE__*/css({
   maxHeight: optionWrapperMaxHeight + searchBoxHeight + 2 * (initialPadding - onScrollPadding) + optionGroupCheckBoxButtonWrapPadding + optionGroupCheckBoxButtonWrapPaddingTop + smallButtonHeight,
   position: "relative"
 }, ";label:optionGroupCheckBoxWrap;" + ( "" ));
-var optionGroupCheckBoxButtonWrap = /*#__PURE__*/css(_objectSpread$g(_objectSpread$g({}, flexSpaceBetween), {}, {
+var optionGroupCheckBoxButtonWrap = /*#__PURE__*/css(_objectSpread$h(_objectSpread$h({}, flexSpaceBetween), {}, {
   gap: 60,
   padding: optionGroupCheckBoxButtonWrapPadding,
   paddingTop: optionGroupCheckBoxButtonWrapPaddingTop,
   backgroundColor: colors.white.base
 }), ";label:optionGroupCheckBoxButtonWrap;" + ( "" ));
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$d(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$d() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var OptionGroupCheckBox = /*#__PURE__*/function (_React$PureComponent) {
@@ -2527,25 +2614,30 @@ var OptionGroupCheckBox = /*#__PURE__*/function (_React$PureComponent) {
           onClear = _this$props2.onClear,
           isSelected = _this$props2.isSelected,
           onChange = _this$props2.onChange,
-          rest = _objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange"]);
-      var advancedOptionsProps = _objectSpread$h({
+          testId = _this$props2.testId,
+          rest = _objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange", "testId"]);
+      var advancedOptionsProps = _objectSpread$i({
         selectVisible: this.selectVisible,
         clearVisible: this.clearVisible
       }, this.props.advancedOptionsProps);
+      var testIds = getTestIds(testId, getOptionGroupCheckBoxTestIds);
       return /*#__PURE__*/createElement("div", {
         className: cx(optionGroupCheckBoxWrap, wrapClassName)
       }, /*#__PURE__*/createElement(OptionGroup, Object.assign({}, rest, {
         advancedOptionsProps: advancedOptionsProps,
         isSelected: isSelected || this.isSelected,
         handleChange: this.handleChange,
-        multiSelect: true
+        multiSelect: true,
+        testId: testId
       })), (onApply || onClear) && /*#__PURE__*/createElement("div", {
         className: optionGroupCheckBoxButtonWrap
       }, onClear && /*#__PURE__*/createElement(Button, {
         type: "secondary",
-        onClick: onClear
+        onClick: onClear,
+        testId: testIds.clearButtonId
       }, "Clear"), onApply && /*#__PURE__*/createElement(Button, {
-        onClick: this.onApply
+        onClick: this.onApply,
+        testId: testIds.applyButtonId
       }, "Apply")));
     }
   }]);
@@ -2653,7 +2745,14 @@ function Select(props) {
       disabled = props.disabled,
       isSelected = props.isSelected,
       placement = props.placement,
-      modifiers = props.modifiers;
+      modifiers = props.modifiers,
+      testId = props.testId;
+  var singleSelectTestIds = getTestIds(testId, function (id) {
+    return getSelectInputTestIds(id, false);
+  });
+  var multiSelectTestIds = getTestIds(testId, function (id) {
+    return getSelectInputTestIds(id, true);
+  });
   return /*#__PURE__*/createElement("div", {
     className: cx(selectWrapper, className, _defineProperty({}, relativePosition, !!fullWidthDropdown))
   }, /*#__PURE__*/createElement(DropDown, {
@@ -2672,7 +2771,8 @@ function Select(props) {
         onClick: disabled ? undefined : function () {
           toggleDropdown();
           onDropdownToggle(isOpen);
-        }
+        },
+        "data-testid": singleSelectTestIds.inputId
       }, /*#__PURE__*/createElement(Input, Object.assign({
         className: selectInputWrapper,
         inputClassName: selectInput,
@@ -2718,7 +2818,9 @@ function Select(props) {
           onDropdownToggle(isOpen);
           toggle();
         }
-      }, commonProps), children);
+      }, commonProps, {
+        testId: multiSelectTestIds.optionGroupId
+      }), children);
     } else {
       return /*#__PURE__*/createElement(OptionGroupRadio, Object.assign({
         selected: props.selected,
@@ -2727,7 +2829,9 @@ function Select(props) {
           onDropdownToggle(isOpen);
           toggle();
         }
-      }, commonProps), children);
+      }, commonProps, {
+        testId: singleSelectTestIds.optionGroupId
+      }), children);
     }
   }));
 }
@@ -2782,7 +2886,9 @@ var PhoneNumberInput = /*#__PURE__*/function (_React$Component) {
           selectProps = _this$props.selectProps,
           inputProps = _this$props.inputProps,
           required = _this$props.required,
-          placeholder = _this$props.placeholder;
+          placeholder = _this$props.placeholder,
+          testId = _this$props.testId;
+      var testIds = getTestIds(testId, getPhoneNumberInputTestIds);
       return /*#__PURE__*/createElement("div", {
         className: cx(wrapper, className)
       }, /*#__PURE__*/createElement("label", {
@@ -2797,12 +2903,15 @@ var PhoneNumberInput = /*#__PURE__*/function (_React$Component) {
         value: countryCode + "",
         selected: countryCode
       }, selectProps, {
-        className: cx(selectStyle, selectProps && selectProps.className)
+        className: cx(selectStyle, selectProps && selectProps.className),
+        testId: testIds.countryId
       }), this.props.children), /*#__PURE__*/createElement(Input, Object.assign({
         onChange: this.onNumberChange,
         placeholder: "",
         value: phone
-      }, inputProps)));
+      }, inputProps, {
+        testId: testIds.phoneId
+      })));
     }
   }]);
   return PhoneNumberInput;
@@ -2833,8 +2942,8 @@ var arrowStyle = /*#__PURE__*/css({
   }
 }, ";label:arrowStyle;" + ( "" ));
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
@@ -2900,7 +3009,7 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
               style = _ref2.style,
               placement = _ref2.placement,
               arrowProps = _ref2.arrowProps;
-          var wrapperStyle = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, style), transitionStyles), {}, {
+          var wrapperStyle = _objectSpread$j(_objectSpread$j(_objectSpread$j({}, style), transitionStyles), {}, {
             backgroundColor: popperBackgroundColor,
             transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
             transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
@@ -2916,7 +3025,7 @@ var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
           }), /*#__PURE__*/createElement("div", {
             className: arrowStyle,
             ref: arrowProps.ref,
-            style: _objectSpread$i(_objectSpread$i({}, arrowProps.style), {}, {
+            style: _objectSpread$j(_objectSpread$j({}, arrowProps.style), {}, {
               color: popperBackgroundColor
             }),
             "data-placement": placement
@@ -2932,8 +3041,8 @@ PebblePopper.defaultProps = {
   closeOnOutsideClick: true
 };
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var modalPadding = 30;
 var modalContainer$1 = /*#__PURE__*/css({
   background: "white",
@@ -2947,7 +3056,7 @@ var flexCenter = /*#__PURE__*/css( {
   name: "7sl85e-flexCenter",
   styles: "display:flex;align-items:center;justify-content:center;height:100%;;label:flexCenter;"
 } );
-var buttonsContainer = /*#__PURE__*/css(_objectSpread$j(_objectSpread$j({}, flexSpaceBetween), {}, {
+var buttonsContainer = /*#__PURE__*/css(_objectSpread$k(_objectSpread$k({}, flexSpaceBetween), {}, {
   marginTop: "40px"
 }), ";label:buttonsContainer;" + ( "" ));
 var iconCloseClassName = /*#__PURE__*/css({
@@ -2995,13 +3104,13 @@ var PopUp = function PopUp(props) {
   }, approveButtonProps), approveButtonText))));
 };
 
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$l(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var selectedTabStyle = /*#__PURE__*/css({
   borderBottom: "2px solid ".concat(colors.violet.base),
   color: colors.violet.base
 }, ";label:selectedTabStyle;" + ( "" ));
-var tabStyle = /*#__PURE__*/css(_objectSpread$k({
+var tabStyle = /*#__PURE__*/css(_objectSpread$l({
   padding: "10px 20px 20px",
   cursor: "pointer"
 }, typography.s.bold), ";label:tabStyle;" + ( "" ));
@@ -3042,7 +3151,7 @@ var Tabs = /*#__PURE__*/function (_React$PureComponent) {
         var isSelected = _this2.state.selectedTab === tab;
         return /*#__PURE__*/createElement("span", {
           key: "".concat(tab, "-").concat(i),
-          "data-test-id": "".concat(tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()),
+          "data-testid": "".concat(tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()),
           className: cx(_className, isSelected && selectedTabStyle, isSelected && _this2.props.selectedTabClassName),
           onClick: function onClick() {
             _this2.setState({
@@ -3248,13 +3357,16 @@ var RadioGroup = /*#__PURE__*/function (_React$PureComponent) {
           selected = _this$props2.selected,
           className = _this$props2.className,
           name = _this$props2.name,
-          disabled = _this$props2.disabled;
-      var _children = Children.map(children, function (_radio) {
+          disabled = _this$props2.disabled,
+          testId = _this$props2.testId;
+      var testIds = getTestIds(testId, getRadioGroupTestIds);
+      var _children = Children.map(children, function (_radio, i) {
         var radio = _radio;
         return cloneElement(radio, {
           onChange: _this2.handleChange,
           checked: selected === radio.props.value,
-          disabled: disabled
+          disabled: disabled,
+          testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
         });
       });
       return /*#__PURE__*/createElement("div", {
@@ -3267,9 +3379,9 @@ var RadioGroup = /*#__PURE__*/function (_React$PureComponent) {
   return RadioGroup;
 }(PureComponent);
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$l(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var wrapStyle = /*#__PURE__*/css(_objectSpread$l(_objectSpread$l({}, flexRow), {}, {
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var wrapStyle = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, flexRow), {}, {
   cursor: "pointer"
 }), ";label:wrapStyle;" + ( "" ));
 var disabledStyle = /*#__PURE__*/css( {
@@ -3371,8 +3483,8 @@ var Rating = /*#__PURE__*/function (_React$PureComponent) {
   return Rating;
 }(PureComponent);
 
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var inputReadOnlyStyle$1 = /*#__PURE__*/css({
   color: colors.gray.dark
 }, ";label:inputReadOnlyStyle;" + ( "" ));
@@ -3381,12 +3493,12 @@ var inputDisabledStyle$1 = /*#__PURE__*/css({
   pointerEvents: "none",
   color: colors.gray.base
 }, ";label:inputDisabledStyle;" + ( "" ));
-var messageStyle$1 = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, typography.s.regular), {}, {
+var messageStyle$1 = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, typography.s.regular), {}, {
   marginTop: 10,
   lineHeight: "10px",
   textAlign: "left"
 }), ";label:messageStyle;" + ( "" ));
-var infoTextStyle = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, typography.s.light), {}, {
+var infoTextStyle = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, typography.s.light), {}, {
   marginRight: "15px",
   lineHeight: "12px"
 }), ";label:infoTextStyle;" + ( "" ));
@@ -3403,7 +3515,7 @@ var placeholderStyle = /*#__PURE__*/css({
     transform: "translate(0, -10px)"
   }
 }, ";label:placeholderStyle;" + ( "" ));
-var inputStyle$2 = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({
+var inputStyle$2 = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({
   border: 0,
   outline: 0,
   borderRadius: "3px",
@@ -3484,7 +3596,8 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
           message = _this$props.message,
           readOnly = _this$props.readOnly,
           loading = _this$props.loading,
-          className = _this$props.className;
+          className = _this$props.className,
+          testId = _this$props.testId;
       var isFocused = this.state.isFocused;
       var _message = errorMessage || successMessage || message;
       var _inputProps = {
@@ -3508,7 +3621,9 @@ var SecondaryInput = /*#__PURE__*/function (_React$PureComponent) {
         },
         onFocus: this.addFocus,
         onBlur: this.removeFocus
-      }, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps)), /*#__PURE__*/createElement("label", {
+      }, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps, {
+        "data-testid": testId
+      })), /*#__PURE__*/createElement("label", {
         className: placeholderClassName
       }, placeholder, required && /*#__PURE__*/createElement("span", {
         style: {
@@ -3683,10 +3798,10 @@ SideBar.defaultProps = {
   closeOnOutsideClick: true
 };
 
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var rheostatOverrides = "\n.rheostat {\n  overflow: visible;\n}\n\n.rheostat-background {\n  background-color: ".concat(colors.violet.lightest, ";\n  position: relative;\n  border-radius: 2px;\n  overflow: hidden;\n  height: 4px;\n  top: 0;\n  width: 100%;\n}\n\n.rheostat-progress {\n  background-color: ").concat(colors.violet.base, ";\n  position: absolute;\n  height: 4px;\n  border-radius: 2px;\n  top: 0;\n}\n\n.rheostat-handle {\n  background-color: ").concat(colors.violet.base, ";\n  border-radius: 50%;\n  height: 20px;\n  outline: none;\n  z-index: 2;\n  width: 20px;\n  margin-left: -10px;\n  top: -8px;\n  border: 0;\n  cursor: pointer;\n  box-shadow: ").concat(constants.boxShadow.xElevated, ";\n}\n\n.__pebble__slider__large .rheostat-handle {\n  width: 24px;\n  height: 24px;\n  margin-left: -12px;\n  top: -10px;\n}\n\n.rheostat-handle:hover {\n  background-color: ").concat(colors.violet.light, ";\n}\n\n.__pebble__slider__disabled .rheostat-handle {\n  background-color: ").concat(colors.violet.lighter, ";\n  cursor: inherit;\n}\n\n.rheostat-horizontal {\n  height: 4px;\n}\n");
-var sliderHeader = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, flexSpaceBetween), {}, {
+var sliderHeader = /*#__PURE__*/css(_objectSpread$o(_objectSpread$o({}, flexSpaceBetween), {}, {
   marginBottom: 25,
   alignItems: "center",
   ".__pebble__slider__large &": {
@@ -3747,8 +3862,8 @@ var Slider = function Slider(_ref) {
   }, rest)));
 };
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$p(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var headStyle = /*#__PURE__*/css( {
   name: "1ehjdcc-headStyle",
   styles: "display:flex;flex-direction:row;position:relative;;label:headStyle;"
@@ -3757,7 +3872,7 @@ var headSection = /*#__PURE__*/css( {
   name: "1hilual-headSection",
   styles: "flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;> div{font-size:14px;};label:headSection;"
 } );
-var headingStyle = /*#__PURE__*/css(_objectSpread$o({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
+var headingStyle = /*#__PURE__*/css(_objectSpread$p({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
 var dotStyle$1 = /*#__PURE__*/css({
   height: 20,
   width: 20,
@@ -3786,8 +3901,8 @@ var stepperLineStyle = /*#__PURE__*/css({
   backgroundColor: colors.violet.base
 }, ";label:stepperLineStyle;" + ( "" ));
 
-function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$p(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$q(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
 function noop$2() {}
@@ -3946,11 +4061,11 @@ var Stepper = /*#__PURE__*/function (_React$PureComponent) {
             name: "fxyzre-Stepper",
             styles: "display:none;;label:Stepper;"
           } ), i !== _this2.state.active))
-        }, renderContentElement(_objectSpread$p({
+        }, renderContentElement(_objectSpread$q({
           item: datum,
           isSelected: i === _this2.state.active
         }, args)));
-      }), renderFooterElement(_objectSpread$p({
+      }), renderFooterElement(_objectSpread$q({
         activeIndex: this.state.active
       }, args), this.props)));
     }
@@ -3991,9 +4106,9 @@ Stepper.defaultProps = {
   }
 };
 
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$q(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var labelTextStyle = /*#__PURE__*/css(_objectSpread$q(_objectSpread$q({}, typography.s.bold), {}, {
+function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$r(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var labelTextStyle = /*#__PURE__*/css(_objectSpread$r(_objectSpread$r({}, typography.s.bold), {}, {
   color: colors.gray.dark,
   marginRight: "10px"
 }), ";label:labelTextStyle;" + ( "" ));
@@ -4089,9 +4204,9 @@ var Switch = /*#__PURE__*/function (_React$PureComponent) {
   return Switch;
 }(PureComponent);
 
-function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$r(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var tagStyle = /*#__PURE__*/css(_objectSpread$r(_objectSpread$r(_objectSpread$r({}, typography.s.bold), flexSpaceBetween), {}, {
+function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$s(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var tagStyle = /*#__PURE__*/css(_objectSpread$s(_objectSpread$s(_objectSpread$s({}, typography.s.bold), flexSpaceBetween), {}, {
   borderRadius: constants.borderRadius,
   padding: "0 10px",
   height: 28,
@@ -4138,19 +4253,21 @@ var Tag = function Tag(_ref) {
   }, /*#__PURE__*/createElement(Ink, null)));
 };
 
-function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$s(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$t(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 var Text = function Text(_ref) {
   var typography = _ref.typography,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? colors.gray.darker : _ref$color,
       children = _ref.children,
-      className = _ref.className;
-  var _className = /*#__PURE__*/css(_objectSpread$s(_objectSpread$s({}, typography), {}, {
+      className = _ref.className,
+      testId = _ref.testId;
+  var _className = /*#__PURE__*/css(_objectSpread$t(_objectSpread$t({}, typography), {}, {
     color: color
   }),  "" );
   return /*#__PURE__*/React__default.createElement("span", {
-    className: cx(_className, className)
+    className: cx(_className, className),
+    "data-testid": testId
   }, children);
 };
 
@@ -4239,7 +4356,7 @@ var TimePicker = function TimePicker(props) {
           toggleDropdown();
         },
         className: buttonStyle,
-        "data-test-id": "hour-label"
+        "data-testid": "hour-label"
       }, /*#__PURE__*/createElement("span", {
         className: /*#__PURE__*/css( {
           name: "1czd1rs-TimePicker",
@@ -4286,7 +4403,7 @@ var TimePicker = function TimePicker(props) {
           toggleDropdown();
         },
         className: buttonStyle,
-        "data-test-id": "minute-label"
+        "data-testid": "minute-label"
       }, /*#__PURE__*/createElement("span", {
         className: /*#__PURE__*/css( {
           name: "1czd1rs-TimePicker",
@@ -4323,9 +4440,9 @@ var TimePicker = function TimePicker(props) {
   }));
 };
 
-function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$t(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-var textStyle = /*#__PURE__*/css(_objectSpread$t(_objectSpread$t({}, typography.s.regular), {}, {
+function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$u(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var textStyle = /*#__PURE__*/css(_objectSpread$u(_objectSpread$u({}, typography.s.regular), {}, {
   color: colors.white.base,
   display: "block",
   padding: "10px 16px"
@@ -4410,17 +4527,17 @@ var optionsWrapper$1 = /*#__PURE__*/css({
 
 function _createSuper$q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$q(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct$q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$u(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$v(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 function defaultSearchBox(_ref, props) {
   var registerChange = _ref.registerChange,
       onFocus = _ref.onFocus,
       value = _ref.value;
-  var _inputProps = props.inputProps ? _objectSpread$u({}, props.inputProps.inputProps) : {};
+  var _inputProps = props.inputProps ? _objectSpread$v({}, props.inputProps.inputProps) : {};
   return /*#__PURE__*/createElement(Input, Object.assign({}, props.inputProps, {
     onChange: registerChange,
     placeholder: props.placeholder,
-    inputProps: _objectSpread$u(_objectSpread$u({}, _inputProps), {}, {
+    inputProps: _objectSpread$v(_objectSpread$v({}, _inputProps), {}, {
       onFocus: onFocus,
       onKeyDown: function onKeyDown(e) {
         if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
@@ -4434,7 +4551,8 @@ function defaultSearchBox(_ref, props) {
     errorMessage: props.errorMessage,
     loading: props.loading,
     required: props.required,
-    disabled: props.disabled
+    disabled: props.disabled,
+    testId: props.testId
   }));
 }
 var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
@@ -4480,7 +4598,9 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
           _this$props$searchBox = _this$props.searchBox,
           searchBox = _this$props$searchBox === void 0 ? defaultSearchBox : _this$props$searchBox,
           dropdownClassName = _this$props.dropdownClassName,
-          children = _this$props.children;
+          children = _this$props.children,
+          testId = _this$props.testId;
+      var testIds = getTestIds(testId, getTypeaheadTestIds);
       var _this$state = this.state,
           showSuggestions = _this$state.showSuggestions,
           value = _this$state.value;
@@ -4496,7 +4616,9 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
         registerChange: this.registerChange,
         onFocus: this.onFocus,
         value: value
-      }, this.props), /*#__PURE__*/createElement(MountTransition, {
+      }, _objectSpread$v(_objectSpread$v({}, this.props), {}, {
+        testId: testIds.searchBoxId
+      })), /*#__PURE__*/createElement(MountTransition, {
         visible: showSuggestions,
         native: true
       }, function (transitionStyles) {
@@ -4504,7 +4626,8 @@ var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
           style: transitionStyles,
           className: cx(optionsWrapper$1, dropdownClassName)
         }, /*#__PURE__*/createElement(OptionGroupRadio, {
-          onChange: _this2.onSelect
+          onChange: _this2.onSelect,
+          testId: testIds.optionGroupId
         }, children));
       }));
     }
@@ -4572,7 +4695,16 @@ 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,
+    getSelectInputTestIds: getSelectInputTestIds,
+    getTypeaheadTestIds: getTypeaheadTestIds
 });
 
 export { BrowserBasedDateInput, Button, Calendar, Checkbox, CheckboxGroup, DateInput, DropDown, DropDownButton, Input, Loader, Logo, Message, Modal, NativeDateInput, Option, OptionGroup, OptionGroupCheckBox, OptionGroupRadio, OutsideClick, PhoneNumberInput, PopUp, PebblePopper as Popper, PresetCalendar, Radio, RadioGroup, Rating, Search, SecondaryInput, Select, SideBar, Slider, Stepper, Switch, TabSection, Tabs, Tag, Text, TimePicker, Toast, Tooltip, TypeAhead, UserAgentInfoContext, UserAgentInfoProvider, constants, mixins, styles, typography, index as utils };