@innovaccer/design-system 2.29.0 → 2.30.0

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1710344054629 
+   * Generated on: 1711981289386 
    *      Package: @innovaccer/design-system
-   *      Version: v2.29.0
+   *      Version: v2.30.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -1358,7 +1358,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
   })));
 };
 
-var _excluded$R = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconType"];
+var _excluded$V = ["size", "appearance", "iconAlign", "tabIndex", "largeIcon", "type", "children", "icon", "expanded", "selected", "loading", "disabled", "className", "tooltip", "iconType"];
 var sizeMapping$3 = {
   tiny: 12,
   regular: 16,
@@ -1387,7 +1387,7 @@ var ButtonElement = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className = props.className;
       props.tooltip;
       var iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$R);
+      rest = _objectWithoutProperties(props, _excluded$V);
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Button', true), _defineProperty$1(_classNames, 'Button--expanded', expanded), _defineProperty$1(_classNames, "Button--".concat(size), size), _defineProperty$1(_classNames, "Button--".concat(size, "Square"), !children), _defineProperty$1(_classNames, "Button--".concat(appearance), appearance), _defineProperty$1(_classNames, 'Button--selected', selected && (appearance === 'basic' || appearance === 'transparent')), _defineProperty$1(_classNames, "Button--iconAlign-".concat(iconAlign), children && iconAlign), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   var iconClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'Button-icon', true), _defineProperty$1(_classNames2, "Button-icon--".concat(iconAlign), children && iconAlign), _classNames2));
@@ -2366,7 +2366,7 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
             } else if (startDate) {
               inRange = !disabled && (dateComparison(hoverDate, 'more', dateInString, monthInString, yearInString) || inRangeLast) && dateComparison(startDate, 'less', dateInString, monthInString, yearInString);
             } else if (endDate) {
-              inRange = !disabled && (compareDate(hoverDate, 'less', yearNavVal, monthNavVal, date) || inRangeLast) && compareDate(endDate, 'more', yearNavVal, monthNavVal, date);
+              inRange = !disabled && (dateComparison(hoverDate, 'less', dateInString, monthInString, yearInString) || inRangeLast) && dateComparison(endDate, 'more', dateInString, monthInString, yearInString);
             }
           }
 
@@ -2374,7 +2374,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
           var isStartActive = startDate && dateComparison(startDate, 'equal', dateInString, monthInString, yearInString);
           var isEndActive = endDate && dateComparison(endDate, 'equal', dateInString, monthInString, yearInString);
           var activeDate = startDate && endDate && (isStartActive || isEndActive);
-          var isHoverLast = dateComparison(hoverDate, 'equal', dateInString, monthInString, yearInString) && hoverDate && startDate && hoverDate >= startDate;
+          var isHoverBackwardLast = _this.props.allowReverseSelection && dateComparison(hoverDate, 'equal', dateInString, monthInString, yearInString) && hoverDate && (startDate && hoverDate < startDate || endDate && hoverDate < endDate);
+          var isHoverForwardLast = dateComparison(hoverDate, 'equal', dateInString, monthInString, yearInString) && hoverDate && startDate && hoverDate >= startDate;
           var isEdgeElement = col === 0 || col === 6;
           var isValueRange = inRange || rangePicker && (active || activeDate);
           var wrapperClass = classnames({
@@ -2388,7 +2389,8 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
             'Calendar-valueWrapper--startError': isStart && isRangeError || rangePicker && isRangeError && isStartActive,
             'Calendar-valueWrapper--endError': isEnd && isRangeError || rangePicker && isRangeError && isEndActive,
             'Calendar-valueWrapper--dummy': dummy,
-            'Calendar-valueWrapper--hoverDate': rangePicker && isHoverLast,
+            'Calendar-valueWrapper--hoverDate': rangePicker && isHoverForwardLast,
+            'Calendar-valueWrapper--hoverEndDate': rangePicker && isHoverBackwardLast,
             'Calendar-valueWrapper--inStartRange': isValueRange && col === 0 && !active && !activeDate,
             'Calendar-valueWrapper--inEndRange': isValueRange && col === 6 && !active && !activeDate
           });
@@ -2629,24 +2631,57 @@ var Calendar = /*#__PURE__*/function (_React$Component) {
         if (onRangeChange) onRangeChange(_startDate4, _endDate4);
       }
 
+      if (this.props.allowReverseSelection && prevState.hoverDate !== this.state.hoverDate) {
+        var _this$state11 = this.state,
+            hoverDate = _this$state11.hoverDate,
+            _startDate5 = _this$state11.startDate,
+            _endDate5 = _this$state11.endDate;
+
+        if (_startDate5 && !_endDate5) {
+          var _getDateInfo9 = getDateInfo(_startDate5),
+              _year3 = _getDateInfo9.year,
+              _month3 = _getDateInfo9.month,
+              _date4 = _getDateInfo9.date;
+
+          if (compareDate(hoverDate, 'less', _year3, _month3, _date4)) {
+            this.setState({
+              startDate: undefined,
+              endDate: _startDate5
+            });
+          }
+        } else if (_endDate5 && !_startDate5) {
+          var _getDateInfo10 = getDateInfo(_endDate5),
+              _year4 = _getDateInfo10.year,
+              _month4 = _getDateInfo10.month,
+              _date5 = _getDateInfo10.date;
+
+          if (compareDate(hoverDate, 'more', _year4, _month4, _date5)) {
+            this.setState({
+              startDate: _endDate5,
+              endDate: undefined
+            });
+          }
+        }
+      }
+
       if (prevState.year !== this.state.year) {
-        var _year3 = this.state.year;
+        var _year5 = this.state.year;
 
-        if (_year3 !== undefined && monthsInView === 1) {
+        if (_year5 !== undefined && monthsInView === 1) {
           this.setState({
-            year: _year3,
-            yearBlockNav: getYearBlock(_year3),
-            yearNav: _year3
+            year: _year5,
+            yearBlockNav: getYearBlock(_year5),
+            yearNav: _year5
           });
         }
       }
 
       if (prevState.month !== this.state.month) {
-        var _month3 = this.state.month;
+        var _month5 = this.state.month;
 
-        if (_month3 !== undefined && monthsInView === 1) {
+        if (_month5 !== undefined && monthsInView === 1) {
           this.setState({
-            monthNav: _month3
+            monthNav: _month5
           });
         }
       }
@@ -2698,7 +2733,7 @@ _defineProperty$1(Calendar, "defaultProps", {
   jumpView: true
 });
 
-var _excluded$Q = ["shadow", "children", "className"];
+var _excluded$U = ["shadow", "children", "className"];
 var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -2706,7 +2741,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
       shadow = _props$shadow === void 0 ? 'shadow10' : _props$shadow,
       children = props.children,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$Q);
+      rest = _objectWithoutProperties(props, _excluded$U);
 
   var classes = classnames((_classNames = {
     Card: true
@@ -2723,12 +2758,12 @@ Card.defaultProps = {
   shadow: 'shadow10'
 };
 
-var _excluded$P = ["border", "children", "className"];
+var _excluded$T = ["border", "children", "className"];
 var CardSubdued = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var border = props.border,
       children = props.children,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$P);
+      rest = _objectWithoutProperties(props, _excluded$T);
 
   var classes = classnames(_defineProperty$1({
     CardSubdued: true
@@ -2795,7 +2830,7 @@ var isSpaceKey = function isSpaceKey(e) {
   return e.key === 'Space';
 };
 
-var _excluded$O = ["onClick", "onKeyDown", "role", "tabIndex"];
+var _excluded$S = ["onClick", "onKeyDown", "role", "tabIndex"];
 var allowed = {
   button: new Set(['Enter', 'Space', 'Spacebar', ' ']),
   link: new Set(['Enter']),
@@ -2819,7 +2854,7 @@ var useAccessibilityProps = function useAccessibilityProps(_ref) {
       _ref$role = _ref.role,
       role = _ref$role === void 0 ? 'button' : _ref$role,
       tabIndex = _ref.tabIndex,
-      rest = _objectWithoutProperties(_ref, _excluded$O);
+      rest = _objectWithoutProperties(_ref, _excluded$S);
 
   return _objectSpread2({}, onClick ? {
     onClick: onClick,
@@ -2937,43 +2972,49 @@ Icon.defaultProps = {
   size: 16
 };
 
-var _excluded$N = ["children", "componentType", "className"];
+var _excluded$R = ["children", "componentType", "className"];
 
-var GenericText = function GenericText(_ref) {
+var GenericText = function GenericText(_ref, ref) {
   var children = _ref.children,
       _ref$componentType = _ref.componentType,
       componentType = _ref$componentType === void 0 ? 'span' : _ref$componentType,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$N);
+      rest = _objectWithoutProperties(_ref, _excluded$R);
 
-  return /*#__PURE__*/React.createElement(componentType, _objectSpread2(_objectSpread2({}, props), {}, {
-    className: className
+  return /*#__PURE__*/React.createElement(componentType, _objectSpread2(_objectSpread2({}, rest), {}, {
+    className: className,
+    ref: ref
   }), children);
 };
 
-var _excluded$M = ["appearance", "size", "children", "weight", "small", "className", "color"];
-var Text = function Text(props) {
+var Link$1 = /*#__PURE__*/React.forwardRef(GenericText);
+
+var _excluded$Q = ["appearance", "size", "children", "weight", "small", "className", "color"];
+var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
-  var appearance = props.appearance,
-      size = props.size,
+  var _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'regular' : _props$size,
       children = props.children,
       weight = props.weight,
       small = props.small,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$M);
+      rest = _objectWithoutProperties(props, _excluded$Q);
 
   var classes = classnames((_classNames = {
     Text: true
   }, _defineProperty$1(_classNames, "Text--".concat(appearance), !color && appearance), _defineProperty$1(_classNames, "Text--".concat(weight), weight), _defineProperty$1(_classNames, "Text--".concat(size), size), _defineProperty$1(_classNames, "color-".concat(color), color), _defineProperty$1(_classNames, 'Text--small', size === 'small' || small), _classNames), className);
-  return /*#__PURE__*/React.createElement(GenericText, _extends$2({
+  return /*#__PURE__*/React.createElement(Link$1, _extends$2({
+    ref: ref,
     "data-test": "DesignSystem-Text"
   }, rest, {
     className: classes,
     componentType: "span"
   }), children);
-};
+});
 Text.displayName = 'Text';
 Text.defaultProps = {
   appearance: 'default',
@@ -3249,7 +3290,7 @@ var CheckboxIcon = function CheckboxIcon(props) {
   }
 };
 
-var _excluded$L = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
+var _excluded$P = ["size", "tabIndex", "defaultChecked", "indeterminate", "label", "error", "disabled", "onChange", "name", "value", "className", "checked", "helpText", "id"];
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6;
 
@@ -3270,7 +3311,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       helpText = props.helpText,
       _props$id = props.id,
       id = _props$id === void 0 ? "".concat(name, "-").concat(label, "-").concat(uidGenerator()) : _props$id,
-      rest = _objectWithoutProperties(props, _excluded$L);
+      rest = _objectWithoutProperties(props, _excluded$P);
 
   var ref = React.useRef(null);
   React.useImperativeHandle(forwardedRef, function () {
@@ -3351,7 +3392,7 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
 });
 Checkbox.displayName = 'Checkbox';
 
-var _excluded$K = ["size", "sizeXS", "sizeS", "sizeM", "sizeL", "sizeXL", "className", "children"];
+var _excluded$O = ["size", "sizeXS", "sizeS", "sizeM", "sizeL", "sizeXL", "className", "children"];
 var Column = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -3363,7 +3404,7 @@ var Column = /*#__PURE__*/React.forwardRef(function (props, ref) {
       sizeXL = props.sizeXL,
       className = props.className,
       children = props.children,
-      rest = _objectWithoutProperties(props, _excluded$K);
+      rest = _objectWithoutProperties(props, _excluded$O);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Col', true), _defineProperty$1(_classNames, "Col--".concat(size), size), _defineProperty$1(_classNames, "Col--xs-".concat(sizeXS), sizeXS), _defineProperty$1(_classNames, "Col--s-".concat(sizeS), sizeS), _defineProperty$1(_classNames, "Col--m-".concat(sizeM), sizeM), _defineProperty$1(_classNames, "Col--l-".concat(sizeL), sizeL), _defineProperty$1(_classNames, "Col--xl-".concat(sizeXL), sizeXL), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   return /*#__PURE__*/React.createElement("div", _extends$2({
@@ -3474,7 +3515,7 @@ var Trigger$1 = function Trigger(props) {
   }));
 };
 
-var _excluded$J = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"];
+var _excluded$N = ["date", "open", "position", "inputFormat", "outputFormat", "inputOptions", "validators", "withInput", "disabledBefore", "disabledAfter", "onDateChange", "closeOnSelect", "size", "showTodayDate", "children", "view"];
 var DatePicker = /*#__PURE__*/function (_React$Component) {
   _inherits(DatePicker, _React$Component);
 
@@ -3629,7 +3670,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           _this$props4$children = _this$props4.children,
           children = _this$props4$children === void 0 ? /*#__PURE__*/React.createElement(React.Fragment, null) : _this$props4$children,
           view = _this$props4.view,
-          rest = _objectWithoutProperties(_this$props4, _excluded$J);
+          rest = _objectWithoutProperties(_this$props4, _excluded$N);
 
       var date = this.state.date;
       var months = config.months;
@@ -4695,7 +4736,7 @@ function debounce$1 (delay, atBegin, callback) {
   return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
 }
 
-var _excluded$I = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconType"];
+var _excluded$M = ["triggerSize", "placeholder", "menu", "children", "icon", "disabled", "open", "inlineLabel", "error", "iconType"];
 var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames, _classNames2;
 
@@ -4712,7 +4753,7 @@ var DropdownButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       inlineLabel = props.inlineLabel,
       error = props.error,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$I);
+      rest = _objectWithoutProperties(props, _excluded$M);
 
   var buttonDisabled = disabled ? 'disabled' : 'default';
   var trimmedPlaceholder = placeholder.trim();
@@ -5785,7 +5826,7 @@ var DropdownList = function DropdownList(props) {
 
 DropdownList.displayName = 'DropdownList';
 
-var _excluded$H = ["triggerOptions", "selected", "tabIndex"];
+var _excluded$L = ["triggerOptions", "selected", "tabIndex"];
 var inputRef = /*#__PURE__*/React.createRef();
 
 /**
@@ -6477,7 +6518,7 @@ var Dropdown = /*#__PURE__*/function (_React$Component) {
           triggerOptions = _this$props14$trigger === void 0 ? {} : _this$props14$trigger;
           _this$props14.selected;
           var tabIndex = _this$props14.tabIndex,
-          rest = _objectWithoutProperties(_this$props14, _excluded$H);
+          rest = _objectWithoutProperties(_this$props14, _excluded$L);
 
       var remainingOptionsLen = searchedOptionsLength - options.length;
       var firstEnabledOption = tabIndex ? tabIndex : _isSelectAllPresent(searchTerm, remainingOptionsLen, withSelectAll, withCheckbox) ? 0 : options.findIndex(function (option) {
@@ -6525,7 +6566,7 @@ _defineProperty$1(Dropdown, "defaultProps", {
   searchDebounceDuration: 300
 });
 
-var _excluded$G = ["appearance", "size", "children", "className", "color"];
+var _excluded$K = ["appearance", "size", "children", "className", "color"];
 var sizeMap = {
   s: 'h5',
   m: 'h4',
@@ -6541,12 +6582,12 @@ var Heading = function Heading(props) {
       children = props.children,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$G);
+      rest = _objectWithoutProperties(props, _excluded$K);
 
   var classes = classnames((_classNames = {
     Heading: true
   }, _defineProperty$1(_classNames, "Heading--".concat(size), size), _defineProperty$1(_classNames, "Heading--".concat(appearance), !color && appearance), _defineProperty$1(_classNames, "color-".concat(color), color), _classNames), className);
-  return /*#__PURE__*/React.createElement(GenericText, _extends$2({
+  return /*#__PURE__*/React.createElement(Link$1, _extends$2({
     "data-test": "DesignSystem-Heading"
   }, rest, {
     className: classes,
@@ -6559,13 +6600,13 @@ Heading.defaultProps = {
   size: 'm'
 };
 
-var _excluded$F = ["className", "iconType"];
+var _excluded$J = ["className", "iconType"];
 var ActionButton$1 = function ActionButton(props) {
   var _classNames;
 
   var className = props.className,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$F);
+      rest = _objectWithoutProperties(props, _excluded$J);
 
   var iconClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ActionButton', true), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   return /*#__PURE__*/React.createElement(Icon, _extends$2({
@@ -6580,7 +6621,7 @@ ActionButton$1.defaultProps = {
   type: 'rounded'
 };
 
-var _excluded$E = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly", "iconType"];
+var _excluded$I = ["size", "type", "minWidth", "defaultValue", "name", "placeholder", "value", "icon", "inlineLabel", "required", "error", "info", "onChange", "onClick", "onClear", "onBlur", "onFocus", "onPaste", "actionIcon", "className", "autoFocus", "disabled", "readOnly", "iconType"];
 var sizeMapping$2 = {
   tiny: 12,
   regular: 16,
@@ -6622,7 +6663,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       disabled = props.disabled,
       readOnly = props.readOnly,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$E);
+      rest = _objectWithoutProperties(props, _excluded$I);
 
   var ref = React.useRef(null);
 
@@ -6731,7 +6772,7 @@ Object.assign(Input, {
   ActionButton: ActionButton$1
 });
 
-var _excluded$D = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconType"];
+var _excluded$H = ["size", "defaultValue", "name", "placeholder", "icon", "prefix", "suffix", "error", "min", "max", "onChange", "onClick", "onBlur", "onFocus", "className", "autoFocus", "disabled", "readOnly", "value", "showActionButton", "onKeyDown", "iconType"];
 var sizeMapping$1 = {
   regular: 16,
   large: 20
@@ -6782,7 +6823,7 @@ var MetricInput = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       showActionButton = _props$showActionButt === void 0 ? true : _props$showActionButt,
       onKeyDown = props.onKeyDown,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$D);
+      rest = _objectWithoutProperties(props, _excluded$H);
 
   var ref = React.useRef(null);
   var isUncontrolled = valueProp === undefined;
@@ -6948,7 +6989,7 @@ var getDefaultValue = function getDefaultValue(mask, placeholderChar) {
   return val;
 };
 
-var _excluded$C = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onPaste", "onBlur", "onFocus", "onClear", "className", "id", "helpText"];
+var _excluded$G = ["mask", "value", "placeholderChar", "validators", "clearOnEmptyBlur", "defaultValue", "mask", "error", "caption", "required", "onChange", "onPaste", "onBlur", "onFocus", "onClear", "className", "id", "helpText"];
 
 /**
  * It works as Uncontrolled Input
@@ -6977,7 +7018,7 @@ var InputMask = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
       className = props.className,
       id = props.id,
       helpText = props.helpText,
-      rest = _objectWithoutProperties(props, _excluded$C);
+      rest = _objectWithoutProperties(props, _excluded$G);
 
   var isEditable = React.useCallback(function (pos) {
     return _typeof(mask[pos]) === 'object';
@@ -7281,7 +7322,7 @@ InputMask.utils = {
 };
 var X = InputMask;
 
-var _excluded$B = ["required", "optional", "withInput", "disabled", "children", "className", "info"];
+var _excluded$F = ["required", "optional", "withInput", "disabled", "children", "className", "info"];
 
 /**
  * *NOTE: Extends props with HTMLProps<HTMLLabelElement>*
@@ -7296,7 +7337,7 @@ var Label = function Label(props) {
       children = props.children,
       className = props.className,
       info = props.info,
-      rest = _objectWithoutProperties(props, _excluded$B);
+      rest = _objectWithoutProperties(props, _excluded$F);
 
   var baseProps = extractBaseProps(props);
   var LabelClass = classnames((_classNames = {
@@ -7345,7 +7386,7 @@ var Label = function Label(props) {
     "data-test": "DesignSystem-Label"
   }, baseProps, {
     className: LabelClass
-  }), /*#__PURE__*/React.createElement(GenericText, _extends$2({
+  }), /*#__PURE__*/React.createElement(Link$1, _extends$2({
     "data-test": "DesignSystem-Label--Text",
     className: classes,
     componentType: "label"
@@ -7454,7 +7495,7 @@ var Editable = function Editable(props) {
 };
 Editable.displayName = 'Editable';
 
-var _excluded$A = ["onChange", "onClose"];
+var _excluded$E = ["onChange", "onClose"];
 var EditableDropdown = function EditableDropdown(props) {
   var _classNames2;
 
@@ -7465,7 +7506,7 @@ var EditableDropdown = function EditableDropdown(props) {
 
   var onDropdownChange = dropdownOptions.onChange,
       onDropdownClose = dropdownOptions.onClose,
-      rest = _objectWithoutProperties(dropdownOptions, _excluded$A);
+      rest = _objectWithoutProperties(dropdownOptions, _excluded$E);
 
   var _React$useState = React.useState(placeholder),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -7546,7 +7587,7 @@ EditableDropdown.defaultProps = {
   dropdownOptions: {}
 };
 
-var _excluded$z = ["children", "className", "appearance", "size", "disabled"];
+var _excluded$D = ["children", "className", "appearance", "size", "disabled"];
 var Link = function Link(props) {
   var _classNames;
 
@@ -7555,12 +7596,12 @@ var Link = function Link(props) {
       appearance = props.appearance,
       size = props.size,
       disabled = props.disabled,
-      rest = _objectWithoutProperties(props, _excluded$z);
+      rest = _objectWithoutProperties(props, _excluded$D);
 
   var classes = classnames((_classNames = {
     Link: true
   }, _defineProperty$1(_classNames, "Link--".concat(size), size), _defineProperty$1(_classNames, "Link--".concat(appearance), appearance), _defineProperty$1(_classNames, "Link--".concat(appearance, "-disabled"), disabled), _classNames), className);
-  return /*#__PURE__*/React.createElement(GenericText, _extends$2({
+  return /*#__PURE__*/React.createElement(Link$1, _extends$2({
     "data-test": "DesignSystem-Link",
     className: classes,
     componentType: "a",
@@ -8451,12 +8492,12 @@ _defineProperty$1(MultiSlider, "defaultProps", {
 
 _defineProperty$1(MultiSlider, "Handle", MultiSliderHandle);
 
-var _excluded$y = ["children", "className", "onOutsideClick"];
+var _excluded$C = ["children", "className", "onOutsideClick"];
 var OutsideClick = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
       className = props.className,
       onOutsideClick = props.onOutsideClick,
-      rest = _objectWithoutProperties(props, _excluded$y);
+      rest = _objectWithoutProperties(props, _excluded$C);
 
   var innerRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
@@ -8488,7 +8529,7 @@ var OutsideClick = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 OutsideClick.displayName = 'OutsideClick';
 
-var _excluded$x = ["appearance", "children", "className", "color"];
+var _excluded$B = ["appearance", "children", "className", "color"];
 var Paragraph = function Paragraph(props) {
   var _classNames;
 
@@ -8496,12 +8537,12 @@ var Paragraph = function Paragraph(props) {
       children = props.children,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$x);
+      rest = _objectWithoutProperties(props, _excluded$B);
 
   var classes = classnames((_classNames = {
     Text: true
   }, _defineProperty$1(_classNames, "Text--".concat(appearance), !color && appearance), _defineProperty$1(_classNames, "color-".concat(color), color), _classNames), className);
-  return /*#__PURE__*/React.createElement(GenericText, _extends$2({
+  return /*#__PURE__*/React.createElement(Link$1, _extends$2({
     "data-test": "DesignSystem-Paragraph"
   }, rest, {
     className: classes,
@@ -8544,7 +8585,7 @@ ProgressBar.defaultProps = {
   size: 'regular'
 };
 
-var _excluded$w = ["size", "label", "disabled", "onChange", "name", "value", "checked", "defaultChecked", "className", "helpText", "error"];
+var _excluded$A = ["size", "label", "disabled", "onChange", "name", "value", "checked", "defaultChecked", "className", "helpText", "error"];
 var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var _classNames, _classNames2, _classNames3;
 
@@ -8560,7 +8601,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       className = props.className,
       helpText = props.helpText,
       error = props.error,
-      rest = _objectWithoutProperties(props, _excluded$w);
+      rest = _objectWithoutProperties(props, _excluded$A);
 
   var ref = React.useRef(null);
   React.useImperativeHandle(forwardedRef, function () {
@@ -8611,11 +8652,11 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
 });
 Radio.displayName = 'Radio';
 
-var _excluded$v = ["className", "children"];
+var _excluded$z = ["className", "children"];
 var Row = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       children = props.children,
-      rest = _objectWithoutProperties(props, _excluded$v);
+      rest = _objectWithoutProperties(props, _excluded$z);
 
   var classes = classnames(_defineProperty$1({
     Row: true
@@ -8732,13 +8773,13 @@ Spinner.defaultProps = {
   size: 'medium'
 };
 
-var _excluded$u = ["value", "defaultValue", "onRelease", "onChange"];
+var _excluded$y = ["value", "defaultValue", "onRelease", "onChange"];
 var Slider = function Slider(props) {
   var valueProp = props.value,
       defaultValue = props.defaultValue,
       onRelease = props.onRelease,
       onChange = props.onChange,
-      rest = _objectWithoutProperties(props, _excluded$u);
+      rest = _objectWithoutProperties(props, _excluded$y);
 
   var _React$useState = React.useState(valueProp === undefined ? defaultValue : valueProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8771,7 +8812,7 @@ Slider.defaultProps = _objectSpread2(_objectSpread2({}, MultiSlider.defaultProps
   defaultValue: 0
 });
 
-var _excluded$t = ["value", "defaultValue", "onChange", "onRelease"];
+var _excluded$x = ["value", "defaultValue", "onChange", "onRelease"];
 var RangeIndex;
 
 (function (RangeIndex) {
@@ -8784,7 +8825,7 @@ var RangeSlider = function RangeSlider(props) {
       defaultValue = props.defaultValue,
       onChange = props.onChange,
       onRelease = props.onRelease,
-      rest = _objectWithoutProperties(props, _excluded$t);
+      rest = _objectWithoutProperties(props, _excluded$x);
 
   var _React$useState = React.useState(valueProp === undefined ? defaultValue : valueProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8820,7 +8861,7 @@ RangeSlider.defaultProps = _objectSpread2(_objectSpread2({}, MultiSlider.default
   defaultValue: [0, 10]
 });
 
-var _excluded$s = ["appearance", "children", "className", "color"];
+var _excluded$w = ["appearance", "children", "className", "color"];
 var Subheading = function Subheading(props) {
   var _classNames;
 
@@ -8828,12 +8869,12 @@ var Subheading = function Subheading(props) {
       children = props.children,
       className = props.className,
       color = props.color,
-      rest = _objectWithoutProperties(props, _excluded$s);
+      rest = _objectWithoutProperties(props, _excluded$w);
 
   var classes = classnames((_classNames = {
     Subheading: true
   }, _defineProperty$1(_classNames, "Subheading--".concat(appearance), !color && appearance), _defineProperty$1(_classNames, "color-".concat(color), color), _classNames), className);
-  return /*#__PURE__*/React.createElement(GenericText, _extends$2({
+  return /*#__PURE__*/React.createElement(Link$1, _extends$2({
     "data-test": "DesignSystem-Subheading"
   }, rest, {
     className: classes,
@@ -8845,7 +8886,7 @@ Subheading.defaultProps = {
   appearance: 'default'
 };
 
-var _excluded$r = ["size", "defaultChecked", "disabled", "onChange", "name", "value", "className", "appearance", "checked"];
+var _excluded$v = ["size", "defaultChecked", "disabled", "onChange", "name", "value", "className", "appearance", "checked"];
 
 /**
  * ######Switch has two types:
@@ -8865,7 +8906,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
       className = props.className;
       props.appearance;
       var checkedProp = props.checked,
-      rest = _objectWithoutProperties(props, _excluded$r);
+      rest = _objectWithoutProperties(props, _excluded$v);
 
   var _React$useState = React.useState(checkedProp === undefined ? defaultChecked : checkedProp),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -8904,7 +8945,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
 });
 Switch.displayName = 'Switch';
 
-var _excluded$q = ["rows", "resize", "disabled", "name", "placeholder", "value", "defaultValue", "required", "error", "onChange", "onClick", "onBlur", "onFocus", "className"];
+var _excluded$u = ["rows", "resize", "disabled", "name", "placeholder", "value", "defaultValue", "required", "error", "onChange", "onClick", "onBlur", "onFocus", "className"];
 var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames;
 
@@ -8924,7 +8965,7 @@ var Textarea = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onBlur = props.onBlur,
       onFocus = props.onFocus,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$q);
+      rest = _objectWithoutProperties(props, _excluded$u);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Textarea', true), _defineProperty$1(_classNames, 'Textarea--resize', resize), _defineProperty$1(_classNames, 'Textarea--error', error), _classNames), className);
   return /*#__PURE__*/React.createElement("textarea", _extends$2({
@@ -13700,6 +13741,11 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
           break;
       }
 
+      if (_this.props.triggerCoordinates) {
+        newStyle.position = 'absolute';
+        newStyle.transform = "translate(".concat(_this.props.triggerCoordinates.x, "px, ").concat(_this.props.triggerCoordinates.y, "px)");
+      }
+
       return newStyle;
     });
 
@@ -14014,16 +14060,33 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
           placement = _this$props6.placement,
           appendToBody = _this$props6.appendToBody,
           hide = _this$props6.hide,
-          boundaryElement = _this$props6.boundaryElement;
+          boundaryElement = _this$props6.boundaryElement,
+          triggerCoordinates = _this$props6.triggerCoordinates;
       var _this$state2 = this.state,
           animationKeyframe = _this$state2.animationKeyframe,
           isOpen = _this$state2.isOpen;
+      var coordinatesPopper = /*#__PURE__*/React.createElement(Popper, {
+        placement: placement,
+        innerRef: this.popupRef,
+        modifiers: _objectSpread2({
+          preventOverflow: {
+            boundariesElement: boundaryElement || document.body
+          },
+          hide: {
+            enabled: hide
+          }
+        }, triggerCoordinates && {
+          offset: {
+            offset: "".concat(triggerCoordinates.x, "px, ").concat(triggerCoordinates.y, "px")
+          }
+        })
+      }, this.getPopperChildren);
       return /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement("style", null, animationKeyframe), /*#__PURE__*/React.createElement(Reference, {
         innerRef: this.triggerRef
       }, function (_ref2) {
         var ref = _ref2.ref;
         return _this6.getTriggerElement(ref);
-      }), isOpen && appendToBody && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
+      }), isOpen && appendToBody && !triggerCoordinates && /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(Popper, {
         placement: placement,
         innerRef: this.popupRef,
         modifiers: {
@@ -14034,7 +14097,7 @@ var PopperWrapper = /*#__PURE__*/function (_React$Component) {
             enabled: hide
           }
         }
-      }, this.getPopperChildren), document.body), isOpen && !appendToBody && /*#__PURE__*/React.createElement(Popper, {
+      }, this.getPopperChildren), document.body), isOpen && appendToBody && triggerCoordinates && /*#__PURE__*/ReactDOM.createPortal(coordinatesPopper, document.body), isOpen && !appendToBody && !triggerCoordinates && /*#__PURE__*/React.createElement(Popper, {
         placement: placement,
         innerRef: this.popupRef
       }, this.getPopperChildren));
@@ -14053,7 +14116,7 @@ _defineProperty$1(PopperWrapper, "defaultProps", {
   style: {}
 });
 
-var _excluded$p = ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement"];
+var _excluded$t = ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement", "name"];
 var propsList = ['appendToBody', 'trigger', 'hoverable', 'on', 'open', 'closeOnBackdropClick', 'offset', 'closeOnScroll'];
 var Popover = function Popover(props) {
   var position = props.position,
@@ -14065,7 +14128,8 @@ var Popover = function Popover(props) {
       hideOnReferenceEscape = props.hideOnReferenceEscape,
       _props$boundaryElemen = props.boundaryElement,
       boundaryElement = _props$boundaryElemen === void 0 ? document.body : _props$boundaryElemen,
-      rest = _objectWithoutProperties(props, _excluded$p);
+      name = props.name,
+      rest = _objectWithoutProperties(props, _excluded$t);
 
   var _React$useState = React.useState(!!props.open),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14097,7 +14161,8 @@ var Popover = function Popover(props) {
     "data-test": "DesignSystem-Popover",
     className: classes,
     "data-layer": true,
-    "data-opened": open
+    "data-opened": open,
+    "data-name": name
   }, children);
   return /*#__PURE__*/React.createElement(PopperWrapper, _extends$2({}, rest, {
     init: init,
@@ -14117,7 +14182,7 @@ Popover.defaultProps = Object.assign({}, filterProps(PopperWrapper.defaultProps,
   customStyle: {}
 });
 
-var _excluded$o = ["type", "onClick"];
+var _excluded$s = ["type", "onClick"];
 var keyCodes$1 = {
   BACKSPACE: 'Backspace',
   DELETE: 'Delete',
@@ -14236,7 +14301,7 @@ var ChipInput = function ChipInput(props) {
     var _chipOptions$type = chipOptions.type,
         type = _chipOptions$type === void 0 ? 'input' : _chipOptions$type,
         _onClick = chipOptions.onClick,
-        rest = _objectWithoutProperties(chipOptions, _excluded$o);
+        rest = _objectWithoutProperties(chipOptions, _excluded$s);
 
     return /*#__PURE__*/React.createElement(Chip, _extends$2({
       "data-test": "DesignSystem-ChipInput--Chip",
@@ -14407,7 +14472,7 @@ var _MenuPills = function MenuPills(props) {
   }, count);
 };
 
-var MenuItem = function MenuItem(props) {
+var MenuItem$1 = function MenuItem(props) {
   var _classNames2;
 
   var menu = props.menu,
@@ -14480,7 +14545,7 @@ var MenuItem = function MenuItem(props) {
   /*#__PURE__*/
   // TODO(a11y)
   // eslint-disable-next-line
-  React.createElement(GenericText, _extends$2({
+  React.createElement(Link$1, _extends$2({
     componentType: "a",
     className: ItemClass
   }, baseProps), /*#__PURE__*/React.createElement("div", {
@@ -14495,7 +14560,7 @@ var MenuItem = function MenuItem(props) {
     labelColor: itemColor
   })), expanded && renderSubMenu());
 };
-MenuItem.defaultProps = {
+MenuItem$1.defaultProps = {
   isActive: false
 };
 
@@ -14598,7 +14663,7 @@ var VerticalNav = function VerticalNav(props) {
       }, menu.group)), showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
         tooltip: menu.label,
         position: "right"
-      }, /*#__PURE__*/React.createElement(MenuItem, {
+      }, /*#__PURE__*/React.createElement(MenuItem$1, {
         "data-test": "DesignSystem-VerticalNav--Item",
         menu: menu,
         expanded: expanded,
@@ -14609,7 +14674,7 @@ var VerticalNav = function VerticalNav(props) {
         isChildrenVisible: isChildrenVisible,
         onClick: onClickHandler,
         customItemRenderer: customItemRenderer
-      })) : /*#__PURE__*/React.createElement(MenuItem, {
+      })) : /*#__PURE__*/React.createElement(MenuItem$1, {
         "data-test": "DesignSystem-VerticalNav--Item",
         menu: menu,
         expanded: expanded,
@@ -14624,7 +14689,7 @@ var VerticalNav = function VerticalNav(props) {
         return showTooltip ? /*#__PURE__*/React.createElement(Tooltip, {
           tooltip: subMenu.label,
           position: "right"
-        }, /*#__PURE__*/React.createElement(MenuItem, {
+        }, /*#__PURE__*/React.createElement(MenuItem$1, {
           key: id,
           menu: subMenu,
           expanded: expanded,
@@ -14634,7 +14699,7 @@ var VerticalNav = function VerticalNav(props) {
           onClick: onClickHandler,
           isActive: isMenuActive(menus, subMenu, active),
           customItemRenderer: customItemRenderer
-        })) : /*#__PURE__*/React.createElement(MenuItem, {
+        })) : /*#__PURE__*/React.createElement(MenuItem$1, {
           key: id,
           menu: subMenu,
           expanded: expanded,
@@ -14749,7 +14814,7 @@ var HorizontalNav = function HorizontalNav(props) {
   }), list);
 };
 
-var _excluded$n = ["children", "tooltip", "showTooltip"];
+var _excluded$r = ["children", "tooltip", "showTooltip", "showOnTruncation", "elementRef"];
 var tooltipPropsList = ['trigger', 'on', 'open', 'offset', 'onToggle', 'dark', 'customStyle', 'closeOnBackdropClick', 'hideOnReferenceEscape', 'closeOnScroll'];
 var positionValue = {
   bottom: 'bottom',
@@ -14761,11 +14826,33 @@ var positionValue = {
   left: 'left',
   right: 'right'
 };
+var detectTruncation = function detectTruncation(boundaryRef) {
+  var element = boundaryRef === null || boundaryRef === void 0 ? void 0 : boundaryRef.current;
+  var isTruncated = element ? element.scrollWidth > element.clientWidth : false;
+  return isTruncated;
+};
 var Tooltip = function Tooltip(props) {
   var children = props.children,
       tooltip = props.tooltip,
       showTooltip = props.showTooltip,
-      rest = _objectWithoutProperties(props, _excluded$n);
+      showOnTruncation = props.showOnTruncation,
+      elementRef = props.elementRef,
+      rest = _objectWithoutProperties(props, _excluded$r);
+
+  var childrenRef = React.useRef(null);
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isTruncated = _React$useState2[0],
+      setIsTruncated = _React$useState2[1];
+
+  React.useEffect(function () {
+    var element = elementRef ? elementRef : childrenRef;
+    setIsTruncated(detectTruncation(element));
+  }, [childrenRef, elementRef]);
+  var renderChildern = elementRef || ! /*#__PURE__*/React.isValidElement(children) ? children : /*#__PURE__*/React.cloneElement(children, {
+    ref: childrenRef
+  });
 
   if (!showTooltip) {
     // If showTooltip is false skip the Popover and return the children directly
@@ -14778,6 +14865,21 @@ var Tooltip = function Tooltip(props) {
     className: "Tooltip-text",
     appearance: "white"
   }, tooltip));
+
+  if (showOnTruncation) {
+    return isTruncated ? /*#__PURE__*/React.createElement(Popover, _extends$2({
+      trigger: renderChildern,
+      on: 'hover',
+      offset: 'medium'
+    }, rest, {
+      animationClass: {
+        open: "Tooltip-animation-open-".concat(positionValue[props.position]),
+        close: "Tooltip-animation-close-".concat(positionValue[props.position])
+      },
+      className: "Tooltip-container"
+    }), tooltipWrapper) : renderChildern;
+  }
+
   return /*#__PURE__*/React.createElement(Popover, _extends$2({
     trigger: children,
     on: 'hover',
@@ -14789,14 +14891,18 @@ var Tooltip = function Tooltip(props) {
     },
     className: "Tooltip-container"
   }), tooltipWrapper);
-}; // Tooltip.defaultProps = filterProps({
-//   ...Popover.defaultProps,
-//   hoverable: false
-// }, propsList);
+};
+
+Tooltip.useAutoTooltip = function () {
+  return {
+    detectTruncation: detectTruncation
+  };
+};
 
 Tooltip.defaultProps = Object.assign({}, filterProps(Popover.defaultProps, tooltipPropsList), {
   hoverable: false,
-  showTooltip: true
+  showTooltip: true,
+  showOnTruncation: false
 });
 
 var Dialog = function Dialog(props) {
@@ -14847,7 +14953,7 @@ Dialog.defaultProps = {
   secondaryButtonAppearance: 'basic'
 };
 
-var _excluded$m = ["label"];
+var _excluded$q = ["label"];
 var OverlayFooter = function OverlayFooter(props) {
   var open = props.open,
       className = props.className,
@@ -14884,7 +14990,7 @@ var OverlayFooter = function OverlayFooter(props) {
       className: classes
     }), actions.map(function (_ref, index) {
       _ref.label;
-          var options = _objectWithoutProperties(_ref, _excluded$m);
+          var options = _objectWithoutProperties(_ref, _excluded$q);
 
       return /*#__PURE__*/React.createElement(Button, _extends$2({
         type: "button"
@@ -16245,7 +16351,7 @@ Pagination.defaultProps = {
   pageJumpDebounceDuration: 750
 };
 
-var _excluded$l = ["onChange"];
+var _excluded$p = ["onChange"];
 var EditableInput = function EditableInput(props) {
   var _classNames2, _classNames4;
 
@@ -16259,7 +16365,7 @@ var EditableInput = function EditableInput(props) {
       className = props.className;
 
   var onInputChange = inputOptions.onChange,
-      rest = _objectWithoutProperties(inputOptions, _excluded$l);
+      rest = _objectWithoutProperties(inputOptions, _excluded$p);
 
   var _React$useState = React.useState(props.value),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -16422,7 +16528,7 @@ EditableInput.defaultProps = {
   inputOptions: {}
 };
 
-var _excluded$k = ["onChange", "chipOptions"],
+var _excluded$o = ["onChange", "chipOptions"],
     _excluded2$2 = ["onClick"];
 var EditableChipInput = function EditableChipInput(props) {
   var _classNames3;
@@ -16436,7 +16542,7 @@ var EditableChipInput = function EditableChipInput(props) {
   var onChipInputChange = chipInputOptions.onChange,
       _chipInputOptions$chi = chipInputOptions.chipOptions,
       chipOptions = _chipInputOptions$chi === void 0 ? {} : _chipInputOptions$chi,
-      rest = _objectWithoutProperties(chipInputOptions, _excluded$k);
+      rest = _objectWithoutProperties(chipInputOptions, _excluded$o);
 
   var _onClick = chipOptions.onClick,
       chipObject = _objectWithoutProperties(chipOptions, _excluded2$2);
@@ -17252,7 +17358,7 @@ var getCustomDates = function getCustomDates() {
   };
 };
 
-var _excluded$j = ["startDate", "endDate", "yearNav", "monthNav", "open", "inputFormat", "outputFormat", "startInputOptions", "endInputOptions", "validators", "withInput", "position", "disabledBefore", "disabledAfter", "onRangeChange", "rangeLimit"];
+var _excluded$n = ["startDate", "endDate", "yearNav", "monthNav", "open", "inputFormat", "outputFormat", "startInputOptions", "endInputOptions", "validators", "withInput", "position", "disabledBefore", "disabledAfter", "onRangeChange", "rangeLimit"];
 var DateRangePicker = /*#__PURE__*/function (_React$Component) {
   _inherits(DateRangePicker, _React$Component);
 
@@ -17293,7 +17399,7 @@ var DateRangePicker = /*#__PURE__*/function (_React$Component) {
             daMonth = _getDateInfo2.month,
             daDate = _getDateInfo2.date;
 
-        return !date ? true : compareDate(date, 'less', dbYear, dbMonth, dbDate) || compareDate(date, 'more', daYear, daMonth, daDate);
+        return !date ? false : compareDate(date, 'less', dbYear, dbMonth, dbDate) || compareDate(date, 'more', daYear, daMonth, daDate);
       };
 
       var startError = isError(startDate);
@@ -17489,8 +17595,14 @@ var DateRangePicker = /*#__PURE__*/function (_React$Component) {
           var eValue = translateToString(outputFormat, _endDate3);
 
           if (!inRangeError && !startError && !endError) {
-            onRangeChange(_startDate3, _endDate3, sValue, eValue);
-          } else {
+            if (this.props.allowReverseSelection) {
+              if (_startDate3 && _endDate3) {
+                onRangeChange(_startDate3, _endDate3, sValue, eValue);
+              }
+            } else {
+              onRangeChange(_startDate3, _endDate3, sValue, eValue);
+            }
+          } else if (!this.props.allowReverseSelection) {
             if (!startError) onRangeChange(_startDate3, undefined, sValue, eValue);else if (!endError) onRangeChange(undefined, _endDate3, sValue, eValue);else onRangeChange(undefined, undefined, sValue, eValue);
           }
         }
@@ -17522,7 +17634,7 @@ var DateRangePicker = /*#__PURE__*/function (_React$Component) {
           disabledAfter = _this$props6.disabledAfter;
           _this$props6.onRangeChange;
           var rangeLimit = _this$props6.rangeLimit,
-          rest = _objectWithoutProperties(_this$props6, _excluded$j);
+          rest = _objectWithoutProperties(_this$props6, _excluded$n);
 
       var _this$state3 = this.state,
           startDate = _this$state3.startDate,
@@ -18426,7 +18538,7 @@ function _fromFileEntry() {
   return _fromFileEntry.apply(this, arguments);
 }
 
-var _excluded$i = ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnterCallback", "onDragOverCallback", "onDragLeaveCallback", "onDropCallback"],
+var _excluded$m = ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnterCallback", "onDragOverCallback", "onDragLeaveCallback", "onDropCallback"],
     _excluded2$1 = ["refKey", "onChange", "onClick"];
 var initialState = {
   isFocused: false,
@@ -18704,7 +18816,7 @@ var DropzoneBase = function DropzoneBase(props) {
           onDragOverCallback = _ref.onDragOverCallback,
           onDragLeaveCallback = _ref.onDragLeaveCallback,
           onDropCallback = _ref.onDropCallback,
-          rest = _objectWithoutProperties(_ref, _excluded$i);
+          rest = _objectWithoutProperties(_ref, _excluded$m);
 
       return _objectSpread2(_defineProperty$1({
         onDragEnter: composeDragHandler(composeEventHandlers(onDragEnterCallback, onDragEnterCb)),
@@ -20719,6 +20831,7 @@ var Header = function Header(props) {
   var loading = props.loading,
       error = props.error,
       data = props.data,
+      displayData = props.displayData,
       schema = props.schema,
       withSearch = props.withSearch,
       showHead = props.showHead,
@@ -20738,6 +20851,7 @@ var Header = function Header(props) {
       selectAll = props.selectAll,
       searchTerm = props.searchTerm,
       updateSearchTerm = props.updateSearchTerm,
+      globalActionRenderer = props.globalActionRenderer,
       dynamicColumn = props.dynamicColumn,
       allowSelectAll = props.allowSelectAll,
       showFilters = props.showFilters,
@@ -20818,6 +20932,8 @@ var Header = function Header(props) {
     className: "Header"
   }, /*#__PURE__*/React.createElement("div", {
     className: "Header-content Header-content--top"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "d-flex"
   }, withSearch && /*#__PURE__*/React.createElement("div", {
     className: "Header-search"
   }, /*#__PURE__*/React.createElement(Input, {
@@ -20860,7 +20976,9 @@ var Header = function Header(props) {
     });
   }))), children && /*#__PURE__*/React.createElement("div", {
     className: "Header-actions"
-  }, children)), /*#__PURE__*/React.createElement("div", {
+  }, children)), globalActionRenderer && /*#__PURE__*/React.createElement("div", {
+    className: "Header-global-actions"
+  }, globalActionRenderer(displayData))), /*#__PURE__*/React.createElement("div", {
     className: "Header-content Header-content--bottom"
   }, /*#__PURE__*/React.createElement("div", {
     className: "Header-label"
@@ -20902,7 +21020,7 @@ Header.defaultProps = {
   showFilters: true
 };
 
-var _excluded$h = ["children"];
+var _excluded$l = ["children"];
 
 var defaultErrorTemplate = function defaultErrorTemplate(props) {
   var _props$errorType = props.errorType,
@@ -20928,6 +21046,7 @@ var defaultProps = {
   pageSize: 15,
   draggable: true,
   data: [],
+  displayData: [],
   schema: [],
   loading: false,
   error: false,
@@ -21032,6 +21151,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
 
               _this.setState({
                 data: _data2,
+                displayData: _data2,
                 schema: schema,
                 selectAll: getSelectAll(_data2, _this.props.selectDisabledRow),
                 totalRecords: res.count,
@@ -21068,6 +21188,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
           errorType: 'NO_RECORDS_FOUND',
           selectAll: getSelectAll(renderedData, _this.props.selectDisabledRow),
           schema: renderedSchema,
+          displayData: sortedData,
           data: renderedData
         });
       }
@@ -21171,6 +21292,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       async: _async,
       data: !_async ? _data : [],
+      displayData: !_async ? _data : [],
       schema: !_async ? _schema : [],
       page: props.page,
       sortingList: props.sortingList,
@@ -21206,6 +21328,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
 
           this.setState({
             data: _data3,
+            displayData: _data3,
             schema: schema,
             error: this.props.error || false,
             errorType: this.props.errorType,
@@ -21224,6 +21347,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
 
           this.setState({
             data: _data4,
+            displayData: _data4,
             schema: _schema2,
             loading: this.props.loading || false,
             error: this.props.error || false,
@@ -21287,7 +21411,7 @@ var Table = /*#__PURE__*/function (_React$Component) {
 
       var _ref = headerOptions,
           headerChildren = _ref.children,
-          headerAttr = _objectWithoutProperties(_ref, _excluded$h);
+          headerAttr = _objectWithoutProperties(_ref, _excluded$l);
 
       var classes = className ? " ".concat(className) : '';
       var totalRecords = this.state.totalRecords;
@@ -21851,7 +21975,7 @@ FileList.defaultProps = {
 };
 FileList.displayName = 'FileList';
 
-var _excluded$g = ["type", "fields", "placeholder", "autoFocus", "onComplete", "onFocus", "onBlur", "className", "value"];
+var _excluded$k = ["type", "fields", "placeholder", "autoFocus", "onComplete", "onFocus", "onBlur", "className", "value"];
 var KEY_CODE = {
   backspace: 'Backspace',
   left: 'ArrowLeft',
@@ -21876,7 +22000,7 @@ var VerificationCodeInput = function VerificationCodeInput(props) {
       onBlur = props.onBlur,
       className = props.className;
       props.value;
-      var rest = _objectWithoutProperties(props, _excluded$g);
+      var rest = _objectWithoutProperties(props, _excluded$k);
 
   var initialValues = useMemo(function () {
     if (props.value && props.value.length) {
@@ -22287,7 +22411,7 @@ var HelpText = function HelpText(props) {
 };
 HelpText.displayName = 'HelpText';
 
-var _excluded$f = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconType"];
+var _excluded$j = ["children", "type", "className", "disabled", "tabIndex", "icon", "subtle", "size", "iconAlign", "iconType"];
 var sizeMapping = {
   tiny: 12,
   regular: 16
@@ -22305,7 +22429,7 @@ var LinkButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
       size = props.size,
       iconAlign = props.iconAlign,
       iconType = props.iconType,
-      rest = _objectWithoutProperties(props, _excluded$f);
+      rest = _objectWithoutProperties(props, _excluded$j);
 
   var buttonClass = classnames((_classNames = {}, _defineProperty$1(_classNames, 'LinkButton', true), _defineProperty$1(_classNames, "LinkButton--".concat(size), size), _defineProperty$1(_classNames, 'LinkButton--default', !subtle), _defineProperty$1(_classNames, 'LinkButton--subtle', subtle), _defineProperty$1(_classNames, "LinkButton--iconAlign-".concat(iconAlign), children && iconAlign), _defineProperty$1(_classNames, "".concat(className), className), _classNames));
   var iconClass = classnames((_classNames2 = {}, _defineProperty$1(_classNames2, 'LinkButton-icon', true), _defineProperty$1(_classNames2, "LinkButton-icon--".concat(iconAlign), children && iconAlign), _classNames2));
@@ -22332,7 +22456,7 @@ LinkButton.defaultProps = {
   iconAlign: 'left'
 };
 
-var _excluded$e = ["children", "disabled", "className", "zIndex", "onClick"];
+var _excluded$i = ["children", "disabled", "className", "zIndex", "onClick"];
 var ActionCard = function ActionCard(props) {
   var _classNames;
 
@@ -22341,7 +22465,7 @@ var ActionCard = function ActionCard(props) {
       className = props.className,
       zIndex = props.zIndex,
       onClick = props.onClick,
-      rest = _objectWithoutProperties(props, _excluded$e);
+      rest = _objectWithoutProperties(props, _excluded$i);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'ActionCard', true), _defineProperty$1(_classNames, 'ActionCard--disabled', disabled), _classNames), className);
 
@@ -22443,7 +22567,7 @@ function useSingleSelect() {
   };
 }
 
-var _excluded$d = ["children", "onClick", "disabled", "id", "cardValue", "overlayZIndex", "selected", "className"];
+var _excluded$h = ["children", "onClick", "disabled", "id", "cardValue", "overlayZIndex", "selected", "className"];
 var SelectionCard = function SelectionCard(props) {
   var _classNames;
 
@@ -22455,7 +22579,7 @@ var SelectionCard = function SelectionCard(props) {
       overlayZIndex = props.overlayZIndex,
       selected = props.selected,
       className = props.className,
-      rest = _objectWithoutProperties(props, _excluded$d);
+      rest = _objectWithoutProperties(props, _excluded$h);
 
   var classes = classnames((_classNames = {}, _defineProperty$1(_classNames, 'Selection-card', true), _defineProperty$1(_classNames, 'Selection-card--selected', selected), _defineProperty$1(_classNames, 'Selection-card--disabled', disabled && !selected), _defineProperty$1(_classNames, 'Selection-card--selected-disabled', disabled && selected), _classNames), className);
 
@@ -23287,6 +23411,7 @@ var ListBody = function ListBody(props) {
     "data-test": "DesignSystem-Listbox-DragIcon"
   }), children);
 };
+ListBody.displayName = 'ListBody';
 
 var getAnimationClass = function getAnimationClass(uniqueKey, expanded) {
   if (expanded) return "nestedList-open-".concat(uniqueKey, " 240ms cubic-bezier(0, 0, 0.38, 0.9)");else if (!expanded) return "nestedList-close-".concat(uniqueKey, " 160ms cubic-bezier(0.2, 0, 1, 0.9)");
@@ -23367,15 +23492,16 @@ var NestedList = function NestedList(props) {
   }, nestedBody));
 };
 
-var _excluded$c = ["nestedBody", "expanded", "id", "onClick", "value", "tagName"];
+var _excluded$g = ["nestedBody", "expanded", "id", "onClick", "value", "tagName"];
 var ListboxItem = function ListboxItem(props) {
   var nestedBody = props.nestedBody,
       expanded = props.expanded,
       id = props.id,
       onClick = props.onClick,
       value = props.value,
-      Tag = props.tagName,
-      rest = _objectWithoutProperties(props, _excluded$c);
+      _props$tagName = props.tagName,
+      Tag = _props$tagName === void 0 ? 'li' : _props$tagName,
+      rest = _objectWithoutProperties(props, _excluded$g);
 
   var contextProp = React.useContext(ListboxContext);
   var showDivider = contextProp.showDivider,
@@ -23388,25 +23514,24 @@ var ListboxItem = function ListboxItem(props) {
   var tagClass = classnames(_defineProperty$1({}, 'Listbox-item-wrapper', !draggable));
   return /*#__PURE__*/React.createElement(Tag, _extends$2({
     id: id,
-    key: id,
     "data-test": "DesignSystem-Listbox-Item"
   }, rest, {
     onClick: onClickHandler,
     "data-value": value,
     className: tagClass
-  }, rest), /*#__PURE__*/React.createElement(ListBody, props), nestedBody && /*#__PURE__*/React.createElement(NestedList, {
+  }), /*#__PURE__*/React.createElement(ListBody, props), nestedBody && /*#__PURE__*/React.createElement(NestedList, {
     expanded: expanded,
     nestedBody: nestedBody
   }), showDivider && /*#__PURE__*/React.createElement(Divider, {
     className: "Listbox-divider"
   }));
 };
-ListboxItem.displayName = 'ListboxItem';
+ListboxItem.displayName = 'Listbox.Item';
 ListboxItem.defaultProps = {
   tagName: 'li'
 };
 
-var _excluded$b = ["children", "className", "draggable", "size", "type", "showDivider", "tagName"];
+var _excluded$f = ["children", "className", "draggable", "size", "type", "showDivider", "tagName"];
 var ListboxContext = /*#__PURE__*/React.createContext({
   size: 'standard',
   type: 'resource',
@@ -23422,7 +23547,7 @@ var Listbox = function Listbox(props) {
       type = props.type,
       showDivider = props.showDivider,
       Tag = props.tagName,
-      rest = _objectWithoutProperties(props, _excluded$b);
+      rest = _objectWithoutProperties(props, _excluded$f);
 
   var baseProps = extractBaseProps(props);
   var classes = classnames({
@@ -23616,11 +23741,11 @@ var TextField = function TextField(props) {
 };
 TextField.displayName = 'TextField';
 
-var _excluded$a = ["icon", "image"];
+var _excluded$e = ["icon", "image"];
 var SelectionAvatar = function SelectionAvatar(props) {
   var icon = props.icon,
       image = props.image,
-      rest = _objectWithoutProperties(props, _excluded$a);
+      rest = _objectWithoutProperties(props, _excluded$e);
 
   return /*#__PURE__*/React.createElement(Avatar, _extends$2({
     role: "checkbox"
@@ -23711,7 +23836,7 @@ var SelectionAvatarsWrapper = function SelectionAvatarsWrapper(props) {
   }));
 };
 
-var handleKeyDown$4 = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
+var handleKeyDown$6 = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
   switch (event.key) {
     case 'Enter':
       setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
@@ -23729,7 +23854,7 @@ var handleKeyDown$4 = function handleKeyDown(event, setOpenPopover, setHighlight
       break;
   }
 };
-var focusListItem$2 = function focusListItem(position, setFocusedOption, listRef, withSearch) {
+var focusListItem$3 = function focusListItem(position, setFocusedOption, listRef, withSearch) {
   var _listRef$current2, _targetOption, _targetOption2, _targetOption2$scroll;
 
   if (withSearch && position === 'down') {
@@ -23791,7 +23916,7 @@ var AvatarSelectionCount = function AvatarSelectionCount(props) {
     "data-test": "DesignSystem-AvatarSelection--TriggerAvatar",
     className: wrapperClassName,
     onKeyDown: function onKeyDown(event) {
-      return handleKeyDown$4(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+      return handleKeyDown$6(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
     },
     style: avatarStyle,
     tabIndex: 0,
@@ -23809,16 +23934,16 @@ var AvatarSelectionCount = function AvatarSelectionCount(props) {
   }, "+".concat(hiddenAvatarCount))));
 };
 
-var handleKeyDown$3 = function handleKeyDown(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef) {
+var handleKeyDown$5 = function handleKeyDown(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef) {
   switch (event.key) {
     case 'ArrowUp':
       event.preventDefault();
-      navigateOptions$2('up', focusedOption, setFocusedOption, listRef, withSearch);
+      navigateOptions$3('up', focusedOption, setFocusedOption, listRef, withSearch);
       break;
 
     case 'ArrowDown':
       event.preventDefault();
-      navigateOptions$2('down', focusedOption, setFocusedOption, listRef, withSearch);
+      navigateOptions$3('down', focusedOption, setFocusedOption, listRef, withSearch);
       break;
 
     case 'Enter':
@@ -23839,7 +23964,7 @@ var handleEnterKey$2 = function handleEnterKey(focusedOption) {
   focusedOption === null || focusedOption === void 0 ? void 0 : focusedOption.click();
 };
 
-var navigateOptions$2 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef, withSearch) {
+var navigateOptions$3 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef, withSearch) {
   var listItems = listRef === null || listRef === void 0 ? void 0 : listRef.current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
   var index = Array.from(listItems).findIndex(function (item) {
     return item == focusedOption;
@@ -23921,11 +24046,11 @@ AvatarSelectionList.defaultProps = {
   tagName: 'ul'
 };
 
-var _excluded$9 = ["children", "value"];
+var _excluded$d = ["children", "value"];
 var AvatarSelectionOption = function AvatarSelectionOption(props) {
   var children = props.children,
       value = props.value,
-      rest = _objectWithoutProperties(props, _excluded$9);
+      rest = _objectWithoutProperties(props, _excluded$d);
 
   var contextProp = React.useContext(AvatarSelectionContext);
   var setSelectedItems = contextProp.setSelectedItems,
@@ -23958,7 +24083,7 @@ var AvatarSelectionOption = function AvatarSelectionOption(props) {
   };
 
   var onKeyDownHandler = function onKeyDownHandler(event) {
-    handleKeyDown$3(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
+    handleKeyDown$5(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
   };
 
   return /*#__PURE__*/React.createElement(Listbox.Item, _extends$2({
@@ -24156,14 +24281,14 @@ var AvatarSelection = function AvatarSelection(props) {
   React.useEffect(function () {
     if (highlightFirstItem && openPopover) {
       requestAnimationFrame(function () {
-        return focusListItem$2('down', setFocusedOption, listRef, withSearch);
+        return focusListItem$3('down', setFocusedOption, listRef, withSearch);
       });
     }
   }, [highlightFirstItem]);
   React.useEffect(function () {
     if (highlightLastItem && openPopover) {
       requestAnimationFrame(function () {
-        return focusListItem$2('up', setFocusedOption, listRef, withSearch);
+        return focusListItem$3('up', setFocusedOption, listRef, withSearch);
       });
     }
   }, [highlightLastItem]);
@@ -24266,16 +24391,16 @@ ComboboxList.defaultProps = {
 
 var ComboboxContext = /*#__PURE__*/React.createContext({});
 
-var handleKeyDown$2 = function handleKeyDown(event, focusedOption, setFocusedOption, setOpenPopover, inputTriggerRef, setHighlightFirstItem, setHighlightLastItem, multiSelect, listRef) {
+var handleKeyDown$4 = function handleKeyDown(event, focusedOption, setFocusedOption, setOpenPopover, inputTriggerRef, setHighlightFirstItem, setHighlightLastItem, multiSelect, listRef) {
   switch (event.key) {
     case 'ArrowUp':
       event.preventDefault();
-      navigateOptions$1('up', focusedOption, setFocusedOption, listRef);
+      navigateOptions$2('up', focusedOption, setFocusedOption, listRef);
       break;
 
     case 'ArrowDown':
       event.preventDefault();
-      navigateOptions$1('down', focusedOption, setFocusedOption, listRef);
+      navigateOptions$2('down', focusedOption, setFocusedOption, listRef);
       break;
 
     case 'Enter':
@@ -24315,7 +24440,7 @@ var handleEnterKey$1 = function handleEnterKey(focusedOption, multiSelect, input
   }
 };
 
-var navigateOptions$1 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef) {
+var navigateOptions$2 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef) {
   var _targetOption$scrollI;
 
   var listItems = listRef.current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
@@ -24337,12 +24462,12 @@ var navigateOptions$1 = function navigateOptions(direction, focusedOption, setFo
   });
 };
 
-var _excluded$8 = ["children", "option", "onClick"];
+var _excluded$c = ["children", "option", "onClick"];
 var ComboboxOption = function ComboboxOption(props) {
   var children = props.children,
       option = props.option,
       onClick = props.onClick,
-      rest = _objectWithoutProperties(props, _excluded$8);
+      rest = _objectWithoutProperties(props, _excluded$c);
 
   var contextProp = React.useContext(ComboboxContext);
   var onOptionClick = contextProp.onOptionClick,
@@ -24367,7 +24492,7 @@ var ComboboxOption = function ComboboxOption(props) {
   };
 
   var onKeyDownHandler = function onKeyDownHandler(event) {
-    handleKeyDown$2(event, focusedOption, setFocusedOption, setOpenPopover, inputTriggerRef, setHighlightFirstItem, setHighlightLastItem, multiSelect, listRef);
+    handleKeyDown$4(event, focusedOption, setFocusedOption, setOpenPopover, inputTriggerRef, setHighlightFirstItem, setHighlightLastItem, multiSelect, listRef);
   };
 
   return /*#__PURE__*/React.createElement(Listbox.Item, _extends$2({
@@ -24383,7 +24508,7 @@ ComboboxOption.defaultProps = {
   tagName: 'li'
 };
 
-var handleKeyDown$1 = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
+var handleKeyDown$3 = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
   switch (event.key) {
     case 'ArrowUp':
       setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
@@ -24401,7 +24526,7 @@ var handleKeyDown$1 = function handleKeyDown(event, setOpenPopover, setHighlight
       break;
   }
 };
-var focusListItem$1 = function focusListItem(position, setFocusedOption, listRef) {
+var focusListItem$2 = function focusListItem(position, setFocusedOption, listRef) {
   var _listRef$current, _targetOption;
 
   var listItems = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
@@ -24469,7 +24594,7 @@ var InputBox = function InputBox(props) {
   };
 
   var onKeyDownHandler = function onKeyDownHandler(event) {
-    handleKeyDown$1(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+    handleKeyDown$3(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
   };
 
   return /*#__PURE__*/React.createElement(Input, _extends$2({}, props, {
@@ -24487,7 +24612,7 @@ var InputBox = function InputBox(props) {
   }));
 };
 
-var _excluded$7 = ["chipOptions", "allowDuplicates", "disabled", "error", "placeholder", "defaultValue", "value", "className", "autoFocus", "onChange", "onBlur", "onFocus", "onKeyDown", "onInputChange", "tabIndex", "role"],
+var _excluded$b = ["chipOptions", "allowDuplicates", "disabled", "error", "placeholder", "defaultValue", "value", "className", "autoFocus", "onChange", "onBlur", "onFocus", "onKeyDown", "onInputChange", "tabIndex", "role"],
     _excluded2 = ["type", "onClick"];
 var keyCodes = {
   BACKSPACE: 'Backspace',
@@ -24513,7 +24638,7 @@ var MultiSelectTrigger = function MultiSelectTrigger(props) {
       onInputChange = props.onInputChange,
       tabIndex = props.tabIndex,
       role = props.role,
-      rest = _objectWithoutProperties(props, _excluded$7);
+      rest = _objectWithoutProperties(props, _excluded$b);
 
   var inputRef = /*#__PURE__*/React.createRef();
 
@@ -24736,7 +24861,7 @@ var ChipInputBox = function ChipInputBox(props) {
   };
 
   var onKeyDownHandler = function onKeyDownHandler(event) {
-    handleKeyDown$1(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+    handleKeyDown$3(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
   };
 
   return /*#__PURE__*/React__default.createElement(MultiSelectTrigger, _extends$2({}, props, {
@@ -24755,12 +24880,12 @@ var ChipInputBox = function ChipInputBox(props) {
   }));
 };
 
-var _excluded$6 = ["multiSelect", "chipValue", "value"];
+var _excluded$a = ["multiSelect", "chipValue", "value"];
 var ComboboxTrigger = function ComboboxTrigger(props) {
   var multiSelect = props.multiSelect,
       chipValue = props.chipValue,
       value = props.value,
-      rest = _objectWithoutProperties(props, _excluded$6);
+      rest = _objectWithoutProperties(props, _excluded$a);
 
   if (multiSelect) {
     var icon = props.icon,
@@ -24890,14 +25015,14 @@ var Combobox = function Combobox(props) {
   React.useEffect(function () {
     if (highlightFirstItem && openPopover) {
       requestAnimationFrame(function () {
-        return focusListItem$1('down', setFocusedOption, listRef);
+        return focusListItem$2('down', setFocusedOption, listRef);
       });
     }
   }, [highlightFirstItem]);
   React.useEffect(function () {
     if (highlightLastItem && openPopover) {
       requestAnimationFrame(function () {
-        return focusListItem$1('up', setFocusedOption, listRef);
+        return focusListItem$2('up', setFocusedOption, listRef);
       });
     }
   }, [highlightLastItem]);
@@ -24993,7 +25118,7 @@ Combobox.Option = ComboboxOption;
 
 var SelectContext = /*#__PURE__*/React.createContext({});
 
-var _excluded$5 = ["children"];
+var _excluded$9 = ["children"];
 var SelectList = function SelectList(props) {
   var contextProp = React.useContext(SelectContext);
   var withSearch = contextProp.withSearch,
@@ -25002,7 +25127,7 @@ var SelectList = function SelectList(props) {
       multiSelect = contextProp.multiSelect;
 
   var children = props.children,
-      rest = _objectWithoutProperties(props, _excluded$5);
+      rest = _objectWithoutProperties(props, _excluded$9);
 
   var searchInputHeight = 33;
   var wrapperStyle = {
@@ -25095,7 +25220,7 @@ var handleKeyDownTrigger = function handleKeyDownTrigger(event, setOpenPopover,
       break;
   }
 };
-var focusListItem = function focusListItem(position, setFocusedOption, listRef) {
+var focusListItem$1 = function focusListItem(position, setFocusedOption, listRef) {
   var _listRef$current, _listRef$current2, _targetOption, _targetOption2;
 
   var searchInput = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll('[data-test="DesignSystem-Select--Input"]');
@@ -25114,16 +25239,16 @@ var focusListItem = function focusListItem(position, setFocusedOption, listRef)
   });
   setFocusedOption && setFocusedOption(targetOption);
 };
-var handleKeyDown = function handleKeyDown(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef) {
+var handleKeyDown$2 = function handleKeyDown(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef) {
   switch (event.key) {
     case 'ArrowUp':
       event.preventDefault();
-      navigateOptions('up', focusedOption, setFocusedOption, listRef, withSearch);
+      navigateOptions$1('up', focusedOption, setFocusedOption, listRef, withSearch);
       break;
 
     case 'ArrowDown':
       event.preventDefault();
-      navigateOptions('down', focusedOption, setFocusedOption, listRef, withSearch);
+      navigateOptions$1('down', focusedOption, setFocusedOption, listRef, withSearch);
       break;
 
     case 'Enter':
@@ -25147,7 +25272,7 @@ var handleKeyDown = function handleKeyDown(event, focusedOption, setFocusedOptio
 var handleEnterKey = function handleEnterKey(focusedOption) {
   focusedOption === null || focusedOption === void 0 ? void 0 : focusedOption.click();
 };
-var navigateOptions = function navigateOptions(direction, focusedOption, setFocusedOption, listRef, withSearch) {
+var navigateOptions$1 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef, withSearch) {
   var listItems = listRef.current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
   var index = Array.from(listItems).findIndex(function (item) {
     return item == focusedOption;
@@ -25200,7 +25325,7 @@ var handleInputKeyDown = function handleInputKeyDown(event, listRef, setFocusedO
   setFocusedOption && setFocusedOption(targetOption);
 };
 
-var _excluded$4 = ["children", "option", "checkedState", "onClick", "withCheckbox", "disabled"];
+var _excluded$8 = ["children", "option", "checkedState", "onClick", "withCheckbox", "disabled"];
 var SelectOption = function SelectOption(props) {
   var children = props.children,
       option = props.option,
@@ -25209,7 +25334,7 @@ var SelectOption = function SelectOption(props) {
       _props$withCheckbox = props.withCheckbox,
       withCheckbox = _props$withCheckbox === void 0 ? true : _props$withCheckbox,
       disabled = props.disabled,
-      rest = _objectWithoutProperties(props, _excluded$4);
+      rest = _objectWithoutProperties(props, _excluded$8);
 
   var contextProp = React.useContext(SelectContext);
   var onOptionClick = contextProp.onOptionClick,
@@ -25244,7 +25369,7 @@ var SelectOption = function SelectOption(props) {
   var indeterminate = checkedState === 'indeterminate';
 
   var onKeyDownHandler = function onKeyDownHandler(event) {
-    handleKeyDown(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
+    handleKeyDown$2(event, focusedOption, setFocusedOption, setHighlightFirstItem, setHighlightLastItem, listRef, withSearch, setOpenPopover, triggerRef);
   };
 
   return /*#__PURE__*/React.createElement(Listbox.Item, _extends$2({
@@ -25274,7 +25399,7 @@ SelectOption.defaultProps = {
   withCheckbox: true
 };
 
-var _excluded$3 = ["triggerSize", "placeholder", "withClearButton", "icon", "disabled", "inlineLabel", "iconType", "onClear", "setLabel"];
+var _excluded$7 = ["triggerSize", "placeholder", "withClearButton", "icon", "disabled", "inlineLabel", "iconType", "onClear", "setLabel"];
 
 var SelectTrigger = function SelectTrigger(props) {
   var _classNames, _classNames2;
@@ -25288,7 +25413,7 @@ var SelectTrigger = function SelectTrigger(props) {
       iconType = props.iconType,
       onClear = props.onClear,
       setLabel = props.setLabel,
-      rest = _objectWithoutProperties(props, _excluded$3);
+      rest = _objectWithoutProperties(props, _excluded$7);
 
   var contextProp = React.useContext(SelectContext);
   var openPopover = contextProp.openPopover,
@@ -25370,7 +25495,7 @@ SelectTrigger.defaultProps = {
   withClearButton: true
 };
 
-var _excluded$2 = ["onChange", "onClear"];
+var _excluded$6 = ["onChange", "onClear"];
 var SearchInput = function SearchInput(props) {
   var contextProp = React.useContext(SelectContext);
   var setWithSearch = contextProp.setWithSearch,
@@ -25382,7 +25507,7 @@ var SearchInput = function SearchInput(props) {
 
   var onChange = props.onChange,
       onClear = props.onClear,
-      rest = _objectWithoutProperties(props, _excluded$2);
+      rest = _objectWithoutProperties(props, _excluded$6);
 
   React.useEffect(function () {
     setWithSearch === null || setWithSearch === void 0 ? void 0 : setWithSearch(true);
@@ -25416,7 +25541,7 @@ var SearchInput = function SearchInput(props) {
   })));
 };
 
-var _excluded$1 = ["title", "description", "children"];
+var _excluded$5 = ["title", "description", "children"];
 var SelectEmptyTemplate = function SelectEmptyTemplate(props) {
   var contextProp = React.useContext(SelectContext);
   var maxHeight = contextProp.maxHeight,
@@ -25425,7 +25550,7 @@ var SelectEmptyTemplate = function SelectEmptyTemplate(props) {
   var title = props.title,
       description = props.description,
       children = props.children,
-      rest = _objectWithoutProperties(props, _excluded$1);
+      rest = _objectWithoutProperties(props, _excluded$5);
 
   var searchInputHeight = 33;
   var wrapperStyle = {
@@ -25455,10 +25580,10 @@ var SelectEmptyTemplate = function SelectEmptyTemplate(props) {
   }, description), children && children));
 };
 
-var _excluded = ["children"];
+var _excluded$4 = ["children"];
 var SelectFooter = function SelectFooter(props) {
   var children = props.children,
-      rest = _objectWithoutProperties(props, _excluded);
+      rest = _objectWithoutProperties(props, _excluded$4);
 
   return /*#__PURE__*/React.createElement("div", _extends$2({
     className: "Select-buttonWrapper"
@@ -25532,7 +25657,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setFocusFirstItem: function setFocusFirstItem() {
         if (openPopover) {
           requestAnimationFrame(function () {
-            return focusListItem('down', setFocusedOption, listRef);
+            return focusListItem$1('down', setFocusedOption, listRef);
           });
           setHighlightFirstItem(true);
         }
@@ -25540,7 +25665,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
       setFocusLastItem: function setFocusLastItem() {
         if (openPopover) {
           requestAnimationFrame(function () {
-            return focusListItem('up', setFocusedOption, listRef);
+            return focusListItem$1('up', setFocusedOption, listRef);
           });
           setHighlightLastItem(true);
         }
@@ -25556,14 +25681,14 @@ var Select = /*#__PURE__*/React.forwardRef(function (props, ref) {
   React.useEffect(function () {
     if (highlightFirstItem && openPopover) {
       requestAnimationFrame(function () {
-        return focusListItem('down', setFocusedOption, listRef);
+        return focusListItem$1('down', setFocusedOption, listRef);
       });
     }
   }, [highlightFirstItem]);
   React.useEffect(function () {
     if (highlightLastItem && openPopover) {
       requestAnimationFrame(function () {
-        return focusListItem('up', setFocusedOption, listRef);
+        return focusListItem$1('up', setFocusedOption, listRef);
       });
     }
   }, [highlightLastItem]);
@@ -25648,6 +25773,469 @@ Select.SearchInput = SearchInput;
 Select.EmptyTemplate = SelectEmptyTemplate;
 Select.Footer = SelectFooter;
 
-var version = "2.29.0";
+var _excluded$3 = ["label", "children", "showDivider"];
+var MenuGroup = function MenuGroup(props) {
+  var label = props.label,
+      children = props.children,
+      showDivider = props.showDivider,
+      rest = _objectWithoutProperties(props, _excluded$3);
+
+  if (label) {
+    return /*#__PURE__*/React__default.createElement("div", _extends$2({
+      "data-test": "DesignSystem-Menu-Group",
+      role: "group",
+      className: "Menu-Group"
+    }, rest), /*#__PURE__*/React__default.createElement(Text, {
+      "data-test": "DesignSystem-Menu-Group-Label",
+      size: "small",
+      weight: "medium",
+      appearance: "subtle",
+      className: "Menu-Group-Label"
+    }, label), children);
+  }
+
+  return /*#__PURE__*/React__default.createElement("div", _extends$2({
+    "data-test": "DesignSystem-Menu-Group",
+    role: "group"
+  }, rest), children, showDivider && /*#__PURE__*/React__default.createElement(Divider, {
+    className: "my-3"
+  }));
+};
+MenuGroup.defaultProps = {
+  showDivider: true
+};
+
+var MenuContext = /*#__PURE__*/React.createContext({});
+
+var handleKeyDown$1 = function handleKeyDown(event, focusedOption, setFocusedOption, setOpenPopover, menuTriggerRef, listRef, subListRef, isSubMenuTrigger, triggerRef, menuID, triggerID, parentListRef) {
+  switch (event.key) {
+    case 'ArrowUp':
+      event.preventDefault();
+      navigateOptions('up', focusedOption, setFocusedOption, listRef);
+      break;
+
+    case 'ArrowDown':
+      event.preventDefault();
+      navigateOptions('down', focusedOption, setFocusedOption, listRef);
+      break;
+
+    case 'Enter':
+      focusedOption === null || focusedOption === void 0 ? void 0 : focusedOption.click();
+      setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+      break;
+
+    case 'Escape':
+      setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+
+      if (triggerRef && !isSubMenuTrigger) {
+        var _triggerRef$current;
+
+        triggerRef === null || triggerRef === void 0 ? void 0 : (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.focus();
+      } else {
+        var _menuTriggerRef$curre;
+
+        menuTriggerRef === null || menuTriggerRef === void 0 ? void 0 : (_menuTriggerRef$curre = menuTriggerRef.current) === null || _menuTriggerRef$curre === void 0 ? void 0 : _menuTriggerRef$curre.focus();
+      }
+
+      setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(undefined);
+      break;
+
+    case 'Tab':
+      setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+      break;
+
+    case 'ArrowRight':
+      navigateSubMenu(isSubMenuTrigger, 'right', subListRef, menuID, triggerID, parentListRef);
+      break;
+
+    case 'ArrowLeft':
+      navigateSubMenu(isSubMenuTrigger, 'left', subListRef, menuID, triggerID, parentListRef);
+      break;
+  }
+};
+
+var navigateOptions = function navigateOptions(direction, focusedOption, setFocusedOption, listRef) {
+  var _listRef$current, _targetOption$scrollI;
+
+  var listItems = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+  var index = Array.from(listItems).findIndex(function (item) {
+    return item == focusedOption;
+  });
+
+  if (index === -1) {
+    index = direction === 'up' ? listItems.length - 1 : 0;
+  } else {
+    index = direction === 'up' ? (index - 1 + listItems.length) % listItems.length : (index + 1) % listItems.length;
+  }
+
+  var targetOption = listItems[index];
+  targetOption.focus();
+  setFocusedOption && setFocusedOption(targetOption);
+  targetOption === null || targetOption === void 0 ? void 0 : (_targetOption$scrollI = targetOption.scrollIntoView) === null || _targetOption$scrollI === void 0 ? void 0 : _targetOption$scrollI.call(targetOption, {
+    block: 'center'
+  });
+};
+
+var navigateSubMenu = function navigateSubMenu(isSubMenuTrigger, direction, subListRef, menuID, triggerID, parentListRef) {
+  var element = document.querySelector("[data-name=\"".concat(menuID, "\"]"));
+  var menuPlacement = element === null || element === void 0 ? void 0 : element.getAttribute('data-placement');
+
+  if (isSubMenuTrigger) {
+    if (direction === 'right' && menuPlacement !== null && menuPlacement !== void 0 && menuPlacement.includes('right') || direction === 'left' && menuPlacement !== null && menuPlacement !== void 0 && menuPlacement.includes('left')) {
+      var _subListRef$current;
+
+      var listItems = subListRef === null || subListRef === void 0 ? void 0 : (_subListRef$current = subListRef.current) === null || _subListRef$current === void 0 ? void 0 : _subListRef$current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+      (listItems === null || listItems === void 0 ? void 0 : listItems[0]).focus();
+    }
+  } else if (direction === 'left' && menuPlacement !== null && menuPlacement !== void 0 && menuPlacement.includes('right') || direction === 'right' && menuPlacement !== null && menuPlacement !== void 0 && menuPlacement.includes('left')) {
+    var _parentListRef$curren, _parentListRef$curren2;
+
+    var triggerElement = parentListRef === null || parentListRef === void 0 ? void 0 : (_parentListRef$curren = parentListRef.current) === null || _parentListRef$curren === void 0 ? void 0 : (_parentListRef$curren2 = _parentListRef$curren.querySelector("#".concat(triggerID))) === null || _parentListRef$curren2 === void 0 ? void 0 : _parentListRef$curren2.firstChild;
+    triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.focus();
+  }
+};
+
+var SubMenuContext = /*#__PURE__*/React.createContext({});
+
+var _excluded$2 = ["children", "className", "onClick", "disabled"];
+var MenuItem = function MenuItem(props) {
+  var children = props.children,
+      className = props.className,
+      onClick = props.onClick,
+      disabled = props.disabled,
+      rest = _objectWithoutProperties(props, _excluded$2);
+
+  var contextProp = React__default.useContext(MenuContext);
+  var subMenuContextProp = React__default.useContext(SubMenuContext);
+  var isSubMenuTrigger = false;
+  var subListRef = null;
+  var triggerRef = subMenuContextProp.triggerRef,
+      menuID = subMenuContextProp.menuID,
+      setParentOpen = subMenuContextProp.setParentOpen,
+      triggerID = subMenuContextProp.triggerID,
+      parentListRef = subMenuContextProp.parentListRef;
+  var setOpenPopover = contextProp.setOpenPopover,
+      focusedOption = contextProp.focusedOption,
+      setFocusedOption = contextProp.setFocusedOption,
+      menuTriggerRef = contextProp.menuTriggerRef,
+      listRef = contextProp.listRef;
+  var MenuItemClassName = classnames({
+    'Menu-Item': true
+  }, className);
+  React__default.useEffect(function () {
+    var _parentListRef$curren, _parentListRef$curren2;
+
+    var handlePopoverOpen = function handlePopoverOpen() {
+      setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+    };
+
+    var handlePopoverClose = function handlePopoverClose() {
+      setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+    };
+
+    var triggerElement = parentListRef === null || parentListRef === void 0 ? void 0 : (_parentListRef$curren = parentListRef.current) === null || _parentListRef$curren === void 0 ? void 0 : (_parentListRef$curren2 = _parentListRef$curren.querySelector("#".concat(triggerID))) === null || _parentListRef$curren2 === void 0 ? void 0 : _parentListRef$curren2.firstChild;
+    triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.addEventListener('focus', handlePopoverOpen);
+    triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.addEventListener('blur', handlePopoverClose);
+    return function () {
+      triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.removeEventListener('focus', handlePopoverOpen);
+      triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.removeEventListener('blur', handlePopoverClose);
+    };
+  }, [triggerID]);
+
+  var onFocusHandler = function onFocusHandler(event) {
+    setFocusedOption === null || setFocusedOption === void 0 ? void 0 : setFocusedOption(event.target);
+    setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+  };
+
+  var onKeyDownHandler = function onKeyDownHandler(event) {
+    handleKeyDown$1(event, focusedOption, setFocusedOption, setOpenPopover, menuTriggerRef, listRef, subListRef, isSubMenuTrigger, triggerRef, menuID, triggerID, parentListRef);
+  };
+
+  var onClickHandler = function onClickHandler(event) {
+    if (disabled) {
+      return;
+    }
+
+    setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    setParentOpen === null || setParentOpen === void 0 ? void 0 : setParentOpen(false);
+  };
+
+  return /*#__PURE__*/React__default.createElement(Listbox.Item, _extends$2({
+    "data-test": "DesignSystem-Menu-ListItem",
+    className: MenuItemClassName,
+    tabIndex: -1,
+    onKeyDown: onKeyDownHandler,
+    onFocus: onFocusHandler,
+    onClick: onClickHandler,
+    disabled: disabled,
+    role: "menuitem",
+    "aria-disabled": disabled
+  }, rest), children);
+};
+MenuItem.displayName = 'MenuItem';
+MenuItem.defaultProps = {
+  tagName: 'a'
+};
+
+var _excluded$1 = ["children"];
+var MenuList = function MenuList(props) {
+  var children = props.children,
+      rest = _objectWithoutProperties(props, _excluded$1);
+
+  return /*#__PURE__*/React__default.createElement(Listbox, _extends$2({
+    "data-test": "DesignSystem-Menu-List"
+  }, rest), children);
+};
+MenuList.defaultProps = {
+  type: 'option',
+  showDivider: false,
+  tagName: 'nav',
+  size: 'compressed'
+};
+
+var handleKeyDown = function handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem) {
+  switch (event.key) {
+    case 'ArrowUp':
+      event.preventDefault();
+      setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+      setHighlightLastItem === null || setHighlightLastItem === void 0 ? void 0 : setHighlightLastItem(true);
+      break;
+
+    case 'ArrowDown':
+      event.preventDefault();
+      setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(true);
+      setHighlightFirstItem === null || setHighlightFirstItem === void 0 ? void 0 : setHighlightFirstItem(true);
+      break;
+
+    case 'Escape':
+    case 'Tab':
+      setOpenPopover === null || setOpenPopover === void 0 ? void 0 : setOpenPopover(false);
+      break;
+  }
+};
+var focusListItem = function focusListItem(position, setFocusedOption, listRef) {
+  var _listRef$current, _targetOption;
+
+  var listItems = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
+  var targetOption;
+
+  if (position === 'down') {
+    targetOption = listItems === null || listItems === void 0 ? void 0 : listItems[0];
+  } else {
+    targetOption = listItems === null || listItems === void 0 ? void 0 : listItems[listItems.length - 1];
+  }
+
+  (_targetOption = targetOption) === null || _targetOption === void 0 ? void 0 : _targetOption.focus();
+
+  if (targetOption && typeof targetOption.scrollIntoView === 'function') {
+    var _targetOption2;
+
+    (_targetOption2 = targetOption) === null || _targetOption2 === void 0 ? void 0 : _targetOption2.scrollIntoView({
+      block: 'end'
+    });
+  }
+
+  setFocusedOption && setFocusedOption(targetOption);
+};
+
+var MenuTrigger = function MenuTrigger(props) {
+  var className = props.className;
+  var contextProp = React__default.useContext(MenuContext);
+  var openPopover = contextProp.openPopover,
+      setOpenPopover = contextProp.setOpenPopover,
+      setHighlightFirstItem = contextProp.setHighlightFirstItem,
+      setHighlightLastItem = contextProp.setHighlightLastItem,
+      menuTriggerRef = contextProp.menuTriggerRef;
+  var triggerClassName = classnames({
+    'Menu-Trigger--active': openPopover
+  }, className);
+
+  var onKeyDownHandler = function onKeyDownHandler(event) {
+    handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+  };
+
+  return /*#__PURE__*/React__default.createElement(Button, _extends$2({
+    "data-test": "DesignSystem-Menu-Trigger",
+    icon: "more_horiz",
+    ref: menuTriggerRef,
+    "aria-label": "Open menu",
+    "aria-haspopup": true,
+    "aria-expanded": openPopover
+  }, props, {
+    className: triggerClassName,
+    onKeyDown: onKeyDownHandler
+  }));
+};
+
+var SubMenu = function SubMenu(props) {
+  var children = props.children;
+  var menuID = "DesignSystem-Menu--Popover-".concat(uidGenerator());
+  var triggerID = "DesignSystem-Menu--Trigger-".concat(uidGenerator());
+
+  var _React$Children$toArr = React__default.Children.toArray(children),
+      _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
+      submenuTrigger = _React$Children$toArr2[0],
+      submenuContent = _React$Children$toArr2[1];
+
+  var contextProp = React__default.useContext(MenuContext);
+  var subListRef = React__default.useRef(null);
+  var triggerRef = React__default.useRef(null);
+  var isSubMenuTrigger = true;
+  var subMenuElement = /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  var setOpenPopover = contextProp.setOpenPopover,
+      focusedOption = contextProp.focusedOption,
+      setFocusedOption = contextProp.setFocusedOption,
+      menuTriggerRef = contextProp.menuTriggerRef,
+      listRef = contextProp.listRef;
+
+  var onKeyDownHandler = function onKeyDownHandler(event) {
+    handleKeyDown$1(event, focusedOption, setFocusedOption, setOpenPopover, menuTriggerRef, listRef, subListRef, isSubMenuTrigger, triggerRef, menuID);
+  };
+
+  var subMenuContextProp = {
+    triggerRef: triggerRef,
+    menuID: menuID,
+    setParentOpen: setOpenPopover,
+    parentListRef: listRef,
+    triggerID: triggerID
+  };
+  var triggerElement = /*#__PURE__*/React__default.cloneElement(submenuTrigger, _objectSpread2(_objectSpread2({}, submenuTrigger === null || submenuTrigger === void 0 ? void 0 : submenuTrigger.props), {}, {
+    onKeyDown: onKeyDownHandler,
+    ref: triggerRef,
+    'aria-haspopup': 'menu',
+    'aria-expanded': subListRef.current ? 'true' : 'false',
+    'aria-controls': menuID,
+    id: triggerID
+  }));
+
+  if ( /*#__PURE__*/React__default.isValidElement(submenuContent)) {
+    var _submenuContent$props = submenuContent === null || submenuContent === void 0 ? void 0 : submenuContent.props,
+        on = _submenuContent$props.on,
+        _children = _submenuContent$props.children;
+
+    subMenuElement = /*#__PURE__*/React__default.cloneElement(submenuContent, _objectSpread2(_objectSpread2({}, submenuContent.props), {}, {
+      on: on || 'hover',
+      offset: 'small',
+      children: /*#__PURE__*/React__default.createElement("div", {
+        ref: subListRef
+      }, _children),
+      trigger: triggerElement
+    }));
+  }
+
+  return /*#__PURE__*/React__default.createElement(SubMenuContext.Provider, {
+    value: subMenuContextProp
+  }, subMenuElement);
+};
+
+var _excluded = ["children", "width", "minHeight", "maxHeight", "className", "open"];
+var Menu = function Menu(props) {
+  var children = props.children,
+      width = props.width,
+      minHeight = props.minHeight,
+      maxHeight = props.maxHeight,
+      className = props.className,
+      open = props.open,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var _React$useState = React__default.useState(open),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      openPopover = _React$useState2[0],
+      setOpenPopover = _React$useState2[1];
+
+  var _React$useState3 = React__default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      highlightFirstItem = _React$useState4[0],
+      setHighlightFirstItem = _React$useState4[1];
+
+  var _React$useState5 = React__default.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      highlightLastItem = _React$useState6[0],
+      setHighlightLastItem = _React$useState6[1];
+
+  var _React$useState7 = React__default.useState(),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      focusedOption = _React$useState8[0],
+      setFocusedOption = _React$useState8[1];
+
+  var listRef = /*#__PURE__*/React__default.createRef();
+  var menuTriggerRef = React__default.useRef(null);
+  var subMenuContextProp = React__default.useContext(SubMenuContext);
+  var menuID = subMenuContextProp.menuID;
+  var popoverClassName = classnames(_defineProperty$1({}, 'Menu', true), className);
+  React__default.useEffect(function () {
+    setOpenPopover(open);
+  }, [open]);
+  React__default.useEffect(function () {
+    if (highlightFirstItem && openPopover) {
+      requestAnimationFrame(function () {
+        return focusListItem('down', setFocusedOption, listRef);
+      });
+    }
+  }, [highlightFirstItem]);
+  React__default.useEffect(function () {
+    if (highlightLastItem && openPopover) {
+      requestAnimationFrame(function () {
+        return focusListItem('up', setFocusedOption, listRef);
+      });
+    }
+  }, [highlightLastItem]);
+  React__default.useEffect(function () {
+    if (!openPopover) {
+      setHighlightFirstItem(false);
+      setHighlightLastItem(false);
+    }
+  }, [openPopover]);
+
+  var onToggleHandler = function onToggleHandler(open) {
+    setOpenPopover(open);
+  };
+
+  var contextProp = {
+    openPopover: openPopover,
+    setOpenPopover: setOpenPopover,
+    setHighlightFirstItem: setHighlightFirstItem,
+    setHighlightLastItem: setHighlightLastItem,
+    focusedOption: focusedOption,
+    setFocusedOption: setFocusedOption,
+    menuTriggerRef: menuTriggerRef,
+    listRef: listRef
+  };
+  return /*#__PURE__*/React__default.createElement(MenuContext.Provider, {
+    value: contextProp
+  }, /*#__PURE__*/React__default.createElement(Popover, _extends$2({
+    "data-test": "DesignSystem-Menu",
+    name: menuID,
+    offset: "medium"
+  }, rest, {
+    open: openPopover,
+    customStyle: {
+      width: width
+    },
+    onToggle: onToggleHandler
+  }), /*#__PURE__*/React__default.createElement("div", {
+    ref: listRef,
+    role: "menu",
+    "data-test": props['data-test'] || 'DesignSystem-Menu-Wrapper',
+    className: popoverClassName,
+    style: {
+      maxHeight: maxHeight,
+      minHeight: minHeight
+    }
+  }, children)));
+};
+Menu.Group = MenuGroup;
+Menu.Item = MenuItem;
+Menu.List = MenuList;
+Menu.Trigger = MenuTrigger;
+Menu.SubMenu = SubMenu;
+Menu.defaultProps = {
+  width: 176,
+  maxHeight: 256,
+  position: 'bottom-start'
+};
+
+var version = "2.30.0";
 
-export { ActionCard, Avatar, AvatarGroup, AvatarSelection, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, Combobox, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, LinkButton, List, Listbox, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Select, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };
+export { ActionCard, Avatar, AvatarGroup, AvatarSelection, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, Combobox, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, LinkButton, List, Listbox, Menu, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Select, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };