@innovaccer/design-system 2.29.0 → 2.30.1

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1710344054873 
+   * Generated on: 1712135560473 
    *      Package: @innovaccer/design-system
-   *      Version: v2.29.0
+   *      Version: v2.30.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -2000,7 +2000,7 @@
                 } 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);
                 }
               }
 
@@ -2008,7 +2008,8 @@
               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__default["default"]({
@@ -2022,7 +2023,8 @@
                 '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
               });
@@ -2257,6 +2259,39 @@
           if (onRangeChange) onRangeChange(startDate, endDate);
         }
 
+        if (this.props.allowReverseSelection && prevState.hoverDate !== this.state.hoverDate) {
+          var _l = this.state,
+              hoverDate = _l.hoverDate,
+              startDate = _l.startDate,
+              endDate = _l.endDate;
+
+          if (startDate && !endDate) {
+            var _m = getDateInfo(startDate),
+                year = _m.year,
+                month = _m.month,
+                date = _m.date;
+
+            if (compareDate(hoverDate, 'less', year, month, date)) {
+              this.setState({
+                startDate: undefined,
+                endDate: startDate
+              });
+            }
+          } else if (endDate && !startDate) {
+            var _o = getDateInfo(endDate),
+                year = _o.year,
+                month = _o.month,
+                date = _o.date;
+
+            if (compareDate(hoverDate, 'more', year, month, date)) {
+              this.setState({
+                startDate: endDate,
+                endDate: undefined
+              });
+            }
+          }
+        }
+
         if (prevState.year !== this.state.year) {
           var year = this.state.year;
 
@@ -2552,23 +2587,28 @@
       size: 16
     };
 
-    var GenericText = function GenericText(_a) {
+    var GenericText = function GenericText(_a, ref) {
       var children = _a.children,
           _b = _a.componentType,
           componentType = _b === void 0 ? 'span' : _b,
           className = _a.className,
-          props = __rest(_a, ["children", "componentType", "className"]);
+          rest = __rest(_a, ["children", "componentType", "className"]);
 
-      return /*#__PURE__*/React__namespace.createElement(componentType, __assign(__assign({}, props), {
-        className: className
+      return /*#__PURE__*/React__namespace.createElement(componentType, __assign(__assign({}, rest), {
+        className: className,
+        ref: ref
       }), children);
     };
 
-    var Text = function Text(props) {
+    var Link$1 = /*#__PURE__*/React__namespace.forwardRef(GenericText);
+
+    var Text = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       var _a;
 
-      var appearance = props.appearance,
-          size = props.size,
+      var _b = props.appearance,
+          appearance = _b === void 0 ? 'default' : _b,
+          _c = props.size,
+          size = _c === void 0 ? 'regular' : _c,
           children = props.children,
           weight = props.weight,
           small = props.small,
@@ -2579,13 +2619,14 @@
       var classes = classNames__default["default"]((_a = {
         Text: true
       }, _a["Text--" + appearance] = !color && appearance, _a["Text--" + weight] = weight, _a["Text--" + size] = size, _a["color-" + color] = color, _a['Text--small'] = size === 'small' || small, _a), className);
-      return /*#__PURE__*/React__namespace.createElement(GenericText, __assign({
+      return /*#__PURE__*/React__namespace.createElement(Link$1, __assign({
+        ref: ref,
         "data-test": "DesignSystem-Text"
       }, rest, {
         className: classes,
         componentType: "span"
       }), children);
-    };
+    });
     Text.displayName = 'Text';
     Text.defaultProps = {
       appearance: 'default',
@@ -5955,7 +5996,7 @@
       var classes = classNames__default["default"]((_a = {
         Heading: true
       }, _a["Heading--" + size] = size, _a["Heading--" + appearance] = !color && appearance, _a["color-" + color] = color, _a), className);
-      return /*#__PURE__*/React__namespace.createElement(GenericText, __assign({
+      return /*#__PURE__*/React__namespace.createElement(Link$1, __assign({
         "data-test": "DesignSystem-Heading"
       }, rest, {
         className: classes,
@@ -6722,7 +6763,7 @@
         "data-test": "DesignSystem-Label"
       }, baseProps, {
         className: LabelClass
-      }), /*#__PURE__*/React__namespace.createElement(GenericText, __assign({
+      }), /*#__PURE__*/React__namespace.createElement(Link$1, __assign({
         "data-test": "DesignSystem-Label--Text",
         className: classes,
         componentType: "label"
@@ -6933,7 +6974,7 @@
       var classes = classNames__default["default"]((_a = {
         Link: true
       }, _a["Link--" + size] = size, _a["Link--" + appearance] = appearance, _a["Link--" + appearance + "-disabled"] = disabled, _a), className);
-      return /*#__PURE__*/React__namespace.createElement(GenericText, __assign({
+      return /*#__PURE__*/React__namespace.createElement(Link$1, __assign({
         "data-test": "DesignSystem-Link",
         className: classes,
         componentType: "a",
@@ -7827,7 +7868,7 @@
       var classes = classNames__default["default"]((_a = {
         Text: true
       }, _a["Text--" + appearance] = !color && appearance, _a["color-" + color] = color, _a), className);
-      return /*#__PURE__*/React__namespace.createElement(GenericText, __assign({
+      return /*#__PURE__*/React__namespace.createElement(Link$1, __assign({
         "data-test": "DesignSystem-Paragraph"
       }, rest, {
         className: classes,
@@ -8150,7 +8191,7 @@
       var classes = classNames__default["default"]((_a = {
         Subheading: true
       }, _a["Subheading--" + appearance] = !color && appearance, _a["color-" + color] = color, _a), className);
-      return /*#__PURE__*/React__namespace.createElement(GenericText, __assign({
+      return /*#__PURE__*/React__namespace.createElement(Link$1, __assign({
         "data-test": "DesignSystem-Subheading"
       }, rest, {
         className: classes,
@@ -8395,6 +8436,11 @@
               break;
           }
 
+          if (_this.props.triggerCoordinates) {
+            newStyle.position = 'absolute';
+            newStyle.transform = "translate(" + _this.props.triggerCoordinates.x + "px, " + _this.props.triggerCoordinates.y + "px)";
+          }
+
           return newStyle;
         };
 
@@ -8692,16 +8738,33 @@
             placement = _a.placement,
             appendToBody = _a.appendToBody,
             hide = _a.hide,
-            boundaryElement = _a.boundaryElement;
+            boundaryElement = _a.boundaryElement,
+            triggerCoordinates = _a.triggerCoordinates;
         var _b = this.state,
             animationKeyframe = _b.animationKeyframe,
             isOpen = _b.isOpen;
+        var coordinatesPopper = /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
+          placement: placement,
+          innerRef: this.popupRef,
+          modifiers: __assign({
+            preventOverflow: {
+              boundariesElement: boundaryElement || document.body
+            },
+            hide: {
+              enabled: hide
+            }
+          }, triggerCoordinates && {
+            offset: {
+              offset: triggerCoordinates.x + "px, " + triggerCoordinates.y + "px"
+            }
+          })
+        }, this.getPopperChildren);
         return /*#__PURE__*/React__namespace.createElement(reactPopper.Manager, null, /*#__PURE__*/React__namespace.createElement("style", null, animationKeyframe), /*#__PURE__*/React__namespace.createElement(reactPopper.Reference, {
           innerRef: this.triggerRef
         }, function (_a) {
           var ref = _a.ref;
           return _this.getTriggerElement(ref);
-        }), isOpen && appendToBody && /*#__PURE__*/ReactDOM__namespace.createPortal( /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
+        }), isOpen && appendToBody && !triggerCoordinates && /*#__PURE__*/ReactDOM__namespace.createPortal( /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
           placement: placement,
           innerRef: this.popupRef,
           modifiers: {
@@ -8712,7 +8775,7 @@
               enabled: hide
             }
           }
-        }, this.getPopperChildren), document.body), isOpen && !appendToBody && /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
+        }, this.getPopperChildren), document.body), isOpen && appendToBody && triggerCoordinates && /*#__PURE__*/ReactDOM__namespace.createPortal(coordinatesPopper, document.body), isOpen && !appendToBody && !triggerCoordinates && /*#__PURE__*/React__namespace.createElement(reactPopper.Popper, {
           placement: placement,
           innerRef: this.popupRef
         }, this.getPopperChildren));
@@ -8742,7 +8805,8 @@
           hideOnReferenceEscape = props.hideOnReferenceEscape,
           _b = props.boundaryElement,
           boundaryElement = _b === void 0 ? document.body : _b,
-          rest = __rest(props, ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement"]);
+          name = props.name,
+          rest = __rest(props, ["position", "customStyle", "dark", "children", "onToggle", "className", "hideOnReferenceEscape", "boundaryElement", "name"]);
 
       var _c = React__namespace.useState(!!props.open),
           open = _c[0],
@@ -8772,7 +8836,8 @@
         "data-test": "DesignSystem-Popover",
         className: classes,
         "data-layer": true,
-        "data-opened": open
+        "data-opened": open,
+        "data-name": name
       }, children);
       return /*#__PURE__*/React__namespace.createElement(PopperWrapper, __assign({}, rest, {
         init: init,
@@ -9053,7 +9118,7 @@
       }, count);
     };
 
-    var MenuItem = function MenuItem(props) {
+    var MenuItem$1 = function MenuItem(props) {
       var _a;
 
       var menu = props.menu,
@@ -9122,7 +9187,7 @@
         }
       });
 
-      return customItemRenderer ? customItemRenderer(customItemProps) : /*#__PURE__*/React__namespace.createElement(GenericText, __assign({
+      return customItemRenderer ? customItemRenderer(customItemProps) : /*#__PURE__*/React__namespace.createElement(Link$1, __assign({
         componentType: "a",
         className: ItemClass
       }, baseProps), /*#__PURE__*/React__namespace.createElement("div", {
@@ -9137,7 +9202,7 @@
         labelColor: itemColor
       })), expanded && renderSubMenu());
     };
-    MenuItem.defaultProps = {
+    MenuItem$1.defaultProps = {
       isActive: false
     };
 
@@ -9241,7 +9306,7 @@
           }, menu.group)), showTooltip ? /*#__PURE__*/React__namespace.createElement(Tooltip, {
             tooltip: menu.label,
             position: "right"
-          }, /*#__PURE__*/React__namespace.createElement(MenuItem, {
+          }, /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
             "data-test": "DesignSystem-VerticalNav--Item",
             menu: menu,
             expanded: expanded,
@@ -9252,7 +9317,7 @@
             isChildrenVisible: isChildrenVisible,
             onClick: onClickHandler,
             customItemRenderer: customItemRenderer
-          })) : /*#__PURE__*/React__namespace.createElement(MenuItem, {
+          })) : /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
             "data-test": "DesignSystem-VerticalNav--Item",
             menu: menu,
             expanded: expanded,
@@ -9267,7 +9332,7 @@
             return showTooltip ? /*#__PURE__*/React__namespace.createElement(Tooltip, {
               tooltip: subMenu.label,
               position: "right"
-            }, /*#__PURE__*/React__namespace.createElement(MenuItem, {
+            }, /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
               key: id,
               menu: subMenu,
               expanded: expanded,
@@ -9277,7 +9342,7 @@
               onClick: onClickHandler,
               isActive: isMenuActive(menus, subMenu, active),
               customItemRenderer: customItemRenderer
-            })) : /*#__PURE__*/React__namespace.createElement(MenuItem, {
+            })) : /*#__PURE__*/React__namespace.createElement(MenuItem$1, {
               key: id,
               menu: subMenu,
               expanded: expanded,
@@ -9400,11 +9465,32 @@
       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 = __rest(props, ["children", "tooltip", "showTooltip"]);
+          showOnTruncation = props.showOnTruncation,
+          elementRef = props.elementRef,
+          rest = __rest(props, ["children", "tooltip", "showTooltip", "showOnTruncation", "elementRef"]);
+
+      var childrenRef = React__namespace.useRef(null);
+
+      var _a = React__namespace.useState(false),
+          isTruncated = _a[0],
+          setIsTruncated = _a[1];
+
+      React__namespace.useEffect(function () {
+        var element = elementRef ? elementRef : childrenRef;
+        setIsTruncated(detectTruncation(element));
+      }, [childrenRef, elementRef]);
+      var renderChildern = elementRef || ! /*#__PURE__*/React__namespace.isValidElement(children) ? children : /*#__PURE__*/React__namespace.cloneElement(children, {
+        ref: childrenRef
+      });
 
       if (!showTooltip) {
         return children;
@@ -9416,6 +9502,21 @@
         className: "Tooltip-text",
         appearance: "white"
       }, tooltip));
+
+      if (showOnTruncation) {
+        return isTruncated ? /*#__PURE__*/React__namespace.createElement(Popover, __assign({
+          trigger: renderChildern,
+          on: 'hover',
+          offset: 'medium'
+        }, rest, {
+          animationClass: {
+            open: "Tooltip-animation-open-" + positionValue[props.position],
+            close: "Tooltip-animation-close-" + positionValue[props.position]
+          },
+          className: "Tooltip-container"
+        }), tooltipWrapper) : renderChildern;
+      }
+
       return /*#__PURE__*/React__namespace.createElement(Popover, __assign({
         trigger: children,
         on: 'hover',
@@ -9428,9 +9529,17 @@
         className: "Tooltip-container"
       }), tooltipWrapper);
     };
+
+    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) {
@@ -11808,7 +11917,7 @@
                 daMonth = _c.month,
                 daDate = _c.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);
@@ -11997,8 +12106,14 @@
             var eValue = translateToString(outputFormat, endDate);
 
             if (!inRangeError && !startError && !endError) {
-              onRangeChange(startDate, endDate, sValue, eValue);
-            } else {
+              if (this.props.allowReverseSelection) {
+                if (startDate && endDate) {
+                  onRangeChange(startDate, endDate, sValue, eValue);
+                }
+              } else {
+                onRangeChange(startDate, endDate, sValue, eValue);
+              }
+            } else if (!this.props.allowReverseSelection) {
               if (!startError) onRangeChange(startDate, undefined, sValue, eValue);else if (!endError) onRangeChange(undefined, endDate, sValue, eValue);else onRangeChange(undefined, undefined, sValue, eValue);
             }
           }
@@ -15075,6 +15190,7 @@
       var loading = props.loading,
           error = props.error,
           data = props.data,
+          displayData = props.displayData,
           schema = props.schema,
           withSearch = props.withSearch,
           showHead = props.showHead,
@@ -15094,6 +15210,7 @@
           selectAll = props.selectAll,
           searchTerm = props.searchTerm,
           updateSearchTerm = props.updateSearchTerm,
+          globalActionRenderer = props.globalActionRenderer,
           dynamicColumn = props.dynamicColumn,
           allowSelectAll = props.allowSelectAll,
           showFilters = props.showFilters,
@@ -15170,6 +15287,8 @@
         className: "Header"
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "Header-content Header-content--top"
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: "d-flex w-100"
       }, withSearch && /*#__PURE__*/React__namespace.createElement("div", {
         className: "Header-search"
       }, /*#__PURE__*/React__namespace.createElement(Input, {
@@ -15212,7 +15331,9 @@
         });
       }))), children && /*#__PURE__*/React__namespace.createElement("div", {
         className: "Header-actions"
-      }, children)), /*#__PURE__*/React__namespace.createElement("div", {
+      }, children)), globalActionRenderer && /*#__PURE__*/React__namespace.createElement("div", {
+        className: "Header-global-actions"
+      }, globalActionRenderer(displayData))), /*#__PURE__*/React__namespace.createElement("div", {
         className: "Header-content Header-content--bottom"
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "Header-label"
@@ -15278,6 +15399,7 @@
       pageSize: 15,
       draggable: true,
       data: [],
+      displayData: [],
       schema: [],
       loading: false,
       error: false,
@@ -15348,6 +15470,7 @@
 
                   _this.setState({
                     data: data,
+                    displayData: data,
                     schema: schema,
                     selectAll: getSelectAll(data, _this.props.selectDisabledRow),
                     totalRecords: res.count,
@@ -15384,6 +15507,7 @@
               errorType: 'NO_RECORDS_FOUND',
               selectAll: getSelectAll(renderedData, _this.props.selectDisabledRow),
               schema: renderedSchema,
+              displayData: sortedData,
               data: renderedData
             });
           }
@@ -15484,6 +15608,7 @@
         _this.state = {
           async: async,
           data: !async ? data : [],
+          displayData: !async ? data : [],
           schema: !async ? schema : [],
           page: props.page,
           sortingList: props.sortingList,
@@ -15515,6 +15640,7 @@
                 schema = _c === void 0 ? [] : _c;
             this.setState({
               data: data,
+              displayData: data,
               schema: schema,
               error: this.props.error || false,
               errorType: this.props.errorType,
@@ -15532,6 +15658,7 @@
                 schema = _f === void 0 ? [] : _f;
             this.setState({
               data: data,
+              displayData: data,
               schema: schema,
               loading: this.props.loading || false,
               error: this.props.error || false,
@@ -17527,6 +17654,7 @@
         "data-test": "DesignSystem-Listbox-DragIcon"
       }), children);
     };
+    ListBody.displayName = 'ListBody';
 
     var getAnimationClass = function getAnimationClass(uniqueKey, expanded) {
       if (expanded) return "nestedList-open-" + uniqueKey + " 240ms cubic-bezier(0, 0, 0.38, 0.9)";else if (!expanded) return "nestedList-close-" + uniqueKey + " 160ms cubic-bezier(0.2, 0, 1, 0.9)";
@@ -17612,7 +17740,8 @@
           id = props.id,
           onClick = props.onClick,
           value = props.value,
-          Tag = props.tagName,
+          _b = props.tagName,
+          Tag = _b === void 0 ? 'li' : _b,
           rest = __rest(props, ["nestedBody", "expanded", "id", "onClick", "value", "tagName"]);
 
       var contextProp = React__namespace.useContext(ListboxContext);
@@ -17626,20 +17755,19 @@
       var tagClass = classNames__default["default"]((_a = {}, _a['Listbox-item-wrapper'] = !draggable, _a));
       return /*#__PURE__*/React__namespace.createElement(Tag, __assign({
         id: id,
-        key: id,
         "data-test": "DesignSystem-Listbox-Item"
       }, rest, {
         onClick: onClickHandler,
         "data-value": value,
         className: tagClass
-      }, rest), /*#__PURE__*/React__namespace.createElement(ListBody, __assign({}, props)), nestedBody && /*#__PURE__*/React__namespace.createElement(NestedList, {
+      }), /*#__PURE__*/React__namespace.createElement(ListBody, __assign({}, props)), nestedBody && /*#__PURE__*/React__namespace.createElement(NestedList, {
         expanded: expanded,
         nestedBody: nestedBody
       }), showDivider && /*#__PURE__*/React__namespace.createElement(Divider, {
         className: "Listbox-divider"
       }));
     };
-    ListboxItem.displayName = 'ListboxItem';
+    ListboxItem.displayName = 'Listbox.Item';
     ListboxItem.defaultProps = {
       tagName: 'li'
     };
@@ -17941,7 +18069,7 @@
       }));
     };
 
-    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);
@@ -17959,7 +18087,7 @@
           break;
       }
     };
-    var focusListItem$2 = function focusListItem(position, setFocusedOption, listRef, withSearch) {
+    var focusListItem$3 = function focusListItem(position, setFocusedOption, listRef, withSearch) {
       var _a, _b, _c, _d, _e;
 
       if (withSearch && position === 'down') {
@@ -18018,7 +18146,7 @@
         "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,
@@ -18036,16 +18164,16 @@
       }, "+" + 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':
@@ -18068,7 +18196,7 @@
       (_a = focusedOption) === null || _a === void 0 ? void 0 : _a.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;
@@ -18186,7 +18314,7 @@
       };
 
       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__namespace.createElement(Listbox.Item, __assign({
@@ -18379,14 +18507,14 @@
       React__namespace.useEffect(function () {
         if (highlightFirstItem && openPopover) {
           requestAnimationFrame(function () {
-            return focusListItem$2('down', setFocusedOption, listRef, withSearch);
+            return focusListItem$3('down', setFocusedOption, listRef, withSearch);
           });
         }
       }, [highlightFirstItem]);
       React__namespace.useEffect(function () {
         if (highlightLastItem && openPopover) {
           requestAnimationFrame(function () {
-            return focusListItem$2('up', setFocusedOption, listRef, withSearch);
+            return focusListItem$3('up', setFocusedOption, listRef, withSearch);
           });
         }
       }, [highlightLastItem]);
@@ -18489,16 +18617,16 @@
 
     var ComboboxContext = /*#__PURE__*/React__namespace.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':
@@ -18539,7 +18667,7 @@
       }
     };
 
-    var navigateOptions$1 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef) {
+    var navigateOptions$2 = function navigateOptions(direction, focusedOption, setFocusedOption, listRef) {
       var _a;
 
       var listItems = listRef.current.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
@@ -18590,7 +18718,7 @@
       };
 
       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__namespace.createElement(Listbox.Item, __assign({
@@ -18606,7 +18734,7 @@
       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);
@@ -18624,7 +18752,7 @@
           break;
       }
     };
-    var focusListItem$1 = function focusListItem(position, setFocusedOption, listRef) {
+    var focusListItem$2 = function focusListItem(position, setFocusedOption, listRef) {
       var _a, _b, _c;
 
       var listItems = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-test="DesignSystem-Listbox-ItemWrapper"]');
@@ -18690,7 +18818,7 @@
       };
 
       var onKeyDownHandler = function onKeyDownHandler(event) {
-        handleKeyDown$1(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+        handleKeyDown$3(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
       };
 
       return /*#__PURE__*/React__namespace.createElement(Input, __assign({}, props, {
@@ -18946,7 +19074,7 @@
       };
 
       var onKeyDownHandler = function onKeyDownHandler(event) {
-        handleKeyDown$1(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+        handleKeyDown$3(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
       };
 
       return /*#__PURE__*/React__default["default"].createElement(MultiSelectTrigger, __assign({}, props, {
@@ -19089,14 +19217,14 @@
       React__namespace.useEffect(function () {
         if (highlightFirstItem && openPopover) {
           requestAnimationFrame(function () {
-            return focusListItem$1('down', setFocusedOption, listRef);
+            return focusListItem$2('down', setFocusedOption, listRef);
           });
         }
       }, [highlightFirstItem]);
       React__namespace.useEffect(function () {
         if (highlightLastItem && openPopover) {
           requestAnimationFrame(function () {
-            return focusListItem$1('up', setFocusedOption, listRef);
+            return focusListItem$2('up', setFocusedOption, listRef);
           });
         }
       }, [highlightLastItem]);
@@ -19293,7 +19421,7 @@
           break;
       }
     };
-    var focusListItem = function focusListItem(position, setFocusedOption, listRef) {
+    var focusListItem$1 = function focusListItem(position, setFocusedOption, listRef) {
       var _a, _b, _c;
 
       var searchInput = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('[data-test="DesignSystem-Select--Input"]');
@@ -19312,16 +19440,16 @@
       });
       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':
@@ -19347,7 +19475,7 @@
 
       (_a = focusedOption) === null || _a === void 0 ? void 0 : _a.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;
@@ -19443,7 +19571,7 @@
       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__namespace.createElement(Listbox.Item, __assign({
@@ -19717,7 +19845,7 @@
           setFocusFirstItem: function setFocusFirstItem() {
             if (openPopover) {
               requestAnimationFrame(function () {
-                return focusListItem('down', setFocusedOption, listRef);
+                return focusListItem$1('down', setFocusedOption, listRef);
               });
               setHighlightFirstItem(true);
             }
@@ -19725,7 +19853,7 @@
           setFocusLastItem: function setFocusLastItem() {
             if (openPopover) {
               requestAnimationFrame(function () {
-                return focusListItem('up', setFocusedOption, listRef);
+                return focusListItem$1('up', setFocusedOption, listRef);
               });
               setHighlightLastItem(true);
             }
@@ -19741,14 +19869,14 @@
       React__namespace.useEffect(function () {
         if (highlightFirstItem && openPopover) {
           requestAnimationFrame(function () {
-            return focusListItem('down', setFocusedOption, listRef);
+            return focusListItem$1('down', setFocusedOption, listRef);
           });
         }
       }, [highlightFirstItem]);
       React__namespace.useEffect(function () {
         if (highlightLastItem && openPopover) {
           requestAnimationFrame(function () {
-            return focusListItem('up', setFocusedOption, listRef);
+            return focusListItem$1('up', setFocusedOption, listRef);
           });
         }
       }, [highlightLastItem]);
@@ -19833,7 +19961,459 @@
     Select.EmptyTemplate = SelectEmptyTemplate;
     Select.Footer = SelectFooter;
 
-    var version = "2.29.0";
+    var MenuGroup = function MenuGroup(props) {
+      var label = props.label,
+          children = props.children,
+          showDivider = props.showDivider,
+          rest = __rest(props, ["label", "children", "showDivider"]);
+
+      if (label) {
+        return /*#__PURE__*/React__default["default"].createElement("div", __assign({
+          "data-test": "DesignSystem-Menu-Group",
+          role: "group",
+          className: "Menu-Group"
+        }, rest), /*#__PURE__*/React__default["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["default"].createElement("div", __assign({
+        "data-test": "DesignSystem-Menu-Group",
+        role: "group"
+      }, rest), children, showDivider && /*#__PURE__*/React__default["default"].createElement(Divider, {
+        className: "my-3"
+      }));
+    };
+    MenuGroup.defaultProps = {
+      showDivider: true
+    };
+
+    var MenuContext = /*#__PURE__*/React__namespace.createContext({});
+
+    var handleKeyDown$1 = function handleKeyDown(event, focusedOption, setFocusedOption, setOpenPopover, menuTriggerRef, listRef, subListRef, isSubMenuTrigger, triggerRef, menuID, triggerID, parentListRef) {
+      var _a, _b, _c;
+
+      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':
+          (_a = focusedOption) === null || _a === void 0 ? void 0 : _a.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) {
+            (_b = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+          } else {
+            (_c = menuTriggerRef === null || menuTriggerRef === void 0 ? void 0 : menuTriggerRef.current) === null || _c === void 0 ? void 0 : _c.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 _a, _b;
+
+      var listItems = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.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);
+      (_b = targetOption === null || targetOption === void 0 ? void 0 : targetOption.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(targetOption, {
+        block: 'center'
+      });
+    };
+
+    var navigateSubMenu = function navigateSubMenu(isSubMenuTrigger, direction, subListRef, menuID, triggerID, parentListRef) {
+      var _a, _b, _c, _d;
+
+      var element = document.querySelector("[data-name=\"" + menuID + "\"]");
+      var menuPlacement = element === null || element === void 0 ? void 0 : element.getAttribute('data-placement');
+
+      if (isSubMenuTrigger) {
+        if (direction === 'right' && (menuPlacement === null || menuPlacement === void 0 ? void 0 : menuPlacement.includes('right')) || direction === 'left' && (menuPlacement === null || menuPlacement === void 0 ? void 0 : menuPlacement.includes('left'))) {
+          var listItems = (_a = subListRef === null || subListRef === void 0 ? void 0 : subListRef.current) === null || _a === void 0 ? void 0 : _a.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 ? void 0 : menuPlacement.includes('right')) || direction === 'right' && (menuPlacement === null || menuPlacement === void 0 ? void 0 : menuPlacement.includes('left'))) {
+        var triggerElement = (_c = (_b = parentListRef === null || parentListRef === void 0 ? void 0 : parentListRef.current) === null || _b === void 0 ? void 0 : _b.querySelector("#" + triggerID)) === null || _c === void 0 ? void 0 : _c.firstChild;
+        (_d = triggerElement) === null || _d === void 0 ? void 0 : _d.focus();
+      }
+    };
+
+    var SubMenuContext = /*#__PURE__*/React__namespace.createContext({});
+
+    var MenuItem = function MenuItem(props) {
+      var children = props.children,
+          className = props.className,
+          onClick = props.onClick,
+          disabled = props.disabled,
+          rest = __rest(props, ["children", "className", "onClick", "disabled"]);
+
+      var contextProp = React__default["default"].useContext(MenuContext);
+      var subMenuContextProp = React__default["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__default["default"]({
+        'Menu-Item': true
+      }, className);
+      React__default["default"].useEffect(function () {
+        var _a, _b;
+
+        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 = (_b = (_a = parentListRef === null || parentListRef === void 0 ? void 0 : parentListRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("#" + triggerID)) === null || _b === void 0 ? void 0 : _b.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["default"].createElement(Listbox.Item, __assign({
+        "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 MenuList = function MenuList(props) {
+      var children = props.children,
+          rest = __rest(props, ["children"]);
+
+      return /*#__PURE__*/React__default["default"].createElement(Listbox, __assign({
+        "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 _a, _b, _c;
+
+      var listItems = (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.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];
+      }
+
+      (_b = targetOption) === null || _b === void 0 ? void 0 : _b.focus();
+
+      if (targetOption && typeof targetOption.scrollIntoView === 'function') {
+        (_c = targetOption) === null || _c === void 0 ? void 0 : _c.scrollIntoView({
+          block: 'end'
+        });
+      }
+
+      setFocusedOption && setFocusedOption(targetOption);
+    };
+
+    var MenuTrigger = function MenuTrigger(props) {
+      var className = props.className;
+      var contextProp = React__default["default"].useContext(MenuContext);
+      var openPopover = contextProp.openPopover,
+          setOpenPopover = contextProp.setOpenPopover,
+          setHighlightFirstItem = contextProp.setHighlightFirstItem,
+          setHighlightLastItem = contextProp.setHighlightLastItem,
+          menuTriggerRef = contextProp.menuTriggerRef;
+      var triggerClassName = classNames__default["default"]({
+        'Menu-Trigger--active': openPopover
+      }, className);
+
+      var onKeyDownHandler = function onKeyDownHandler(event) {
+        handleKeyDown(event, setOpenPopover, setHighlightFirstItem, setHighlightLastItem);
+      };
+
+      return /*#__PURE__*/React__default["default"].createElement(Button, __assign({
+        "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 _a;
+
+      var children = props.children;
+      var menuID = "DesignSystem-Menu--Popover-" + uidGenerator();
+      var triggerID = "DesignSystem-Menu--Trigger-" + uidGenerator();
+
+      var _b = React__default["default"].Children.toArray(children),
+          submenuTrigger = _b[0],
+          submenuContent = _b[1];
+
+      var contextProp = React__default["default"].useContext(MenuContext);
+      var subListRef = React__default["default"].useRef(null);
+      var triggerRef = React__default["default"].useRef(null);
+      var isSubMenuTrigger = true;
+      var subMenuElement = /*#__PURE__*/React__default["default"].createElement(React__default["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["default"].cloneElement(submenuTrigger, __assign(__assign({}, (_a = submenuTrigger) === null || _a === void 0 ? void 0 : _a.props), {
+        onKeyDown: onKeyDownHandler,
+        ref: triggerRef,
+        'aria-haspopup': 'menu',
+        'aria-expanded': subListRef.current ? 'true' : 'false',
+        'aria-controls': menuID,
+        id: triggerID
+      }));
+
+      if ( /*#__PURE__*/React__default["default"].isValidElement(submenuContent)) {
+        var _c = submenuContent === null || submenuContent === void 0 ? void 0 : submenuContent.props,
+            on = _c.on,
+            children_1 = _c.children;
+
+        subMenuElement = /*#__PURE__*/React__default["default"].cloneElement(submenuContent, __assign(__assign({}, submenuContent.props), {
+          on: on || 'hover',
+          offset: 'small',
+          children: /*#__PURE__*/React__default["default"].createElement("div", {
+            ref: subListRef
+          }, children_1),
+          trigger: triggerElement
+        }));
+      }
+
+      return /*#__PURE__*/React__default["default"].createElement(SubMenuContext.Provider, {
+        value: subMenuContextProp
+      }, subMenuElement);
+    };
+
+    var Menu = function Menu(props) {
+      var _a;
+
+      var children = props.children,
+          width = props.width,
+          minHeight = props.minHeight,
+          maxHeight = props.maxHeight,
+          className = props.className,
+          open = props.open,
+          rest = __rest(props, ["children", "width", "minHeight", "maxHeight", "className", "open"]);
+
+      var _b = React__default["default"].useState(open),
+          openPopover = _b[0],
+          setOpenPopover = _b[1];
+
+      var _c = React__default["default"].useState(false),
+          highlightFirstItem = _c[0],
+          setHighlightFirstItem = _c[1];
+
+      var _d = React__default["default"].useState(false),
+          highlightLastItem = _d[0],
+          setHighlightLastItem = _d[1];
+
+      var _e = React__default["default"].useState(),
+          focusedOption = _e[0],
+          setFocusedOption = _e[1];
+
+      var listRef = /*#__PURE__*/React__default["default"].createRef();
+      var menuTriggerRef = React__default["default"].useRef(null);
+      var subMenuContextProp = React__default["default"].useContext(SubMenuContext);
+      var menuID = subMenuContextProp.menuID;
+      var popoverClassName = classNames__default["default"]((_a = {}, _a['Menu'] = true, _a), className);
+      React__default["default"].useEffect(function () {
+        setOpenPopover(open);
+      }, [open]);
+      React__default["default"].useEffect(function () {
+        if (highlightFirstItem && openPopover) {
+          requestAnimationFrame(function () {
+            return focusListItem('down', setFocusedOption, listRef);
+          });
+        }
+      }, [highlightFirstItem]);
+      React__default["default"].useEffect(function () {
+        if (highlightLastItem && openPopover) {
+          requestAnimationFrame(function () {
+            return focusListItem('up', setFocusedOption, listRef);
+          });
+        }
+      }, [highlightLastItem]);
+      React__default["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["default"].createElement(MenuContext.Provider, {
+        value: contextProp
+      }, /*#__PURE__*/React__default["default"].createElement(Popover, __assign({
+        "data-test": "DesignSystem-Menu",
+        name: menuID,
+        offset: "medium"
+      }, rest, {
+        open: openPopover,
+        customStyle: {
+          width: width
+        },
+        onToggle: onToggleHandler
+      }), /*#__PURE__*/React__default["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.1";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;
@@ -19888,6 +20468,7 @@
     exports.LinkButton = LinkButton;
     exports.List = List;
     exports.Listbox = Listbox;
+    exports.Menu = Menu;
     exports.Message = Message;
     exports.MetaList = MetaList;
     exports.MetricInput = MetricInput;