pebble-web 2.25.1 → 2.25.2-alpha.1

package/dist/pebble-web.umd.js

@@ -1883,7 +1883,8 @@
         color = _ref$color === void 0 ? colors.gray.darker : _ref$color,
         _ref$scale = _ref.scale,
         scale = _ref$scale === void 0 ? 1 : _ref$scale,
-        className = _ref.className;
+        className = _ref.className,
+        testId = _ref.testId;
     var style = {
       backgroundColor: color
     };
@@ -1891,7 +1892,8 @@
       className: cx(spinnerStyle, className),
       style: {
         transform: "scale(".concat(scale, ")")
-      }
+      },
+      "data-testid": testId
     }, /*#__PURE__*/React.createElement("div", {
       style: style
     }), /*#__PURE__*/React.createElement("div", {
@@ -1916,7 +1918,8 @@
         outline = _ref.outline,
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? "small" : _ref$size,
-        buttonProps = _ref.buttonProps;
+        buttonProps = _ref.buttonProps,
+        testId = _ref.testId;
     var disableAction = disabled || loading;
     var _outline = size === "x-small" || !!outline;
     var _className = cx(getButtonStyle(size, type, !!showShadow, !_outline), className);
@@ -1926,7 +1929,8 @@
       style: {
         width: width
       },
-      disabled: disabled
+      disabled: disabled,
+      "data-testid": testId
     }, buttonProps), loading ? /*#__PURE__*/React.createElement(Loader, {
       color: colors.white.base,
       scale: 0.4
@@ -5241,7 +5245,8 @@
         children = _props$children === void 0 ? ControlView : _props$children,
         type = props.type,
         className = props.className,
-        indeterminate = props.indeterminate;
+        indeterminate = props.indeterminate,
+        testId = props.testId;
     return /*#__PURE__*/React.createElement("div", {
       className: cx(controlStyle, className),
       role: type,
@@ -5255,7 +5260,8 @@
           value: value,
           checked: !checked
         }, e);
-      } : undefined
+      } : undefined,
+      "data-testid": testId
     }, children(props));
   }
   var ControlView = function ControlView(_ref) {
@@ -9079,7 +9085,8 @@
             disabled = _this$props.disabled,
             labelClassName = _this$props.labelClassName,
             controlled = _this$props.controlled,
-            _onOutsideClick = _this$props.onOutsideClick;
+            _onOutsideClick = _this$props.onOutsideClick,
+            testId = _this$props.testId;
         var _isDropDownOpen = controlled ? !!this.props.isOpen : this.state.isOpen;
         return /*#__PURE__*/React.createElement(OutsideClick, {
           className: cx(wrapperStyle$1, className),
@@ -9106,7 +9113,8 @@
             isOpen: _isDropDownOpen,
             onClick: _this2.toggleDropdown,
             disabled: disabled,
-            className: labelClassName
+            className: labelClassName,
+            testId: testId
           }, buttonLabel));
         }), /*#__PURE__*/React.createElement(MountTransition, {
           visible: _isDropDownOpen
@@ -9329,7 +9337,8 @@
             onClick = _this$props.onClick,
             loading = _this$props.loading,
             leftElement = _this$props.leftElement,
-            rightElement = _this$props.rightElement;
+            rightElement = _this$props.rightElement,
+            testId = _this$props.testId;
         var isFocused = this.state.isFocused;
         var _message = errorMessage || successMessage || message;
         var _inputWrapperClassName = cx(inputWrapperStyle, inputWrapperClassName);
@@ -9362,9 +9371,13 @@
           onClick: onClick
         }, /*#__PURE__*/React.createElement("div", {
           className: _inputWrapperClassName
-        }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/React.createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps)) : /*#__PURE__*/React.createElement("input", Object.assign({
+        }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/React.createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps, {
+          "data-testid": testId
+        })) : /*#__PURE__*/React.createElement("input", Object.assign({
           type: type
-        }, _inputProps, this.props.inputProps)), loading && /*#__PURE__*/React.createElement(Loader, {
+        }, _inputProps, this.props.inputProps, {
+          "data-testid": testId
+        })), loading && /*#__PURE__*/React.createElement(Loader, {
           color: colors.violet.base,
           scale: 0.6,
           className: _loadingStyle
@@ -11147,7 +11160,8 @@
             inputProps = _this$props.inputProps,
             placeholder = _this$props.placeholder,
             value = _this$props.value,
-            disabled = _this$props.disabled;
+            disabled = _this$props.disabled,
+            testId = _this$props.testId;
         return /*#__PURE__*/React.createElement(Input, Object.assign({
           onChange: this.onDateInputChange,
           type: "date"
@@ -11156,7 +11170,8 @@
           placeholder: placeholder,
           fixLabelAtTop: true
         }, inputProps, {
-          disabled: disabled
+          disabled: disabled,
+          testId: testId
         }));
       }
     }]);
@@ -11262,7 +11277,8 @@
             initiallyOpen = _this$props.initiallyOpen,
             onOutsideClick = _this$props.onOutsideClick,
             controlled = _this$props.controlled,
-            isOpen = _this$props.isOpen;
+            isOpen = _this$props.isOpen,
+            testId = _this$props.testId;
         var _wrapperClassName = cx(wrapperStyle$3, wrapperClassName);
         var _dropDownClassName = cx(dropDownClassName, this.props.dropDownClassName);
         return /*#__PURE__*/React.createElement(DropDown, {
@@ -11293,7 +11309,8 @@
                   onChange: onChange
                 }),
                 className: cx(inputStyle$1, inputProps && inputProps.className),
-                disabled: disabled
+                disabled: disabled,
+                testId: testId
               }));
             });
           },
@@ -11593,19 +11610,25 @@
     createClass(Toast, [{
       key: "componentDidMount",
       value: function componentDidMount() {
-        emitter.on("showToast", this.show);
+        var _this2 = this;
+        emitter.on("showToast", function (e) {
+          return e && _this2.show(e);
+        });
         emitter.on("hideToast", this.hide);
       }
     }, {
       key: "componentWillUnmount",
       value: function componentWillUnmount() {
-        emitter.off("showToast", this.show);
+        var _this3 = this;
+        emitter.off("showToast", function (e) {
+          return e && _this3.show(e);
+        });
         emitter.off("hideToast", this.hide);
       }
     }, {
       key: "render",
       value: function render() {
-        var _this2 = this;
+        var _this4 = this;
         var bColor = _colors[this.state.type];
         var iconClass = cx("pi", {
           "pi-radio-check-filled": this.state.type === "success",
@@ -11630,13 +11653,13 @@
         }, function (show) {
           return show && function (styles) {
             return /*#__PURE__*/React.createElement(renderprops_cjs_7.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__*/React.createElement("i", {
               className: iconClass
-            }), _this2.state.text);
+            }), _this4.state.text);
           };
         });
       }
@@ -11680,7 +11703,8 @@
   var Message = function Message(_ref) {
     var intent = _ref.intent,
         className = _ref.className,
-        text = _ref.text;
+        text = _ref.text,
+        testId = _ref.testId;
     var bColor = _colors[intent];
     var iconClass = cx("pi", {
       "pi-radio-check-filled": intent === "success",
@@ -11690,7 +11714,8 @@
       className: cx(messageWrapper, className),
       style: {
         backgroundColor: bColor
-      }
+      },
+      "data-testid": testId
     }, /*#__PURE__*/React.createElement("i", {
       className: iconClass
     }), text);
@@ -12161,7 +12186,8 @@
             className = _this$props.className,
             clearable = _this$props.clearable,
             value = _this$props.value,
-            loading = _this$props.loading;
+            loading = _this$props.loading,
+            testId = _this$props.testId;
         var wrapperClassName = cx(searchWrapperStyle, {
           __pebble__search__small: type === "small",
           __pebble__search__large: type === "large",
@@ -12181,7 +12207,9 @@
           },
           ref: this.searchInputRef,
           value: value
-        }, inputProps)), loading && /*#__PURE__*/React.createElement(Loader, {
+        }, inputProps, {
+          "data-testid": testId
+        })), loading && /*#__PURE__*/React.createElement(Loader, {
           scale: 0.4,
           color: colors.violet.base
         }), clearable && /*#__PURE__*/React.createElement("div", {
@@ -12244,6 +12272,59 @@
 
   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) {
@@ -12337,10 +12418,12 @@
             className = _this$props2.className,
             isSelected = _this$props2.isSelected,
             handleChange = _this$props2.handleChange,
-            searchBoxProps = _this$props2.searchBoxProps;
+            searchBoxProps = _this$props2.searchBoxProps,
+            testId = _this$props2.testId;
         var _this$state = this.state,
             isScrolled = _this$state.isScrolled,
             highlighted = _this$state.highlighted;
+        var testIds = getTestIds(testId, getOptionGroupTestIds);
         var _children = React.Children.map(children, function (_option, i) {
           var option = _option;
           var ref = _this3.optionsRefsSet.get(i);
@@ -12353,7 +12436,8 @@
             isActive: highlighted === i,
             isSelected: isSelected(option.props.value),
             multiSelect: multiSelect,
-            ref: ref
+            ref: ref,
+            testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
           });
         });
         var searchBoxClassName = cx(searchBoxWrapper, defineProperty({}, searchBoxScrolledStyle, isScrolled));
@@ -12363,10 +12447,11 @@
         }, /*#__PURE__*/React.createElement(Search, Object.assign({
           type: "small"
         }, searchBoxProps, {
-          inputProps: _objectSpread$f(_objectSpread$f({}, searchBoxProps && searchBoxProps.inputProps), {}, {
+          inputProps: _objectSpread$g(_objectSpread$g({}, searchBoxProps && searchBoxProps.inputProps), {}, {
             onKeyDown: this.handleKeyPress,
             autoFocus: true
-          })
+          }),
+          testId: testIds.searchBoxId
         }))), !!React.Children.count(children) && /*#__PURE__*/React.createElement("div", {
           ref: this.optionRef,
           style: {
@@ -12374,37 +12459,39 @@
           },
           className: cx(optionsWrapper, className),
           role: multiSelect ? "group" : "radiogroup",
-          "data-test-id": "optiongroup",
+          "data-testid": testId,
           "aria-label": searchBoxProps && searchBoxProps.placeholder
         }, advancedOptions && advancedOptionsProps && /*#__PURE__*/React.createElement("div", {
           className: _class
         }, /*#__PURE__*/React.createElement("div", {
-          onClick: advancedOptionsProps.selectVisible
+          onClick: advancedOptionsProps.selectVisible,
+          "data-testid": testIds.selectVisibleId
         }, "Select Visible"), /*#__PURE__*/React.createElement("div", {
-          onClick: advancedOptionsProps.clearVisible
+          onClick: advancedOptionsProps.clearVisible,
+          "data-testid": testIds.clearVisibleId
         }, "Clear Visible")), _children));
       }
     }]);
     return OptionGroup;
   }(React.PureComponent);
 
-  function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$g(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   var optionGroupCheckBoxButtonWrapPadding = 20;
   var optionGroupCheckBoxButtonWrapPaddingTop = 10;
   var optionGroupCheckBoxWrap = /*#__PURE__*/css({
     maxHeight: optionWrapperMaxHeight + searchBoxHeight + 2 * (initialPadding - onScrollPadding) + optionGroupCheckBoxButtonWrapPadding + optionGroupCheckBoxButtonWrapPaddingTop + smallButtonHeight,
     position: "relative"
   }, ";label:optionGroupCheckBoxWrap;" + ( "" ));
-  var optionGroupCheckBoxButtonWrap = /*#__PURE__*/css(_objectSpread$g(_objectSpread$g({}, flexSpaceBetween), {}, {
+  var optionGroupCheckBoxButtonWrap = /*#__PURE__*/css(_objectSpread$h(_objectSpread$h({}, flexSpaceBetween), {}, {
     gap: 60,
     padding: optionGroupCheckBoxButtonWrapPadding,
     paddingTop: optionGroupCheckBoxButtonWrapPaddingTop,
     backgroundColor: colors.white.base
   }), ";label:optionGroupCheckBoxButtonWrap;" + ( "" ));
 
-  function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$h(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   function _createSuper$d(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$d(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
   function _isNativeReflectConstruct$d() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
   var OptionGroupCheckBox = /*#__PURE__*/function (_React$PureComponent) {
@@ -12461,25 +12548,30 @@
             onClear = _this$props2.onClear,
             isSelected = _this$props2.isSelected,
             onChange = _this$props2.onChange,
-            rest = objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange"]);
-        var advancedOptionsProps = _objectSpread$h({
+            testId = _this$props2.testId,
+            rest = objectWithoutProperties(_this$props2, ["wrapClassName", "onApply", "onClear", "isSelected", "onChange", "testId"]);
+        var advancedOptionsProps = _objectSpread$i({
           selectVisible: this.selectVisible,
           clearVisible: this.clearVisible
         }, this.props.advancedOptionsProps);
+        var testIds = getTestIds(testId, getOptionGroupCheckBoxTestIds);
         return /*#__PURE__*/React.createElement("div", {
           className: cx(optionGroupCheckBoxWrap, wrapClassName)
         }, /*#__PURE__*/React.createElement(OptionGroup, Object.assign({}, rest, {
           advancedOptionsProps: advancedOptionsProps,
           isSelected: isSelected || this.isSelected,
           handleChange: this.handleChange,
-          multiSelect: true
+          multiSelect: true,
+          testId: testId
         })), (onApply || onClear) && /*#__PURE__*/React.createElement("div", {
           className: optionGroupCheckBoxButtonWrap
         }, onClear && /*#__PURE__*/React.createElement(Button, {
           type: "secondary",
-          onClick: onClear
+          onClick: onClear,
+          testId: testIds.clearButtonId
         }, "Clear"), onApply && /*#__PURE__*/React.createElement(Button, {
-          onClick: this.onApply
+          onClick: this.onApply,
+          testId: testIds.applyButtonId
         }, "Apply")));
       }
     }]);
@@ -12587,7 +12679,14 @@
         disabled = props.disabled,
         isSelected = props.isSelected,
         placement = props.placement,
-        modifiers = props.modifiers;
+        modifiers = props.modifiers,
+        testId = props.testId;
+    var singleSelectTestIds = getTestIds(testId, function (id) {
+      return getSelectInputTestIds(id, false);
+    });
+    var multiSelectTestIds = getTestIds(testId, function (id) {
+      return getSelectInputTestIds(id, true);
+    });
     return /*#__PURE__*/React.createElement("div", {
       className: cx(selectWrapper, className, defineProperty({}, relativePosition, !!fullWidthDropdown))
     }, /*#__PURE__*/React.createElement(DropDown, {
@@ -12606,7 +12705,8 @@
           onClick: disabled ? undefined : function () {
             toggleDropdown();
             onDropdownToggle(isOpen);
-          }
+          },
+          "data-testid": singleSelectTestIds.inputId
         }, /*#__PURE__*/React.createElement(Input, Object.assign({
           className: selectInputWrapper,
           inputClassName: selectInput,
@@ -12652,7 +12752,9 @@
             onDropdownToggle(isOpen);
             toggle();
           }
-        }, commonProps), children);
+        }, commonProps, {
+          testId: multiSelectTestIds.optionGroupId
+        }), children);
       } else {
         return /*#__PURE__*/React.createElement(OptionGroupRadio, Object.assign({
           selected: props.selected,
@@ -12661,7 +12763,9 @@
             onDropdownToggle(isOpen);
             toggle();
           }
-        }, commonProps), children);
+        }, commonProps, {
+          testId: singleSelectTestIds.optionGroupId
+        }), children);
       }
     }));
   }
@@ -12716,7 +12820,9 @@
             selectProps = _this$props.selectProps,
             inputProps = _this$props.inputProps,
             required = _this$props.required,
-            placeholder = _this$props.placeholder;
+            placeholder = _this$props.placeholder,
+            testId = _this$props.testId;
+        var testIds = getTestIds(testId, getPhoneNumberInputTestIds);
         return /*#__PURE__*/React.createElement("div", {
           className: cx(wrapper, className)
         }, /*#__PURE__*/React.createElement("label", {
@@ -12731,12 +12837,15 @@
           value: countryCode + "",
           selected: countryCode
         }, selectProps, {
-          className: cx(selectStyle, selectProps && selectProps.className)
+          className: cx(selectStyle, selectProps && selectProps.className),
+          testId: testIds.countryId
         }), this.props.children), /*#__PURE__*/React.createElement(Input, Object.assign({
           onChange: this.onNumberChange,
           placeholder: "",
           value: phone
-        }, inputProps)));
+        }, inputProps, {
+          testId: testIds.phoneId
+        })));
       }
     }]);
     return PhoneNumberInput;
@@ -12767,8 +12876,8 @@
     }
   }, ";label:arrowStyle;" + ( "" ));
 
-  function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   function _createSuper$g(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$g(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
   function _isNativeReflectConstruct$g() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
   var PebblePopper = /*#__PURE__*/function (_React$PureComponent) {
@@ -12834,7 +12943,7 @@
                 style = _ref2.style,
                 placement = _ref2.placement,
                 arrowProps = _ref2.arrowProps;
-            var wrapperStyle = _objectSpread$i(_objectSpread$i(_objectSpread$i({}, style), transitionStyles), {}, {
+            var wrapperStyle = _objectSpread$j(_objectSpread$j(_objectSpread$j({}, style), transitionStyles), {}, {
               backgroundColor: popperBackgroundColor,
               transform: "".concat(style.transform || "", " ").concat(transitionStyles.transform || ""),
               transformOrigin: "".concat(arrowProps.style.left || 0, "px ").concat(arrowProps.style.top || 0, "px")
@@ -12850,7 +12959,7 @@
             }), /*#__PURE__*/React.createElement("div", {
               className: arrowStyle,
               ref: arrowProps.ref,
-              style: _objectSpread$i(_objectSpread$i({}, arrowProps.style), {}, {
+              style: _objectSpread$j(_objectSpread$j({}, arrowProps.style), {}, {
                 color: popperBackgroundColor
               }),
               "data-placement": placement
@@ -12866,8 +12975,8 @@
     closeOnOutsideClick: true
   };
 
-  function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$j(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$k(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   var modalPadding = 30;
   var modalContainer$1 = /*#__PURE__*/css({
     background: "white",
@@ -12881,7 +12990,7 @@
     name: "7sl85e-flexCenter",
     styles: "display:flex;align-items:center;justify-content:center;height:100%;;label:flexCenter;"
   } );
-  var buttonsContainer = /*#__PURE__*/css(_objectSpread$j(_objectSpread$j({}, flexSpaceBetween), {}, {
+  var buttonsContainer = /*#__PURE__*/css(_objectSpread$k(_objectSpread$k({}, flexSpaceBetween), {}, {
     marginTop: "40px"
   }), ";label:buttonsContainer;" + ( "" ));
   var iconCloseClassName = /*#__PURE__*/css({
@@ -12929,13 +13038,13 @@
     }, 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;" + ( "" ));
@@ -12976,7 +13085,7 @@
           var isSelected = _this2.state.selectedTab === tab;
           return /*#__PURE__*/React.createElement("span", {
             key: "".concat(tab, "-").concat(i),
-            "data-test-id": "".concat(tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()),
+            "data-testid": "".concat(tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()),
             className: cx(_className, isSelected && selectedTabStyle, isSelected && _this2.props.selectedTabClassName),
             onClick: function onClick() {
               _this2.setState({
@@ -13182,13 +13291,16 @@
             selected = _this$props2.selected,
             className = _this$props2.className,
             name = _this$props2.name,
-            disabled = _this$props2.disabled;
-        var _children = React.Children.map(children, function (_radio) {
+            disabled = _this$props2.disabled,
+            testId = _this$props2.testId;
+        var testIds = getTestIds(testId, getRadioGroupTestIds);
+        var _children = React.Children.map(children, function (_radio, i) {
           var radio = _radio;
           return React.cloneElement(radio, {
             onChange: _this2.handleChange,
             checked: selected === radio.props.value,
-            disabled: disabled
+            disabled: disabled,
+            testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
           });
         });
         return /*#__PURE__*/React.createElement("div", {
@@ -13201,9 +13313,9 @@
     return RadioGroup;
   }(React.PureComponent);
 
-  function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$l(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-  var wrapStyle = /*#__PURE__*/css(_objectSpread$l(_objectSpread$l({}, flexRow), {}, {
+  function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  var wrapStyle = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, flexRow), {}, {
     cursor: "pointer"
   }), ";label:wrapStyle;" + ( "" ));
   var disabledStyle = /*#__PURE__*/css( {
@@ -13305,8 +13417,8 @@
     return Rating;
   }(React.PureComponent);
 
-  function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$m(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   var inputReadOnlyStyle$1 = /*#__PURE__*/css({
     color: colors.gray.dark
   }, ";label:inputReadOnlyStyle;" + ( "" ));
@@ -13315,12 +13427,12 @@
     pointerEvents: "none",
     color: colors.gray.base
   }, ";label:inputDisabledStyle;" + ( "" ));
-  var messageStyle$1 = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, typography.s.regular), {}, {
+  var messageStyle$1 = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, typography.s.regular), {}, {
     marginTop: 10,
     lineHeight: "10px",
     textAlign: "left"
   }), ";label:messageStyle;" + ( "" ));
-  var infoTextStyle = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({}, typography.s.light), {}, {
+  var infoTextStyle = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, typography.s.light), {}, {
     marginRight: "15px",
     lineHeight: "12px"
   }), ";label:infoTextStyle;" + ( "" ));
@@ -13337,7 +13449,7 @@
       transform: "translate(0, -10px)"
     }
   }, ";label:placeholderStyle;" + ( "" ));
-  var inputStyle$2 = /*#__PURE__*/css(_objectSpread$m(_objectSpread$m({
+  var inputStyle$2 = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({
     border: 0,
     outline: 0,
     borderRadius: "3px",
@@ -13418,7 +13530,8 @@
             message = _this$props.message,
             readOnly = _this$props.readOnly,
             loading = _this$props.loading,
-            className = _this$props.className;
+            className = _this$props.className,
+            testId = _this$props.testId;
         var isFocused = this.state.isFocused;
         var _message = errorMessage || successMessage || message;
         var _inputProps = {
@@ -13442,7 +13555,9 @@
           },
           onFocus: this.addFocus,
           onBlur: this.removeFocus
-        }, /*#__PURE__*/React.createElement("input", Object.assign({}, _inputProps, this.props.inputProps)), /*#__PURE__*/React.createElement("label", {
+        }, /*#__PURE__*/React.createElement("input", Object.assign({}, _inputProps, this.props.inputProps, {
+          "data-testid": testId
+        })), /*#__PURE__*/React.createElement("label", {
           className: placeholderClassName
         }, placeholder, required && /*#__PURE__*/React.createElement("span", {
           style: {
@@ -14444,10 +14559,10 @@
   });
   var Rheostat = unwrapExports(Slider);
 
-  function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$n(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   var rheostatOverrides = "\n.rheostat {\n  overflow: visible;\n}\n\n.rheostat-background {\n  background-color: ".concat(colors.violet.lightest, ";\n  position: relative;\n  border-radius: 2px;\n  overflow: hidden;\n  height: 4px;\n  top: 0;\n  width: 100%;\n}\n\n.rheostat-progress {\n  background-color: ").concat(colors.violet.base, ";\n  position: absolute;\n  height: 4px;\n  border-radius: 2px;\n  top: 0;\n}\n\n.rheostat-handle {\n  background-color: ").concat(colors.violet.base, ";\n  border-radius: 50%;\n  height: 20px;\n  outline: none;\n  z-index: 2;\n  width: 20px;\n  margin-left: -10px;\n  top: -8px;\n  border: 0;\n  cursor: pointer;\n  box-shadow: ").concat(constants.boxShadow.xElevated, ";\n}\n\n.__pebble__slider__large .rheostat-handle {\n  width: 24px;\n  height: 24px;\n  margin-left: -12px;\n  top: -10px;\n}\n\n.rheostat-handle:hover {\n  background-color: ").concat(colors.violet.light, ";\n}\n\n.__pebble__slider__disabled .rheostat-handle {\n  background-color: ").concat(colors.violet.lighter, ";\n  cursor: inherit;\n}\n\n.rheostat-horizontal {\n  height: 4px;\n}\n");
-  var sliderHeader = /*#__PURE__*/css(_objectSpread$n(_objectSpread$n({}, flexSpaceBetween), {}, {
+  var sliderHeader = /*#__PURE__*/css(_objectSpread$o(_objectSpread$o({}, flexSpaceBetween), {}, {
     marginBottom: 25,
     alignItems: "center",
     ".__pebble__slider__large &": {
@@ -15039,8 +15154,8 @@
   }
   var asyncToGenerator = _asyncToGenerator;
 
-  function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$o(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$p(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   var headStyle = /*#__PURE__*/css( {
     name: "1ehjdcc-headStyle",
     styles: "display:flex;flex-direction:row;position:relative;;label:headStyle;"
@@ -15049,7 +15164,7 @@
     name: "1hilual-headSection",
     styles: "flex:1;display:flex;flex-direction:column;align-items:center;cursor:pointer;> div{font-size:14px;};label:headSection;"
   } );
-  var headingStyle = /*#__PURE__*/css(_objectSpread$o({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
+  var headingStyle = /*#__PURE__*/css(_objectSpread$p({}, typography.normal.regular), ";label:headingStyle;" + ( "" ));
   var dotStyle$1 = /*#__PURE__*/css({
     height: 20,
     width: 20,
@@ -15078,8 +15193,8 @@
     backgroundColor: colors.violet.base
   }, ";label:stepperLineStyle;" + ( "" ));
 
-  function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$p(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$q(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   function _createSuper$n(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$n(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
   function _isNativeReflectConstruct$n() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
   function noop$2() {}
@@ -15238,11 +15353,11 @@
               name: "fxyzre-Stepper",
               styles: "display:none;;label:Stepper;"
             } ), i !== _this2.state.active))
-          }, renderContentElement(_objectSpread$p({
+          }, renderContentElement(_objectSpread$q({
             item: datum,
             isSelected: i === _this2.state.active
           }, args)));
-        }), renderFooterElement(_objectSpread$p({
+        }), renderFooterElement(_objectSpread$q({
           activeIndex: this.state.active
         }, args), this.props)));
       }
@@ -15283,9 +15398,9 @@
     }
   };
 
-  function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$q(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-  var labelTextStyle = /*#__PURE__*/css(_objectSpread$q(_objectSpread$q({}, typography.s.bold), {}, {
+  function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$r(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  var labelTextStyle = /*#__PURE__*/css(_objectSpread$r(_objectSpread$r({}, typography.s.bold), {}, {
     color: colors.gray.dark,
     marginRight: "10px"
   }), ";label:labelTextStyle;" + ( "" ));
@@ -15381,9 +15496,9 @@
     return Switch;
   }(React.PureComponent);
 
-  function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$r(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-  var tagStyle = /*#__PURE__*/css(_objectSpread$r(_objectSpread$r(_objectSpread$r({}, typography.s.bold), flexSpaceBetween), {}, {
+  function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$s(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  var tagStyle = /*#__PURE__*/css(_objectSpread$s(_objectSpread$s(_objectSpread$s({}, typography.s.bold), flexSpaceBetween), {}, {
     borderRadius: constants.borderRadius,
     padding: "0 10px",
     height: 28,
@@ -15430,19 +15545,21 @@
     }, /*#__PURE__*/React.createElement(Ink, null)));
   };
 
-  function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$s(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$t(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   var Text = function Text(_ref) {
     var typography = _ref.typography,
         _ref$color = _ref.color,
         color = _ref$color === void 0 ? colors.gray.darker : _ref$color,
         children = _ref.children,
-        className = _ref.className;
-    var _className = /*#__PURE__*/css(_objectSpread$s(_objectSpread$s({}, typography), {}, {
+        className = _ref.className,
+        testId = _ref.testId;
+    var _className = /*#__PURE__*/css(_objectSpread$t(_objectSpread$t({}, typography), {}, {
       color: color
     }),  "" );
     return /*#__PURE__*/React__default.createElement("span", {
-      className: cx(_className, className)
+      className: cx(_className, className),
+      "data-testid": testId
     }, children);
   };
 
@@ -15570,7 +15687,7 @@
             toggleDropdown();
           },
           className: buttonStyle,
-          "data-test-id": "hour-label"
+          "data-testid": "hour-label"
         }, /*#__PURE__*/React.createElement("span", {
           className: /*#__PURE__*/css( {
             name: "1czd1rs-TimePicker",
@@ -15617,7 +15734,7 @@
             toggleDropdown();
           },
           className: buttonStyle,
-          "data-test-id": "minute-label"
+          "data-testid": "minute-label"
         }, /*#__PURE__*/React.createElement("span", {
           className: /*#__PURE__*/css( {
             name: "1czd1rs-TimePicker",
@@ -15654,9 +15771,9 @@
     }));
   };
 
-  function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$t(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-  var textStyle = /*#__PURE__*/css(_objectSpread$t(_objectSpread$t({}, typography.s.regular), {}, {
+  function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$u(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  var textStyle = /*#__PURE__*/css(_objectSpread$u(_objectSpread$u({}, typography.s.regular), {}, {
     color: colors.white.base,
     display: "block",
     padding: "10px 16px"
@@ -15764,17 +15881,17 @@
 
   function _createSuper$q(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$q(); return function _createSuperInternal() { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; }
   function _isNativeReflectConstruct$q() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-  function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$u(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+  function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$v(Object(source), true).forEach(function (key) { defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
   function defaultSearchBox(_ref, props) {
     var registerChange = _ref.registerChange,
         onFocus = _ref.onFocus,
         value = _ref.value;
-    var _inputProps = props.inputProps ? _objectSpread$u({}, props.inputProps.inputProps) : {};
+    var _inputProps = props.inputProps ? _objectSpread$v({}, props.inputProps.inputProps) : {};
     return /*#__PURE__*/React.createElement(Input, Object.assign({}, props.inputProps, {
       onChange: registerChange,
       placeholder: props.placeholder,
-      inputProps: _objectSpread$u(_objectSpread$u({}, _inputProps), {}, {
+      inputProps: _objectSpread$v(_objectSpread$v({}, _inputProps), {}, {
         onFocus: onFocus,
         onKeyDown: function onKeyDown(e) {
           if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
@@ -15788,7 +15905,8 @@
       errorMessage: props.errorMessage,
       loading: props.loading,
       required: props.required,
-      disabled: props.disabled
+      disabled: props.disabled,
+      testId: props.testId
     }));
   }
   var TypeAhead = /*#__PURE__*/function (_React$PureComponent) {
@@ -15834,7 +15952,9 @@
             _this$props$searchBox = _this$props.searchBox,
             searchBox = _this$props$searchBox === void 0 ? defaultSearchBox : _this$props$searchBox,
             dropdownClassName = _this$props.dropdownClassName,
-            children = _this$props.children;
+            children = _this$props.children,
+            testId = _this$props.testId;
+        var testIds = getTestIds(testId, getTypeaheadTestIds);
         var _this$state = this.state,
             showSuggestions = _this$state.showSuggestions,
             value = _this$state.value;
@@ -15850,7 +15970,9 @@
           registerChange: this.registerChange,
           onFocus: this.onFocus,
           value: value
-        }, this.props), /*#__PURE__*/React.createElement(MountTransition, {
+        }, _objectSpread$v(_objectSpread$v({}, this.props), {}, {
+          testId: testIds.searchBoxId
+        })), /*#__PURE__*/React.createElement(MountTransition, {
           visible: showSuggestions,
           native: true
         }, function (transitionStyles) {
@@ -15858,7 +15980,8 @@
             style: transitionStyles,
             className: cx(optionsWrapper$1, dropdownClassName)
           }, /*#__PURE__*/React.createElement(OptionGroupRadio, {
-            onChange: _this2.onSelect
+            onChange: _this2.onSelect,
+            testId: testIds.optionGroupId
           }, children));
         }));
       }
@@ -15926,7 +16049,16 @@
     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
   });
 
   exports.BrowserBasedDateInput = BrowserBasedDateInput;
@@ -15974,6 +16106,15 @@
   exports.UserAgentInfoProvider = UserAgentInfoProvider;
   exports.colors = colors;
   exports.constants = constants;
+  exports.getOptionGroupCheckBoxTestIds = getOptionGroupCheckBoxTestIds;
+  exports.getOptionGroupRadioTestIds = getOptionGroupRadioTestIds;
+  exports.getOptionGroupTestIds = getOptionGroupTestIds;
+  exports.getOptionTestId = getOptionTestId;
+  exports.getPhoneNumberInputTestIds = getPhoneNumberInputTestIds;
+  exports.getRadioGroupTestIds = getRadioGroupTestIds;
+  exports.getSelectInputTestIds = getSelectInputTestIds;
+  exports.getTestIds = getTestIds;
+  exports.getTypeaheadTestIds = getTypeaheadTestIds;
   exports.mixins = mixins;
   exports.styles = styles;
   exports.typography = typography;