npm - carbon-addons-iot-react - Versions diffs - 2.98.2 → 2.100.1 - Mend

carbon-addons-iot-react 2.98.2 → 2.100.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/umd/carbon-addons-iot-react.js CHANGED Viewed

@@ -18091,6 +18091,7 @@
 	  return data;
 	}
+	var iotPrefix$2 = settings.iotPrefix;
 	var StyledModal = styled(carbonComponentsReact.ComposedModal)(_templateObject$1(), rem$2(515), rem$2(600), rem$2(800), rem$2(600), rem$2(1024), rem$2(1200), rem$2(200));
 	var StyledMessageBox = styled(carbonComponentsReact.InlineNotification)(_templateObject2(), PADDING.horizontalWrapPadding, PADDING.verticalPadding);
 	var StyledModalFooter = styled(carbonComponentsReact.ModalFooter)(_templateObject3());
@@ -18267,7 +18268,9 @@
 	        iconDescription: iconDescription
 	      }, helpText ? /*#__PURE__*/React__default.createElement("p", {
 	        className: "bx--modal-content__text"
-	      }, helpText) : null), children ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.ModalBody, null, children) : null, error ? /*#__PURE__*/React__default.createElement(StyledMessageBox, {
+	      }, helpText) : null), children ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.ModalBody, {
+	        className: classnames(defineProperty$3({}, "".concat(iotPrefix$2, "--composed-modal__body--small-margin-bottom"), error))
+	      }, children) : null, error ? /*#__PURE__*/React__default.createElement(StyledMessageBox, {
 	        title: error,
 	        subtitle: "",
 	        kind: "error",
@@ -22477,7 +22480,7 @@
 	  React__default.useEffect(callback, useDeepCompareMemoize(dependencies));
 	}
-	var iotPrefix$2 = settings.iotPrefix;
+	var iotPrefix$3 = settings.iotPrefix;
 	var propTypes$4 = {
 	  children: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
 	  wrapText: PropTypes.oneOf(['always', 'never', 'auto']).isRequired,
@@ -22529,7 +22532,7 @@
 	      rowId = _ref.rowId,
 	      row = _ref.row;
 	  var mySpanRef = /*#__PURE__*/React__default.createRef();
-	  var myClasses = classnames((_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$2, "--table__cell-text--truncate"), wrapText !== 'always' && truncateCellText), defineProperty$3(_classnames, "".concat(iotPrefix$2, "--table__cell-text--no-wrap"), wrapText === 'never'), _classnames));
+	  var myClasses = classnames((_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$3, "--table__cell-text--truncate"), wrapText !== 'always' && truncateCellText), defineProperty$3(_classnames, "".concat(iotPrefix$3, "--table__cell-text--no-wrap"), wrapText === 'never'), _classnames));
 	  var _useState = React.useState(false),
 	      _useState2 = slicedToArray(_useState, 2),
@@ -28464,7 +28467,7 @@
 	var lib_1$1 = lib$1.getEmptyImage;
 	var lib_2$1 = lib$1.NativeTypes;
-	var iotPrefix$3 = settings.iotPrefix;
+	var iotPrefix$4 = settings.iotPrefix;
 	var ColumnHeaderSelect = function ColumnHeaderSelect(_ref) {
 	  var connectDragSource = _ref.connectDragSource,
@@ -28476,7 +28479,7 @@
 	      isOver = _ref.isOver,
 	      isDisabled = _ref.isDisabled;
 	  return /*#__PURE__*/React__default.createElement(carbonComponentsReact.Button, {
-	    className: classnames('column-header__btn', "".concat(iotPrefix$3, "--column-header"), 'column-header__select', {
+	    className: classnames('column-header__btn', "".concat(iotPrefix$4, "--column-header"), 'column-header__select', {
 	      'column-header__select--hidden': isHidden,
 	      'column-header__select--isOver': isOver
 	    }),
@@ -29194,7 +29197,7 @@
 	  return data;
 	}
-	var iotPrefix$4 = settings.iotPrefix,
+	var iotPrefix$5 = settings.iotPrefix,
 	    prefix = settings.prefix;
 	var TableHeader$1 = carbonComponentsReact.DataTable.TableHeader,
 	    TableRow$2 = carbonComponentsReact.DataTable.TableRow;
@@ -29325,7 +29328,7 @@
 	        var headerContent = column.isFilterable !== undefined && !column.isFilterable ? /*#__PURE__*/React__default.createElement("div", null) : column.options ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.ComboBox, {
 	          key: columnStateValue,
-	          className: "".concat(iotPrefix$4, "--filterheader-combo"),
+	          className: "".concat(iotPrefix$5, "--filterheader-combo"),
 	          id: "column-".concat(i),
 	          "aria-label": filterText,
 	          translateWithId: _this2.handleTranslation,
@@ -29384,7 +29387,7 @@
 	        // eslint-disable-line react/destructuring-assignment
 	        React__default.createElement("div", {
 	          role: "button",
-	          className: classnames("".concat(prefix, "--list-box__selection"), defineProperty$3({}, "".concat(iotPrefix$4, "--clear-filters-button--disabled"), isDisabled)),
+	          className: classnames("".concat(prefix, "--list-box__selection"), defineProperty$3({}, "".concat(iotPrefix$5, "--clear-filters-button--disabled"), isDisabled)),
 	          tabIndex: isDisabled ? '-1' : '0',
 	          onClick: function onClick(event) {
 	            if (!isDisabled) {
@@ -29403,7 +29406,7 @@
 	          description: clearFilterText
 	        })) : null);
 	        return /*#__PURE__*/React__default.createElement(StyledTableHeader$1, {
-	          className: "".concat(iotPrefix$4, "--tableheader-filter"),
+	          className: "".concat(iotPrefix$5, "--tableheader-filter"),
 	          "data-column": column.id,
 	          key: "FilterHeader".concat(column.id),
 	          width: column.width,
@@ -30787,7 +30790,7 @@
 	  ordering: PropTypes.arrayOf(PropTypes.object).isRequired
 	};
 	var dragHandleWidth = 4;
-	var iotPrefix$5 = settings.iotPrefix;
+	var iotPrefix$6 = settings.iotPrefix;
 	var getColumnDragBounds = function getColumnDragBounds(myColumn, siblingColumn) {
 	  return {
@@ -30918,7 +30921,7 @@
 	        width: dragHandleWidth,
 	        left: leftPosition || (document.dir === 'rtl' ? 0 : 'auto')
 	      },
-	      className: classnames("".concat(iotPrefix$5, "--column-resize-handle"), defineProperty$3({}, "".concat(iotPrefix$5, "--column-resize-handle--dragging"), columnIsBeingResized))
+	      className: classnames("".concat(iotPrefix$6, "--column-resize-handle"), defineProperty$3({}, "".concat(iotPrefix$6, "--column-resize-handle--dragging"), columnIsBeingResized))
 	    })
 	  );
 	});
@@ -30987,7 +30990,7 @@
 	function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { defineProperty$3(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-	var iotPrefix$6 = settings.iotPrefix;
+	var iotPrefix$7 = settings.iotPrefix;
 	var CarbonTableHead = carbonComponentsReact.DataTable.TableHead,
 	    TableRow$3 = carbonComponentsReact.DataTable.TableRow,
 	    TableExpandHeader = carbonComponentsReact.DataTable.TableExpandHeader;
@@ -31236,9 +31239,9 @@
 	    onMouseMove: hasResize ? forwardMouseEvent : null,
 	    onMouseUp: hasResize ? forwardMouseEvent : null
 	  }, /*#__PURE__*/React__default.createElement(TableRow$3, null, hasRowExpansion ? /*#__PURE__*/React__default.createElement(TableExpandHeader, {
-	    className: classnames(defineProperty$3({}, "".concat(iotPrefix$6, "--table-expand-resize"), hasResize))
+	    className: classnames(defineProperty$3({}, "".concat(iotPrefix$7, "--table-expand-resize"), hasResize))
 	  }) : null, hasRowSelection === 'multi' ? /*#__PURE__*/React__default.createElement(TableHeader$2, {
-	    className: classnames("".concat(iotPrefix$6, "--table-header-checkbox"), defineProperty$3({}, "".concat(iotPrefix$6, "--table-header-checkbox-resize"), hasResize)),
+	    className: classnames("".concat(iotPrefix$7, "--table-header-checkbox"), defineProperty$3({}, "".concat(iotPrefix$7, "--table-header-checkbox-resize"), hasResize)),
 	    translateWithId: function translateWithId() {
 	      return tableTranslateWithId.apply(void 0, arguments);
 	    }
@@ -31285,7 +31288,7 @@
 	      align: align,
 	      className: classnames("table-header-label-".concat(align), defineProperty$3({
 	        'table-header-sortable': matchingColumnMeta.isSortable
-	      }, "".concat(iotPrefix$6, "--table-header-resize"), hasResize))
+	      }, "".concat(iotPrefix$7, "--table-header-resize"), hasResize))
 	    }, /*#__PURE__*/React__default.createElement(TableCellRenderer, {
 	      wrapText: wrapCellText,
 	      truncateCellText: truncateCellText,
@@ -31298,7 +31301,7 @@
 	      ordering: ordering
 	    }) : null) : null;
 	  }), options.hasRowActions ? /*#__PURE__*/React__default.createElement(TableHeader$2, {
-	    className: classnames("".concat(iotPrefix$6, "--table-header-row-action-column"), defineProperty$3({}, "".concat(iotPrefix$6, "--table-header-row-action-column--extra-wide"), hasSingleRowEdit))
+	    className: classnames("".concat(iotPrefix$7, "--table-header-row-action-column"), defineProperty$3({}, "".concat(iotPrefix$7, "--table-header-row-action-column--extra-wide"), hasSingleRowEdit))
 	  }) : null), filterBarActive && /*#__PURE__*/React__default.createElement(FilterHeaderRow, {
 	    key: !hasFastFilter && JSON.stringify(filters),
 	    columns: columns.map(function (column) {
@@ -31686,7 +31689,7 @@
 	  });
 	}
-	var iotPrefix$7 = settings.iotPrefix,
+	var iotPrefix$8 = settings.iotPrefix,
 	    prefix$2 = settings.prefix;
 	var propTypes$7 = {
 	  onClick: PropTypes.func.isRequired,
@@ -31718,7 +31721,7 @@
 	      rest = objectWithoutProperties$1(_ref, ["onClick", "testId", "className", "description", "isActive"]);
 	  return /*#__PURE__*/React__default.createElement(carbonComponentsReact.Button, _extends_1({}, rest, {
-	    className: classnames("".concat(prefix$2, "--btn--icon-only"), "".concat(iotPrefix$7, "--tooltip-svg-wrapper"), className, defineProperty$3({}, "".concat(iotPrefix$7, "--table-toolbar-button-active"), isActive)),
+	    className: classnames("".concat(prefix$2, "--btn--icon-only"), "".concat(iotPrefix$8, "--tooltip-svg-wrapper"), className, defineProperty$3({}, "".concat(iotPrefix$8, "--table-toolbar-button-active"), isActive)),
 	    kind: "ghost",
 	    onClick: onClick,
 	    title: description,
@@ -31790,7 +31793,7 @@
 	function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$8(Object(source), true).forEach(function (key) { defineProperty$3(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-	var iotPrefix$8 = settings.iotPrefix;
+	var iotPrefix$9 = settings.iotPrefix;
 	var CarbonTableToolbar = carbonComponentsReact.DataTable.TableToolbar,
 	    TableToolbarContent = carbonComponentsReact.DataTable.TableToolbarContent,
 	    TableToolbarSearch = carbonComponentsReact.DataTable.TableToolbarSearch,
@@ -31915,9 +31918,9 @@
 	      totalItemsCount = _ref$tableState.totalItemsCount,
 	      rowEditBarButtons = _ref$tableState.rowEditBarButtons;
 	  return /*#__PURE__*/React__default.createElement(CarbonTableToolbar, {
-	    className: classnames("".concat(iotPrefix$8, "--table-toolbar"), className)
+	    className: classnames("".concat(iotPrefix$9, "--table-toolbar"), className)
 	  }, /*#__PURE__*/React__default.createElement(TableBatchActions, {
-	    className: "".concat(iotPrefix$8, "--table-batch-actions"),
+	    className: "".concat(iotPrefix$9, "--table-batch-actions"),
 	    onCancel: onCancelBatchAction,
 	    shouldShowBatchActions: hasRowSelection === 'multi' && totalSelected > 0,
 	    totalSelected: totalSelected,
@@ -31943,23 +31946,23 @@
 	  /*#__PURE__*/
 	  // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for
 	  React__default.createElement("label", {
-	    className: "".concat(iotPrefix$8, "--table-toolbar-secondary-title")
+	    className: "".concat(iotPrefix$9, "--table-toolbar-secondary-title")
 	  }, secondaryTitle) : null, // Deprecated in favor of secondaryTitle for a more general use-case
 	  hasRowCountInHeader ?
 	  /*#__PURE__*/
 	  // eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for
 	  React__default.createElement("label", {
-	    className: "".concat(iotPrefix$8, "--table-toolbar-secondary-title")
+	    className: "".concat(iotPrefix$9, "--table-toolbar-secondary-title")
 	  }, i18n.rowCountInHeader(totalItemsCount)) : null, tooltip && /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$8, "--table-tooltip-container")
+	    className: "".concat(iotPrefix$9, "--table-tooltip-container")
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.Tooltip, {
 	    triggerId: "card-tooltip-trigger-".concat(tableId),
 	    tooltipId: "card-tooltip-".concat(tableId),
 	    triggerText: ""
 	  }, tooltip)), activeBar === 'rowEdit' ? /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$8, "--table-row-edit-actions")
+	    className: "".concat(iotPrefix$9, "--table-row-edit-actions")
 	  }, rowEditBarButtons) : /*#__PURE__*/React__default.createElement(TableToolbarContent, {
-	    className: "".concat(iotPrefix$8, "--table-toolbar-content")
+	    className: "".concat(iotPrefix$9, "--table-toolbar-content")
 	  }, hasSearch ? /*#__PURE__*/React__default.createElement(TableToolbarSearch, _extends_1({}, search, {
 	    defaultValue: search.defaultValue || search.value,
 	    className: "table-toolbar-search",
@@ -33329,7 +33332,7 @@
 	  return data;
 	}
 	var TableCell$2 = carbonComponentsReact.DataTable.TableCell;
-	var iotPrefix$9 = settings.iotPrefix;
+	var iotPrefix$a = settings.iotPrefix;
 	var StyledTableCell = styled(TableCell$2)(_templateObject$8());
 	var RowActionsContainer = styled.div(_templateObject2$4());
 	var OverflowMenuContent = styled.div(_templateObject3$3());
@@ -33516,9 +33519,9 @@
 	        key: "".concat(id, "-row-actions-cell")
 	      }, /*#__PURE__*/React__default.createElement(RowActionsContainer, {
 	        isRowExpanded: isRowExpanded,
-	        className: "".concat(iotPrefix$9, "--row-actions-container")
+	        className: "".concat(iotPrefix$a, "--row-actions-container")
 	      }, /*#__PURE__*/React__default.createElement("div", {
-	        className: classnames("".concat(iotPrefix$9, "--row-actions-container__background"), defineProperty$3({}, "".concat(iotPrefix$9, "--row-actions-container__background--overflow-menu-open"), isOpen))
+	        className: classnames("".concat(iotPrefix$a, "--row-actions-container__background"), defineProperty$3({}, "".concat(iotPrefix$a, "--row-actions-container__background--overflow-menu-open"), isOpen))
 	      }, rowActionsError ? /*#__PURE__*/React__default.createElement(RowActionsError, {
 	        actionFailedText: actionFailedText,
 	        learnMoreText: learnMoreText,
@@ -33565,7 +33568,7 @@
 	        return /*#__PURE__*/React__default.createElement(carbonComponentsReact.OverflowMenuItem // We need to focus a MenuItem for the keyboard navigation to work
 	        , {
 	          primaryFocus: actionIndex === firstSelectableItemIndex,
-	          className: "".concat(iotPrefix$9, "--action-overflow-item"),
+	          className: "".concat(iotPrefix$a, "--action-overflow-item"),
 	          key: "".concat(id, "-row-actions-button-").concat(action.id),
 	          onClick: function onClick(e) {
 	            return _onClick(e, id, action.id, onApplyRowAction);
@@ -33839,7 +33842,7 @@
 	    TableExpandRow = carbonComponentsReact.DataTable.TableExpandRow,
 	    TableCell$3 = carbonComponentsReact.DataTable.TableCell;
 	var prefix$3 = settings.prefix,
-	    iotPrefix$a = settings.iotPrefix;
+	    iotPrefix$b = settings.iotPrefix;
 	var propTypes$c = {
 	  /** What column ordering is currently applied to the table */
 	  ordering: PropTypes.arrayOf(PropTypes.shape({
@@ -34093,7 +34096,7 @@
 	      "data-offset": offset,
 	      offset: offset,
 	      align: align,
-	      className: classnames("data-table-".concat(align), defineProperty$3({}, "".concat(iotPrefix$a, "--table__cell--truncate"), truncateCellText)),
+	      className: classnames("data-table-".concat(align), defineProperty$3({}, "".concat(iotPrefix$b, "--table__cell--truncate"), truncateCellText)),
 	      width: initialColumnWidth
 	    }, /*#__PURE__*/React__default.createElement(StyledNestedSpan, {
 	      nestingOffset: offset
@@ -34159,12 +34162,12 @@
 	      }
 	    }
 	  }, tableCells), !hasRowNesting && /*#__PURE__*/React__default.createElement(StyledExpansionTableRow, {
-	    className: "".concat(iotPrefix$a, "--expanded-tablerow")
+	    className: "".concat(iotPrefix$b, "--expanded-tablerow")
 	  }, /*#__PURE__*/React__default.createElement(TableCell$3, {
 	    colSpan: totalColumns
 	  }, rowDetails))) : /*#__PURE__*/React__default.createElement(StyledTableExpandRow, {
 	    key: id,
-	    className: "".concat(iotPrefix$a, "--expanded-tablerow"),
+	    className: "".concat(iotPrefix$b, "--expanded-tablerow"),
 	    "data-row-nesting": hasRowNesting,
 	    "data-child-count": nestingChildCount,
 	    "data-nesting-offset": nestingOffset,
@@ -35124,7 +35127,7 @@
 	  }
 	};
-	var iotPrefix$b = settings.iotPrefix;
+	var iotPrefix$c = settings.iotPrefix;
 	/**
 	 * This pagination component hides the items per page selection dropdown if the isItemsPerPageHidden bit is true.
 	 * It also hides the Items per page and x of x items text if the total width of the pagination bar is less than 500 px
@@ -35144,7 +35147,7 @@
 	  return /*#__PURE__*/React__default.createElement(carbonComponentsReact.Pagination, _extends_1({}, rest, {
 	    disabled: preventInteraction || disabled,
-	    className: classnames(className, "".concat(iotPrefix$b, "--pagination"), (_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$b, "--pagination--hide-page"), isItemPerPageHidden), defineProperty$3(_classnames, "".concat(iotPrefix$b, "--pagination--hide-select"), preventInteraction), _classnames)),
+	    className: classnames(className, "".concat(iotPrefix$c, "--pagination"), (_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$c, "--pagination--hide-page"), isItemPerPageHidden), defineProperty$3(_classnames, "".concat(iotPrefix$c, "--pagination--hide-select"), preventInteraction), _classnames)),
 	    style: {
 	      '--pagination-text-display': (size === null || size === void 0 ? void 0 : size.width) && (size === null || size === void 0 ? void 0 : size.width) < 500 ? 'none' : 'flex'
 	    }
@@ -35164,7 +35167,7 @@
 	function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$a(Object(source), true).forEach(function (key) { defineProperty$3(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-	var iotPrefix$c = settings.iotPrefix;
+	var iotPrefix$d = settings.iotPrefix;
 	var propTypes$e = {
 	  /** DOM ID for component */
 	  id: PropTypes.string,
@@ -35538,7 +35541,7 @@
 	  });
 	  return /*#__PURE__*/React__default.createElement(carbonComponentsReact.TableContainer, {
 	    style: style,
-	    className: classnames(className, "".concat(iotPrefix$c, "--table-container"))
+	    className: classnames(className, "".concat(iotPrefix$d, "--table-container"))
 	  },
 	  /* If there is no items being rendered in the toolbar, don't render the toolbar */
 	  options.hasFilter || options.hasSearch || options.hasRowActions || options.hasRowCountInHeader || options.hasColumnSelection || options.hasRowEdit || actions.toolbar.onDownloadCSV || secondaryTitle || view.toolbar.customToolbarContent || tooltip ? /*#__PURE__*/React__default.createElement(TableToolbar, {
@@ -35574,7 +35577,7 @@
 	  }) : null, /*#__PURE__*/React__default.createElement("div", {
 	    className: "addons-iot-table-container"
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.Table, _extends_1({
-	    className: classnames((_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$c, "--data-table--resize"), options.hasResize), defineProperty$3(_classnames, "".concat(iotPrefix$c, "--data-table--fixed"), options.hasResize && !options.useAutoTableLayoutForResize), defineProperty$3(_classnames, "".concat(iotPrefix$c, "--data-table--row-actions"), options.hasRowActions), _classnames))
+	    className: classnames((_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$d, "--data-table--resize"), options.hasResize), defineProperty$3(_classnames, "".concat(iotPrefix$d, "--data-table--fixed"), options.hasResize && !options.useAutoTableLayoutForResize), defineProperty$3(_classnames, "".concat(iotPrefix$d, "--data-table--row-actions"), options.hasRowActions), _classnames))
 	  }, others), /*#__PURE__*/React__default.createElement(TableHead, _extends_1({}, others, {
 	    i18n: i18n,
 	    lightweight: lightweight,
@@ -36202,7 +36205,7 @@
 	});
 	var prefix$4 = settings.prefix,
-	    iotPrefix$d = settings.iotPrefix;
+	    iotPrefix$e = settings.iotPrefix;
 	var propTypes$f = {
 	  /** Disables the form elements when true */
 	  disabled: PropTypes.bool,
@@ -36300,7 +36303,7 @@
 	    },
 	    type: "text"
 	  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$titleTextI2 = overrides.titleTextInput) === null || _overrides$titleTextI2 === void 0 ? void 0 : _overrides$titleTextI2.props)), /*#__PURE__*/React__default.createElement(MyViewDescriptionContainer, _extends_1({
-	    className: "".concat(iotPrefix$d, "--save-view-modal__view-description") // eslint-disable-next-line react/no-children-prop
+	    className: "".concat(iotPrefix$e, "--save-view-modal__view-description") // eslint-disable-next-line react/no-children-prop
 	    ,
 	    children: viewDescription
 	  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$viewDescri2 = overrides.viewDescriptionContainer) === null || _overrides$viewDescri2 === void 0 ? void 0 : _overrides$viewDescri2.props)), /*#__PURE__*/React__default.createElement("fieldset", {
@@ -36317,7 +36320,7 @@
 	        isDefault: checked
 	      });
 	    },
-	    wrapperClassName: "".concat(iotPrefix$d, "--save-view-modal__default-view-checkbox")
+	    wrapperClassName: "".concat(iotPrefix$e, "--save-view-modal__default-view-checkbox")
 	  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$defaultChe2 = overrides.defaultCheckbox) === null || _overrides$defaultChe2 === void 0 ? void 0 : _overrides$defaultChe2.props)), /*#__PURE__*/React__default.createElement(MyPublicCheckbox, _extends_1({
 	    name: "isPublic",
 	    "data-testid": "".concat(testID, "-public-checkbox"),
@@ -36325,7 +36328,7 @@
 	    disabled: disabled,
 	    id: "save-view-modal-public-checkbox-label",
 	    labelText: publicCheckboxLabelText,
-	    wrapperClassName: "".concat(iotPrefix$d, "--save-view-modal__public-checkbox"),
+	    wrapperClassName: "".concat(iotPrefix$e, "--save-view-modal__public-checkbox"),
 	    onChange: function onChange(checked) {
 	      return _onChange({
 	        isPublic: checked
@@ -36496,7 +36499,7 @@
 	function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 	function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$b(Object(source), true).forEach(function (key) { defineProperty$3(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-	var iotPrefix$e = settings.iotPrefix;
+	var iotPrefix$f = settings.iotPrefix;
 	var propTypes$g = {
 	  /**
 	   * Callbacks for the actions of the modal
@@ -36653,7 +36656,7 @@
 	    sendingData: sendingData,
 	    selectorPrimaryFocus: "#".concat(primaryInputId)
 	  }, overrides === null || overrides === void 0 ? void 0 : (_overrides$composedMo2 = overrides.composedModal) === null || _overrides$composedMo2 === void 0 ? void 0 : _overrides$composedMo2.props), /*#__PURE__*/React__default.createElement("p", {
-	    className: "".concat(iotPrefix$e, "--save-view-modal__body-text")
+	    className: "".concat(iotPrefix$f, "--save-view-modal__body-text")
 	  }, modalBodyText), /*#__PURE__*/React__default.createElement(MyTableSaveViewForm, _extends_1({
 	    viewDescription: viewDescription,
 	    titleInputInvalid: titleInputInvalid,
@@ -36897,7 +36900,7 @@
 	  return data;
 	}
 	var prefix$5 = settings.prefix,
-	    iotPrefix$f = settings.iotPrefix;
+	    iotPrefix$g = settings.iotPrefix;
 	var IDPropTypes = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
 	var propTypes$h = {
 	  /** array of item objects with id and labels */
@@ -36983,7 +36986,7 @@
 	  var currentStep = matchingIndex > -1 ? matchingIndex : 0;
 	  return /*#__PURE__*/React__default.createElement(StyledProgressIndicator, {
-	    className: classnames(className, "".concat(iotPrefix$f, "--progress-indicator")),
+	    className: classnames(className, "".concat(iotPrefix$g, "--progress-indicator")),
 	    onChange: handleChange,
 	    currentIndex: currentStep,
 	    isVerticalMode: isVerticalMode,
@@ -37282,7 +37285,7 @@
 	  }
 	};
-	var iotPrefix$g = settings.iotPrefix;
+	var iotPrefix$h = settings.iotPrefix;
 	/**
 	 * Extends ComposedModal to add wizard, refer to that component for common props
 	 */
@@ -37384,7 +37387,7 @@
 	        backLabel: previousButtonLabel || defaultFooterProps.previousButtonLabel,
 	        submitLabel: submitButtonLabel || defaultFooterProps.submitButtonLabel,
 	        sendingData: typeof sendingData === 'boolean' && sendingData || typeof sendingData === 'string',
-	        className: "".concat(iotPrefix$g, "--wizard-modal__footer")
+	        className: "".concat(iotPrefix$h, "--wizard-modal__footer")
 	      });
 	    });
@@ -37409,14 +37412,14 @@
 	      });
 	      var stepIndex = this.state.step;
 	      return /*#__PURE__*/React__default.createElement(ComposedModal, _extends_1({}, other, {
-	        className: classnames("".concat(iotPrefix$g, "--wizard-modal"), className),
+	        className: classnames("".concat(iotPrefix$h, "--wizard-modal"), className),
 	        footer: this.renderFooter()
 	      }), /*#__PURE__*/React__default.createElement(ProgressIndicator, {
 	        items: items,
 	        currentItemId: !isNil_1(stepIndex) ? items[stepIndex] && items[stepIndex].id : undefined,
 	        onClickItem: this.handleClick
 	      }), /*#__PURE__*/React__default.createElement("div", {
-	        className: "".concat(iotPrefix$g, "--wizard-modal__content")
+	        className: "".concat(iotPrefix$h, "--wizard-modal__content")
 	      }, steps[stepIndex].content));
 	    }
 	  }]);
@@ -42195,7 +42198,7 @@
 	  "displayName": "StatefulTable"
 	};
-	var iotPrefix$h = settings.iotPrefix;
+	var iotPrefix$i = settings.iotPrefix;
 	var SimplePaginationPropTypes = {
 	  /** current page number */
 	  page: PropTypes.number.isRequired,
@@ -42248,12 +42251,12 @@
 	  };
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$h, "-simple-pagination-container")
+	    className: "".concat(iotPrefix$i, "-simple-pagination-container")
 	  }, /*#__PURE__*/React__default.createElement("span", {
-	    className: "".concat(iotPrefix$h, "-simple-pagination-page-label"),
+	    className: "".concat(iotPrefix$i, "-simple-pagination-page-label"),
 	    maxpage: maxPage
 	  }, pageText ? "".concat(pageText, " ").concat(page) : pageOfPagesText(page, maxPage)), maxPage > 1 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-	    className: hasPrev ? "bx--pagination__button bx--pagination__button--backward ".concat(iotPrefix$h, "-addons-simple-pagination-button") : "bx--pagination__button bx--pagination__button--backward ".concat(iotPrefix$h, "-addons-simple-pagination-button-disabled"),
+	    className: hasPrev ? "bx--pagination__button bx--pagination__button--backward ".concat(iotPrefix$i, "-addons-simple-pagination-button") : "bx--pagination__button bx--pagination__button--backward ".concat(iotPrefix$i, "-addons-simple-pagination-button-disabled"),
 	    role: "button",
 	    tabIndex: hasPrev ? 0 : -1,
 	    onClick: hasPrev ? handlePrev : undefined,
@@ -42262,9 +42265,9 @@
 	    } : undefined
 	  }, /*#__PURE__*/React__default.createElement(iconsReact.CaretLeft16, {
 	    description: prevPageText,
-	    className: hasPrev ? "".concat(iotPrefix$h, "-simple-pagination-caret") : "".concat(iotPrefix$h, "-simple-pagination-caret-disabled")
+	    className: hasPrev ? "".concat(iotPrefix$i, "-simple-pagination-caret") : "".concat(iotPrefix$i, "-simple-pagination-caret-disabled")
 	  })), /*#__PURE__*/React__default.createElement("div", {
-	    className: hasNext ? "bx--pagination__button bx--pagination__button--forward ".concat(iotPrefix$h, "-addons-simple-pagination-button") : "bx--pagination__button bx--pagination__button--forward ".concat(iotPrefix$h, "-addons-simple-pagination-button-disabled"),
+	    className: hasNext ? "bx--pagination__button bx--pagination__button--forward ".concat(iotPrefix$i, "-addons-simple-pagination-button") : "bx--pagination__button bx--pagination__button--forward ".concat(iotPrefix$i, "-addons-simple-pagination-button-disabled"),
 	    role: "button",
 	    tabIndex: hasNext ? 0 : -1,
 	    onClick: hasNext ? handleNext : undefined,
@@ -42273,7 +42276,7 @@
 	    } : undefined
 	  }, /*#__PURE__*/React__default.createElement(iconsReact.CaretRight16, {
 	    description: nextPageText,
-	    className: hasNext ? "".concat(iotPrefix$h, "-simple-pagination-caret") : "".concat(iotPrefix$h, "-simple-pagination-caret-disabled")
+	    className: hasNext ? "".concat(iotPrefix$i, "-simple-pagination-caret") : "".concat(iotPrefix$i, "-simple-pagination-caret-disabled")
 	  }))) : null);
 	};
@@ -42352,7 +42355,7 @@
 	  }
 	};
-	var iotPrefix$i = settings.iotPrefix;
+	var iotPrefix$j = settings.iotPrefix;
 	var propTypes$l = {
 	  tiles: PropTypes.arrayOf(PropTypes.node)
 	};
@@ -42365,9 +42368,9 @@
 	  var tiles = _ref.tiles,
 	      className = _ref.className;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames(className, "".concat(iotPrefix$i, "--tile-group"))
+	    className: classnames(className, "".concat(iotPrefix$j, "--tile-group"))
 	  }, tiles, /*#__PURE__*/React__default.createElement(carbonComponentsReact.Tile, {
-	    className: "".concat(iotPrefix$i, "--greedy-tile")
+	    className: "".concat(iotPrefix$j, "--greedy-tile")
 	  }));
 	};
@@ -42395,7 +42398,7 @@
 	  }
 	};
-	var iotPrefix$j = settings.iotPrefix;
+	var iotPrefix$k = settings.iotPrefix;
 	var TableToolbarSearch$1 = carbonComponentsReact.DataTable.TableToolbarSearch;
 	var propTypes$m = {
 	  /** Is the data actively loading? */
@@ -42481,9 +42484,9 @@
 	  var pageSize = pagination && pagination.pageSize ? pagination.pageSize : 10;
 	  var totalTiles = pagination && pagination.totalItems ? pagination.totalItems : 10;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames(className, "".concat(iotPrefix$j, "--tile-catalog"))
+	    className: classnames(className, "".concat(iotPrefix$k, "--tile-catalog"))
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$j, "--tile-catalog--header")
+	    className: "".concat(iotPrefix$k, "--tile-catalog--header")
 	  }, search && search.placeHolderText ? /*#__PURE__*/React__default.createElement(TableToolbarSearch$1, {
 	    size: "sm",
 	    value: searchState,
@@ -42497,7 +42500,7 @@
 	  React__default.createElement(TileGroup, {
 	    tiles: toConsumableArray(Array(pageSize)).map(function (val, index) {
 	      return /*#__PURE__*/React__default.createElement(carbonComponentsReact.Tile, {
-	        className: "".concat(iotPrefix$j, "--tile-catalog--empty-tile"),
+	        className: "".concat(iotPrefix$k, "--tile-catalog--empty-tile"),
 	        key: "emptytile-".concat(index)
 	      }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.SkeletonText, null));
 	    }),
@@ -42518,7 +42521,7 @@
 	      }) : tile.value);
 	    })
 	  }) : /*#__PURE__*/React__default.createElement(carbonComponentsReact.Tile, {
-	    className: "".concat(iotPrefix$j, "--tile-catalog--empty-tile")
+	    className: "".concat(iotPrefix$k, "--tile-catalog--empty-tile")
 	  }, error || /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(iconsReact.Bee32, null), /*#__PURE__*/React__default.createElement("p", null, search && search.noMatchesFoundText || 'No matches found'))), !isLoading && tiles.length > 0 && !error && pagination ? /*#__PURE__*/React__default.createElement(SimplePagination, _extends_1({}, pagination, {
 	    maxPage: Math.ceil(totalTiles / pageSize)
 	  })) : null);
@@ -42987,7 +42990,7 @@
 	  "composes": ["./TileCatalog"]
 	};
-	var iotPrefix$k = settings.iotPrefix;
+	var iotPrefix$l = settings.iotPrefix;
 	var propTypes$n = {
 	  /** optional icon to visually describe catalog item */
 	  icon: PropTypes.node,
@@ -43005,17 +43008,17 @@
 	      title = _ref.title,
 	      description = _ref.description;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$k, "--sample-tile")
+	    className: "".concat(iotPrefix$l, "--sample-tile")
 	  }, icon ? /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$k, "--sample-tile-icon")
+	    className: "".concat(iotPrefix$l, "--sample-tile-icon")
 	  }, icon) : null, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$k, "--sample-tile-contents")
+	    className: "".concat(iotPrefix$l, "--sample-tile-contents")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$k, "--sample-tile-title")
+	    className: "".concat(iotPrefix$l, "--sample-tile-title")
 	  }, /*#__PURE__*/React__default.createElement("span", {
 	    title: title
 	  }, title)), /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$k, "--sample-tile-description")
+	    className: "".concat(iotPrefix$l, "--sample-tile-description")
 	  }, description)));
 	};
@@ -44334,7 +44337,7 @@
 	  }
 	};
-	var iotPrefix$l = settings.iotPrefix; // internal component
+	var iotPrefix$m = settings.iotPrefix; // internal component
 	var ListItemWrapper = function ListItemWrapper(_ref) {
 	  var id = _ref.id,
@@ -44346,7 +44349,7 @@
 	  return isSelectable ? /*#__PURE__*/React__default.createElement("div", {
 	    role: "button",
 	    tabIndex: 0,
-	    className: classnames("".concat(iotPrefix$l, "--list-item"), "".concat(iotPrefix$l, "--list-item__selectable"), defineProperty$3({}, "".concat(iotPrefix$l, "--list-item__selected"), selected), defineProperty$3({}, "".concat(iotPrefix$l, "--list-item__large"), isLargeRow)),
+	    className: classnames("".concat(iotPrefix$m, "--list-item"), "".concat(iotPrefix$m, "--list-item__selectable"), defineProperty$3({}, "".concat(iotPrefix$m, "--list-item__selected"), selected), defineProperty$3({}, "".concat(iotPrefix$m, "--list-item__large"), isLargeRow)),
 	    onKeyPress: function onKeyPress(_ref2) {
 	      var key = _ref2.key;
 	      return key === 'Enter' && onSelect(id);
@@ -44355,7 +44358,7 @@
 	      onSelect(id);
 	    }
 	  }, children) : /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$l, "--list-item"), defineProperty$3({}, "".concat(iotPrefix$l, "--list-item__large"), isLargeRow))
+	    className: classnames("".concat(iotPrefix$m, "--list-item"), defineProperty$3({}, "".concat(iotPrefix$m, "--list-item__large"), isLargeRow))
 	  }, children);
 	};
@@ -44446,7 +44449,7 @@
 	  var renderNestingOffset = function renderNestingOffset() {
 	    return nestingLevel > 0 ? /*#__PURE__*/React__default.createElement("div", {
-	      className: "".concat(iotPrefix$l, "--list-item--nesting-offset"),
+	      className: "".concat(iotPrefix$m, "--list-item--nesting-offset"),
 	      style: {
 	        width: "".concat(nestingLevel * 30, "px")
 	      }
@@ -44457,7 +44460,7 @@
 	    return isExpandable ? /*#__PURE__*/React__default.createElement("div", {
 	      role: "button",
 	      tabIndex: 0,
-	      className: "".concat(iotPrefix$l, "--list-item--expand-icon"),
+	      className: "".concat(iotPrefix$m, "--list-item--expand-icon"),
 	      onClick: handleExpansionClick,
 	      onKeyPress: function onKeyPress(_ref4) {
 	        var key = _ref4.key;
@@ -44472,13 +44475,13 @@
 	  var renderIcon = function renderIcon() {
 	    return icon ? /*#__PURE__*/React__default.createElement("div", {
-	      className: "".concat(iotPrefix$l, "--list-item--content--icon ").concat(iotPrefix$l, "--list-item--content--icon__").concat(iconPosition)
+	      className: "".concat(iotPrefix$m, "--list-item--content--icon ").concat(iotPrefix$m, "--list-item--content--icon__").concat(iconPosition)
 	    }, icon) : null;
 	  };
 	  var renderRowActions = function renderRowActions() {
 	    return rowActions && rowActions.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
-	      className: "".concat(iotPrefix$l, "--list-item--content--row-actions")
+	      className: "".concat(iotPrefix$m, "--list-item--content--row-actions")
 	    }, rowActions) : null;
 	  };
@@ -44489,26 +44492,26 @@
 	    isLargeRow: isLargeRow,
 	    onSelect: onSelect
 	  }, renderNestingOffset(), renderExpander(), /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$l, "--list-item--content"), defineProperty$3({}, "".concat(iotPrefix$l, "--list-item--content__selected"), selected), defineProperty$3({}, "".concat(iotPrefix$l, "--list-item--content__large"), isLargeRow)),
+	    className: classnames("".concat(iotPrefix$m, "--list-item--content"), defineProperty$3({}, "".concat(iotPrefix$m, "--list-item--content__selected"), selected), defineProperty$3({}, "".concat(iotPrefix$m, "--list-item--content__large"), isLargeRow)),
 	    ref: selectedItemRef
 	  }, renderIcon(), /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$l, "--list-item--content--values"), defineProperty$3({}, "".concat(iotPrefix$l, "--list-item--content--values__large"), isLargeRow))
+	    className: classnames("".concat(iotPrefix$m, "--list-item--content--values"), defineProperty$3({}, "".concat(iotPrefix$m, "--list-item--content--values__large"), isLargeRow))
 	  }, isLargeRow ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$l, "--list-item--content--values--main ").concat(iotPrefix$l, "--list-item--content--values--main__large")
+	    className: "".concat(iotPrefix$m, "--list-item--content--values--main ").concat(iotPrefix$m, "--list-item--content--values--main__large")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$l, "--list-item--content--values--value"), (_classnames7 = {}, defineProperty$3(_classnames7, "".concat(iotPrefix$l, "--list-item--category"), isCategory), defineProperty$3(_classnames7, "".concat(iotPrefix$l, "--list-item--content--values--value__with-actions"), !isEmpty_1(rowActions)), _classnames7)),
+	    className: classnames("".concat(iotPrefix$m, "--list-item--content--values--value"), (_classnames7 = {}, defineProperty$3(_classnames7, "".concat(iotPrefix$m, "--list-item--category"), isCategory), defineProperty$3(_classnames7, "".concat(iotPrefix$m, "--list-item--content--values--value__with-actions"), !isEmpty_1(rowActions)), _classnames7)),
 	    title: value
 	  }, value), renderRowActions()), secondaryValue ? /*#__PURE__*/React__default.createElement("div", {
 	    title: secondaryValue,
-	    className: classnames("".concat(iotPrefix$l, "--list-item--content--values--value"), "".concat(iotPrefix$l, "--list-item--content--values--value__large"), defineProperty$3({}, "".concat(iotPrefix$l, "--list-item--content--values--value__with-actions"), !isEmpty_1(rowActions)))
+	    className: classnames("".concat(iotPrefix$m, "--list-item--content--values--value"), "".concat(iotPrefix$m, "--list-item--content--values--value__large"), defineProperty$3({}, "".concat(iotPrefix$m, "--list-item--content--values--value__with-actions"), !isEmpty_1(rowActions)))
 	  }, secondaryValue) : null) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$l, "--list-item--content--values--main")
+	    className: "".concat(iotPrefix$m, "--list-item--content--values--main")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$l, "--list-item--content--values--value"), (_classnames9 = {}, defineProperty$3(_classnames9, "".concat(iotPrefix$l, "--list-item--category"), isCategory), defineProperty$3(_classnames9, "".concat(iotPrefix$l, "--list-item--content--values--value__with-actions"), !isEmpty_1(rowActions)), _classnames9)),
+	    className: classnames("".concat(iotPrefix$m, "--list-item--content--values--value"), (_classnames9 = {}, defineProperty$3(_classnames9, "".concat(iotPrefix$m, "--list-item--category"), isCategory), defineProperty$3(_classnames9, "".concat(iotPrefix$m, "--list-item--content--values--value__with-actions"), !isEmpty_1(rowActions)), _classnames9)),
 	    title: value
 	  }, value), secondaryValue ? /*#__PURE__*/React__default.createElement("div", {
 	    title: secondaryValue,
-	    className: classnames("".concat(iotPrefix$l, "--list-item--content--values--value"), defineProperty$3({}, "".concat(iotPrefix$l, "--list-item--content--values--value__with-actions"), !isEmpty_1(rowActions)))
+	    className: classnames("".concat(iotPrefix$m, "--list-item--content--values--value"), defineProperty$3({}, "".concat(iotPrefix$m, "--list-item--content--values--value__with-actions"), !isEmpty_1(rowActions)))
 	  }, secondaryValue) : null, renderRowActions())))));
 	};
@@ -44727,7 +44730,7 @@
 	  }
 	};
-	var iotPrefix$m = settings.iotPrefix;
+	var iotPrefix$n = settings.iotPrefix;
 	var propTypes$p = {
 	  title: PropTypes.string.isRequired,
 	  buttons: PropTypes.arrayOf(PropTypes.node),
@@ -44760,15 +44763,15 @@
 	      i18n = _ref.i18n,
 	      isLoading = _ref.isLoading;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$m, "--list-header-container")
+	    className: "".concat(iotPrefix$n, "--list-header-container")
 	  }, title || buttons && buttons.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$m, "--list-header")
+	    className: "".concat(iotPrefix$n, "--list-header")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$m, "--list-header--title")
+	    className: "".concat(iotPrefix$n, "--list-header--title")
 	  }, title), /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$m, "--list-header--btn-container")
+	    className: "".concat(iotPrefix$n, "--list-header--btn-container")
 	  }, !isLoading ? buttons : null)) : null, search && !isLoading ? /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$m, "--list-header--search")
+	    className: "".concat(iotPrefix$n, "--list-header--search")
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.Search, {
 	    placeHolderText: i18n.searchPlaceHolderText,
 	    onChange: search.onChange,
@@ -44854,7 +44857,7 @@
 	  }
 	};
-	var iotPrefix$n = settings.iotPrefix;
+	var iotPrefix$o = settings.iotPrefix;
 	var itemPropTypes = {
 	  id: PropTypes.string,
 	  content: PropTypes.shape({
@@ -44999,21 +45002,21 @@
 	    return renderItemAndChildren(item, 0);
 	  });
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$n, "--list"), defineProperty$3({}, "".concat(iotPrefix$n, "--list__full-height"), isFullHeight))
+	    className: classnames("".concat(iotPrefix$o, "--list"), defineProperty$3({}, "".concat(iotPrefix$o, "--list__full-height"), isFullHeight))
 	  }, /*#__PURE__*/React__default.createElement(ListHeader, {
-	    className: "".concat(iotPrefix$n, "--list--header"),
+	    className: "".concat(iotPrefix$o, "--list--header"),
 	    title: title,
 	    buttons: buttons,
 	    search: search,
 	    i18n: i18n,
 	    isLoading: isLoading
 	  }), /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames(defineProperty$3({}, "".concat(iotPrefix$n, "--list--content__full-height"), isFullHeight), "".concat(iotPrefix$n, "--list--content"))
+	    className: classnames(defineProperty$3({}, "".concat(iotPrefix$o, "--list--content__full-height"), isFullHeight), "".concat(iotPrefix$o, "--list--content"))
 	  }, !isLoading ? listItems : /*#__PURE__*/React__default.createElement(carbonComponentsReact.SkeletonText, {
-	    className: "".concat(iotPrefix$n, "--list--skeleton"),
+	    className: "".concat(iotPrefix$o, "--list--skeleton"),
 	    width: "90%"
 	  })), pagination && !isLoading ? /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$n, "--list--page")
+	    className: "".concat(iotPrefix$o, "--list--page")
 	  }, /*#__PURE__*/React__default.createElement(SimplePagination, pagination)) : null);
 	});
 	List.propTypes = propTypes$q;
@@ -85940,7 +85943,7 @@
 	  return "".concat(renderValue).concat(!isNil_1(unit) ? " ".concat(unit) : '');
 	};
-	var iotPrefix$o = settings.iotPrefix;
+	var iotPrefix$p = settings.iotPrefix;
 	var CardRangePickerPropTypes = {
 	  /** Optional range to pass at the card level */
 	  timeRange: PropTypes.oneOf(['last24Hours', 'last7Days', 'lastMonth', 'lastQuarter', 'lastYear', 'thisWeek', 'thisMonth', 'thisQuarter', 'thisYear', '']),
@@ -85987,16 +85990,16 @@
 	    setTimeRange(value);
 	  }, [setTimeRange, onCardAction]);
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$o, "--card--toolbar-date-range-wrapper")
+	    className: "".concat(iotPrefix$p, "--card--toolbar-date-range-wrapper")
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.ToolbarItem, null, cardWidth > 400 ? /*#__PURE__*/React__default.createElement("div", {
 	    id: "timeRange",
-	    className: "".concat(iotPrefix$o, "--card--toolbar-timerange-label")
+	    className: "".concat(iotPrefix$p, "--card--toolbar-timerange-label")
 	  }, timeBoxLabels[timeRange] || i18n.defaultLabel) : null, /*#__PURE__*/React__default.createElement(carbonComponentsReact.OverflowMenu, {
-	    className: classnames("".concat(iotPrefix$o, "--card--toolbar-date-range-action")),
+	    className: classnames("".concat(iotPrefix$p, "--card--toolbar-date-range-action")),
 	    flipped: true,
 	    title: i18n.selectTimeRangeLabel,
 	    iconDescription: i18n.selectTimeRangeLabel,
-	    menuOptionsClass: "".concat(iotPrefix$o, "--card--overflow"),
+	    menuOptionsClass: "".concat(iotPrefix$p, "--card--overflow"),
 	    renderIcon: iconsReact.EventSchedule16
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.OverflowMenuItem, {
 	    key: "default",
@@ -86004,7 +86007,7 @@
 	      return handleTimeRange('default');
 	    },
 	    itemText: i18n.defaultLabel,
-	    className: classnames(defineProperty$3({}, "".concat(iotPrefix$o, "--card--overflow-menuitem-active"), timeRange === '' || isNil_1(timeRange))),
+	    className: classnames(defineProperty$3({}, "".concat(iotPrefix$p, "--card--overflow-menuitem-active"), timeRange === '' || isNil_1(timeRange))),
 	    primaryFocus: true
 	  }), Object.keys(timeBoxLabels).filter(function (i) {
 	    return i.includes('last');
@@ -86016,7 +86019,7 @@
 	        return handleTimeRange(i);
 	      },
 	      itemText: timeBoxLabels[i],
-	      className: classnames(defineProperty$3({}, "".concat(iotPrefix$o, "--card--overflow-menuitem-active"), timeRange === i))
+	      className: classnames(defineProperty$3({}, "".concat(iotPrefix$p, "--card--overflow-menuitem-active"), timeRange === i))
 	    });
 	  }), Object.keys(timeBoxLabels).filter(function (i) {
 	    return i.includes('this');
@@ -86028,7 +86031,7 @@
 	        return handleTimeRange(i);
 	      },
 	      itemText: timeBoxLabels[i],
-	      className: classnames(defineProperty$3({}, "".concat(iotPrefix$o, "--card--overflow-menuitem-active"), timeRange === i))
+	      className: classnames(defineProperty$3({}, "".concat(iotPrefix$p, "--card--overflow-menuitem-active"), timeRange === i))
 	    });
 	  }))));
 	};
@@ -86123,13 +86126,13 @@
 	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$g(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$3(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; }
-	var iotPrefix$p = settings.iotPrefix,
+	var iotPrefix$q = settings.iotPrefix,
 	    prefix$7 = settings.prefix;
 	var ToolbarSVGWrapper = function ToolbarSVGWrapper(props) {
 	  return /*#__PURE__*/React__default.createElement(carbonComponentsReact.Button, _extends_1({
 	    kind: "ghost",
-	    className: classnames("".concat(iotPrefix$p, "--card--toolbar-action"), "".concat(iotPrefix$p, "--card--toolbar-svg-wrapper"), "".concat(prefix$7, "--btn--icon-only") // can't actually use the hasIconOnly prop because we don't want the tooltip
+	    className: classnames("".concat(iotPrefix$q, "--card--toolbar-action"), "".concat(iotPrefix$q, "--card--toolbar-svg-wrapper"), "".concat(prefix$7, "--btn--icon-only") // can't actually use the hasIconOnly prop because we don't want the tooltip
 	    )
 	  }, props));
 	};
@@ -86162,7 +86165,7 @@
 	      onCardAction = _ref.onCardAction,
 	      className = _ref.className;
 	  return isEditable ? /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames(className, "".concat(iotPrefix$p, "--card--toolbar"))
+	    className: classnames(className, "".concat(iotPrefix$q, "--card--toolbar"))
 	  }, (availableActions.edit || availableActions.clone || availableActions.delete) && /*#__PURE__*/React__default.createElement(carbonComponentsReact.OverflowMenu, {
 	    flipped: true,
 	    title: i18n.overflowMenuDescription
@@ -86184,7 +86187,7 @@
 	    },
 	    itemText: i18n.deleteCardLabel
 	  }))) : /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames(className, "".concat(iotPrefix$p, "--card--toolbar"))
+	    className: classnames(className, "".concat(iotPrefix$q, "--card--toolbar"))
 	  }, availableActions.range ? /*#__PURE__*/React__default.createElement(CardRangePicker, {
 	    width: width,
 	    i18n: i18n,
@@ -86266,7 +86269,7 @@
 	function _objectSpread$h(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$3(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; }
 	var prefix$8 = settings.prefix,
-	    iotPrefix$q = settings.iotPrefix;
+	    iotPrefix$r = settings.iotPrefix;
 	var OptimizedSkeletonText = /*#__PURE__*/React__default.memo(carbonComponentsReact.SkeletonText);
 	/** Full card */
@@ -86297,7 +86300,7 @@
 	    onTouchEnd: onTouchEnd,
 	    onTouchStart: onTouchStart,
 	    onScroll: onScroll,
-	    className: classnames(className, "".concat(iotPrefix$q, "--card--wrapper"))
+	    className: classnames(className, "".concat(iotPrefix$r, "--card--wrapper"))
 	  }, validOthers), children);
 	};
 	/** Header components */
@@ -86309,7 +86312,7 @@
 	  return (
 	    /*#__PURE__*/
 	    React__default.createElement("div", {
-	      className: "".concat(iotPrefix$q, "--card--header")
+	      className: "".concat(iotPrefix$r, "--card--header")
 	    }, children)
 	  );
 	};
@@ -86320,7 +86323,7 @@
 	  return (
 	    /*#__PURE__*/
 	    React__default.createElement("span", {
-	      className: "".concat(iotPrefix$q, "--card--title"),
+	      className: "".concat(iotPrefix$r, "--card--title"),
 	      title: title
 	    }, children)
 	  );
@@ -86333,7 +86336,7 @@
 	  var height = "".concat(dimensions.y - CARD_TITLE_HEIGHT, "px");
 	  return /*#__PURE__*/React__default.createElement("div", {
 	    style: defineProperty$3({}, "--card-content-height", height),
-	    className: classnames("".concat(iotPrefix$q, "--card--content"), defineProperty$3({}, "".concat(iotPrefix$q, "--card--content--expanded"), isExpanded))
+	    className: classnames("".concat(iotPrefix$r, "--card--content"), defineProperty$3({}, "".concat(iotPrefix$r, "--card--content--expanded"), isExpanded))
 	  }, children);
 	};
@@ -86343,7 +86346,7 @@
 	    style: {
 	      '--card-content-padding': "".concat(CARD_CONTENT_PADDING, "px")
 	    },
-	    className: "".concat(iotPrefix$q, "--card--empty-message-wrapper")
+	    className: "".concat(iotPrefix$r, "--card--empty-message-wrapper")
 	  }, children);
 	};
@@ -86554,17 +86557,17 @@
 	          height: 'calc(100% - 50px)',
 	          width: 'calc(100% - 50px)'
 	        },
-	        className: classnames("".concat(iotPrefix$q, "--card"), className)
+	        className: classnames("".concat(iotPrefix$r, "--card"), className)
 	      }), !hideHeader && /*#__PURE__*/React__default.createElement(CardHeader, null, /*#__PURE__*/React__default.createElement(CardTitle, {
 	        title: title
 	      }, hasTitleTooltip ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.Tooltip, {
 	        ref: titleRef,
 	        showIcon: false,
-	        triggerClassName: "".concat(iotPrefix$q, "--card--title--text"),
+	        triggerClassName: "".concat(iotPrefix$r, "--card--title--text"),
 	        triggerText: title
 	      }, title) : /*#__PURE__*/React__default.createElement("div", {
 	        ref: titleRef,
-	        className: "".concat(iotPrefix$q, "--card--title--text")
+	        className: "".concat(iotPrefix$r, "--card--title--text")
 	      }, title), tooltip && /*#__PURE__*/React__default.createElement(carbonComponentsReact.Tooltip, {
 	        triggerId: "card-tooltip-trigger-".concat(id),
 	        tooltipId: "card-tooltip-".concat(id),
@@ -86577,7 +86580,7 @@
 	        style: {
 	          '--card-content-padding': "".concat(CARD_CONTENT_PADDING, "px")
 	        },
-	        className: "".concat(iotPrefix$q, "--card--skeleton-wrapper")
+	        className: "".concat(iotPrefix$r, "--card--skeleton-wrapper")
 	      }, /*#__PURE__*/React__default.createElement(OptimizedSkeletonText, {
 	        paragraph: true,
 	        lineCount: newSize === CARD_SIZES.SMALL || newSize === CARD_SIZES.SMALLWIDE ? 2 : 3,
@@ -87615,7 +87618,7 @@
 	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$j(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$3(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 iotPrefix$r = settings.iotPrefix;
+	var iotPrefix$s = settings.iotPrefix;
 	var memoizedGenerateSampleValues = memoize_1(generateSampleValues);
 	var BarChartCard = function BarChartCard(_ref) {
@@ -87692,7 +87695,7 @@
 	  return /*#__PURE__*/React__default.createElement(Card, _extends_1({
 	    title: title,
-	    className: "".concat(iotPrefix$r, "--bar-chart-card"),
+	    className: "".concat(iotPrefix$s, "--bar-chart-card"),
 	    size: size,
 	    i18n: i18n,
 	    isExpanded: isExpanded,
@@ -87701,7 +87704,7 @@
 	    isEditable: isEditable,
 	    isLoading: isLoading
 	  }, others), !isAllValuesEmpty ? /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$r, "--bar-chart-container"), (_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$r, "--bar-chart-container--expanded"), isExpanded), defineProperty$3(_classnames, "".concat(iotPrefix$r, "--bar-chart-container--editable"), isEditable), _classnames), className)
+	    className: classnames("".concat(iotPrefix$s, "--bar-chart-container"), (_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$s, "--bar-chart-container--expanded"), isExpanded), defineProperty$3(_classnames, "".concat(iotPrefix$s, "--bar-chart-container--editable"), isEditable), _classnames), className)
 	  }, /*#__PURE__*/React__default.createElement(ChartComponent, {
 	    data: chartData,
 	    options: {
@@ -87748,7 +87751,7 @@
 	    width: "100%",
 	    height: "100%"
 	  }), isExpanded ? /*#__PURE__*/React__default.createElement(StatefulTable, {
-	    className: "".concat(iotPrefix$r, "--bar-chart-card--stateful-table"),
+	    className: "".concat(iotPrefix$s, "--bar-chart-card--stateful-table"),
 	    columns: tableColumns,
 	    data: tableData,
 	    options: {
@@ -88164,7 +88167,7 @@
 	};
 	var TableToolbarSearch$2 = carbonComponentsReact.DataTable.TableToolbarSearch;
-	var iotPrefix$s = settings.iotPrefix;
+	var iotPrefix$t = settings.iotPrefix;
 	var propTypes$u = {
 	  /** Title for the product */
 	  title: PropTypes.string,
@@ -88262,7 +88265,7 @@
 	  var renderGrid = function renderGrid() {
 	    return /*#__PURE__*/React__default.createElement("div", {
-	      className: "".concat(iotPrefix$s, "--tile-catalog--grid-container"),
+	      className: "".concat(iotPrefix$t, "--tile-catalog--grid-container"),
 	      style: {
 	        '--columns': minTileWidth ? // if the user specifies a minTileWidth, we will render all tiles on one responsive page
 	        "repeat(auto-fill, minmax(".concat(minTileWidth, ", 1fr))") : // if the user specifies numColumns we will render exactly that number
@@ -88273,9 +88276,9 @@
 	      /*#__PURE__*/
 	      // limit the amount of SkeletonText to render
 	      React__default.createElement(carbonComponentsReact.SkeletonText, {
-	        key: "".concat(iotPrefix$s, "--tile-catalog--grid-").concat(i)
+	        key: "".concat(iotPrefix$t, "--tile-catalog--grid-").concat(i)
 	      }) : null : minTileWidth || isInCurrentPageRange(i) ? /*#__PURE__*/React__default.createElement("div", {
-	        key: "".concat(iotPrefix$s, "--tile-catalog--grid-").concat(i)
+	        key: "".concat(iotPrefix$t, "--tile-catalog--grid-").concat(i)
 	      }, tile) : null;
 	    }));
 	  }; // only render pagination if there is no minTileWidth and there are more tiles than can fit in
@@ -88286,21 +88289,21 @@
 	  return /*#__PURE__*/React__default.createElement("div", {
 	    className: className
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$s, "--tile-catalog--canvas-container")
+	    className: "".concat(iotPrefix$t, "--tile-catalog--canvas-container")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$s, "--tile-catalog--tile-canvas")
+	    className: "".concat(iotPrefix$t, "--tile-catalog--tile-canvas")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$s, "--tile-catalog--tile-canvas--header")
+	    className: "".concat(iotPrefix$t, "--tile-catalog--tile-canvas--header")
 	  }, title ? /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$s, "--tile-catalog--tile-canvas--header--title")
+	    className: "".concat(iotPrefix$t, "--tile-catalog--tile-canvas--header--title")
 	  }, title) : null, hasSearch ? /*#__PURE__*/React__default.createElement(TableToolbarSearch$2, {
 	    placeHolderText: i18n.searchPlaceHolderText,
 	    onChange: onSearch,
-	    className: "".concat(iotPrefix$s, "--tile-catalog--tile-canvas--header--search")
+	    className: "".concat(iotPrefix$t, "--tile-catalog--tile-canvas--header--search")
 	  }) : null, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$s, "--tile-catalog--tile-canvas--header--select")
+	    className: "".concat(iotPrefix$t, "--tile-catalog--tile-canvas--header--select")
 	  }, hasSort ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.Select, {
-	    id: "".concat(iotPrefix$s, "--tile-catalog--tile-canvas--header--select"),
+	    id: "".concat(iotPrefix$t, "--tile-catalog--tile-canvas--header--select"),
 	    onChange: function onChange(evt) {
 	      return onSort(evt.target.value);
 	    },
@@ -88313,11 +88316,11 @@
 	      value: option.id
 	    });
 	  })) : null)), tiles && tiles.length && !error ? /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$s, "--tile-catalog--tile-canvas--content")
+	    className: "".concat(iotPrefix$t, "--tile-catalog--tile-canvas--content")
 	  }, renderGrid()) : /*#__PURE__*/React__default.createElement(carbonComponentsReact.Tile, {
-	    className: "".concat(iotPrefix$s, "--tile-catalog--empty-tile")
+	    className: "".concat(iotPrefix$t, "--tile-catalog--empty-tile")
 	  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(iconsReact.Bee32, null), /*#__PURE__*/React__default.createElement("p", null, error || i18n.error))), /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$s, "--tile-catalog--tile-canvas--bottom")
+	    className: "".concat(iotPrefix$t, "--tile-catalog--tile-canvas--bottom")
 	  }, tiles && hasPagination ? /*#__PURE__*/React__default.createElement(TilePagination, {
 	    page: currentPage,
 	    numPages: Math.ceil(tiles.length / (numRows * numColumns)),
@@ -88721,7 +88724,7 @@
 	  DOWN: 40
 	};
-	var iotPrefix$t = settings.iotPrefix;
+	var iotPrefix$u = settings.iotPrefix;
 	var TIMEGROUPS = {
 	  HOURS: 'HOURS',
 	  MINUTES: 'MINUTES'
@@ -88944,7 +88947,7 @@
 	  var timeGroupForLabel = currentTimeGroup === 0 ? 'hours' : 'minutes';
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$t, "--time-picker__wrapper"), (_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$t, "--time-picker__wrapper--with-spinner"), spinner), defineProperty$3(_classnames, "".concat(iotPrefix$t, "--time-picker__wrapper--updown"), keyUpOrDownPosition > -1), defineProperty$3(_classnames, "".concat(iotPrefix$t, "--time-picker__wrapper--show-underline"), isInteractingWithSpinner), defineProperty$3(_classnames, "".concat(iotPrefix$t, "--time-picker__wrapper--show-underline-minutes"), currentTimeGroup === 1), _classnames))
+	    className: classnames("".concat(iotPrefix$u, "--time-picker__wrapper"), (_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$u, "--time-picker__wrapper--with-spinner"), spinner), defineProperty$3(_classnames, "".concat(iotPrefix$u, "--time-picker__wrapper--updown"), keyUpOrDownPosition > -1), defineProperty$3(_classnames, "".concat(iotPrefix$u, "--time-picker__wrapper--show-underline"), isInteractingWithSpinner), defineProperty$3(_classnames, "".concat(iotPrefix$u, "--time-picker__wrapper--show-underline-minutes"), currentTimeGroup === 1), _classnames))
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.TimePicker, _extends_1({
 	    ref: timePickerRef,
 	    onClick: onInputClick,
@@ -88955,10 +88958,10 @@
 	    onBlur: onInputBlur,
 	    disabled: disabled
 	  }, others), children, spinner ? /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$t, "--time-picker__controls")
+	    className: "".concat(iotPrefix$u, "--time-picker__controls")
 	  }, /*#__PURE__*/React__default.createElement("button", {
 	    type: "button",
-	    className: "".concat(iotPrefix$t, "--time-picker__controls--btn up-icon"),
+	    className: "".concat(iotPrefix$u, "--time-picker__controls--btn up-icon"),
 	    onClick: function onClick() {
 	      return onArrowClick('up');
 	    },
@@ -88983,7 +88986,7 @@
 	    className: "up-icon"
 	  })), /*#__PURE__*/React__default.createElement("button", {
 	    type: "button",
-	    className: "".concat(iotPrefix$t, "--time-picker__controls--btn down-icon"),
+	    className: "".concat(iotPrefix$u, "--time-picker__controls--btn down-icon"),
 	    onClick: function onClick() {
 	      return onArrowClick('down');
 	    },
@@ -89125,7 +89128,7 @@
 	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$k(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$3(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 iotPrefix$u = settings.iotPrefix;
+	var iotPrefix$v = settings.iotPrefix;
 	var PICKER_KINDS = {
 	  PRESET: 'PRESET',
 	  RELATIVE: 'RELATIVE',
@@ -89408,10 +89411,10 @@
 	        datePickerRef.current.cal.open(); // while waiting for https://github.com/carbon-design-system/carbon/issues/5713
 	        // the only way to display the calendar inline is to reparent its DOM to our component
-	        var wrapper = document.getElementById("".concat(iotPrefix$u, "--date-time-picker__wrapper"));
+	        var wrapper = document.getElementById("".concat(iotPrefix$v, "--date-time-picker__wrapper"));
 	        if (typeof wrapper !== 'undefined' && wrapper !== null) {
-	          var dp = document.getElementById("".concat(iotPrefix$u, "--date-time-picker__wrapper")).getElementsByClassName("".concat(iotPrefix$u, "--date-time-picker__datepicker"))[0];
+	          var dp = document.getElementById("".concat(iotPrefix$v, "--date-time-picker__wrapper")).getElementsByClassName("".concat(iotPrefix$v, "--date-time-picker__datepicker"))[0];
 	          dp.appendChild(datePickerRef.current.cal.calendarContainer);
 	        }
 	      }
@@ -89769,12 +89772,12 @@
 	  var tooltipValue = renderPresetTooltipText ? renderPresetTooltipText(currentValue) : getIntervalValue();
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    id: "".concat(iotPrefix$u, "--date-time-picker__wrapper"),
-	    className: "".concat(iotPrefix$u, "--date-time-picker__wrapper")
+	    id: "".concat(iotPrefix$v, "--date-time-picker__wrapper"),
+	    className: "".concat(iotPrefix$v, "--date-time-picker__wrapper")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__box")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__box")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__field"),
+	    className: "".concat(iotPrefix$v, "--date-time-picker__field"),
 	    role: "button",
 	    onClick: onFieldClick,
 	    onKeyPress: onFieldClick,
@@ -89788,30 +89791,30 @@
 	    triggerClassName: ""
 	  }, humanValue) : null, /*#__PURE__*/React__default.createElement(iconsReact.Calendar16, {
 	    "aria-label": strings.calendarLabel,
-	    className: "".concat(iotPrefix$u, "--date-time-picker__icon")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__icon")
 	  })), /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$u, "--date-time-picker__menu"), defineProperty$3({}, "".concat(iotPrefix$u, "--date-time-picker__menu-expanded"), isExpanded)),
+	    className: classnames("".concat(iotPrefix$v, "--date-time-picker__menu"), defineProperty$3({}, "".concat(iotPrefix$v, "--date-time-picker__menu-expanded"), isExpanded)),
 	    role: "listbox"
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__menu-scroll")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__menu-scroll")
 	  }, !isCustomRange ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.OrderedList, {
 	    nested: false
 	  }, tooltipValue ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.ListItem, {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__listitem ").concat(iotPrefix$u, "--date-time-picker__listitem--current")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__listitem ").concat(iotPrefix$v, "--date-time-picker__listitem--current")
 	  }, tooltipValue) : null, /*#__PURE__*/React__default.createElement(carbonComponentsReact.ListItem, {
 	    onClick: toggleIsCustomRange,
-	    className: "".concat(iotPrefix$u, "--date-time-picker__listitem ").concat(iotPrefix$u, "--date-time-picker__listitem--custom")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__listitem ").concat(iotPrefix$v, "--date-time-picker__listitem--custom")
 	  }, strings.customRangeLinkLabel), presets.map(function (preset, i) {
 	    return /*#__PURE__*/React__default.createElement(carbonComponentsReact.ListItem, {
 	      key: i,
 	      onClick: function onClick() {
 	        return onPresetClick(preset);
 	      },
-	      className: classnames("".concat(iotPrefix$u, "--date-time-picker__listitem ").concat(iotPrefix$u, "--date-time-picker__listitem--preset"), defineProperty$3({}, "".concat(iotPrefix$u, "--date-time-picker__listitem--preset-selected"), selectedPreset === preset.offset))
+	      className: classnames("".concat(iotPrefix$v, "--date-time-picker__listitem ").concat(iotPrefix$v, "--date-time-picker__listitem--preset"), defineProperty$3({}, "".concat(iotPrefix$v, "--date-time-picker__listitem--preset-selected"), selectedPreset === preset.offset))
 	    }, strings.presetLabels[i] || preset.label);
 	  })) : /*#__PURE__*/React__default.createElement("div", null, showRelativeOption ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.FormGroup, {
 	    legendText: strings.customRangeLabel,
-	    className: "".concat(iotPrefix$u, "--date-time-picker__menu-formgroup")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__menu-formgroup")
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.RadioButtonGroup, {
 	    valueSelected: customRangeKind,
 	    onChange: onCustomRangeChange,
@@ -89826,9 +89829,9 @@
 	    labelText: strings.absoluteLabel
 	  }))) : null, showRelativeOption && customRangeKind === PICKER_KINDS.RELATIVE ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(carbonComponentsReact.FormGroup, {
 	    legendText: strings.lastLabel,
-	    className: "".concat(iotPrefix$u, "--date-time-picker__menu-formgroup")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__menu-formgroup")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__fields-wrapper")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__fields-wrapper")
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.NumberInput, {
 	    id: "last-number",
 	    invalidText: strings.invalidNumberLabel,
@@ -89849,9 +89852,9 @@
 	    });
 	  })))), /*#__PURE__*/React__default.createElement(carbonComponentsReact.FormGroup, {
 	    legendText: strings.relativeToLabel,
-	    className: "".concat(iotPrefix$u, "--date-time-picker__menu-formgroup")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__menu-formgroup")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__fields-wrapper")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__fields-wrapper")
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.Select, _extends_1({}, others, {
 	    ref: relativeSelect,
 	    id: "relative-to-when",
@@ -89873,7 +89876,7 @@
 	    spinner: true,
 	    autoComplete: "off"
 	  }) : null))) : /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__datepicker")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__datepicker")
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.DatePicker, {
 	    datePickerType: "range",
 	    dateFormat: "m/d/Y",
@@ -89892,9 +89895,9 @@
 	    value: absoluteValue ? absoluteValue.endDate : ''
 	  }))), hasTimeInput ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.FormGroup, {
 	    legendText: "",
-	    className: "".concat(iotPrefix$u, "--date-time-picker__menu-formgroup")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__menu-formgroup")
 	  }, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__fields-wrapper")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__fields-wrapper")
 	  }, /*#__PURE__*/React__default.createElement(TimePickerSpinner, {
 	    id: "start-time",
 	    labelText: strings.startTimeLabel,
@@ -89910,21 +89913,21 @@
 	    spinner: true,
 	    autoComplete: "off"
 	  }))) : /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__no-formgroup")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__no-formgroup")
 	  })))), /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$u, "--date-time-picker__menu-btn-set")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__menu-btn-set")
 	  }, isCustomRange ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.Button, _extends_1({
 	    kind: "secondary",
-	    className: "".concat(iotPrefix$u, "--date-time-picker__menu-btn ").concat(iotPrefix$u, "--date-time-picker__menu-btn-back")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__menu-btn ").concat(iotPrefix$v, "--date-time-picker__menu-btn-back")
 	  }, others, {
 	    onClick: toggleIsCustomRange
 	  }), strings.backBtnLabel) : /*#__PURE__*/React__default.createElement(carbonComponentsReact.Button, _extends_1({
 	    kind: "secondary",
-	    className: "".concat(iotPrefix$u, "--date-time-picker__menu-btn ").concat(iotPrefix$u, "--date-time-picker__menu-btn-cancel"),
+	    className: "".concat(iotPrefix$v, "--date-time-picker__menu-btn ").concat(iotPrefix$v, "--date-time-picker__menu-btn-cancel"),
 	    onClick: onCancelClick
 	  }, others), strings.cancelBtnLabel), /*#__PURE__*/React__default.createElement(carbonComponentsReact.Button, _extends_1({
 	    kind: "primary",
-	    className: "".concat(iotPrefix$u, "--date-time-picker__menu-btn ").concat(iotPrefix$u, "--date-time-picker__menu-btn-apply")
+	    className: "".concat(iotPrefix$v, "--date-time-picker__menu-btn ").concat(iotPrefix$v, "--date-time-picker__menu-btn-apply")
 	  }, others, {
 	    onClick: onApplyClick
 	  }), strings.applyBtnLabel)))));
@@ -90309,7 +90312,7 @@
 	  icon: PropTypes.elementType
 	});
-	var iotPrefix$v = settings.iotPrefix;
+	var iotPrefix$w = settings.iotPrefix;
 	var propTypes$x = {
 	  isCompact: PropTypes.bool.isRequired,
 	  activeViewEdited: PropTypes.bool.isRequired,
@@ -90340,13 +90343,13 @@
 	  return /*#__PURE__*/React__default.createElement("div", {
 	    "data-testid": testID,
 	    title: "".concat(text).concat(showEdited ? editedPostfix : ''),
-	    className: classnames("".concat(iotPrefix$v, "--view-dropdown__item"), defineProperty$3({}, "".concat(iotPrefix$v, "--view-dropdown__item-link"), customAction))
+	    className: classnames("".concat(iotPrefix$w, "--view-dropdown__item"), defineProperty$3({}, "".concat(iotPrefix$w, "--view-dropdown__item-link"), customAction))
 	  }, isSelected && !isCompact ? /*#__PURE__*/React__default.createElement("span", {
-	    className: "".concat(iotPrefix$v, "--view-dropdown__button-prefix")
+	    className: "".concat(iotPrefix$w, "--view-dropdown__button-prefix")
 	  }, /*#__PURE__*/React__default.createElement(iconsReact.View20, null), /*#__PURE__*/React__default.createElement("span", null, "".concat(i18n.view, ": "))) : null, /*#__PURE__*/React__default.createElement("span", null, text, showEdited ? /*#__PURE__*/React__default.createElement("span", {
-	    className: "".concat(iotPrefix$v, "--view-dropdown__edited-text")
+	    className: "".concat(iotPrefix$w, "--view-dropdown__edited-text")
 	  }, editedPostfix) : null), Icon && !isCompact ? /*#__PURE__*/React__default.createElement(Icon, {
-	    className: classnames(defineProperty$3({}, "".concat(iotPrefix$v, "--view-dropdown__item-link-icon"), customAction))
+	    className: classnames(defineProperty$3({}, "".concat(iotPrefix$w, "--view-dropdown__item-link-icon"), customAction))
 	  }) : null);
 	};
@@ -90417,7 +90420,7 @@
 	  }
 	};
-	var iotPrefix$w = settings.iotPrefix;
+	var iotPrefix$x = settings.iotPrefix;
 	var propTypes$y = {
 	  /** Set to true if the user has modfied filters etc since the view was loaded */
 	  activeViewEdited: PropTypes.bool,
@@ -90545,7 +90548,7 @@
 	      selectedItem: mySelectedItem,
 	      ariaLabel: i18n.ariaLabel,
 	      disabled: disabled,
-	      id: "".concat(iotPrefix$w, "--view-dropdown") // We are using itemToString instead of itemToElement since we need the custom
+	      id: "".concat(iotPrefix$x, "--view-dropdown") // We are using itemToString instead of itemToElement since we need the custom
 	      // rendering to also happen when the item is selected. See closed PR
 	      // https://github.com/carbon-design-system/carbon/pull/5578
 	      ,
@@ -94583,7 +94586,7 @@
 	};
 	var carbonPrefix$2 = settings.prefix,
-	    iotPrefix$x = settings.iotPrefix;
+	    iotPrefix$y = settings.iotPrefix;
 	/** common proptypes associated with child content for a header action */
 	var ChildContentPropTypes = {
@@ -94703,7 +94706,7 @@
 	    href: url,
 	    prefix: prefix
 	  }, appName, subtitle ? /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$x, "--header__subtitle")
+	    className: "".concat(iotPrefix$y, "--header__subtitle")
 	  }, subtitle) : null), /*#__PURE__*/React__default.createElement(HeaderActionGroup, {
 	    actionItems: actionItems
 	  }));
@@ -94914,7 +94917,7 @@
 	  }
 	});
-	var iotPrefix$y = settings.iotPrefix,
+	var iotPrefix$z = settings.iotPrefix,
 	    prefix$B = settings.prefix;
 	var propTypes$I = {
 	  /** Specify whether the side navigation is expanded or collapsed */
@@ -95043,7 +95046,7 @@
 	  };
 	  return /*#__PURE__*/React__default.createElement(SideNav, _extends_1({
-	    className: classnames((_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$y, "--side-nav--expanded"), isSideNavExpanded), defineProperty$3(_classnames, "".concat(prefix$B, "--side-nav--expanded"), isSideNavExpanded), _classnames)),
+	    className: classnames((_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$z, "--side-nav--expanded"), isSideNavExpanded), defineProperty$3(_classnames, "".concat(prefix$B, "--side-nav--expanded"), isSideNavExpanded), _classnames)),
 	    translateById: translateById,
 	    "aria-label": "Side navigation",
 	    defaultExpanded: defaultExpanded
@@ -103218,8 +103221,8 @@
 	var filter_1 = filter$1;
-	var iotPrefix$z = settings.iotPrefix;
-	var dsPrefix = "".concat(iotPrefix$z, "--data-state"); // Testing the tooltip content outside carbon proved difficult.
+	var iotPrefix$A = settings.iotPrefix;
+	var dsPrefix = "".concat(iotPrefix$A, "--data-state"); // Testing the tooltip content outside carbon proved difficult.
 	// So this is exposed for testing purpose.
 	var TooltipContent = function TooltipContent(_ref) {
@@ -103487,7 +103490,7 @@
 	  return data;
 	}
-	var iotPrefix$A = settings.iotPrefix;
+	var iotPrefix$B = settings.iotPrefix;
 	var propTypes$L = {
 	  value: PropTypes.any,
 	  // eslint-disable-line react/forbid-prop-types, react/require-default-props
@@ -103615,7 +103618,7 @@
 	    color: color,
 	    isVertical: isVertical,
 	    allowedToWrap: allowedToWrap,
-	    className: classnames((_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$A, "--value-card__attribute-value--wrappable"), allowedToWrap), defineProperty$3(_classnames, "".concat(iotPrefix$A, "--value-card__attribute-value--wrappable-compact"), wrapCompact), _classnames))
+	    className: classnames((_classnames = {}, defineProperty$3(_classnames, "".concat(iotPrefix$B, "--value-card__attribute-value--wrappable"), allowedToWrap), defineProperty$3(_classnames, "".concat(iotPrefix$B, "--value-card__attribute-value--wrappable-compact"), wrapCompact), _classnames))
 	  }, /*#__PURE__*/React__default.createElement(AttributeValue, {
 	    size: newSize,
 	    title: "".concat(value, " ").concat(unit || ''),
@@ -103756,7 +103759,7 @@
 	  }
 	};
-	var iotPrefix$B = settings.iotPrefix;
+	var iotPrefix$C = settings.iotPrefix;
 	var propTypes$M = {
 	  value: PropTypes.any,
 	  // eslint-disable-line react/forbid-prop-types, react/require-default-props
@@ -103787,7 +103790,7 @@
 	      allowedToWrap = _ref.allowedToWrap,
 	      wrapCompact = _ref.wrapCompact,
 	      attributeCount = _ref.attributeCount;
-	  var bemBase = "".concat(iotPrefix$B, "--value-card__attribute-unit");
+	  var bemBase = "".concat(iotPrefix$C, "--value-card__attribute-unit");
 	  var notAllowedToWrap = typeof value === 'string' && !allowedToWrap && attributeCount === 1;
 	  var unitElement = /*#__PURE__*/React__default.createElement("span", {
 	    style: {
@@ -103895,7 +103898,7 @@
 	  return data;
 	}
-	var iotPrefix$C = settings.iotPrefix;
+	var iotPrefix$D = settings.iotPrefix;
 	var StyledAttribute = styled.div(_templateObject$q(), function (props) {
 	  return props.isMini ? 'center' : 'baseline';
 	}, function (props) {
@@ -104010,7 +104013,7 @@
 	    }
 	  }).concat([null])[0];
 	  var valueColor = matchingThreshold && matchingThreshold.icon === undefined ? matchingThreshold.color : null;
-	  var bemBase = "".concat(iotPrefix$C, "--value-card__attribute");
+	  var bemBase = "".concat(iotPrefix$D, "--value-card__attribute");
 	  var renderThresholdIcon = function renderThresholdIcon(allowedToWrap) {
 	    var _classnames;
@@ -104831,7 +104834,7 @@
 	  });
 	};
-	var iotPrefix$D = settings.iotPrefix;
+	var iotPrefix$E = settings.iotPrefix;
 	var propTypes$O = {
 	  /** severities will determine which default icon to use if another icon name isn't provided */
 	  severity: PropTypes.oneOf([1, 2, 3]),
@@ -104988,10 +104991,10 @@
 	  }
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$D, "--threshold-icon--wrapper"),
+	    className: "".concat(iotPrefix$E, "--threshold-icon--wrapper"),
 	    title: title
 	  }, iconToRender, showSeverityLabel ? /*#__PURE__*/React__default.createElement("span", {
-	    className: "".concat(iotPrefix$D, "--threshold-icon--text")
+	    className: "".concat(iotPrefix$E, "--threshold-icon--text")
 	  }, severityLabel || stringToRender) : null);
 	};
@@ -105131,7 +105134,7 @@
 	  return data;
 	}
-	var iotPrefix$E = settings.iotPrefix;
+	var iotPrefix$F = settings.iotPrefix;
 	var StyledStatefulTable = styled(function (_ref) {
 	  var showHeader = _ref.showHeader,
 	      isExpanded = _ref.isExpanded,
@@ -105400,7 +105403,7 @@
 	  var renderActionCell = function renderActionCell(cellItem) {
 	    var actionList = JSON.parse(cellItem.value);
 	    return actionList && actionList.length === 1 ? /*#__PURE__*/React__default.createElement(typeof actionList[0].icon === 'string' ? icons[actionList[0].icon] : actionList.icon, {
-	      className: "".concat(iotPrefix$E, "--table-card--action-icon"),
+	      className: "".concat(iotPrefix$F, "--table-card--action-icon"),
 	      onClick: function onClick(evt) {
 	        evt.preventDefault();
 	        evt.stopPropagation();
@@ -105411,7 +105414,7 @@
 	      },
 	      'aria-label': actionList[0].label
 	    }) : actionList && actionList.length > 1 ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.OverflowMenu, {
-	      className: "".concat(iotPrefix$E, "--table-card--overflow-menu"),
+	      className: "".concat(iotPrefix$F, "--table-card--overflow-menu"),
 	      renderIcon: function renderIcon() {
 	        return /*#__PURE__*/React__default.createElement(iconsReact.OverflowMenuVertical16, {
 	          fill: "#5a6872",
@@ -105647,11 +105650,11 @@
 	        rowId: dataItem.id,
 	        content: /*#__PURE__*/React__default.createElement("div", {
 	          key: "".concat(dataItem.id, "-expanded"),
-	          className: "".concat(iotPrefix$E, "--table-card--expanded-row-content")
+	          className: "".concat(iotPrefix$F, "--table-card--expanded-row-content")
 	        }, formattedExpandedItems.length ? formattedExpandedItems.map(function (item, index) {
 	          return /*#__PURE__*/React__default.createElement("div", {
 	            key: "".concat(item.id, "-expanded-").concat(index),
-	            className: "".concat(iotPrefix$E, "--table-card--expanded")
+	            className: "".concat(iotPrefix$F, "--table-card--expanded")
 	          }, item.linkTemplate ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
 	            key: "".concat(item.id, "-label"),
 	            style: {
@@ -105671,7 +105674,7 @@
 	          }, item ? dataItem.values[item.id] : null)));
 	        }) : /*#__PURE__*/React__default.createElement("div", {
 	          key: "".concat(dataItem.id, "-expanded"),
-	          className: "".concat(iotPrefix$E, "--table-card--expanded")
+	          className: "".concat(iotPrefix$F, "--table-card--expanded")
 	        }, ' ', /*#__PURE__*/React__default.createElement("p", {
 	          key: "".concat(dataItem.id, "-label")
 	        }, "--")))
@@ -105823,7 +105826,7 @@
 	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$H(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$3(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; }
-	var iotPrefix$F = settings.iotPrefix;
+	var iotPrefix$G = settings.iotPrefix;
 	var HotspotContentPropTypes = {
 	  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 	  description: PropTypes.string,
@@ -105875,11 +105878,11 @@
 	      locale = _ref.locale,
 	      renderIconByName = _ref.renderIconByName;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$F, "--hotspot-content")
+	    className: "".concat(iotPrefix$G, "--hotspot-content")
 	  }, typeof title === 'string' ? /*#__PURE__*/React__default.createElement("h4", {
 	    title: title
 	  }, title) : /*#__PURE__*/React__default.isValidElement(title) ? title : null, description && /*#__PURE__*/React__default.createElement("p", {
-	    className: "".concat(iotPrefix$F, "--hotspot-content-description")
+	    className: "".concat(iotPrefix$G, "--hotspot-content-description")
 	  }, description), attributes.map(function (_ref2) {
 	    var thresholds = _ref2.thresholds,
 	        dataSourceId = _ref2.dataSourceId,
@@ -105916,23 +105919,23 @@
 	    }) : null;
 	    return /*#__PURE__*/React__default.createElement("div", {
 	      key: "attribute-".concat(dataSourceId),
-	      className: "".concat(iotPrefix$F, "--hotspot-content-attribute")
+	      className: "".concat(iotPrefix$G, "--hotspot-content-attribute")
 	    }, /*#__PURE__*/React__default.createElement("div", {
-	      className: "".concat(iotPrefix$F, "--hotspot-content-label-section")
+	      className: "".concat(iotPrefix$G, "--hotspot-content-label-section")
 	    }, /*#__PURE__*/React__default.createElement("span", {
-	      className: "".concat(iotPrefix$F, "--hotspot-content-label")
+	      className: "".concat(iotPrefix$G, "--hotspot-content-label")
 	    }, label, ":")), /*#__PURE__*/React__default.createElement("div", {
-	      className: "".concat(iotPrefix$F, "--hotspot-content-threshold-section")
+	      className: "".concat(iotPrefix$G, "--hotspot-content-threshold-section")
 	    }, thresholdIcon, /*#__PURE__*/React__default.createElement("span", {
 	      style: {
 	        '--threshold-color': !thresholdIcon && thresholdMatch ? thresholdMatch.color : 'inherit ',
 	        '--threshold-padding': thresholdIcon ? '0.25rem' : '0rem'
 	      },
-	      className: "".concat(iotPrefix$F, "--hotspot-content-threshold")
+	      className: "".concat(iotPrefix$G, "--hotspot-content-threshold")
 	    }, typeof value === 'number' ? formatNumberWithPrecision(value, !isNil_1(precision) ? precision : Math.abs(value) < 1 ? value === 0 ? 0 : 3 // for small decimals give 3 spots
 	    : 1, // otherwise 1 spot if precision isn't set
 	    locale) : value, unit && value !== '--' && /*#__PURE__*/React__default.createElement("span", {
-	      className: "".concat(iotPrefix$F, "--hotspot-content-unit")
+	      className: "".concat(iotPrefix$G, "--hotspot-content-unit")
 	    }, unit))));
 	  }));
 	};
@@ -117584,7 +117587,7 @@
 	  return data;
 	}
-	var iotPrefix$G = settings.iotPrefix;
+	var iotPrefix$H = settings.iotPrefix;
 	var TimeSeriesDatasetPropTypes = PropTypes.shape({
 	  label: PropTypes.string.isRequired,
@@ -118016,7 +118019,7 @@
 	    width: "100%",
 	    height: "100%"
 	  })), isExpanded ? /*#__PURE__*/React__default.createElement(StatefulTable, {
-	    className: "".concat(iotPrefix$G, "--time-series-card--stateful-table"),
+	    className: "".concat(iotPrefix$H, "--time-series-card--stateful-table"),
 	    columns: tableColumns,
 	    data: tableData,
 	    isExpanded: isExpanded,
@@ -118472,7 +118475,7 @@
 	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$N(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$3(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 iotPrefix$H = settings.iotPrefix; // r value of the circle in SVG
+	var iotPrefix$I = settings.iotPrefix; // r value of the circle in SVG
 	var radius = 36; // radius doubled plus stroke
@@ -118560,14 +118563,14 @@
 	  };
 	  return /*#__PURE__*/React__default.createElement(Card, _extends_1({
 	    id: id,
-	    className: "".concat(iotPrefix$H, "--gauge-card"),
+	    className: "".concat(iotPrefix$I, "--gauge-card"),
 	    title: title,
 	    size: size
 	  }, others, {
 	    tooltip: tooltip,
 	    isLoading: isLoading
 	  }), /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames("".concat(iotPrefix$H, "--gauge-container"), className),
+	    className: classnames("".concat(iotPrefix$I, "--gauge-container"), className),
 	    style: myStyles
 	  }, dataState && /*#__PURE__*/React__default.createElement(DataStateRenderer, {
 	    dataState: dataState,
@@ -118581,10 +118584,10 @@
 	    var valueLength = values[gauge.dataSourceId] && values[gauge.dataSourceId].toString().length;
 	    return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
-	      key: "".concat(iotPrefix$H, "-gauge-").concat(i)
+	      key: "".concat(iotPrefix$I, "-gauge-").concat(i)
 	    }, /*#__PURE__*/React__default.createElement("svg", {
 	      "aria-labelledby": "gauge-label",
-	      className: classnames("".concat(iotPrefix$H, "--gauge"), defineProperty$3({}, "".concat(iotPrefix$H, "--gauge__loaded"), loadedState), className),
+	      className: classnames("".concat(iotPrefix$I, "--gauge"), defineProperty$3({}, "".concat(iotPrefix$I, "--gauge__loaded"), loadedState), className),
 	      percent: "0",
 	      style: {
 	        '--gauge-value': values[gauge.dataSourceId] || 0,
@@ -118597,23 +118600,23 @@
 	        '--gauge-trend-color': gauge.trend.color
 	      }
 	    }, /*#__PURE__*/React__default.createElement("circle", {
-	      className: "".concat(iotPrefix$H, "--gauge-bg"),
+	      className: "".concat(iotPrefix$I, "--gauge-bg"),
 	      cx: gaugeSize / 2,
 	      cy: gaugeSize / 2,
 	      r: radius
 	    }), /*#__PURE__*/React__default.createElement("circle", {
-	      className: "".concat(iotPrefix$H, "--gauge-fg"),
+	      className: "".concat(iotPrefix$I, "--gauge-fg"),
 	      cx: gaugeSize / 2,
 	      cy: gaugeSize / 2,
 	      r: radius
 	    }), /*#__PURE__*/React__default.createElement("text", {
 	      id: "gauge-label",
-	      className: classnames("".concat(iotPrefix$H, "--gauge-value"), "".concat(iotPrefix$H, "--gauge-value__centered"), defineProperty$3({}, "".concat(iotPrefix$H, "--gauge-value-sm"), valueLength === 4), defineProperty$3({}, "".concat(iotPrefix$H, "--gauge-value-md"), valueLength === 3), defineProperty$3({}, "".concat(iotPrefix$H, "--gauge-value-lg"), valueLength <= 2)),
+	      className: classnames("".concat(iotPrefix$I, "--gauge-value"), "".concat(iotPrefix$I, "--gauge-value__centered"), defineProperty$3({}, "".concat(iotPrefix$I, "--gauge-value-sm"), valueLength === 4), defineProperty$3({}, "".concat(iotPrefix$I, "--gauge-value-md"), valueLength === 3), defineProperty$3({}, "".concat(iotPrefix$I, "--gauge-value-lg"), valueLength <= 2)),
 	      x: gaugeSize / 2,
 	      y: "33",
 	      textAnchor: "middle"
 	    }, /*#__PURE__*/React__default.createElement("tspan", null, values[gauge.dataSourceId]), /*#__PURE__*/React__default.createElement("tspan", null, gauge.units))), values[gauge.trend.dataSourceId] && /*#__PURE__*/React__default.createElement("div", {
-	      className: classnames("".concat(iotPrefix$H, "--gauge-trend"), (_classnames5 = {}, defineProperty$3(_classnames5, "".concat(iotPrefix$H, "--gauge-trend__up"), gauge.trend.trend === 'up'), defineProperty$3(_classnames5, "".concat(iotPrefix$H, "--gauge-trend__down"), gauge.trend.trend === 'down'), _classnames5)),
+	      className: classnames("".concat(iotPrefix$I, "--gauge-trend"), (_classnames5 = {}, defineProperty$3(_classnames5, "".concat(iotPrefix$I, "--gauge-trend__up"), gauge.trend.trend === 'up'), defineProperty$3(_classnames5, "".concat(iotPrefix$I, "--gauge-trend__down"), gauge.trend.trend === 'down'), _classnames5)),
 	      key: "".concat(gauge.trend.dataSourceId, "-").concat(i)
 	    }, /*#__PURE__*/React__default.createElement("p", {
 	      style: {
@@ -119867,7 +119870,7 @@
 	  "composes": ["lodash/omit"]
 	};
-	var iotPrefix$I = settings.iotPrefix;
+	var iotPrefix$J = settings.iotPrefix;
 	var childrenPropType = PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]);
 	var PageWizardPropTypes = {
 	  children: childrenPropType,
@@ -119993,11 +119996,11 @@
 	    beforeFooterContent: beforeFooterContent
 	  });
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: classnames(isProgressIndicatorVertical ? "".concat(iotPrefix$I, "--page-wizard") : null, className, hasStickyFooter ? "".concat(iotPrefix$I, "--page-wizard__sticky") : null)
+	    className: classnames(isProgressIndicatorVertical ? "".concat(iotPrefix$J, "--page-wizard") : null, className, hasStickyFooter ? "".concat(iotPrefix$J, "--page-wizard__sticky") : null)
 	  }, steps.length > 1 ? /*#__PURE__*/React__default.createElement("div", {
-	    className: isProgressIndicatorVertical ? "".concat(iotPrefix$I, "--page-wizard--progress--vertical") : "".concat(iotPrefix$I, "--page-wizard--progress--horizontal")
+	    className: isProgressIndicatorVertical ? "".concat(iotPrefix$J, "--page-wizard--progress--vertical") : "".concat(iotPrefix$J, "--page-wizard--progress--horizontal")
 	  }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.ProgressIndicator, {
-	    className: classnames(className, "".concat(iotPrefix$I, "--progress-indicator")),
+	    className: classnames(className, "".concat(iotPrefix$J, "--progress-indicator")),
 	    currentIndex: currentStepIdx,
 	    onChange: function onChange(idx) {
 	      return setStep(steps[idx].id);
@@ -120011,7 +120014,7 @@
 	      secondaryLabel: step.secondaryLabel
 	    });
 	  }))) : null, /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$I, "--page-wizard--content")
+	    className: "".concat(iotPrefix$J, "--page-wizard--content")
 	  }, currentStepToRender));
 	};
@@ -120206,7 +120209,7 @@
 	  }
 	};
-	var iotPrefix$J = settings.iotPrefix;
+	var iotPrefix$K = settings.iotPrefix;
 	var PageWizardStepPropTypes = {
 	  /** Step identifier for controlling which step is active */
 	  id: PropTypes.string.isRequired,
@@ -120298,7 +120301,7 @@
 	      onSubmit = _ref.onSubmit,
 	      beforeFooterContent = _ref.beforeFooterContent;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$J, "--page-wizard--step"),
+	    className: "".concat(iotPrefix$K, "--page-wizard--step"),
 	    id: id
 	  }, error ? /*#__PURE__*/React__default.createElement(carbonComponentsReact.InlineNotification, {
 	    lowContrast: true,
@@ -120308,7 +120311,7 @@
 	    onCloseButtonClick: onClearError,
 	    iconDescription: i18n.close
 	  }) : null, children, /*#__PURE__*/React__default.createElement("div", {
-	    className: hasStickyFooter ? "".concat(iotPrefix$J, "--page-wizard--content--actions--sticky") : "".concat(iotPrefix$J, "--page-wizard--content--actions")
+	    className: hasStickyFooter ? "".concat(iotPrefix$K, "--page-wizard--content--actions--sticky") : "".concat(iotPrefix$K, "--page-wizard--content--actions")
 	  }, beforeFooterContent, !hasPrev ? /*#__PURE__*/React__default.createElement(Button, {
 	    onClick: onClose,
 	    kind: "secondary"
@@ -120509,12 +120512,12 @@
 	  }
 	};
-	var iotPrefix$K = settings.iotPrefix;
+	var iotPrefix$L = settings.iotPrefix;
 	var PageWizardStepContent = function PageWizardStepContent(_ref) {
 	  var children = _ref.children;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$K, "--page-wizard--step--content")
+	    className: "".concat(iotPrefix$L, "--page-wizard--step--content")
 	  }, children);
 	};
@@ -120544,12 +120547,12 @@
 	  }
 	};
-	var iotPrefix$L = settings.iotPrefix;
+	var iotPrefix$M = settings.iotPrefix;
 	var PageWizardStepDescription = function PageWizardStepDescription(_ref) {
 	  var children = _ref.children;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$L, "--page-wizard--step--description")
+	    className: "".concat(iotPrefix$M, "--page-wizard--step--description")
 	  }, children);
 	};
@@ -120579,12 +120582,12 @@
 	  }
 	};
-	var iotPrefix$M = settings.iotPrefix;
+	var iotPrefix$N = settings.iotPrefix;
 	var PageWizardStepExtraContent = function PageWizardStepExtraContent(_ref) {
 	  var children = _ref.children;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$M, "--page-wizard--step--extra-content")
+	    className: "".concat(iotPrefix$N, "--page-wizard--step--extra-content")
 	  }, children);
 	};
@@ -120614,12 +120617,12 @@
 	  }
 	};
-	var iotPrefix$N = settings.iotPrefix;
+	var iotPrefix$O = settings.iotPrefix;
 	var PageWizardStepTitle = function PageWizardStepTitle(_ref) {
 	  var children = _ref.children;
 	  return /*#__PURE__*/React__default.createElement("div", {
-	    className: "".concat(iotPrefix$N, "--page-wizard--step--title")
+	    className: "".concat(iotPrefix$O, "--page-wizard--step--title")
 	  }, children);
 	};
@@ -122317,7 +122320,7 @@
 	  }
 	};
-	var iotPrefix$O = settings.iotPrefix;
+	var iotPrefix$P = settings.iotPrefix;
 	var ICON_SWITCH_SIZES = {
 	  small: 'small',
 	  default: 'default',
@@ -122356,7 +122359,7 @@
 	    }
 	  };
-	  var classes = classnames(className, "".concat(iotPrefix$O, "--icon-switch"), "".concat(iotPrefix$O, "--icon-switch--").concat(size), defineProperty$3({}, "".concat(iotPrefix$O, "--icon-switch--unselected"), !selected));
+	  var classes = classnames(className, "".concat(iotPrefix$P, "--icon-switch"), "".concat(iotPrefix$P, "--icon-switch--").concat(size), defineProperty$3({}, "".concat(iotPrefix$P, "--icon-switch--unselected"), !selected));
 	  var commonProps = {
 	    onClick: handleClick,
 	    onKeyDown: handleKeyDown,
@@ -122587,6 +122590,3093 @@
 	  "composes": ["carbon-components-react"]
 	};
+	var getOwnPropertyDescriptor$5 = objectGetOwnPropertyDescriptor.f;
+	var nativeStartsWith = ''.startsWith;
+	var min$9 = Math.min;
+	var CORRECT_IS_REGEXP_LOGIC = correctIsRegexpLogic('startsWith');
+	// https://github.com/zloirock/core-js/pull/702
+	var MDN_POLYFILL_BUG = !CORRECT_IS_REGEXP_LOGIC && !!function () {
+	  var descriptor = getOwnPropertyDescriptor$5(String.prototype, 'startsWith');
+	  return descriptor && !descriptor.writable;
+	}();
+	// `String.prototype.startsWith` method
+	// https://tc39.github.io/ecma262/#sec-string.prototype.startswith
+	_export({ target: 'String', proto: true, forced: !MDN_POLYFILL_BUG && !CORRECT_IS_REGEXP_LOGIC }, {
+	  startsWith: function startsWith(searchString /* , position = 0 */) {
+	    var that = String(requireObjectCoercible(this));
+	    notARegexp(searchString);
+	    var index = toLength(min$9(arguments.length > 1 ? arguments[1] : undefined, that.length));
+	    var search = String(searchString);
+	    return nativeStartsWith
+	      ? nativeStartsWith.call(that, search, index)
+	      : that.slice(index, index + search.length) === search;
+	  }
+	});
+	// istanbul ignore next
+	var statusDiv = typeof document === 'undefined' ? null : document.getElementById('a11y-status-message');
+	var statuses = [];
+	function setStatus(status) {
+	  var isSameAsLast = statuses[statuses.length - 1] === status;
+	  if (isSameAsLast) {
+	    statuses = [].concat(statuses, [status]);
+	  } else {
+	    statuses = [status];
+	  }
+	  var div = getStatusDiv();
+	  // Remove previous children
+	  while (div.lastChild) {
+	    div.removeChild(div.firstChild);
+	  }
+	  statuses.filter(Boolean).forEach(function (statusItem, index) {
+	    div.appendChild(getStatusChildDiv(statusItem, index));
+	  });
+	}
+	function getStatusChildDiv(status, index) {
+	  var display = index === statuses.length - 1 ? 'block' : 'none';
+	  var childDiv = document.createElement('div');
+	  childDiv.style.display = display;
+	  childDiv.textContent = status;
+	  return childDiv;
+	}
+	function getStatusDiv() {
+	  if (statusDiv) {
+	    return statusDiv;
+	  }
+	  statusDiv = document.createElement('div');
+	  statusDiv.setAttribute('id', 'a11y-status-message');
+	  statusDiv.setAttribute('role', 'status');
+	  statusDiv.setAttribute('aria-live', 'assertive');
+	  statusDiv.setAttribute('aria-relevant', 'additions text');
+	  Object.assign(statusDiv.style, {
+	    border: '0',
+	    clip: 'rect(0 0 0 0)',
+	    height: '1px',
+	    margin: '-1px',
+	    overflow: 'hidden',
+	    padding: '0',
+	    position: 'absolute',
+	    width: '1px'
+	  });
+	  document.body.appendChild(statusDiv);
+	  return statusDiv;
+	}
+	var idCounter$1 = 0;
+	/**
+	 * Accepts a parameter and returns it if it's a function
+	 * or a noop function if it's not. This allows us to
+	 * accept a callback, but not worry about it if it's not
+	 * passed.
+	 * @param {Function} cb the callback
+	 * @return {Function} a function
+	 */
+	function cbToCb(cb) {
+	  return typeof cb === 'function' ? cb : noop$4;
+	}
+	function noop$4() {}
+	function findParent(finder, node, rootNode) {
+	  if (node !== null && node !== rootNode.parentNode) {
+	    if (finder(node)) {
+	      if (node === document.body && node.scrollTop === 0) {
+	        // in chrome body.scrollTop always return 0
+	        return document.documentElement;
+	      }
+	      return node;
+	    } else {
+	      return findParent(finder, node.parentNode, rootNode);
+	    }
+	  } else {
+	    return null;
+	  }
+	}
+	/**
+	 * Get the closest element that scrolls
+	 * @param {HTMLElement} node - the child element to start searching for scroll parent at
+	 * @param {HTMLElement} rootNode - the root element of the component
+	 * @return {HTMLElement} the closest parentNode that scrolls
+	 */
+	var getClosestScrollParent = findParent.bind(null, function (node) {
+	  return node.scrollHeight > node.clientHeight;
+	});
+	/**
+	 * Scroll node into view if necessary
+	 * @param {HTMLElement} node - the element that should scroll into view
+	 * @param {HTMLElement} rootNode - the root element of the component
+	 * @param {Boolean} alignToTop - align element to the top of the visible area of the scrollable ancestor
+	 */
+	// eslint-disable-next-line complexity
+	function scrollIntoView(node, rootNode) {
+	  var scrollParent = getClosestScrollParent(node, rootNode);
+	  if (scrollParent === null) {
+	    return;
+	  }
+	  var scrollParentStyles = getComputedStyle(scrollParent);
+	  var scrollParentRect = scrollParent.getBoundingClientRect();
+	  var scrollParentBorderTopWidth = parseInt(scrollParentStyles.borderTopWidth, 10);
+	  var scrollParentBorderBottomWidth = parseInt(scrollParentStyles.borderBottomWidth, 10);
+	  var bordersWidth = scrollParentBorderTopWidth + scrollParentBorderBottomWidth;
+	  var scrollParentTop = scrollParentRect.top + scrollParentBorderTopWidth;
+	  var nodeRect = node.getBoundingClientRect();
+	  if (nodeRect.top < 0 && scrollParentRect.top < 0) {
+	    scrollParent.scrollTop += nodeRect.top;
+	    return;
+	  }
+	  if (nodeRect.top < 0) {
+	    // the item is above the viewport and the parent is not above the viewport
+	    scrollParent.scrollTop += nodeRect.top - scrollParentTop;
+	    return;
+	  }
+	  if (nodeRect.top > 0 && scrollParentRect.top < 0) {
+	    if (scrollParentRect.bottom > 0 && nodeRect.bottom + bordersWidth > scrollParentRect.bottom) {
+	      // the item is below scrollable area
+	      scrollParent.scrollTop += nodeRect.bottom - scrollParentRect.bottom + bordersWidth;
+	    }
+	    // item and parent top are on different sides of view top border (do nothing)
+	    return;
+	  }
+	  var nodeOffsetTop = nodeRect.top + scrollParent.scrollTop;
+	  var nodeTop = nodeOffsetTop - scrollParentTop;
+	  if (nodeTop < scrollParent.scrollTop) {
+	    // the item is above the scrollable area
+	    scrollParent.scrollTop = nodeTop;
+	  } else if (nodeTop + nodeRect.height + bordersWidth > scrollParent.scrollTop + scrollParentRect.height) {
+	    // the item is below the scrollable area
+	    scrollParent.scrollTop = nodeTop + nodeRect.height - scrollParentRect.height + bordersWidth;
+	  }
+	  // the item is within the scrollable area (do nothing)
+	}
+	/**
+	 * @param {HTMLElement} parent the parent node
+	 * @param {HTMLElement} child the child node
+	 * @return {Boolean} whether the parent is the child or the child is in the parent
+	 */
+	function isOrContainsNode(parent, child) {
+	  return parent === child || parent.contains(child);
+	}
+	/**
+	 * Simple debounce implementation. Will call the given
+	 * function once after the time given has passed since
+	 * it was last called.
+	 * @param {Function} fn the function to call after the time
+	 * @param {Number} time the time to wait
+	 * @return {Function} the debounced function
+	 */
+	function debounce$5(fn, time) {
+	  var timeoutId = void 0;
+	  return wrapper;
+	  function wrapper() {
+	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+	      args[_key] = arguments[_key];
+	    }
+	    if (timeoutId) {
+	      clearTimeout(timeoutId);
+	    }
+	    timeoutId = setTimeout(function () {
+	      timeoutId = null;
+	      fn.apply(undefined, args);
+	    }, time);
+	  }
+	}
+	/**
+	 * This is intended to be used to compose event handlers.
+	 * They are executed in order until one of them sets
+	 * `event.preventDownshiftDefault = true`.
+	 * @param {Function} fns the event handler functions
+	 * @return {Function} the event handler to add to an element
+	 */
+	function composeEventHandlers() {
+	  for (var _len2 = arguments.length, fns = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+	    fns[_key2] = arguments[_key2];
+	  }
+	  return function (event) {
+	    for (var _len3 = arguments.length, args = Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+	      args[_key3 - 1] = arguments[_key3];
+	    }
+	    return fns.some(function (fn) {
+	      fn && fn.apply(undefined, [event].concat(args));
+	      // TODO: remove everything after the || in the next breaking change
+	      return event.preventDownshiftDefault || event.defaultPrevented;
+	    });
+	  };
+	}
+	/**
+	 * This generates a unique ID for an instance of Downshift
+	 * @return {String} the unique ID
+	 */
+	function generateId() {
+	  return String(idCounter$1++);
+	}
+	/**
+	 * Resets idCounter to 0. Used for SSR.
+	 */
+	function resetIdCounter() {
+	  idCounter$1 = 0;
+	}
+	/**
+	 * Returns the first argument that is not undefined
+	 * @param {...*} args the arguments
+	 * @return {*} the defined value
+	 */
+	function firstDefined() {
+	  for (var _len4 = arguments.length, args = Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+	    args[_key4] = arguments[_key4];
+	  }
+	  return args.find(function (a) {
+	    return typeof a !== 'undefined';
+	  });
+	}
+	// eslint-disable-next-line complexity
+	function getA11yStatusMessage(_ref) {
+	  var isOpen = _ref.isOpen,
+	      highlightedItem = _ref.highlightedItem,
+	      selectedItem = _ref.selectedItem,
+	      resultCount = _ref.resultCount,
+	      previousResultCount = _ref.previousResultCount,
+	      itemToString = _ref.itemToString;
+	  if (!isOpen) {
+	    if (selectedItem) {
+	      return itemToString(selectedItem);
+	    } else {
+	      return '';
+	    }
+	  }
+	  if (!resultCount) {
+	    return 'No results.';
+	  } else if (!highlightedItem || resultCount !== previousResultCount) {
+	    return resultCount + ' ' + (resultCount === 1 ? 'result is' : 'results are') + ' available, use up and down arrow keys to navigate.';
+	  }
+	  return itemToString(highlightedItem);
+	}
+	/**
+	 * Takes an argument and if it's an array, returns the first item in the array
+	 * otherwise returns the argument
+	 * @param {*} arg the maybe-array
+	 * @param {*} defaultValue the value if arg is falsey not defined
+	 * @return {*} the arg or it's first item
+	 */
+	function unwrapArray(arg, defaultValue) {
+	  arg = Array.isArray(arg) ? /* istanbul ignore next (preact) */arg[0] : arg;
+	  if (!arg && defaultValue) {
+	    return defaultValue;
+	  } else {
+	    return arg;
+	  }
+	}
+	/**
+	 * @param {Object} element (P)react element
+	 * @return {Boolean} whether it's a DOM element
+	 */
+	function isDOMElement(element) {
+	  /* istanbul ignore if */
+	  if (element.nodeName) {
+	    // then this is preact
+	    return typeof element.nodeName === 'string';
+	  } else {
+	    // then we assume this is react
+	    return typeof element.type === 'string';
+	  }
+	}
+	/**
+	 * @param {Object} element (P)react element
+	 * @return {Object} the props
+	 */
+	function getElementProps(element) {
+	  // props for react, attributes for preact
+	  return element.props || /* istanbul ignore next (preact) */element.attributes;
+	}
+	/**
+	 * Throws a helpful error message for required properties. Useful
+	 * to be used as a default in destructuring or object params.
+	 * @param {String} fnName the function name
+	 * @param {String} propName the prop name
+	 */
+	function requiredProp(fnName, propName) {
+	  throw new Error('The property "' + propName + '" is required in "' + fnName + '"');
+	}
+	var stateKeys = ['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'];
+	/**
+	 * @param {Object} state The state object
+	 * @return {Object} State that is relevant to downshift
+	 */
+	function pickState() {
+	  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	  var result = {};
+	  stateKeys.forEach(function (k) {
+	    if (state.hasOwnProperty(k)) {
+	      result[k] = state[k];
+	    }
+	  });
+	  return result;
+	}
+	/**
+	 * Normalizes the 'key' property of a KeyboardEvent in IE/Edge
+	 * @param {Object} event a KeyboardEvent object
+	 * @return {String} keyboard key
+	 */
+	function normalizeArrowKey(event) {
+	  var key = event.key,
+	      keyCode = event.keyCode;
+	  /* istanbul ignore next (ie) */
+	  if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) {
+	    return 'Arrow' + key;
+	  }
+	  return key;
+	}
+	/**
+	 * Simple check if the value passed is object literal
+	 * @param {*} obj any things
+	 * @return {Boolean} whether it's object literal
+	 */
+	function isPlainObject$3(obj) {
+	  return Object.prototype.toString.call(obj) === '[object Object]';
+	}
+	var classCallCheck$2 = function (instance, Constructor) {
+	  if (!(instance instanceof Constructor)) {
+	    throw new TypeError("Cannot call a class as a function");
+	  }
+	};
+	var _extends$k = Object.assign || function (target) {
+	  for (var i = 1; i < arguments.length; i++) {
+	    var source = arguments[i];
+	    for (var key in source) {
+	      if (Object.prototype.hasOwnProperty.call(source, key)) {
+	        target[key] = source[key];
+	      }
+	    }
+	  }
+	  return target;
+	};
+	var inherits$2 = function (subClass, superClass) {
+	  if (typeof superClass !== "function" && superClass !== null) {
+	    throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
+	  }
+	  subClass.prototype = Object.create(superClass && superClass.prototype, {
+	    constructor: {
+	      value: subClass,
+	      enumerable: false,
+	      writable: true,
+	      configurable: true
+	    }
+	  });
+	  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
+	};
+	var objectWithoutProperties$2 = function (obj, keys) {
+	  var target = {};
+	  for (var i in obj) {
+	    if (keys.indexOf(i) >= 0) continue;
+	    if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
+	    target[i] = obj[i];
+	  }
+	  return target;
+	};
+	var possibleConstructorReturn$2 = function (self, call) {
+	  if (!self) {
+	    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+	  }
+	  return call && (typeof call === "object" || typeof call === "function") ? call : self;
+	};
+	/* eslint camelcase:0 */
+	var Downshift = function (_Component) {
+	  inherits$2(Downshift, _Component);
+	  function Downshift() {
+	    classCallCheck$2(this, Downshift);
+	    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+	      args[_key] = arguments[_key];
+	    }
+	    var _this = possibleConstructorReturn$2(this, _Component.call.apply(_Component, [this].concat(args)));
+	    _initialiseProps$1.call(_this);
+	    var state = _this.getState({
+	      highlightedIndex: _this.props.defaultHighlightedIndex,
+	      isOpen: _this.props.defaultIsOpen,
+	      inputValue: _this.props.defaultInputValue,
+	      selectedItem: _this.props.defaultSelectedItem
+	    });
+	    if (state.selectedItem != null) {
+	      state.inputValue = _this.props.itemToString(state.selectedItem);
+	    }
+	    _this.state = state;
+	    _this.id = _this.props.id || 'downshift-' + generateId();
+	    return _this;
+	  }
+	  // itemCount can be changed asynchronously
+	  // from within downshift (so it can't come from a prop)
+	  // this is why we store it as an instance and use
+	  // getItemCount rather than just use items.length
+	  // (to support windowing + async)
+	  /**
+	   * Gets the state based on internal state or props
+	   * If a state value is passed via props, then that
+	   * is the value given, otherwise it's retrieved from
+	   * stateToMerge
+	   *
+	   * This will perform a shallow merge of the given state object
+	   * with the state coming from props
+	   * (for the controlled component scenario)
+	   * This is used in state updater functions so they're referencing
+	   * the right state regardless of where it comes from.
+	   *
+	   * @param {Object} stateToMerge defaults to this.state
+	   * @return {Object} the state
+	   */
+	  Downshift.prototype.getState = function getState() {
+	    var _this2 = this;
+	    var stateToMerge = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
+	    return Object.keys(stateToMerge).reduce(function (state, key) {
+	      state[key] = _this2.isControlledProp(key) ? _this2.props[key] : stateToMerge[key];
+	      return state;
+	    }, {});
+	  };
+	  /**
+	   * This determines whether a prop is a "controlled prop" meaning it is
+	   * state which is controlled by the outside of this component rather
+	   * than within this component.
+	   * @param {String} key the key to check
+	   * @return {Boolean} whether it is a controlled controlled prop
+	   */
+	  Downshift.prototype.isControlledProp = function isControlledProp(key) {
+	    return this.props[key] !== undefined;
+	  };
+	  Downshift.prototype.getItemCount = function getItemCount() {
+	    // things read better this way. They're in priority order:
+	    // 1. `this.itemCount`
+	    // 2. `this.props.itemCount`
+	    // 3. `this.items.length`
+	    /* eslint-disable no-negated-condition */
+	    if (this.itemCount != null) {
+	      return this.itemCount;
+	    } else if (this.props.itemCount !== undefined) {
+	      return this.props.itemCount;
+	    } else {
+	      return this.items.length;
+	    }
+	    /* eslint-enable no-negated-condition */
+	  };
+	  Downshift.prototype.getItemNodeFromIndex = function getItemNodeFromIndex(index) {
+	    return this.props.environment.document.getElementById(this.getItemId(index));
+	  };
+	  Downshift.prototype.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() {
+	    /* istanbul ignore else (react-native) */
+	    {
+	      var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
+	      scrollIntoView(node, this._rootNode);
+	    }
+	  };
+	  Downshift.prototype.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) {
+	    if (this.getState().isOpen) {
+	      this.changeHighlightedIndex(amount, otherStateToSet);
+	    } else {
+	      this.setHighlightedIndex(undefined, _extends$k({ isOpen: true }, otherStateToSet));
+	    }
+	  };
+	  // eslint-disable-next-line complexity
+	  Downshift.prototype.changeHighlightedIndex = function changeHighlightedIndex(moveAmount, otherStateToSet) {
+	    var itemsLastIndex = this.getItemCount() - 1;
+	    if (itemsLastIndex < 0) {
+	      return;
+	    }
+	    var _getState = this.getState(),
+	        highlightedIndex = _getState.highlightedIndex;
+	    var baseIndex = highlightedIndex;
+	    if (baseIndex === null) {
+	      baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1;
+	    }
+	    var newIndex = baseIndex + moveAmount;
+	    if (newIndex < 0) {
+	      newIndex = itemsLastIndex;
+	    } else if (newIndex > itemsLastIndex) {
+	      newIndex = 0;
+	    }
+	    this.setHighlightedIndex(newIndex, otherStateToSet);
+	  };
+	  // any piece of our state can live in two places:
+	  // 1. Uncontrolled: it's internal (this.state)
+	  //    We will call this.setState to update that state
+	  // 2. Controlled: it's external (this.props)
+	  //    We will call this.props.onStateChange to update that state
+	  //
+	  // In addition, we'll call this.props.onChange if the
+	  // selectedItem is changed.
+	  Downshift.prototype.getStateAndHelpers = function getStateAndHelpers() {
+	    var _getState2 = this.getState(),
+	        highlightedIndex = _getState2.highlightedIndex,
+	        inputValue = _getState2.inputValue,
+	        selectedItem = _getState2.selectedItem,
+	        isOpen = _getState2.isOpen;
+	    var itemToString = this.props.itemToString;
+	    var id = this.id;
+	    var getRootProps = this.getRootProps,
+	        getButtonProps = this.getButtonProps,
+	        getToggleButtonProps = this.getToggleButtonProps,
+	        getLabelProps = this.getLabelProps,
+	        getInputProps = this.getInputProps,
+	        getItemProps = this.getItemProps,
+	        openMenu = this.openMenu,
+	        closeMenu = this.closeMenu,
+	        toggleMenu = this.toggleMenu,
+	        selectItem = this.selectItem,
+	        selectItemAtIndex = this.selectItemAtIndex,
+	        selectHighlightedItem = this.selectHighlightedItem,
+	        setHighlightedIndex = this.setHighlightedIndex,
+	        clearSelection = this.clearSelection,
+	        clearItems = this.clearItems,
+	        reset = this.reset,
+	        setItemCount = this.setItemCount,
+	        unsetItemCount = this.unsetItemCount,
+	        setState = this.internalSetState;
+	    return {
+	      // prop getters
+	      getRootProps: getRootProps,
+	      getButtonProps: getButtonProps,
+	      getToggleButtonProps: getToggleButtonProps,
+	      getLabelProps: getLabelProps,
+	      getInputProps: getInputProps,
+	      getItemProps: getItemProps,
+	      // actions
+	      reset: reset,
+	      openMenu: openMenu,
+	      closeMenu: closeMenu,
+	      toggleMenu: toggleMenu,
+	      selectItem: selectItem,
+	      selectItemAtIndex: selectItemAtIndex,
+	      selectHighlightedItem: selectHighlightedItem,
+	      setHighlightedIndex: setHighlightedIndex,
+	      clearSelection: clearSelection,
+	      clearItems: clearItems,
+	      setItemCount: setItemCount,
+	      unsetItemCount: unsetItemCount,
+	      setState: setState,
+	      //props
+	      itemToString: itemToString,
+	      //derived
+	      id: id,
+	      // state
+	      highlightedIndex: highlightedIndex,
+	      inputValue: inputValue,
+	      isOpen: isOpen,
+	      selectedItem: selectedItem
+	    };
+	  };
+	  //////////////////////////// ROOT
+	  //\\\\\\\\\\\\\\\\\\\\\\\\\\ ROOT
+	  //////////////////////////// BUTTON
+	  // TODO: remove this in 2.0.0 and just call it `getToggleButtonProps`
+	  //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ BUTTON
+	  /////////////////////////////// LABEL
+	  //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL
+	  /////////////////////////////// INPUT
+	  //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ INPUT
+	  /////////////////////////////// ITEM
+	  Downshift.prototype.getItemId = function getItemId(index) {
+	    return this.id + '-item-' + index;
+	  };
+	  //\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ ITEM
+	  Downshift.prototype.componentDidMount = function componentDidMount() {
+	    var _this3 = this;
+	    // the _isMounted property is because we have `updateStatus` in a `debounce`
+	    // and we don't want to update the status if the component has been umounted
+	    this._isMounted = true;
+	    /* istanbul ignore if (react-native) */
+	    {
+	      // this.isMouseDown helps us track whether the mouse is currently held down.
+	      // This is useful when the user clicks on an item in the list, but holds the mouse
+	      // down long enough for the list to disappear (because the blur event fires on the input)
+	      // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should
+	      // trigger hiding the menu.
+	      var onMouseDown = function () {
+	        _this3.isMouseDown = true;
+	      };
+	      var onMouseUp = function (event) {
+	        var document = _this3.props.environment.document;
+	        _this3.isMouseDown = false;
+	        var targetInDownshift = _this3._rootNode && isOrContainsNode(_this3._rootNode, event.target);
+	        var activeElementInDownshift = _this3._rootNode && isOrContainsNode(_this3._rootNode, document.activeElement);
+	        if (!targetInDownshift && !activeElementInDownshift && _this3.getState().isOpen) {
+	          _this3.reset({ type: Downshift.stateChangeTypes.mouseUp }, function () {
+	            return _this3.props.onOuterClick(_this3.getStateAndHelpers());
+	          });
+	        }
+	      };
+	      // Touching an element in iOS gives focus and hover states, but touching out of
+	      // the element will remove hover, and persist the focus state, resulting in the
+	      // blur event not being triggered.
+	      var onTouchStart = function (event) {
+	        var targetInDownshift = _this3._rootNode && isOrContainsNode(_this3._rootNode, event.target);
+	        if (!targetInDownshift && _this3.getState().isOpen) {
+	          _this3.reset({ type: Downshift.stateChangeTypes.touchStart }, function () {
+	            return _this3.props.onOuterClick(_this3.getStateAndHelpers());
+	          });
+	        }
+	      };
+	      this.props.environment.addEventListener('mousedown', onMouseDown);
+	      this.props.environment.addEventListener('mouseup', onMouseUp);
+	      this.props.environment.addEventListener('touchstart', onTouchStart);
+	      this.cleanup = function () {
+	        _this3._isMounted = false;
+	        _this3.props.environment.removeEventListener('mousedown', onMouseDown);
+	        _this3.props.environment.removeEventListener('mouseup', onMouseUp);
+	        _this3.props.environment.removeEventListener('touchstart', onTouchStart);
+	      };
+	    }
+	  };
+	  Downshift.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+	    if (this.isControlledProp('selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) {
+	      this.internalSetState({
+	        type: Downshift.stateChangeTypes.controlledPropUpdatedSelectedItem,
+	        inputValue: this.props.itemToString(this.props.selectedItem)
+	      });
+	    }
+	    var current = this.props.highlightedIndex === undefined ? this.state : this.props;
+	    var prev = prevProps.highlightedIndex === undefined ? prevState : prevProps;
+	    if (current.highlightedIndex !== prev.highlightedIndex && !this.avoidScrolling) {
+	      this.scrollHighlightedItemIntoView();
+	    }
+	    this.updateStatus();
+	  };
+	  Downshift.prototype.componentWillUnmount = function componentWillUnmount() {
+	    this.cleanup(); // avoids memory leak
+	  };
+	  // eslint-disable-next-line complexity
+	  Downshift.prototype.render = function render() {
+	    var children = unwrapArray(this.props.render || this.props.children, noop$4);
+	    // because the items are rerendered every time we call the children
+	    // we clear this out each render and
+	    this.clearItems();
+	    // we reset this so we know whether the user calls getRootProps during
+	    // this render. If they do then we don't need to do anything,
+	    // if they don't then we need to clone the element they return and
+	    // apply the props for them.
+	    this.getRootProps.called = false;
+	    this.getRootProps.refKey = undefined;
+	    this.getRootProps.suppressRefError = undefined;
+	    // we do something similar for getLabelProps
+	    this.getLabelProps.called = false;
+	    // and something similar for getInputProps
+	    this.getInputProps.called = false;
+	    var element = unwrapArray(children(this.getStateAndHelpers()));
+	    if (!element) {
+	      return null;
+	    }
+	    if (this.getRootProps.called) {
+	      if (!this.getRootProps.suppressRefError) {
+	        validateGetRootPropsCalledCorrectly(element, this.getRootProps);
+	      }
+	      return element;
+	    } else if (isDOMElement(element)) {
+	      // they didn't apply the root props, but we can clone
+	      // this and apply the props ourselves
+	      return React__default.cloneElement(element, this.getRootProps(getElementProps(element)));
+	    } else {
+	      // they didn't apply the root props, but they need to
+	      // otherwise we can't query around the autocomplete
+	      throw new Error('downshift: If you return a non-DOM element, you must use apply the getRootProps function');
+	    }
+	  };
+	  return Downshift;
+	}(React.Component);
+	Downshift.defaultProps = {
+	  defaultHighlightedIndex: null,
+	  defaultSelectedItem: null,
+	  defaultInputValue: '',
+	  defaultIsOpen: false,
+	  getA11yStatusMessage: getA11yStatusMessage,
+	  itemToString: function itemToString(i) {
+	    if (i == null) {
+	      return '';
+	    }
+	    if (isPlainObject$3(i)) {
+	      //eslint-disable-next-line no-console
+	      console.warn('downshift: An object was passed to the default implementation of `itemToString`. You should probably provide your own `itemToString` implementation. Please refer to the `itemToString` API documentation.', 'The object that was passed:', i);
+	    }
+	    return String(i);
+	  },
+	  onStateChange: function onStateChange() {},
+	  onInputValueChange: function onInputValueChange() {},
+	  onUserAction: function onUserAction() {},
+	  onChange: function onChange() {},
+	  onSelect: function onSelect() {},
+	  onOuterClick: function onOuterClick() {},
+	  selectedItemChanged: function selectedItemChanged(prevItem, item) {
+	    return prevItem !== item;
+	  },
+	  environment: typeof window === 'undefined' /* istanbul ignore next (ssr) */
+	  ? {} : window,
+	  stateReducer: function stateReducer(state, stateToSet) {
+	    return stateToSet;
+	  },
+	  breakingChanges: {}
+	};
+	Downshift.stateChangeTypes = {
+	  unknown: '__autocomplete_unknown__',
+	  mouseUp: '__autocomplete_mouseup__',
+	  itemMouseEnter: '__autocomplete_item_mouseenter__',
+	  keyDownArrowUp: '__autocomplete_keydown_arrow_up__',
+	  keyDownArrowDown: '__autocomplete_keydown_arrow_down__',
+	  keyDownEscape: '__autocomplete_keydown_escape__',
+	  keyDownEnter: '__autocomplete_keydown_enter__',
+	  clickItem: '__autocomplete_click_item__',
+	  blurInput: '__autocomplete_blur_input__',
+	  changeInput: '__autocomplete_change_input__',
+	  keyDownSpaceButton: '__autocomplete_keydown_space_button__',
+	  clickButton: '__autocomplete_click_button__',
+	  blurButton: '__autocomplete_blur_button__',
+	  controlledPropUpdatedSelectedItem: '__autocomplete_controlled_prop_updated_selected_item__',
+	  touchStart: '__autocomplete_touchstart__'
+	};
+	var _initialiseProps$1 = function () {
+	  var _this4 = this;
+	  this.input = null;
+	  this.items = [];
+	  this.itemCount = null;
+	  this.previousResultCount = 0;
+	  this.setItemCount = function (count) {
+	    return _this4.itemCount = count;
+	  };
+	  this.unsetItemCount = function () {
+	    return _this4.itemCount = null;
+	  };
+	  this.setHighlightedIndex = function () {
+	    var highlightedIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this4.props.defaultHighlightedIndex;
+	    var otherStateToSet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+	    otherStateToSet = pickState(otherStateToSet);
+	    _this4.internalSetState(_extends$k({ highlightedIndex: highlightedIndex }, otherStateToSet));
+	  };
+	  this.clearSelection = function (cb) {
+	    _this4.internalSetState({
+	      selectedItem: null,
+	      inputValue: '',
+	      isOpen: false
+	    }, cb);
+	  };
+	  this.selectItem = function (item, otherStateToSet, cb) {
+	    otherStateToSet = pickState(otherStateToSet);
+	    _this4.internalSetState(_extends$k({
+	      isOpen: false,
+	      highlightedIndex: _this4.props.defaultHighlightedIndex,
+	      selectedItem: item,
+	      inputValue: _this4.isControlledProp('selectedItem') && _this4.props.breakingChanges.resetInputOnSelection ? _this4.props.defaultInputValue : _this4.props.itemToString(item)
+	    }, otherStateToSet), cb);
+	  };
+	  this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) {
+	    var item = _this4.items[itemIndex];
+	    if (item == null) {
+	      return;
+	    }
+	    _this4.selectItem(item, otherStateToSet, cb);
+	  };
+	  this.selectHighlightedItem = function (otherStateToSet, cb) {
+	    return _this4.selectItemAtIndex(_this4.getState().highlightedIndex, otherStateToSet, cb);
+	  };
+	  this.internalSetState = function (stateToSet, cb) {
+	    var isItemSelected = void 0,
+	        onChangeArg = void 0;
+	    var onStateChangeArg = {};
+	    var isStateToSetFunction = typeof stateToSet === 'function';
+	    // we want to call `onInputValueChange` before the `setState` call
+	    // so someone controlling the `inputValue` state gets notified of
+	    // the input change as soon as possible. This avoids issues with
+	    // preserving the cursor position.
+	    // See https://github.com/paypal/downshift/issues/217 for more info.
+	    if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) {
+	      _this4.props.onInputValueChange(stateToSet.inputValue, _extends$k({}, _this4.getStateAndHelpers(), stateToSet));
+	    }
+	    return _this4.setState(function (state) {
+	      state = _this4.getState(state);
+	      var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet;
+	      // Your own function that could modify the state that will be set.
+	      newStateToSet = _this4.props.stateReducer(state, newStateToSet);
+	      // checks if an item is selected, regardless of if it's different from
+	      // what was selected before
+	      // used to determine if onSelect and onChange callbacks should be called
+	      isItemSelected = newStateToSet.hasOwnProperty('selectedItem');
+	      // this keeps track of the object we want to call with setState
+	      var nextState = {};
+	      // this is just used to tell whether the state changed
+	      var nextFullState = {};
+	      // we need to call on change if the outside world is controlling any of our state
+	      // and we're trying to update that state. OR if the selection has changed and we're
+	      // trying to update the selection
+	      if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) {
+	        onChangeArg = newStateToSet.selectedItem;
+	      }
+	      newStateToSet.type = newStateToSet.type || Downshift.stateChangeTypes.unknown;
+	      Object.keys(newStateToSet).forEach(function (key) {
+	        // onStateChangeArg should only have the state that is
+	        // actually changing
+	        if (state[key] !== newStateToSet[key]) {
+	          onStateChangeArg[key] = newStateToSet[key];
+	        }
+	        // the type is useful for the onStateChangeArg
+	        // but we don't actually want to set it in internal state.
+	        // this is an undocumented feature for now... Not all internalSetState
+	        // calls support it and I'm not certain we want them to yet.
+	        // But it enables users controlling the isOpen state to know when
+	        // the isOpen state changes due to mouseup events which is quite handy.
+	        if (key === 'type') {
+	          return;
+	        }
+	        nextFullState[key] = newStateToSet[key];
+	        // if it's coming from props, then we don't care to set it internally
+	        if (!_this4.isControlledProp(key)) {
+	          nextState[key] = newStateToSet[key];
+	        }
+	      });
+	      // if stateToSet is a function, then we weren't able to call onInputValueChange
+	      // earlier, so we'll call it now that we know what the inputValue state will be.
+	      if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) {
+	        _this4.props.onInputValueChange(newStateToSet.inputValue, _extends$k({}, _this4.getStateAndHelpers(), newStateToSet));
+	      }
+	      return nextState;
+	    }, function () {
+	      // call the provided callback if it's a callback
+	      cbToCb(cb)();
+	      // only call the onStateChange and onChange callbacks if
+	      // we have relevant information to pass them.
+	      var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1;
+	      if (hasMoreStateThanType) {
+	        _this4.props.onStateChange(onStateChangeArg, _this4.getStateAndHelpers());
+	      }
+	      if (isItemSelected) {
+	        _this4.props.onSelect(stateToSet.selectedItem, _this4.getStateAndHelpers());
+	      }
+	      if (onChangeArg !== undefined) {
+	        _this4.props.onChange(onChangeArg, _this4.getStateAndHelpers());
+	      }
+	      // this is currently undocumented and therefore subject to change
+	      // We'll try to not break it, but just be warned.
+	      _this4.props.onUserAction(onStateChangeArg, _this4.getStateAndHelpers());
+	    });
+	  };
+	  this.rootRef = function (node) {
+	    return _this4._rootNode = node;
+	  };
+	  this.getRootProps = function () {
+	    var _babelHelpers$extends;
+	    var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+	        _ref3$suppressRefErro = _ref3.suppressRefError,
+	        suppressRefError = _ref3$suppressRefErro === undefined ? false : _ref3$suppressRefErro;
+	    var _ref2$refKey = _ref2.refKey,
+	        refKey = _ref2$refKey === undefined ? 'ref' : _ref2$refKey,
+	        rest = objectWithoutProperties$2(_ref2, ['refKey']);
+	    // this is used in the render to know whether the user has called getRootProps.
+	    // It uses that to know whether to apply the props automatically
+	    _this4.getRootProps.called = true;
+	    _this4.getRootProps.refKey = refKey;
+	    _this4.getRootProps.suppressRefError = suppressRefError;
+	    return _extends$k((_babelHelpers$extends = {}, _babelHelpers$extends[refKey] = _this4.rootRef, _babelHelpers$extends), rest);
+	  };
+	  this.keyDownHandlers = {
+	    ArrowDown: function ArrowDown(event) {
+	      event.preventDefault();
+	      var amount = event.shiftKey ? 5 : 1;
+	      this.moveHighlightedIndex(amount, {
+	        type: Downshift.stateChangeTypes.keyDownArrowDown
+	      });
+	    },
+	    ArrowUp: function ArrowUp(event) {
+	      event.preventDefault();
+	      var amount = event.shiftKey ? -5 : -1;
+	      this.moveHighlightedIndex(amount, {
+	        type: Downshift.stateChangeTypes.keyDownArrowUp
+	      });
+	    },
+	    Enter: function Enter(event) {
+	      if (this.getState().isOpen) {
+	        event.preventDefault();
+	        var itemIndex = this.getState().highlightedIndex;
+	        var item = this.items[itemIndex];
+	        var itemNode = this.getItemNodeFromIndex(itemIndex);
+	        if (item == null || itemNode && itemNode.hasAttribute('disabled')) {
+	          return;
+	        }
+	        this.selectHighlightedItem({
+	          type: Downshift.stateChangeTypes.keyDownEnter
+	        });
+	      }
+	    },
+	    Escape: function Escape(event) {
+	      event.preventDefault();
+	      this.reset({ type: Downshift.stateChangeTypes.keyDownEscape });
+	    }
+	  };
+	  this.buttonKeyDownHandlers = _extends$k({}, this.keyDownHandlers, {
+	    ' ': function _(event) {
+	      event.preventDefault();
+	      this.toggleMenu({ type: Downshift.stateChangeTypes.keyDownSpaceButton });
+	    }
+	  });
+	  this.getToggleButtonProps = function () {
+	    var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	    var onClick = _ref4.onClick,
+	        onKeyDown = _ref4.onKeyDown,
+	        onBlur = _ref4.onBlur,
+	        rest = objectWithoutProperties$2(_ref4, ['onClick', 'onKeyDown', 'onBlur']);
+	    var _getState3 = _this4.getState(),
+	        isOpen = _getState3.isOpen;
+	    var enabledEventHandlers = {
+	      onClick: composeEventHandlers(onClick, _this4.button_handleClick),
+	      onKeyDown: composeEventHandlers(onKeyDown, _this4.button_handleKeyDown),
+	      onBlur: composeEventHandlers(onBlur, _this4.button_handleBlur)
+	    };
+	    var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
+	    return _extends$k({
+	      type: 'button',
+	      role: 'button',
+	      'aria-label': isOpen ? 'close menu' : 'open menu',
+	      'aria-expanded': isOpen,
+	      'aria-haspopup': true,
+	      'data-toggle': true
+	    }, eventHandlers, rest);
+	  };
+	  this.getButtonProps = this.getToggleButtonProps;
+	  this.button_handleKeyDown = function (event) {
+	    var key = normalizeArrowKey(event);
+	    if (_this4.buttonKeyDownHandlers[key]) {
+	      _this4.buttonKeyDownHandlers[key].call(_this4, event);
+	    }
+	  };
+	  this.button_handleClick = function (event) {
+	    event.preventDefault();
+	    // handle odd case for Safari and Firefox which
+	    // don't give the button the focus properly.
+	    /* istanbul ignore if (can't reasonably test this) */
+	    if (_this4.props.environment.document.activeElement === _this4.props.environment.document.body) {
+	      event.target.focus();
+	    }
+	    // to simplify testing components that use downshift, we'll not wrap this in a setTimeout
+	    // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated
+	    // when building for production and should therefore have no impact on production code.
+	    {
+	      // Ensure that toggle of menu occurs after the potential blur event in iOS
+	      setTimeout(function () {
+	        return _this4.toggleMenu({ type: Downshift.stateChangeTypes.clickButton });
+	      });
+	    }
+	  };
+	  this.button_handleBlur = function (event) {
+	    var blurTarget = event.target; // Save blur target for comparison with activeElement later
+	    // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element
+	    setTimeout(function () {
+	      if (!_this4.isMouseDown && (_this4.props.environment.document.activeElement == null || _this4.props.environment.document.activeElement.id !== _this4.inputId) && _this4.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS)
+	      ) {
+	          _this4.reset({ type: Downshift.stateChangeTypes.blurButton });
+	        }
+	    });
+	  };
+	  this.getLabelProps = function () {
+	    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	    _this4.getLabelProps.called = true;
+	    if (_this4.getInputProps.called && props.htmlFor && props.htmlFor !== _this4.inputId) {
+	      throw new Error('downshift: You provided the htmlFor of "' + props.htmlFor + '" for your label, but the id of your input is "' + _this4.inputId + '". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');
+	    }
+	    _this4.inputId = firstDefined(_this4.inputId, props.htmlFor, _this4.id + '-input');
+	    return _extends$k({}, props, {
+	      htmlFor: _this4.inputId
+	    });
+	  };
+	  this.getInputProps = function () {
+	    var _ref6;
+	    var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	    var onKeyDown = _ref5.onKeyDown,
+	        onBlur = _ref5.onBlur,
+	        onChange = _ref5.onChange,
+	        onInput = _ref5.onInput,
+	        rest = objectWithoutProperties$2(_ref5, ['onKeyDown', 'onBlur', 'onChange', 'onInput']);
+	    _this4.getInputProps.called = true;
+	    if (_this4.getLabelProps.called && rest.id && rest.id !== _this4.inputId) {
+	      throw new Error('downshift: You provided the id of "' + rest.id + '" for your input, but the htmlFor of your label is "' + _this4.inputId + '". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');
+	    }
+	    _this4.inputId = firstDefined(_this4.inputId, rest.id, _this4.id + '-input');
+	    var onChangeKey = void 0;
+	    /* istanbul ignore next (preact) */
+	    onChangeKey = 'onChange';
+	    var _getState4 = _this4.getState(),
+	        inputValue = _getState4.inputValue,
+	        isOpen = _getState4.isOpen,
+	        highlightedIndex = _getState4.highlightedIndex;
+	    var eventHandlers = rest.disabled ? {} : (_ref6 = {}, _ref6[onChangeKey] = composeEventHandlers(onChange, onInput, _this4.input_handleChange), _ref6.onKeyDown = composeEventHandlers(onKeyDown, _this4.input_handleKeyDown), _ref6.onBlur = composeEventHandlers(onBlur, _this4.input_handleBlur), _ref6);
+	    return _extends$k({
+	      role: 'combobox',
+	      'aria-autocomplete': 'list',
+	      'aria-expanded': isOpen,
+	      'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this4.getItemId(highlightedIndex) : null,
+	      autoComplete: 'off',
+	      value: inputValue
+	    }, eventHandlers, rest, {
+	      id: _this4.inputId
+	    });
+	  };
+	  this.input_handleKeyDown = function (event) {
+	    var key = normalizeArrowKey(event);
+	    if (key && _this4.keyDownHandlers[key]) {
+	      _this4.keyDownHandlers[key].call(_this4, event);
+	    }
+	  };
+	  this.input_handleChange = function (event) {
+	    _this4.internalSetState({
+	      type: Downshift.stateChangeTypes.changeInput,
+	      isOpen: true,
+	      inputValue: event.target.value
+	    });
+	  };
+	  this.input_handleBlur = function () {
+	    // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element
+	    setTimeout(function () {
+	      var downshiftButtonIsActive = _this4.props.environment.document.activeElement.dataset.toggle && _this4._rootNode && _this4._rootNode.contains(_this4.props.environment.document.activeElement);
+	      if (!_this4.isMouseDown && !downshiftButtonIsActive) {
+	        _this4.reset({ type: Downshift.stateChangeTypes.blurInput });
+	      }
+	    });
+	  };
+	  this.getItemProps = function () {
+	    var _enabledEventHandlers;
+	    var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	    var onMouseMove = _ref7.onMouseMove,
+	        onMouseDown = _ref7.onMouseDown,
+	        onClick = _ref7.onClick,
+	        index = _ref7.index,
+	        _ref7$item = _ref7.item,
+	        item = _ref7$item === undefined ? requiredProp('getItemProps', 'item') : _ref7$item,
+	        rest = objectWithoutProperties$2(_ref7, ['onMouseMove', 'onMouseDown', 'onClick', 'index', 'item']);
+	    if (index === undefined) {
+	      _this4.items.push(item);
+	      index = _this4.items.indexOf(item);
+	    } else {
+	      _this4.items[index] = item;
+	    }
+	    var onSelectKey = 'onClick';
+	    var enabledEventHandlers = (_enabledEventHandlers = {
+	      // onMouseMove is used over onMouseEnter here. onMouseMove
+	      // is only triggered on actual mouse movement while onMouseEnter
+	      // can fire on DOM changes, interrupting keyboard navigation
+	      onMouseMove: composeEventHandlers(onMouseMove, function () {
+	        if (index === _this4.getState().highlightedIndex) {
+	          return;
+	        }
+	        _this4.setHighlightedIndex(index, {
+	          type: Downshift.stateChangeTypes.itemMouseEnter
+	        });
+	        // We never want to manually scroll when changing state based
+	        // on `onMouseMove` because we will be moving the element out
+	        // from under the user which is currently scrolling/moving the
+	        // cursor
+	        _this4.avoidScrolling = true;
+	        setTimeout(function () {
+	          return _this4.avoidScrolling = false;
+	        }, 250);
+	      }),
+	      onMouseDown: composeEventHandlers(onMouseDown, function (event) {
+	        // This prevents the activeElement from being changed
+	        // to the item so it can remain with the current activeElement
+	        // which is a more common use case.
+	        event.preventDefault();
+	      })
+	    }, _enabledEventHandlers[onSelectKey] = composeEventHandlers(onClick, function () {
+	      _this4.selectItemAtIndex(index, {
+	        type: Downshift.stateChangeTypes.clickItem
+	      });
+	    }), _enabledEventHandlers);
+	    var eventHandlers = rest.disabled ? {} : enabledEventHandlers;
+	    return _extends$k({
+	      id: _this4.getItemId(index)
+	    }, eventHandlers, rest);
+	  };
+	  this.clearItems = function () {
+	    _this4.items = [];
+	  };
+	  this.reset = function () {
+	    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	    var cb = arguments[1];
+	    otherStateToSet = pickState(otherStateToSet);
+	    _this4.internalSetState(function (_ref8) {
+	      var selectedItem = _ref8.selectedItem;
+	      return _extends$k({
+	        isOpen: false,
+	        highlightedIndex: _this4.props.defaultHighlightedIndex,
+	        inputValue: _this4.props.itemToString(selectedItem)
+	      }, otherStateToSet);
+	    }, cbToCb(cb));
+	  };
+	  this.toggleMenu = function () {
+	    var otherStateToSet = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+	    var cb = arguments[1];
+	    otherStateToSet = pickState(otherStateToSet);
+	    _this4.internalSetState(function (_ref9) {
+	      var isOpen = _ref9.isOpen;
+	      return _extends$k({ isOpen: !isOpen }, otherStateToSet);
+	    }, function () {
+	      var _getState5 = _this4.getState(),
+	          isOpen = _getState5.isOpen;
+	      if (isOpen) {
+	        // highlight default index
+	        _this4.setHighlightedIndex(undefined, otherStateToSet);
+	      }
+	      cbToCb(cb)();
+	    });
+	  };
+	  this.openMenu = function (cb) {
+	    _this4.internalSetState({ isOpen: true }, cbToCb(cb));
+	  };
+	  this.closeMenu = function (cb) {
+	    _this4.internalSetState({ isOpen: false }, cbToCb(cb));
+	  };
+	  this.updateStatus = debounce$5(function () {
+	    if (!_this4._isMounted) {
+	      return;
+	    }
+	    var state = _this4.getState();
+	    var item = _this4.items[state.highlightedIndex];
+	    var resultCount = _this4.getItemCount();
+	    var status = _this4.props.getA11yStatusMessage(_extends$k({
+	      itemToString: _this4.props.itemToString,
+	      previousResultCount: _this4.previousResultCount,
+	      resultCount: resultCount,
+	      highlightedItem: item
+	    }, state));
+	    _this4.previousResultCount = resultCount;
+	    /* istanbul ignore else (react-native) */
+	    setStatus(status);
+	  }, 200);
+	};
+	Downshift.propTypes = {
+	  children: PropTypes.func,
+	  render: PropTypes.func,
+	  defaultHighlightedIndex: PropTypes.number,
+	  defaultSelectedItem: PropTypes.any,
+	  defaultInputValue: PropTypes.string,
+	  defaultIsOpen: PropTypes.bool,
+	  getA11yStatusMessage: PropTypes.func,
+	  itemToString: PropTypes.func,
+	  onChange: PropTypes.func,
+	  onSelect: PropTypes.func,
+	  onStateChange: PropTypes.func,
+	  onInputValueChange: PropTypes.func,
+	  onUserAction: PropTypes.func,
+	  onOuterClick: PropTypes.func,
+	  selectedItemChanged: PropTypes.func,
+	  stateReducer: PropTypes.func,
+	  itemCount: PropTypes.number,
+	  id: PropTypes.string,
+	  environment: PropTypes.shape({
+	    addEventListener: PropTypes.func,
+	    removeEventListener: PropTypes.func,
+	    document: PropTypes.shape({
+	      getElementById: PropTypes.func,
+	      activeElement: PropTypes.any,
+	      body: PropTypes.any
+	    })
+	  }),
+	  // things we keep in state for uncontrolled components
+	  // but can accept as props for controlled components
+	  /* eslint-disable react/no-unused-prop-types */
+	  selectedItem: PropTypes.any,
+	  isOpen: PropTypes.bool,
+	  inputValue: PropTypes.string,
+	  highlightedIndex: PropTypes.number,
+	  breakingChanges: PropTypes.shape({
+	    resetInputOnSelection: PropTypes.bool
+	  })
+	  /* eslint-enable */
+	};
+	function validateGetRootPropsCalledCorrectly(element, _ref) {
+	  var refKey = _ref.refKey;
+	  var refKeySpecified = refKey !== 'ref';
+	  var isComposite = !isDOMElement(element);
+	  if (isComposite && !refKeySpecified) {
+	    throw new Error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps');
+	  } else if (!isComposite && refKeySpecified) {
+	    throw new Error('downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified "' + refKey + '"');
+	  }
+	  if (!getElementProps(element)[refKey]) {
+	    throw new Error('downshift: You must apply the ref prop "' + refKey + '" from getRootProps onto your root element.');
+	  }
+	}
+	/*
+	 * Fix importing in typescript after rollup compilation
+	 * https://github.com/rollup/rollup/issues/1156
+	 * https://github.com/Microsoft/TypeScript/issues/13017#issuecomment-268657860
+	 */
+	Downshift.default = Downshift;
+	Downshift.resetIdCounter = resetIdCounter;
+	/**
+	 * Copyright IBM Corp. 2016, 2018
+	 *
+	 * This source code is licensed under the Apache-2.0 license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	var ListBoxType = PropTypes.oneOf(['default', 'inline']);
+	var ListBoxSize = PropTypes.oneOf(['sm', 'xl']);
+	function _extends$l() { _extends$l = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$l.apply(this, arguments); }
+	function _defineProperty$r(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+	function _objectWithoutProperties$i(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$i(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+	function _objectWithoutPropertiesLoose$i(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+	var prefix$D = carbonComponents.settings.prefix;
+	var handleOnKeyDown = function handleOnKeyDown(event) {
+	  if (event.keyCode === 27) {
+	    event.stopPropagation();
+	  }
+	};
+	var handleClick = function handleClick(event) {
+	  event.preventDefault();
+	  event.stopPropagation();
+	};
+	/**
+	 * `ListBox` is a generic container component that handles creating the
+	 * container class name in response to certain props.
+	 */
+	var ListBox = function ListBox(_ref) {
+	  var _cx;
+	  var children = _ref.children,
+	      containerClassName = _ref.className,
+	      disabled = _ref.disabled,
+	      innerRef = _ref.innerRef,
+	      type = _ref.type,
+	      size = _ref.size,
+	      invalid = _ref.invalid,
+	      invalidText = _ref.invalidText,
+	      light = _ref.light,
+	      isOpen = _ref.isOpen,
+	      rest = _objectWithoutProperties$i(_ref, ["children", "className", "disabled", "innerRef", "type", "size", "invalid", "invalidText", "light", "isOpen"]);
+	  var className = classnames((_cx = {}, _defineProperty$r(_cx, containerClassName, !!containerClassName), _defineProperty$r(_cx, "".concat(prefix$D, "--list-box"), true), _defineProperty$r(_cx, "".concat(prefix$D, "--list-box--").concat(size), size), _defineProperty$r(_cx, "".concat(prefix$D, "--list-box--inline"), type === 'inline'), _defineProperty$r(_cx, "".concat(prefix$D, "--list-box--disabled"), disabled), _defineProperty$r(_cx, "".concat(prefix$D, "--list-box--light"), light), _defineProperty$r(_cx, "".concat(prefix$D, "--list-box--expanded"), isOpen), _cx));
+	  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", _extends$l({}, rest, {
+	    className: className,
+	    ref: innerRef,
+	    onKeyDown: handleOnKeyDown,
+	    onClick: handleClick,
+	    "data-invalid": invalid || undefined
+	  }), children), invalid ? React__default.createElement("div", {
+	    className: "".concat(prefix$D, "--form-requirement")
+	  }, invalidText) : null);
+	};
+	ListBox.propTypes = {
+	  /**
+	   * Provide the contents of your ListBox
+	   */
+	  children: PropTypes.node,
+	  /**
+	   * Specify a class name to be applied on the containing list box node
+	   */
+	  className: PropTypes.string,
+	  /**
+	   * `innerRef` hook used for libraries like Downshift that require a reference
+	   * on a container node when it is not a native element
+	   */
+	  innerRef: PropTypes.func.isRequired,
+	  /**
+	   * Specify whether the ListBox is currently disabled
+	   */
+	  disabled: PropTypes.bool.isRequired,
+	  /**
+	   * Specify the "type" of the ListBox. Currently supports either `default` or
+	   * `inline` as an option.
+	   */
+	  type: ListBoxType.isRequired,
+	  /**
+	   * Specify the size of the ListBox. Currently supports either `sm` or `xl` as an option.
+	   */
+	  size: ListBoxSize
+	};
+	ListBox.defaultProps = {
+	  innerRef: function innerRef() {},
+	  disabled: false,
+	  type: 'default'
+	};
+	function _extends$m() { _extends$m = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$m.apply(this, arguments); }
+	function _objectWithoutProperties$j(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$j(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+	function _objectWithoutPropertiesLoose$j(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+	var prefix$E = carbonComponents.settings.prefix;
+	/**
+	 * `ListBoxField` is responsible for creating the containing node for valid
+	 * elements inside of a field. It also provides a11y-related attributes like
+	 * `role` to make sure a user can focus the given field.
+	 */
+	var ListBoxField = function ListBoxField(_ref) {
+	  var children = _ref.children,
+	      id = _ref.id,
+	      disabled = _ref.disabled,
+	      tabIndex = _ref.tabIndex,
+	      rest = _objectWithoutProperties$j(_ref, ["children", "id", "disabled", "tabIndex"]);
+	  return React__default.createElement("div", _extends$m({
+	    role: rest['aria-expanded'] ? 'combobox' : rest.role || 'combobox',
+	    "aria-owns": rest['aria-expanded'] && "".concat(id, "__menu") || null,
+	    "aria-controls": rest['aria-expanded'] && "".concat(id, "__menu") || null,
+	    "aria-haspopup": "listbox",
+	    className: "".concat(prefix$E, "--list-box__field"),
+	    tabIndex: !disabled && tabIndex || -1
+	  }, rest), children);
+	};
+	ListBoxField.propTypes = {
+	  /**
+	   * Provide the contents of your ListBoxField
+	   */
+	  children: PropTypes.node,
+	  /**
+	   * Specify a custom `id`
+	   */
+	  id: PropTypes.string.isRequired,
+	  /**
+	   * Specify if the parent <ListBox> is disabled
+	   */
+	  disabled: PropTypes.bool,
+	  /**
+	   * Optional prop to specify the tabIndex of the <ListBox> trigger button
+	   */
+	  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+	};
+	function _extends$n() { _extends$n = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$n.apply(this, arguments); }
+	function _defineProperty$s(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+	function _objectWithoutProperties$k(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$k(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+	function _objectWithoutPropertiesLoose$k(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+	var prefix$F = carbonComponents.settings.prefix;
+	/**
+	 * `ListBoxMenuItem` is a helper component for managing the container class
+	 * name, alongside any classes for any corresponding states, for a generic list
+	 * box menu item.
+	 */
+	var ListBoxMenuItem = function ListBoxMenuItem(_ref) {
+	  var _cx;
+	  var children = _ref.children,
+	      isActive = _ref.isActive,
+	      isHighlighted = _ref.isHighlighted,
+	      rest = _objectWithoutProperties$k(_ref, ["children", "isActive", "isHighlighted"]);
+	  var className = classnames((_cx = {}, _defineProperty$s(_cx, "".concat(prefix$F, "--list-box__menu-item"), true), _defineProperty$s(_cx, "".concat(prefix$F, "--list-box__menu-item--active"), isActive), _defineProperty$s(_cx, "".concat(prefix$F, "--list-box__menu-item--highlighted"), isHighlighted), _cx));
+	  return React__default.createElement("div", _extends$n({
+	    className: className
+	  }, rest), React__default.createElement("div", {
+	    className: "".concat(prefix$F, "--list-box__menu-item__option")
+	  }, children));
+	};
+	ListBoxMenuItem.propTypes = {
+	  /**
+	   * Specify any children nodes that hsould be rendered inside of the ListBox
+	   * Menu Item
+	   */
+	  children: PropTypes.node,
+	  /**
+	   * Specify whether the current menu item is "active".
+	   */
+	  isActive: PropTypes.bool.isRequired,
+	  /**
+	   * Specify whether the current menu item is "highlighed".
+	   */
+	  isHighlighted: PropTypes.bool.isRequired
+	};
+	ListBoxMenuItem.defaultProps = {
+	  isActive: false,
+	  isHighlighted: false
+	};
+	/**
+	 * Copyright IBM Corp. 2016, 2018
+	 *
+	 * This source code is licensed under the Apache-2.0 license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	/**
+	 * `createChainableTypeChecker` is used inside of our custom prop validators to
+	 * add in chaining `isRequired` on a given prop validator.
+	 */
+	var createChainableTypeChecker = function createChainableTypeChecker(validate) {
+	  // `checkType` is borrowed heavily from the `prop-types` package
+	  var checkType = function checkType(isRequired, props, propName, componentName, location) {
+	    if (props[propName] == null) {
+	      if (isRequired) {
+	        if (props[propName] === null) {
+	          return new Error("The ".concat(location, " `").concat(propName, "` is marked as required in ") + "".concat(componentName, ", but its value is `null`."));
+	        }
+	        return new Error("The ".concat(location, " `").concat(propName, "` is marked as required in ") + "".concat(componentName, ", but its value is `undefined`."));
+	      }
+	      return null;
+	    } else {
+	      return validate(props, propName, componentName, location);
+	    }
+	  }; // By default, the validator will have `isRequired` set to false. However, we
+	  // also define the `isRequired` property on the validtor so that consumers can
+	  // chain their prop validator and assert that the property is required.
+	  var chainedCheckType = checkType.bind(null, false);
+	  chainedCheckType.isRequired = checkType.bind(null, true);
+	  return chainedCheckType;
+	};
+	/**
+	 * Copyright IBM Corp. 2016, 2018
+	 *
+	 * This source code is licensed under the Apache-2.0 license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	var cachedDisplayNames = new WeakMap();
+	/**
+	 * `getDisplayName` is a utility function for getting a name from a given
+	 * component type. It supports names from React elements, Stateless Functional
+	 * Components, and Class-based Components
+	 */
+	var getDisplayName$1 = function getDisplayName(type) {
+	  if (typeof type === 'string') {
+	    return type;
+	  }
+	  if (cachedDisplayNames.has(type)) {
+	    return cachedDisplayNames.get(type);
+	  }
+	  var displayName;
+	  if (typeof type.displayName === 'string') {
+	    displayName = type.displayName;
+	  }
+	  if (!displayName) {
+	    displayName = type.name || 'Unknown';
+	  }
+	  cachedDisplayNames.set(type, displayName);
+	  return displayName;
+	};
+	/**
+	 * Copyright IBM Corp. 2016, 2018
+	 *
+	 * This source code is licensed under the Apache-2.0 license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	/**
+	 * `childrenOfType` is used for asserting that children of a given React
+	 * component are only of a given type. Currently, this supports React elements,
+	 * Stateless Functional Components, and Class-based components.
+	 *
+	 * This prop validator also supports chaining through `isRequired`
+	 */
+	var childrenOfType = function childrenOfType(expectedChildType) {
+	  var expectedDisplayName = getDisplayName$1( // Support both React elements and components by using `type` if it exists
+	  expectedChildType.type || expectedChildType);
+	  var validate = function validate(props, propName, componentName) {
+	    React.Children.forEach(props[propName], function (child) {
+	      var childDisplayName = getDisplayName$1(child.type);
+	      if (child.type !== expectedChildType.type && child.type !== expectedChildType) {
+	        throw new Error("Invalid prop `children` of type `".concat(childDisplayName, "` ") + "supplied to `".concat(componentName, "`, expected each child to be a ") + "`".concat(expectedDisplayName, "` component."));
+	      }
+	    });
+	  };
+	  return createChainableTypeChecker(validate);
+	};
+	function _extends$o() { _extends$o = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$o.apply(this, arguments); }
+	function _objectWithoutProperties$l(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose$l(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+	function _objectWithoutPropertiesLoose$l(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+	var prefix$G = carbonComponents.settings.prefix;
+	/**
+	 * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
+	 * class into a single component. It is also being used to validate given
+	 * `children` components.
+	 */
+	var ListBoxMenu = function ListBoxMenu(_ref) {
+	  var children = _ref.children,
+	      id = _ref.id,
+	      rest = _objectWithoutProperties$l(_ref, ["children", "id"]);
+	  return React__default.createElement("div", _extends$o({
+	    id: "".concat(id, "__menu"),
+	    className: "".concat(prefix$G, "--list-box__menu"),
+	    role: "listbox"
+	  }, rest), children);
+	};
+	ListBoxMenu.propTypes = {
+	  /**
+	   * Provide the contents of your ListBoxMenu
+	   */
+	  children: childrenOfType(ListBoxMenuItem),
+	  /**
+	   * Specify a custom `id`
+	   */
+	  id: PropTypes.string.isRequired
+	};
+	var _defaultTranslations;
+	function _defineProperty$t(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+	var prefix$H = carbonComponents.settings.prefix;
+	var translationIds$1 = {
+	  'close.menu': 'close.menu',
+	  'open.menu': 'open.menu'
+	};
+	var defaultTranslations = (_defaultTranslations = {}, _defineProperty$t(_defaultTranslations, translationIds$1['close.menu'], 'Close menu'), _defineProperty$t(_defaultTranslations, translationIds$1['open.menu'], 'Open menu'), _defaultTranslations);
+	/**
+	 * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
+	 * state of the menu for a given `ListBox`
+	 */
+	var ListBoxMenuIcon = function ListBoxMenuIcon(_ref) {
+	  var isOpen = _ref.isOpen,
+	      t = _ref.translateWithId;
+	  var className = classnames("".concat(prefix$H, "--list-box__menu-icon"), _defineProperty$t({}, "".concat(prefix$H, "--list-box__menu-icon--open"), isOpen));
+	  var description = isOpen ? t('close.menu') : t('open.menu');
+	  return React__default.createElement("div", {
+	    className: className
+	  }, React__default.createElement(iconsReact.ChevronDown16, {
+	    name: "chevron--down",
+	    "aria-label": description
+	  }, React__default.createElement("title", null, description)));
+	};
+	ListBoxMenuIcon.propTypes = {
+	  /**
+	   * Specify whether the menu is currently open, which will influence the
+	   * direction of the menu icon
+	   */
+	  isOpen: PropTypes.bool.isRequired,
+	  /**
+	   * i18n hook used to provide the appropriate description for the given menu
+	   * icon. This function takes in an id defined in `translationIds` and should
+	   * return a string message for that given message id.
+	   */
+	  translateWithId: PropTypes.func.isRequired
+	};
+	ListBoxMenuIcon.defaultProps = {
+	  translateWithId: function translateWithId(id) {
+	    return defaultTranslations[id];
+	  }
+	};
+	var _defaultTranslations$1;
+	function _defineProperty$u(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+	var prefix$I = carbonComponents.settings.prefix;
+	/**
+	 * `ListBoxSelection` is used to provide controls for clearing a selection, in
+	 * addition to conditionally rendering a badge if the control has more than one
+	 * selection.
+	 */
+	var ListBoxSelection = function ListBoxSelection(_ref) {
+	  var _cx;
+	  var clearSelection = _ref.clearSelection,
+	      selectionCount = _ref.selectionCount,
+	      t = _ref.translateWithId,
+	      disabled = _ref.disabled;
+	  var className = classnames("".concat(prefix$I, "--list-box__selection"), (_cx = {}, _defineProperty$u(_cx, "".concat(prefix$I, "--tag--filter"), selectionCount), _defineProperty$u(_cx, "".concat(prefix$I, "--list-box__selection--multi"), selectionCount), _cx));
+	  var handleOnClick = function handleOnClick(event) {
+	    event.stopPropagation();
+	    if (disabled) {
+	      return;
+	    }
+	    clearSelection(event);
+	  };
+	  var handleOnKeyDown = function handleOnKeyDown(event) {
+	    event.stopPropagation();
+	    if (disabled) {
+	      return;
+	    } // When a user hits ENTER, we'll clear the selection
+	    if (match$2(event, Enter)) {
+	      clearSelection(event);
+	    }
+	  };
+	  var description = selectionCount ? t('clear.all') : t('clear.selection');
+	  return React__default.createElement("div", {
+	    role: "button",
+	    className: className,
+	    tabIndex: disabled ? -1 : 0,
+	    onClick: handleOnClick,
+	    onKeyDown: handleOnKeyDown,
+	    "aria-label": "Clear Selection",
+	    title: description
+	  }, selectionCount, React__default.createElement(iconsReact.Close16, null));
+	};
+	var translationIds$2 = {
+	  'clear.all': 'clear.all',
+	  'clear.selection': 'clear.selection'
+	};
+	var defaultTranslations$1 = (_defaultTranslations$1 = {}, _defineProperty$u(_defaultTranslations$1, translationIds$2['clear.all'], 'Clear all selected items'), _defineProperty$u(_defaultTranslations$1, translationIds$2['clear.selection'], 'Clear selected item'), _defaultTranslations$1);
+	ListBoxSelection.propTypes = {
+	  /**
+	   * Specify a function to be invoked when a user interacts with the clear
+	   * selection element.
+	   */
+	  clearSelection: PropTypes.func.isRequired,
+	  /**
+	   * Specify an optional `selectionCount` value that will be used to determine
+	   * whether the selection should display a badge or a single clear icon.
+	   */
+	  selectionCount: PropTypes.number,
+	  /**
+	   * i18n hook used to provide the appropriate description for the given menu
+	   * icon. This function takes in an id defined in `translationIds` and should
+	   * return a string message for that given message id.
+	   */
+	  translateWithId: PropTypes.func.isRequired
+	};
+	ListBoxSelection.defaultProps = {
+	  translateWithId: function translateWithId(id) {
+	    return defaultTranslations$1[id];
+	  }
+	};
+	/**
+	 * Copyright IBM Corp. 2016, 2018
+	 *
+	 * This source code is licensed under the Apache-2.0 license found in the
+	 * LICENSE file in the root directory of this source tree.
+	 */
+	ListBox.Field = ListBoxField;
+	ListBox.Menu = ListBoxMenu;
+	ListBox.MenuIcon = ListBoxMenuIcon;
+	ListBox.MenuItem = ListBoxMenuItem;
+	ListBox.Selection = ListBoxSelection;
+	var keys$6 = {
+	  Tab: {
+	    key: 'Tab',
+	    which: 9,
+	    keyCode: 9
+	  },
+	  Enter: {
+	    key: 'Enter',
+	    which: 13,
+	    keyCode: 13
+	  },
+	  Escape: {
+	    key: ['Escape', // IE11 Escape
+	    'Esc'],
+	    which: 27,
+	    keyCode: 27
+	  },
+	  Space: {
+	    key: ' ',
+	    which: 32,
+	    keyCode: 32
+	  },
+	  PageUp: {
+	    key: 'PageUp',
+	    which: 33,
+	    keyCode: 33
+	  },
+	  PageDown: {
+	    key: 'PageDown',
+	    which: 34,
+	    keyCode: 34
+	  },
+	  End: {
+	    key: 'End',
+	    which: 35,
+	    keyCode: 35
+	  },
+	  Home: {
+	    key: 'Home',
+	    which: 36,
+	    keyCode: 36
+	  },
+	  ArrowLeft: {
+	    key: 'ArrowLeft',
+	    which: 37,
+	    keyCode: 37
+	  },
+	  ArrowUp: {
+	    key: 'ArrowUp',
+	    which: 38,
+	    keyCode: 38
+	  },
+	  ArrowRight: {
+	    key: 'ArrowRight',
+	    which: 39,
+	    keyCode: 39
+	  },
+	  ArrowDown: {
+	    key: 'ArrowDown',
+	    which: 40,
+	    keyCode: 40
+	  }
+	};
+	var ListBoxPropTypes$$1 = {
+	  ListBoxType: PropTypes.oneOf(['default', 'inline']),
+	  ListBoxSize: PropTypes.oneOf(['sm', 'xl'])
+	};
+	var prefix$J = carbonComponents.settings.prefix;
+	/**
+	 * Check to see if the given key matches the corresponding keyboard event. Also
+	 * supports passing in the value directly if you can't used the given event.
+	 *
+	 * @example
+	 * import * as keys from '../keys';
+	 * import { matches } from '../match';
+	 *
+	 * function handleOnKeyDown(event) {
+	 *   if (match(event, keys.Enter) {
+	 *     // ...
+	 *   }
+	 * }
+	 *
+	 * @param {Event|number|string} eventOrCode
+	 * @param {Key} key
+	 * @returns {boolean}
+	 */
+	/* istanbul ignore next */
+	function match$3(eventOrCode) {
+	  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+	      key = _ref.key,
+	      which = _ref.which,
+	      keyCode = _ref.keyCode;
+	  if (typeof eventOrCode === 'string') {
+	    return eventOrCode === key;
+	  }
+	  if (typeof eventOrCode === 'number') {
+	    return eventOrCode === which || eventOrCode === keyCode;
+	  }
+	  if (eventOrCode.key && Array.isArray(key)) {
+	    return key.indexOf(eventOrCode.key) !== -1;
+	  }
+	  return eventOrCode.key === key || eventOrCode.which === which || eventOrCode.keyCode === keyCode;
+	}
+	/**
+	 * Generic utility to initialize a method that will return a unique instance id
+	 * for a component.
+	 */
+	function setupGetInstanceId() {
+	  var instanceId = 0;
+	  return function getInstanceId() {
+	    return ++instanceId; // eslint-disable-line no-plusplus
+	  };
+	}
+	var defaultItemToString = function defaultItemToString(item) {
+	  if (typeof item === 'string') {
+	    return item;
+	  }
+	  return item && item.label;
+	};
+	var defaultShouldFilterItem = function defaultShouldFilterItem() {
+	  return true;
+	};
+	var getInputValue = function getInputValue(props, state) {
+	  if (props.selectedItem) {
+	    return props.itemToString(props.selectedItem);
+	  } // TODO: consistent `initialSelectedItem` behavior with other listbox components in v11
+	  if (props.initialSelectedItem) {
+	    return props.itemToString(props.initialSelectedItem);
+	  }
+	  return state.inputValue || '';
+	}; // Since we always provide a func this will never be hit
+	/* istanbul ignore next */
+	var defaultFindHighlightedIndex = function defaultFindHighlightedIndex(_ref2, inputValue) {
+	  var items = _ref2.items,
+	      itemToString = _ref2.itemToString;
+	  if (!inputValue) {
+	    return -1;
+	  }
+	  var searchValue = inputValue.toLowerCase(); // eslint-disable-next-line no-plusplus
+	  for (var i = 0; i < items.length; i++) {
+	    var item = itemToString(items[i]).toLowerCase();
+	    if (item.indexOf(searchValue) !== -1 && searchValue.length > 1) {
+	      return i;
+	    }
+	  }
+	  return -1;
+	};
+	var getInstanceId = setupGetInstanceId();
+	/* eslint react/require-default-props: 0 */
+	var ComboBox = /*#__PURE__*/function (_React$Component) {
+	  inherits$1(ComboBox, _React$Component);
+	  createClass$1(ComboBox, null, [{
+	    key: "getDerivedStateFromProps",
+	    value: function getDerivedStateFromProps(nextProps, state) {
+	      var prevSelectedItem = state.prevSelectedItem,
+	          doneInitialSelectedItem = state.doneInitialSelectedItem;
+	      var selectedItem = nextProps.selectedItem;
+	      if (!doneInitialSelectedItem || prevSelectedItem !== selectedItem) {
+	        return {
+	          doneInitialSelectedItem: true,
+	          prevSelectedItem: selectedItem,
+	          inputValue: getInputValue(nextProps, state)
+	        };
+	      }
+	      return null;
+	    }
+	  }]);
+	  function ComboBox(props) {
+	    var _this;
+	    classCallCheck$1(this, ComboBox);
+	    _this = possibleConstructorReturn$1(this, getPrototypeOf(ComboBox).call(this, props));
+	    defineProperty$3(assertThisInitialized(_this), "filterItems", function (items, itemToString, inputValue) {
+	      return items.filter(function (item) {
+	        return _this.props.shouldFilterItem({
+	          item: item,
+	          itemToString: itemToString,
+	          inputValue: inputValue
+	        });
+	      });
+	    });
+	    defineProperty$3(assertThisInitialized(_this), "handleOnChange", function (selectedItem) {
+	      if (_this.props.onChange) {
+	        _this.props.onChange({
+	          selectedItem: selectedItem
+	        });
+	      }
+	    });
+	    defineProperty$3(assertThisInitialized(_this), "handleOnInputValueChange", function (inputValue) {
+	      var onInputChange = _this.props.onInputChange;
+	      _this.setState(function () {
+	        return {
+	          // Default to empty string if we have a false-y `inputValue`
+	          inputValue: inputValue || ''
+	        };
+	      }, function () {
+	        if (onInputChange) {
+	          onInputChange(inputValue);
+	        }
+	      });
+	    });
+	    defineProperty$3(assertThisInitialized(_this), "handleOnStateChange", function (newState, _ref3) {
+	      var setHighlightedIndex = _ref3.setHighlightedIndex,
+	          highlightedIndex = _ref3.highlightedIndex;
+	      _this.props.onHighligtedIndexChange(highlightedIndex);
+	      var findHighlightedIndex = _this.props.findHighlightedIndex || defaultFindHighlightedIndex;
+	      if (Object.prototype.hasOwnProperty.call(newState, 'inputValue')) {
+	        var inputValue = newState.inputValue;
+	        setHighlightedIndex(findHighlightedIndex(_this.props, inputValue));
+	      }
+	    });
+	    defineProperty$3(assertThisInitialized(_this), "onToggleClick", function (isOpen) {
+	      return function (event) {
+	        if (event.target === _this.textInput.current && isOpen) {
+	          // eslint-disable-next-line no-param-reassign
+	          event.preventDownshiftDefault = true;
+	          event.persist();
+	        }
+	      };
+	    });
+	    _this.textInput = /*#__PURE__*/React__default.createRef();
+	    _this.comboBoxInstanceId = getInstanceId();
+	    _this.state = {
+	      inputValue: getInputValue(props, {})
+	    };
+	    return _this;
+	  }
+	  createClass$1(ComboBox, [{
+	    key: "render",
+	    value: function render() {
+	      var _this2 = this;
+	      var _this$props = this.props,
+	          containerClassName = _this$props.className,
+	          disabled = _this$props.disabled,
+	          id = _this$props.id,
+	          items = _this$props.items,
+	          itemToString = _this$props.itemToString,
+	          itemToElement = _this$props.itemToElement,
+	          titleText = _this$props.titleText,
+	          helperText = _this$props.helperText,
+	          placeholder = _this$props.placeholder,
+	          initialSelectedItem = _this$props.initialSelectedItem,
+	          selectedItem = _this$props.selectedItem,
+	          ariaLabel = _this$props.ariaLabel,
+	          translateWithId = _this$props.translateWithId,
+	          invalid = _this$props.invalid,
+	          invalidText = _this$props.invalidText,
+	          light = _this$props.light,
+	          type = _this$props.type,
+	          size = _this$props.size,
+	          shouldFilterItem = _this$props.shouldFilterItem,
+	          onChange = _this$props.onChange,
+	          onInputChange = _this$props.onInputChange,
+	          downshiftProps = _this$props.downshiftProps,
+	          direction = _this$props.direction,
+	          onHighligtedIndexChange = _this$props.onHighligtedIndexChange,
+	          findHighlightedIndex = _this$props.findHighlightedIndex,
+	          editOptionText = _this$props.editOptionText,
+	          rest = objectWithoutProperties$1(_this$props, ["className", "disabled", "id", "items", "itemToString", "itemToElement", "titleText", "helperText", "placeholder", "initialSelectedItem", "selectedItem", "ariaLabel", "translateWithId", "invalid", "invalidText", "light", "type", "size", "shouldFilterItem", "onChange", "onInputChange", "downshiftProps", "direction", "onHighligtedIndexChange", "findHighlightedIndex", "editOptionText"]);
+	      var inputValue = this.state.inputValue;
+	      var className = classnames("".concat(prefix$J, "--combo-box"), containerClassName, defineProperty$3({}, "".concat(prefix$J, "--list-box--up"), direction === 'top'));
+	      var titleClasses = classnames("".concat(prefix$J, "--label"), defineProperty$3({}, "".concat(prefix$J, "--label--disabled"), disabled));
+	      var comboBoxHelperId = !helperText ? undefined : "combobox-helper-text-".concat(this.comboBoxInstanceId);
+	      var comboBoxLabelId = "combobox-label-".concat(this.comboBoxInstanceId);
+	      var title = titleText ?
+	      /*#__PURE__*/
+	      // eslint-disable-next-line jsx-a11y/label-has-for
+	      React__default.createElement("label", {
+	        id: comboBoxLabelId,
+	        htmlFor: id,
+	        className: titleClasses
+	      }, titleText) : null;
+	      var helperClasses = classnames("".concat(prefix$J, "--form__helper-text"), defineProperty$3({}, "".concat(prefix$J, "--form__helper-text--disabled"), disabled));
+	      var helper = helperText ? /*#__PURE__*/React__default.createElement("div", {
+	        id: comboBoxHelperId,
+	        className: helperClasses
+	      }, helperText) : null;
+	      var wrapperClasses = classnames("".concat(prefix$J, "--list-box__wrapper"));
+	      var comboBoxA11yId = "combobox-a11y-".concat(this.comboBoxInstanceId);
+	      var inputClasses = classnames("".concat(prefix$J, "--text-input"), defineProperty$3({}, "".concat(prefix$J, "--text-input--empty"), !inputValue)); // needs to be Capitalized for react to render it correctly
+	      var ItemToElement = itemToElement;
+	      var input = /*#__PURE__*/React__default.createElement(Downshift, _extends_1({}, downshiftProps, {
+	        onChange: this.handleOnChange,
+	        onInputValueChange: this.handleOnInputValueChange,
+	        onStateChange: this.handleOnStateChange,
+	        inputValue: inputValue || '',
+	        itemToString: itemToString,
+	        initialIsOpen: false,
+	        defaultSelectedItem: initialSelectedItem,
+	        selectedItem: selectedItem
+	      }), function (_ref4) {
+	        var getButtonProps = _ref4.getButtonProps,
+	            getInputProps = _ref4.getInputProps,
+	            getItemProps = _ref4.getItemProps,
+	            getRootProps = _ref4.getRootProps,
+	            isOpen = _ref4.isOpen,
+	            inputValue = _ref4.inputValue,
+	            selectedItem = _ref4.selectedItem,
+	            highlightedIndex = _ref4.highlightedIndex,
+	            clearSelection = _ref4.clearSelection,
+	            toggleMenu = _ref4.toggleMenu;
+	        // console.log({ highlightedIndex });
+	        return /*#__PURE__*/React__default.createElement(ListBox, _extends_1({
+	          className: className,
+	          disabled: disabled,
+	          invalid: invalid,
+	          id: comboBoxA11yId,
+	          "aria-label": ariaLabel,
+	          invalidText: invalidText,
+	          isOpen: isOpen,
+	          light: light,
+	          size: size
+	        }, getRootProps({
+	          refKey: 'innerRef'
+	        })), /*#__PURE__*/React__default.createElement(ListBox.Field, _extends_1({
+	          id: id,
+	          disabled: disabled,
+	          "aria-labelledby": comboBoxLabelId,
+	          "aria-describedby": comboBoxHelperId
+	        }, getButtonProps({
+	          disabled: disabled,
+	          onClick: _this2.onToggleClick(isOpen)
+	        })), /*#__PURE__*/React__default.createElement("input", _extends_1({
+	          className: inputClasses,
+	          "aria-labelledby": comboBoxA11yId,
+	          tabIndex: "0",
+	          "aria-disabled": disabled,
+	          "aria-controls": isOpen ? "".concat(id, "__menu") : null,
+	          "aria-owns": isOpen ? "".concat(id, "__menu") : null,
+	          "aria-autocomplete": "list",
+	          ref: _this2.textInput,
+	          title: inputValue
+	        }, rest, getInputProps({
+	          disabled: disabled,
+	          id: id,
+	          placeholder: placeholder,
+	          onKeyDown: function onKeyDown(event) {
+	            if (match$3(event, keys$6.Space)) {
+	              event.stopPropagation();
+	            }
+	            if (match$3(event, keys$6.Enter)) {
+	              toggleMenu();
+	            }
+	          }
+	        }))), invalid && /*#__PURE__*/React__default.createElement(iconsReact.WarningFilled16, {
+	          className: "".concat(prefix$J, "--list-box__invalid-icon")
+	        }), inputValue && /*#__PURE__*/React__default.createElement(ListBox.Selection, {
+	          clearSelection: clearSelection,
+	          translateWithId: translateWithId,
+	          disabled: disabled
+	        }), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
+	          isOpen: isOpen,
+	          translateWithId: translateWithId
+	        })), /*#__PURE__*/React__default.createElement(ListBox.Menu, {
+	          "aria-label": ariaLabel,
+	          id: id
+	        }, _this2.filterItems(items, itemToString, inputValue).map(function (item, index) {
+	          var itemProps = getItemProps({
+	            item: item,
+	            index: index
+	          });
+	          return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends_1({
+	            key: itemProps.id,
+	            "data-text": editOptionText,
+	            isActive: selectedItem === item,
+	            isHighlighted: highlightedIndex === index || selectedItem && selectedItem.id === item.id || false,
+	            title: itemToElement ? item.text : itemToString(item)
+	          }, itemProps), itemToElement ? /*#__PURE__*/React__default.createElement(ItemToElement, _extends_1({
+	            key: itemProps.id
+	          }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default.createElement(iconsReact.Checkmark16, {
+	            className: "".concat(prefix$J, "--list-box__menu-item__selected-icon")
+	          }));
+	        })));
+	      });
+	      return /*#__PURE__*/React__default.createElement("div", {
+	        className: wrapperClasses
+	      }, title, helper, input);
+	    }
+	  }]);
+	  return ComboBox;
+	}(React__default.Component);
+	defineProperty$3(ComboBox, "propTypes", {
+	  /**
+	   * 'aria-label' of the ListBox component.
+	   */
+	  ariaLabel: PropTypes.string,
+	  /**
+	   * An optional className to add to the container node
+	   */
+	  className: PropTypes.string,
+	  /**
+	   * Specify if the control should be disabled, or not
+	   */
+	  disabled: PropTypes.bool,
+	  /**
+	   * Specify a custom `id` for the input
+	   */
+	  id: PropTypes.string.isRequired,
+	  /**
+	   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
+	   * from their collection that are pre-selected
+	   */
+	  initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+	  /**
+	   * We try to stay as generic as possible here to allow individuals to pass
+	   * in a collection of whatever kind of data structure they prefer
+	   */
+	  items: PropTypes.array.isRequired,
+	  // eslint-disable-line react/forbid-prop-types
+	  /**
+	   * Helper function passed to downshift that allows the library to render a
+	   * given item to a string label. By default, it extracts the `label` field
+	   * from a given item to serve as the item label in the list
+	   */
+	  itemToString: PropTypes.func,
+	  /**
+	   * Optional function to render items as custom components instead of strings.
+	   * Defaults to null and is overriden by a getter
+	   */
+	  itemToElement: PropTypes.func,
+	  /**
+	   * `onChange` is a utility for this controlled component to communicate to a
+	   * consuming component when a specific dropdown item is selected.
+	   * @param {{ selectedItem }}
+	   */
+	  onChange: PropTypes.func.isRequired,
+	  /**
+	   * Used to provide a placeholder text node before a user enters any input.
+	   * This is only present if the control has no items selected
+	   */
+	  placeholder: PropTypes.string.isRequired,
+	  /**
+	   * Specify your own filtering logic by passing in a `shouldFilterItem`
+	   * function that takes in the current input and an item and passes back
+	   * whether or not the item should be filtered.
+	   */
+	  shouldFilterItem: PropTypes.func,
+	  /**
+	   * Specify if the currently selected value is invalid.
+	   */
+	  invalid: PropTypes.bool,
+	  /**
+	   * Message which is displayed if the value is invalid.
+	   */
+	  invalidText: PropTypes.string,
+	  /**
+	   * For full control of the selection
+	   */
+	  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+	  /**
+	   * Specify a custom translation function that takes in a message identifier
+	   * and returns the localized string for the message
+	   */
+	  translateWithId: PropTypes.func,
+	  /**
+	   * Currently supports either the default type, or an inline variant
+	   */
+	  type: ListBoxPropTypes$$1.ListBoxType,
+	  /**
+	   * Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option.
+	   */
+	  size: ListBoxPropTypes$$1.ListBoxSize,
+	  /**
+	   * Callback function to notify consumer when the text input changes.
+	   * This provides support to change available items based on the text.
+	   * @param {string} inputText
+	   */
+	  onInputChange: PropTypes.func,
+	  /**
+	   * should use "light theme" (white background)?
+	   */
+	  light: PropTypes.bool,
+	  /**
+	   * Additional props passed to Downshift
+	   */
+	  downshiftProps: PropTypes.shape(Downshift.propTypes),
+	  /**
+	   * Specify the direction of the combobox dropdown. Can be either top or bottom.
+	   */
+	  direction: PropTypes.oneOf(['top', 'bottom']),
+	  /**
+	   *  Optional callback to pass the highlighted index to parent
+	   */
+	  onHighligtedIndexChange: PropTypes.func,
+	  /**
+	   *  Optional func to change behavior of highlighted index
+	   */
+	  findHighlightedIndex: PropTypes.func,
+	  /**
+	   * String to pass to input field option
+	   */
+	  editOptionText: PropTypes.string
+	});
+	defineProperty$3(ComboBox, "defaultProps", {
+	  disabled: false,
+	  itemToString: defaultItemToString,
+	  itemToElement: null,
+	  shouldFilterItem: defaultShouldFilterItem,
+	  type: 'default',
+	  ariaLabel: 'Choose an item',
+	  light: false,
+	  direction: 'bottom',
+	  editOptionText: '+ Add'
+	});
+	ComboBox.__docgenInfo = {
+	  "description": "",
+	  "methods": [{
+	    "name": "filterItems",
+	    "docblock": null,
+	    "modifiers": [],
+	    "params": [{
+	      "name": "items",
+	      "type": null
+	    }, {
+	      "name": "itemToString",
+	      "type": null
+	    }, {
+	      "name": "inputValue",
+	      "type": null
+	    }],
+	    "returns": null
+	  }, {
+	    "name": "handleOnChange",
+	    "docblock": null,
+	    "modifiers": [],
+	    "params": [{
+	      "name": "selectedItem",
+	      "type": null
+	    }],
+	    "returns": null
+	  }, {
+	    "name": "handleOnInputValueChange",
+	    "docblock": null,
+	    "modifiers": [],
+	    "params": [{
+	      "name": "inputValue",
+	      "type": null
+	    }],
+	    "returns": null
+	  }, {
+	    "name": "handleOnStateChange",
+	    "docblock": null,
+	    "modifiers": [],
+	    "params": [{
+	      "name": "newState",
+	      "type": null
+	    }, {
+	      "name": "{ setHighlightedIndex, highlightedIndex }",
+	      "type": null
+	    }],
+	    "returns": null
+	  }, {
+	    "name": "onToggleClick",
+	    "docblock": null,
+	    "modifiers": [],
+	    "params": [{
+	      "name": "isOpen",
+	      "type": null
+	    }],
+	    "returns": null
+	  }],
+	  "displayName": "ComboBox",
+	  "props": {
+	    "disabled": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "Specify if the control should be disabled, or not"
+	    },
+	    "itemToString": {
+	      "defaultValue": {
+	        "value": "item => {\n  if (typeof item === 'string') {\n    return item;\n  }\n\n  return item && item.label;\n}",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": false,
+	      "description": "Helper function passed to downshift that allows the library to render a\ngiven item to a string label. By default, it extracts the `label` field\nfrom a given item to serve as the item label in the list"
+	    },
+	    "itemToElement": {
+	      "defaultValue": {
+	        "value": "null",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": false,
+	      "description": "Optional function to render items as custom components instead of strings.\nDefaults to null and is overriden by a getter"
+	    },
+	    "shouldFilterItem": {
+	      "defaultValue": {
+	        "value": "() => true",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": false,
+	      "description": "Specify your own filtering logic by passing in a `shouldFilterItem`\nfunction that takes in the current input and an item and passes back\nwhether or not the item should be filtered."
+	    },
+	    "type": {
+	      "defaultValue": {
+	        "value": "'default'",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "custom",
+	        "raw": "ListBoxPropTypes.ListBoxType"
+	      },
+	      "required": false,
+	      "description": "Currently supports either the default type, or an inline variant"
+	    },
+	    "ariaLabel": {
+	      "defaultValue": {
+	        "value": "'Choose an item'",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": false,
+	      "description": "'aria-label' of the ListBox component."
+	    },
+	    "light": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "should use \"light theme\" (white background)?"
+	    },
+	    "direction": {
+	      "defaultValue": {
+	        "value": "'bottom'",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "enum",
+	        "value": [{
+	          "value": "'top'",
+	          "computed": false
+	        }, {
+	          "value": "'bottom'",
+	          "computed": false
+	        }]
+	      },
+	      "required": false,
+	      "description": "Specify the direction of the combobox dropdown. Can be either top or bottom."
+	    },
+	    "editOptionText": {
+	      "defaultValue": {
+	        "value": "'+ Add'",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": false,
+	      "description": "String to pass to input field option"
+	    },
+	    "className": {
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": false,
+	      "description": "An optional className to add to the container node"
+	    },
+	    "id": {
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": true,
+	      "description": "Specify a custom `id` for the input"
+	    },
+	    "initialSelectedItem": {
+	      "type": {
+	        "name": "union",
+	        "value": [{
+	          "name": "object"
+	        }, {
+	          "name": "string"
+	        }]
+	      },
+	      "required": false,
+	      "description": "Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)\nfrom their collection that are pre-selected"
+	    },
+	    "items": {
+	      "type": {
+	        "name": "array"
+	      },
+	      "required": true,
+	      "description": "We try to stay as generic as possible here to allow individuals to pass\nin a collection of whatever kind of data structure they prefer"
+	    },
+	    "onChange": {
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": true,
+	      "description": "`onChange` is a utility for this controlled component to communicate to a\nconsuming component when a specific dropdown item is selected.\n@param {{ selectedItem }}"
+	    },
+	    "placeholder": {
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": true,
+	      "description": "Used to provide a placeholder text node before a user enters any input.\nThis is only present if the control has no items selected"
+	    },
+	    "invalid": {
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": "Specify if the currently selected value is invalid."
+	    },
+	    "invalidText": {
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": false,
+	      "description": "Message which is displayed if the value is invalid."
+	    },
+	    "selectedItem": {
+	      "type": {
+	        "name": "union",
+	        "value": [{
+	          "name": "object"
+	        }, {
+	          "name": "string"
+	        }]
+	      },
+	      "required": false,
+	      "description": "For full control of the selection"
+	    },
+	    "translateWithId": {
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": false,
+	      "description": "Specify a custom translation function that takes in a message identifier\nand returns the localized string for the message"
+	    },
+	    "size": {
+	      "type": {
+	        "name": "custom",
+	        "raw": "ListBoxPropTypes.ListBoxSize"
+	      },
+	      "required": false,
+	      "description": "Specify the size of the ListBox. Currently supports either `sm`, `lg` or `xl` as an option."
+	    },
+	    "onInputChange": {
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": false,
+	      "description": "Callback function to notify consumer when the text input changes.\nThis provides support to change available items based on the text.\n@param {string} inputText"
+	    },
+	    "downshiftProps": {
+	      "type": {
+	        "name": "shape",
+	        "value": "Downshift.propTypes",
+	        "computed": true
+	      },
+	      "required": false,
+	      "description": "Additional props passed to Downshift"
+	    },
+	    "onHighligtedIndexChange": {
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": false,
+	      "description": "Optional callback to pass the highlighted index to parent"
+	    },
+	    "findHighlightedIndex": {
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": false,
+	      "description": "Optional func to change behavior of highlighted index"
+	    }
+	  }
+	};
+	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$Q(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$3(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 iotPrefix$Q = settings.iotPrefix;
+	var propTypes$10 = _objectSpread$Q({}, ComboBox.propTypes, {
+	  loading: PropTypes.bool,
+	  // Callback that is called with the value of the input on change
+	  onChange: PropTypes.func.isRequired,
+	  // OPtional classname to be applied to wrapper
+	  wrapperClassName: PropTypes.string,
+	  // String to pass to input field option
+	  editOptionText: PropTypes.string,
+	  // String to pass for tags close button aria-label. Will be prepended to value name
+	  closeButtonText: PropTypes.string,
+	  // Bit that will allow mult value and tag feature
+	  hasMultiValue: deprecate(PropTypes.bool, '\nThe prop `hasMultiValue` for Combobox is experimental. The functionality that is enabled by this prop is subject to change until Combobbox moves out of experimental.')
+	});
+	var defaultProps$16 = _objectSpread$Q({}, ComboBox.defaultProps, {
+	  loading: false,
+	  wrapperClassName: null,
+	  closeButtonText: 'Close',
+	  editOptionText: '-Create',
+	  hasMultiValue: false,
+	  items: []
+	});
+	var ComboBox$1 = function ComboBox$$1(_ref) {
+	  var loading = _ref.loading,
+	      wrapperClassName = _ref.wrapperClassName,
+	      closeButtonText = _ref.closeButtonText,
+	      editOptionText = _ref.editOptionText,
+	      hasMultiValue = _ref.hasMultiValue,
+	      onChange = _ref.onChange,
+	      comboProps = objectWithoutProperties$1(_ref, ["loading", "wrapperClassName", "closeButtonText", "editOptionText", "hasMultiValue", "onChange"]);
+	  var items = comboProps.items,
+	      ariaLabel = comboProps.ariaLabel,
+	      className = comboProps.className,
+	      disabled = comboProps.disabled,
+	      id = comboProps.id,
+	      initialSelectedItem = comboProps.initialSelectedItem,
+	      downshiftProps = comboProps.downshiftProps,
+	      itemToString = comboProps.itemToString,
+	      itemToElement = comboProps.itemToElement,
+	      placeholder = comboProps.placeholder,
+	      shouldFilterItem = comboProps.shouldFilterItem,
+	      type = comboProps.type,
+	      invalid = comboProps.invalid,
+	      invalidText = comboProps.invalidText,
+	      translateWithId = comboProps.translateWithId,
+	      size = comboProps.size,
+	      onInputChange = comboProps.onInputChange,
+	      light = comboProps.light,
+	      direction = comboProps.direction; // Ref for the combobox input
+	  var comboRef = /*#__PURE__*/React__default.createRef(); // Input value that is added to list
+	  var _useState = React.useState(''),
+	      _useState2 = slicedToArray(_useState, 2),
+	      inputValue = _useState2[0],
+	      setInputValue = _useState2[1]; // Current selected item that shows in the input
+	  var _useState3 = React.useState(null),
+	      _useState4 = slicedToArray(_useState3, 2),
+	      selectedItem = _useState4[0],
+	      setSelectedItem = _useState4[1]; // Array that populates list
+	  var _useState5 = React.useState(items),
+	      _useState6 = slicedToArray(_useState5, 2),
+	      listItems = _useState6[0],
+	      setListItems = _useState6[1]; // Array that populates tags
+	  var _useState7 = React.useState([]),
+	      _useState8 = slicedToArray(_useState7, 2),
+	      tagItems = _useState8[0],
+	      setTagItems = _useState8[1]; // Highlighted index for list dropdown
+	  var _useState9 = React.useState(-1),
+	      _useState10 = slicedToArray(_useState9, 2),
+	      highlightedIndex = _useState10[0],
+	      setHighlightedIndex = _useState10[1];
+	  React.useEffect(function () {
+	    // If there are tags then clear and focus the input
+	    if (hasMultiValue) {
+	      setSelectedItem(null);
+	    }
+	  });
+	  var handleOnClose = function handleOnClose(e) {
+	    var _e$currentTarget$pare, _e$currentTarget$pare2, _e$currentTarget$pare3, _e$currentTarget$pare4, _e$currentTarget$pare5, _e$currentTarget$pare6, _e$currentTarget$pare7, _e$currentTarget$pare8;
+	    // Get close target's text
+	    var closedValue = (_e$currentTarget$pare = e.currentTarget.parentNode) === null || _e$currentTarget$pare === void 0 ? void 0 : (_e$currentTarget$pare2 = _e$currentTarget$pare.children[0]) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.textContent; // If there is a tag with the same value then remove from tag array
+	    tagItems.forEach(function (item, idx) {
+	      if (itemToString(item) === closedValue) {
+	        tagItems.splice(idx, 1);
+	        setTagItems(toConsumableArray(tagItems));
+	      }
+	    }); // Send new value to users onChange callback
+	    onChange(toConsumableArray(tagItems)); // eslint-disable-next-line no-unused-expressions
+	    (_e$currentTarget$pare3 = e.currentTarget.parentNode) === null || _e$currentTarget$pare3 === void 0 ? void 0 : (_e$currentTarget$pare4 = _e$currentTarget$pare3.parentNode) === null || _e$currentTarget$pare4 === void 0 ? void 0 : (_e$currentTarget$pare5 = _e$currentTarget$pare4.parentNode) === null || _e$currentTarget$pare5 === void 0 ? void 0 : (_e$currentTarget$pare6 = _e$currentTarget$pare5.firstChild) === null || _e$currentTarget$pare6 === void 0 ? void 0 : (_e$currentTarget$pare7 = _e$currentTarget$pare6.children[0]) === null || _e$currentTarget$pare7 === void 0 ? void 0 : (_e$currentTarget$pare8 = _e$currentTarget$pare7.children[1]) === null || _e$currentTarget$pare8 === void 0 ? void 0 : _e$currentTarget$pare8.focus();
+	  };
+	  var handleOnChange = function handleOnChange(_ref2) {
+	    var downShiftSelectedItem = _ref2.selectedItem;
+	    var newItem = downShiftSelectedItem && Object.keys(downShiftSelectedItem).reduce(function (acc, currentId) {
+	      return _objectSpread$Q({}, acc, defineProperty$3({}, currentId, downShiftSelectedItem[currentId].trim()));
+	    }, {});
+	    var currentValue = itemToString(newItem); // Check that there is no existing tag
+	    var hasNoExistingTag = tagItems.filter(function (x) {
+	      return itemToString(x) === currentValue;
+	    }).length < 1; // Check if value is part of items array
+	    var matchedItem = listItems.filter(function (x) {
+	      return itemToString(x).trim() === currentValue;
+	    })[0];
+	    if (hasMultiValue) {
+	      // If tags array does not contain new value
+	      if (newItem && hasNoExistingTag) {
+	        // Add new value to tags array
+	        setTagItems(function (inputValues) {
+	          return [].concat(toConsumableArray(inputValues), [newItem]);
+	        }); // pass the combobox value to user's onChange callback
+	        onChange([].concat(toConsumableArray(tagItems), [newItem]));
+	      }
+	    } else {
+	      onChange(newItem);
+	    }
+	    if ((newItem === null || newItem === void 0 ? void 0 : newItem.id.startsWith("".concat(iotPrefix$Q, "-input-"))) && !matchedItem) {
+	      // Add new item to items array
+	      setListItems(function (currentList) {
+	        return [newItem].concat(toConsumableArray(currentList));
+	      });
+	    }
+	    setSelectedItem(newItem);
+	    setInputValue(null);
+	  };
+	  var handleOnKeypress = function handleOnKeypress(evt) {
+	    // Current value of input
+	    var currentValue = comboRef.current.textInput.current.value.trim();
+	    if (evt.key === 'Enter' && currentValue && highlightedIndex < 0) {
+	      var newItem = {
+	        id: "".concat(iotPrefix$Q, "-input-").concat(currentValue.split(' ').join('-'), "-").concat(currentValue.length),
+	        text: currentValue
+	      };
+	      handleOnChange({
+	        selectedItem: newItem
+	      });
+	    }
+	  };
+	  var handleInputChange = function handleInputChange(e) {
+	    var matchedItem = listItems.filter(function (x) {
+	      return itemToString(x) === e;
+	    })[0];
+	    if (e !== '' && !matchedItem) {
+	      setInputValue({
+	        id: "".concat(iotPrefix$Q, "-input-").concat(e.split(' ').join('-'), "-").concat(e.length),
+	        text: e
+	      });
+	    } else {
+	      setInputValue(null);
+	    } // Pass on to user callback
+	    onInputChange(e);
+	  };
+	  var findHighlightedIndex = function findHighlightedIndex(_ref3, carbonInputValue) {
+	    var carbonItems = _ref3.items;
+	    if (!carbonInputValue) {
+	      return -1;
+	    }
+	    var searchValue = carbonItems[0].id.startsWith("".concat(iotPrefix$Q, "-input")) ? carbonInputValue.slice(0, -1).toLowerCase() : carbonInputValue.toLowerCase(); // eslint-disable-next-line no-plusplus
+	    for (var i = 0; i < carbonItems.length; i++) {
+	      var item = itemToString(carbonItems[i]).toLowerCase();
+	      if (item.indexOf(searchValue) !== -1 && searchValue && searchValue.trim() === item.trim()) {
+	        return i;
+	      }
+	    }
+	    return -1;
+	  };
+	  var combinedItems = React.useMemo(function () {
+	    return inputValue ? [inputValue].concat(toConsumableArray(listItems)) : listItems;
+	  }, [inputValue, listItems]);
+	  return (
+	    /*#__PURE__*/
+	    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+	    React__default.createElement("div", {
+	      className: classnames("".concat(iotPrefix$Q, "--combobox"), defineProperty$3({}, wrapperClassName, wrapperClassName), defineProperty$3({}, "".concat(iotPrefix$Q, "--combobox-add"), inputValue)),
+	      onKeyDown: function onKeyDown(evt) {
+	        return handleOnKeypress(evt);
+	      },
+	      "data-testid": "combo-wrapper"
+	    }, /*#__PURE__*/React__default.createElement(ComboBox, {
+	      "data-testid": "combo-box",
+	      ariaLabel: ariaLabel,
+	      id: id,
+	      type: type,
+	      placeholder: placeholder,
+	      shouldFilterItem: shouldFilterItem,
+	      size: size,
+	      invalid: invalid,
+	      light: light,
+	      direction: direction,
+	      invalidText: invalidText,
+	      translateWithId: translateWithId,
+	      initialSelectedItem: initialSelectedItem,
+	      downshiftProps: downshiftProps,
+	      findHighlightedIndex: findHighlightedIndex,
+	      onHighligtedIndexChange: setHighlightedIndex,
+	      ref: comboRef,
+	      selectedItem: comboProps.selectedItem || selectedItem,
+	      items: combinedItems,
+	      itemToString: itemToString,
+	      itemToElement: itemToElement,
+	      editOptionText: editOptionText,
+	      onChange: handleOnChange,
+	      onInputChange: handleInputChange,
+	      className: classnames(className, "".concat(iotPrefix$Q, "--combobox-input")),
+	      disabled: disabled || loading !== undefined && loading !== false
+	    }), /*#__PURE__*/React__default.createElement("ul", {
+	      "data-testid": "combo-tags",
+	      className: "".concat(iotPrefix$Q, "--combobox-tags")
+	    }, tagItems.map(function (item, idx) {
+	      return /*#__PURE__*/React__default.createElement("li", {
+	        key: "li-".concat(item === null || item === void 0 ? void 0 : item.id, "-").concat(idx)
+	      }, /*#__PURE__*/React__default.createElement(carbonComponentsReact.Tag, {
+	        key: "tag-".concat(item === null || item === void 0 ? void 0 : item.id, "-").concat(idx),
+	        filter: true,
+	        onClose: function onClose(e) {
+	          return handleOnClose(e);
+	        },
+	        title: closeButtonText
+	      }, itemToString(item)));
+	    })))
+	  );
+	};
+	ComboBox$1.propTypes = propTypes$10;
+	ComboBox$1.defaultProps = defaultProps$16;
+	ComboBox$1.__docgenInfo = {
+	  "description": "",
+	  "methods": [],
+	  "displayName": "ComboBox",
+	  "props": {
+	    "loading": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "bool"
+	      },
+	      "required": false,
+	      "description": ""
+	    },
+	    "wrapperClassName": {
+	      "defaultValue": {
+	        "value": "null",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": false,
+	      "description": ""
+	    },
+	    "closeButtonText": {
+	      "defaultValue": {
+	        "value": "'Close'",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": false,
+	      "description": ""
+	    },
+	    "editOptionText": {
+	      "defaultValue": {
+	        "value": "'-Create'",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "string"
+	      },
+	      "required": false,
+	      "description": ""
+	    },
+	    "hasMultiValue": {
+	      "defaultValue": {
+	        "value": "false",
+	        "computed": false
+	      },
+	      "type": {
+	        "name": "custom",
+	        "raw": "deprecate(\n  PropTypes.bool,\n  '\\nThe prop `hasMultiValue` for Combobox is experimental. The functionality that is enabled by this prop is subject to change until Combobbox moves out of experimental.'\n)"
+	      },
+	      "required": false,
+	      "description": ""
+	    },
+	    "items": {
+	      "defaultValue": {
+	        "value": "[]",
+	        "computed": false
+	      },
+	      "required": false
+	    },
+	    "onChange": {
+	      "type": {
+	        "name": "func"
+	      },
+	      "required": true,
+	      "description": ""
+	    }
+	  },
+	  "composes": ["./CarbonComboBox"]
+	};
 	// Needed so that any component that uses sizeme can be jest tested
 	reactSizeme.noPlaceholders = true; // Components
@@ -122596,7 +125686,6 @@
 	exports.AccordionItem = carbonComponentsReact.AccordionItem;
 	exports.Checkbox = carbonComponentsReact.Checkbox;
 	exports.CodeSnippet = carbonComponentsReact.CodeSnippet;
-	exports.ComboBox = carbonComponentsReact.ComboBox;
 	exports.ModalHeader = carbonComponentsReact.ModalHeader;
 	exports.ModalBody = carbonComponentsReact.ModalBody;
 	exports.ModalFooter = carbonComponentsReact.ModalFooter;
@@ -122796,6 +125885,7 @@
 	exports.SimpleList = SimpleList;
 	exports.IconSwitch = IconSwitch;
 	exports.AccordionItemDefer = AccordionItemDefer;
+	exports.ComboBox = ComboBox$1;
 	exports.baseTableReducer = baseTableReducer;
 	exports.tableReducer = tableReducer;
 	exports.tileCatalogReducer = tileCatalogReducer;