@lumx/react 4.17.0-next.1 → 4.17.0-next.3

package/index.js

@@ -46,6 +46,7 @@ import range from 'lodash/range.js';
 import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline.js';
 import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline.js';
 import chunk from 'lodash/chunk.js';
+import { mdiDotsVertical } from '@lumx/icons/esm/dots-vertical.js';
 import take from 'lodash/take.js';
 import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank.js';
 import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked.js';
@@ -570,7 +571,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1h = {
+const DEFAULT_PROPS$1i = {
   size: Size.tiny,
   kind: Kind.info
 };
@@ -592,8 +593,8 @@ const AlertDialog$1 = props => {
     cancelProps,
     confirmProps,
     ref,
-    kind = DEFAULT_PROPS$1h.kind,
-    size = DEFAULT_PROPS$1h.size,
+    kind = DEFAULT_PROPS$1i.kind,
+    size = DEFAULT_PROPS$1i.size,
     dialogProps,
     children,
     DescriptionElement,
@@ -733,7 +734,7 @@ const AlertDialog = forwardRef((props, ref) => {
 });
 AlertDialog.displayName = COMPONENT_NAME$1F;
 AlertDialog.className = CLASSNAME$1C;
-AlertDialog.defaultProps = DEFAULT_PROPS$1h;
+AlertDialog.defaultProps = DEFAULT_PROPS$1i;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -835,7 +836,7 @@ const CLASSNAME$1B = 'lumx-autocomplete';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1g = {
+const DEFAULT_PROPS$1h = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -858,13 +859,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$1g.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$1h.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$1g.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$1g.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1g.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$1h.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1h.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1h.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -885,7 +886,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$1g.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$1h.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -940,7 +941,7 @@ const Autocomplete = forwardRef((props, ref) => {
 });
 Autocomplete.displayName = COMPONENT_NAME$1E;
 Autocomplete.className = CLASSNAME$1B;
-Autocomplete.defaultProps = DEFAULT_PROPS$1g;
+Autocomplete.defaultProps = DEFAULT_PROPS$1h;
 
 /**
  * Component display name.
@@ -955,7 +956,7 @@ const CLASSNAME$1A = 'lumx-autocomplete-multiple';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1f = {
+const DEFAULT_PROPS$1g = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -996,8 +997,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$1f.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1f.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$1g.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1g.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -1019,12 +1020,12 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$1f.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$1g.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$1f.values,
+    values = DEFAULT_PROPS$1g.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
@@ -1066,7 +1067,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1D;
 AutocompleteMultiple.className = CLASSNAME$1A;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1f;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1g;
 
 /**
  * Component display name.
@@ -1085,7 +1086,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1e = {
+const DEFAULT_PROPS$1f = {
   size: Size.m
 };
 
@@ -1102,7 +1103,7 @@ const Avatar$1 = props => {
     badge,
     className,
     image,
-    size = DEFAULT_PROPS$1e.size,
+    size = DEFAULT_PROPS$1f.size,
     theme,
     ref,
     ...forwardedProps
@@ -1143,7 +1144,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$1e.size,
+    size = DEFAULT_PROPS$1f.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -1173,7 +1174,7 @@ const Avatar = forwardRef((props, ref) => {
 });
 Avatar.displayName = COMPONENT_NAME$1C;
 Avatar.className = CLASSNAME$1z;
-Avatar.defaultProps = DEFAULT_PROPS$1e;
+Avatar.defaultProps = DEFAULT_PROPS$1f;
 
 /**
  * Component display name.
@@ -1191,7 +1192,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1d = {
+const DEFAULT_PROPS$1e = {
   color: ColorPalette.primary
 };
 
@@ -1205,7 +1206,7 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$1d.color,
+    color = DEFAULT_PROPS$1e.color,
     ref,
     ...forwardedProps
   } = props;
@@ -1220,7 +1221,7 @@ const Badge$1 = props => {
 };
 Badge$1.displayName = COMPONENT_NAME$1B;
 Badge$1.className = CLASSNAME$1y;
-Badge$1.defaultProps = DEFAULT_PROPS$1d;
+Badge$1.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Defines the props of the component.
@@ -1446,7 +1447,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1c = {
+const DEFAULT_PROPS$1d = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1460,10 +1461,10 @@ const DEFAULT_PROPS$1c = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$1c.emphasis,
+    emphasis = DEFAULT_PROPS$1d.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$1c.size,
+    size = DEFAULT_PROPS$1d.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1480,7 +1481,7 @@ const Button$1 = props => {
 };
 Button$1.displayName = COMPONENT_NAME$1y;
 Button$1.className = CLASSNAME$1w;
-Button$1.defaultProps = DEFAULT_PROPS$1c;
+Button$1.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1555,7 +1556,7 @@ const Button = forwardRef((props, ref) => {
 });
 Button.displayName = COMPONENT_NAME$1y;
 Button.className = CLASSNAME$1w;
-Button.defaultProps = DEFAULT_PROPS$1c;
+Button.defaultProps = DEFAULT_PROPS$1d;
 
 const COMPONENT_NAME$1x = 'Icon';
 const IconClassName = 'lumx-icon';
@@ -1572,7 +1573,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1b = {};
+const DEFAULT_PROPS$1c = {};
 
 /**
  * Icon component.
@@ -1652,7 +1653,7 @@ const Icon$1 = props => {
 };
 Icon$1.displayName = COMPONENT_NAME$1x;
 Icon$1.className = CLASSNAME$1v;
-Icon$1.defaultProps = DEFAULT_PROPS$1b;
+Icon$1.defaultProps = DEFAULT_PROPS$1c;
 
 /**
  * Component display name.
@@ -1667,7 +1668,7 @@ const CLASSNAME$1u = 'lumx-icon-button';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1a = {
+const DEFAULT_PROPS$1b = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1680,11 +1681,11 @@ const DEFAULT_PROPS$1a = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$1a.emphasis,
+    emphasis = DEFAULT_PROPS$1b.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$1a.size,
+    size = DEFAULT_PROPS$1b.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1705,7 +1706,7 @@ const IconButton$1 = props => {
 };
 IconButton$1.displayName = COMPONENT_NAME$1w;
 IconButton$1.className = CLASSNAME$1u;
-IconButton$1.defaultProps = DEFAULT_PROPS$1a;
+IconButton$1.defaultProps = DEFAULT_PROPS$1b;
 
 /**
  * IconButton component.
@@ -1750,7 +1751,7 @@ const IconButton = forwardRef((props, ref) => {
 });
 IconButton.displayName = COMPONENT_NAME$1w;
 IconButton.className = CLASSNAME$1u;
-IconButton.defaultProps = DEFAULT_PROPS$1a;
+IconButton.defaultProps = DEFAULT_PROPS$1b;
 
 /**
  * Component display name.
@@ -1765,7 +1766,7 @@ const CLASSNAME$1t = 'lumx-button-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$19 = {};
+const DEFAULT_PROPS$1a = {};
 
 /**
  * ButtonGroup component.
@@ -1787,7 +1788,7 @@ const ButtonGroup$1 = props => {
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1v;
 ButtonGroup$1.className = CLASSNAME$1t;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$19;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * ButtonGroup component.
@@ -1804,7 +1805,7 @@ const ButtonGroup = forwardRef((props, ref) => {
 });
 ButtonGroup.displayName = COMPONENT_NAME$1v;
 ButtonGroup.className = CLASSNAME$1t;
-ButtonGroup.defaultProps = DEFAULT_PROPS$19;
+ButtonGroup.defaultProps = DEFAULT_PROPS$1a;
 
 const COMPONENT_NAME$1u = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
@@ -1812,7 +1813,7 @@ const CLASSNAME$1s = InputLabelClassName;
 const {
   block: block$16
 } = bem(CLASSNAME$1s);
-const DEFAULT_PROPS$18 = {};
+const DEFAULT_PROPS$19 = {};
 
 /**
  * InputLabel component.
@@ -1844,7 +1845,7 @@ function InputLabel$1(props) {
 }
 InputLabel$1.displayName = COMPONENT_NAME$1u;
 InputLabel$1.className = CLASSNAME$1s;
-InputLabel$1.defaultProps = DEFAULT_PROPS$18;
+InputLabel$1.defaultProps = DEFAULT_PROPS$19;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1873,7 +1874,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {
+const DEFAULT_PROPS$18 = {
   kind: Kind.info
 };
 
@@ -1884,7 +1885,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$17.kind,
+    kind = DEFAULT_PROPS$18.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1904,7 +1905,7 @@ function InputHelper$1(props) {
 }
 InputHelper$1.displayName = COMPONENT_NAME$1t;
 InputHelper$1.className = CLASSNAME$1r;
-InputHelper$1.defaultProps = DEFAULT_PROPS$17;
+InputHelper$1.defaultProps = DEFAULT_PROPS$18;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -2019,7 +2020,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {};
+const DEFAULT_PROPS$17 = {};
 
 /**
  * Checkbox component.
@@ -2081,7 +2082,7 @@ const Checkbox = forwardRef((props, ref) => {
 });
 Checkbox.displayName = COMPONENT_NAME$1s;
 Checkbox.className = CLASSNAME$1q;
-Checkbox.defaultProps = DEFAULT_PROPS$16;
+Checkbox.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -2116,7 +2117,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {
+const DEFAULT_PROPS$16 = {
   size: Size.m
 };
 
@@ -2143,7 +2144,7 @@ const Chip$1 = props => {
     hasAfterClick,
     hasBeforeClick,
     hasOnClick,
-    size = DEFAULT_PROPS$15.size,
+    size = DEFAULT_PROPS$16.size,
     theme,
     ref,
     href,
@@ -2265,7 +2266,7 @@ const Chip = forwardRef((props, ref) => {
 });
 Chip.displayName = COMPONENT_NAME$1r;
 Chip.className = CLASSNAME$1p;
-Chip.defaultProps = DEFAULT_PROPS$15;
+Chip.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Component display name.
@@ -2280,7 +2281,7 @@ const CLASSNAME$1o = 'lumx-chip-group';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {};
+const DEFAULT_PROPS$15 = {};
 
 /**
  * ChipGroup component.
@@ -2378,7 +2379,7 @@ const InternalChipGroup = forwardRef((props, ref) => {
 });
 InternalChipGroup.displayName = COMPONENT_NAME$1q;
 InternalChipGroup.className = CLASSNAME$1o;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$14;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$15;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2721,7 +2722,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {};
+const DEFAULT_PROPS$14 = {};
 
 /**
  * Text component common props
@@ -2808,7 +2809,7 @@ const Text = forwardRef((props, ref) => {
 });
 Text.displayName = COMPONENT_NAME$1o;
 Text.className = CLASSNAME$1m;
-Text.defaultProps = DEFAULT_PROPS$13;
+Text.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Custom positioning reference element.
@@ -4890,7 +4891,7 @@ const TOOLTIP_ZINDEX = 10000;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {
+const DEFAULT_PROPS$13 = {
   placement: 'bottom',
   closeMode: 'unmount',
   ariaLinkMode: 'aria-describedby',
@@ -5254,11 +5255,11 @@ const Tooltip = forwardRef((props, ref) => {
     children,
     className,
     delay,
-    placement = DEFAULT_PROPS$12.placement,
+    placement = DEFAULT_PROPS$13.placement,
     forceOpen,
-    closeMode = DEFAULT_PROPS$12.closeMode,
-    ariaLinkMode = DEFAULT_PROPS$12.ariaLinkMode,
-    zIndex = DEFAULT_PROPS$12.zIndex,
+    closeMode = DEFAULT_PROPS$13.closeMode,
+    ariaLinkMode = DEFAULT_PROPS$13.ariaLinkMode,
+    zIndex = DEFAULT_PROPS$13.zIndex,
     ...forwardedProps
   } = props;
   // Disable in SSR.
@@ -5323,7 +5324,7 @@ const Tooltip = forwardRef((props, ref) => {
 });
 Tooltip.displayName = COMPONENT_NAME$1n;
 Tooltip.className = CLASSNAME$1l;
-Tooltip.defaultProps = DEFAULT_PROPS$12;
+Tooltip.defaultProps = DEFAULT_PROPS$13;
 
 /** Create a pending navigation store; discards intent on abort. */
 function createPendingNavigation(signal) {
@@ -7730,7 +7731,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$12 = {
   type: 'text'
 };
 
@@ -7747,7 +7748,7 @@ const RawInputText$1 = props => {
     handleInput,
     handleFocus,
     handleBlur,
-    type = DEFAULT_PROPS$11.type,
+    type = DEFAULT_PROPS$12.type,
     name,
     ref,
     ...forwardedProps
@@ -7809,7 +7810,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$11 = {
   rows: 2
 };
 
@@ -7826,7 +7827,7 @@ const RawInputTextarea$1 = props => {
     handleInput,
     handleFocus,
     handleBlur,
-    rows = DEFAULT_PROPS$10.rows,
+    rows = DEFAULT_PROPS$11.rows,
     name,
     ref,
     ...forwardedProps
@@ -7902,8 +7903,8 @@ function useFitRowsToContent(minimumRows, textareaRef, value) {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
-  minimumRows: DEFAULT_PROPS$10.rows
+const DEFAULT_PROPS$10 = {
+  minimumRows: DEFAULT_PROPS$11.rows
 };
 
 /**
@@ -7914,7 +7915,7 @@ const RawInputTextarea = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     theme = defaultTheme,
-    minimumRows = DEFAULT_PROPS$$.minimumRows,
+    minimumRows = DEFAULT_PROPS$10.minimumRows,
     value,
     onChange,
     onFocus,
@@ -7938,7 +7939,7 @@ const RawInputTextarea = forwardRef((props, ref) => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$$ = {
   type: 'text'
 };
 
@@ -7982,7 +7983,7 @@ const TextField = forwardRef((props, ref) => {
     placeholder,
     textFieldRef,
     theme = defaultTheme,
-    type = DEFAULT_PROPS$_.type,
+    type = DEFAULT_PROPS$$.type,
     value,
     afterElement,
     ...forwardedProps
@@ -8089,7 +8090,7 @@ const TextField = forwardRef((props, ref) => {
 });
 TextField.displayName = COMPONENT_NAME$1k;
 TextField.className = CLASSNAME$1i;
-TextField.defaultProps = DEFAULT_PROPS$_;
+TextField.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Props for Combobox.Input component.
@@ -8189,7 +8190,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {};
+const DEFAULT_PROPS$_ = {};
 
 /**
  * List component.
@@ -8216,7 +8217,7 @@ const List$1 = props => {
 };
 List$1.displayName = COMPONENT_NAME$1j;
 List$1.className = CLASSNAME$1h;
-List$1.defaultProps = DEFAULT_PROPS$Z;
+List$1.defaultProps = DEFAULT_PROPS$_;
 
 /**
  * Popup type for the combobox listbox.
@@ -8368,7 +8369,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$Z = {
   size: Size.regular
 };
 
@@ -8392,7 +8393,7 @@ const ListItem$1 = props => {
     linkProps = {},
     linkRef,
     handleClick,
-    size = DEFAULT_PROPS$Y.size,
+    size = DEFAULT_PROPS$Z.size,
     ref,
     ...forwardedProps
   } = props;
@@ -8432,7 +8433,7 @@ const ListItem$1 = props => {
 };
 ListItem$1.displayName = COMPONENT_NAME$1h;
 ListItem$1.className = CLASSNAME$1f;
-ListItem$1.defaultProps = DEFAULT_PROPS$Y;
+ListItem$1.defaultProps = DEFAULT_PROPS$Z;
 
 /**
  * ListItemAction props.
@@ -8447,7 +8448,7 @@ const COMPONENT_NAME$1g = 'ListItemAction';
  * Component classname (used by action area CSS pattern).
  */
 const CLASSNAME$1e = 'lumx-action-area__action';
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$Y = {};
 
 /**
  * ListItemAction component.
@@ -9108,7 +9109,7 @@ const {
 /**
  * Component default props (used by framework wrappers).
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$X = {
   closeMode: 'unmount',
   elevation: 3,
   placement: Placement.AUTO,
@@ -9132,8 +9133,8 @@ const Popover$1 = (props, {
     as: asTag = 'div',
     children,
     className,
-    closeMode = DEFAULT_PROPS$W.closeMode,
-    elevation = DEFAULT_PROPS$W.elevation,
+    closeMode = DEFAULT_PROPS$X.closeMode,
+    elevation = DEFAULT_PROPS$X.elevation,
     hasArrow,
     isOpen,
     position,
@@ -9143,7 +9144,7 @@ const Popover$1 = (props, {
     // Framework-specific
     ref,
     arrowRef,
-    usePortal = DEFAULT_PROPS$W.usePortal,
+    usePortal = DEFAULT_PROPS$X.usePortal,
     clickAwayCallback,
     clickAwayRefs,
     unmountSentinel,
@@ -9482,27 +9483,27 @@ const _InnerPopover = forwardRef((props, ref) => {
     as,
     children,
     className,
-    closeMode = DEFAULT_PROPS$W.closeMode,
+    closeMode = DEFAULT_PROPS$X.closeMode,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$W.elevation,
+    elevation = DEFAULT_PROPS$X.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$W.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$W.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$X.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$X.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$W.placement,
+    placement = DEFAULT_PROPS$X.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$W.zIndex,
+    zIndex = DEFAULT_PROPS$X.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -9576,7 +9577,7 @@ const Popover = skipRender(
 () => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$1c;
 Popover.className = CLASSNAME$1a;
-Popover.defaultProps = DEFAULT_PROPS$W;
+Popover.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Props for Combobox.OptionMoreInfo component.
@@ -10059,7 +10060,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {};
+const DEFAULT_PROPS$W = {};
 
 /**
  * ListSection component.
@@ -10103,7 +10104,7 @@ const ListSection$1 = props => {
 };
 ListSection$1.displayName = COMPONENT_NAME$16;
 ListSection$1.className = CLASSNAME$14;
-ListSection$1.defaultProps = DEFAULT_PROPS$V;
+ListSection$1.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Defines the props of the component.
@@ -10127,7 +10128,7 @@ const ListSection = forwardRef((props, ref) => {
 });
 ListSection.displayName = COMPONENT_NAME$16;
 ListSection.className = CLASSNAME$14;
-ListSection.defaultProps = DEFAULT_PROPS$V;
+ListSection.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Props for Combobox.Section component.
@@ -10376,7 +10377,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$V = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
@@ -10400,10 +10401,10 @@ const GenericBlock$1 = props => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$U.gap,
+    gap = DEFAULT_PROPS$V.gap,
     ref,
     content,
-    orientation = DEFAULT_PROPS$U.orientation,
+    orientation = DEFAULT_PROPS$V.orientation,
     contentProps,
     FlexBox,
     ...forwardedProps
@@ -10515,7 +10516,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$14;
 BaseGenericBlock.className = CLASSNAME$12;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$U;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$V;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -10609,7 +10610,7 @@ const CLASSNAME$11 = 'lumx-list-divider';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {};
+const DEFAULT_PROPS$U = {};
 
 /**
  * ListDivider component.
@@ -10633,7 +10634,7 @@ const ListDivider$1 = props => {
 };
 ListDivider$1.displayName = COMPONENT_NAME$13;
 ListDivider$1.className = CLASSNAME$11;
-ListDivider$1.defaultProps = DEFAULT_PROPS$T;
+ListDivider$1.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Defines the props of the component.
@@ -10655,7 +10656,7 @@ const ListDivider = forwardRef((props, ref) => {
 });
 ListDivider.displayName = COMPONENT_NAME$13;
 ListDivider.className = CLASSNAME$11;
-ListDivider.defaultProps = DEFAULT_PROPS$T;
+ListDivider.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Combobox compound component namespace.
@@ -10718,7 +10719,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$T = {
   variant: CommentBlockVariant.indented
 };
 
@@ -10748,7 +10749,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$S.variant,
+    variant = DEFAULT_PROPS$T.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -10817,7 +10818,7 @@ const CommentBlock = forwardRef((props, ref) => {
 });
 CommentBlock.displayName = COMPONENT_NAME$12;
 CommentBlock.className = CLASSNAME$10;
-CommentBlock.defaultProps = DEFAULT_PROPS$S;
+CommentBlock.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -11720,7 +11721,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$S = {
   size: Size.big
 };
 
@@ -11743,7 +11744,7 @@ const Dialog$1 = props => {
     isOpen,
     handleClose,
     contentRef,
-    size = DEFAULT_PROPS$R.size,
+    size = DEFAULT_PROPS$S.size,
     zIndex,
     dialogProps,
     headerChildContent,
@@ -11847,7 +11848,7 @@ const isFooter$1 = isComponent('footer');
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$R = {
   closeMode: 'unmount',
   size: Size$1.big,
   disableBodyScroll: true
@@ -11868,7 +11869,7 @@ const Dialog = forwardRef((props, ref) => {
   const {
     children,
     className,
-    closeMode = DEFAULT_PROPS$Q.closeMode,
+    closeMode = DEFAULT_PROPS$R.closeMode,
     header,
     focusElement,
     forceFooterDivider,
@@ -11880,11 +11881,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$Q.size,
+    size = DEFAULT_PROPS$R.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$Q.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$R.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -11990,7 +11991,7 @@ const Dialog = forwardRef((props, ref) => {
 });
 Dialog.displayName = COMPONENT_NAME$_;
 Dialog.className = CLASSNAME$_;
-Dialog.defaultProps = DEFAULT_PROPS$Q;
+Dialog.defaultProps = DEFAULT_PROPS$R;
 
 /**
  * Component display name.
@@ -12034,7 +12035,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Divider component.
@@ -12057,7 +12058,7 @@ const Divider = forwardRef((props, ref) => {
 });
 Divider.displayName = COMPONENT_NAME$Z;
 Divider.className = CLASSNAME$Z;
-Divider.defaultProps = DEFAULT_PROPS$P;
+Divider.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Component display name.
@@ -12106,7 +12107,7 @@ const DragHandle$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * DragHandle component.
@@ -12129,7 +12130,7 @@ const DragHandle = forwardRef((props, ref) => {
 });
 DragHandle.displayName = COMPONENT_NAME$Y;
 DragHandle.className = CLASSNAME$Y;
-DragHandle.defaultProps = DEFAULT_PROPS$O;
+DragHandle.defaultProps = DEFAULT_PROPS$P;
 
 const INITIAL_INDEX = -1;
 
@@ -12325,7 +12326,7 @@ const InternalList = forwardRef((props, ref) => {
 });
 InternalList.displayName = COMPONENT_NAME$1j;
 InternalList.className = CLASSNAME$1h;
-InternalList.defaultProps = DEFAULT_PROPS$Z;
+InternalList.defaultProps = DEFAULT_PROPS$_;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -12388,7 +12389,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -12411,18 +12412,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$N.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$N.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$N.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$N.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$N.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$O.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$O.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$O.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$O.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$O.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$N.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$O.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$N.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$N.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$O.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$O.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -12468,7 +12469,7 @@ const Dropdown = forwardRef((props, ref) => {
 });
 Dropdown.displayName = COMPONENT_NAME$X;
 Dropdown.className = CLASSNAME$X;
-Dropdown.defaultProps = DEFAULT_PROPS$N;
+Dropdown.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Component display name.
@@ -12487,7 +12488,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {
+const DEFAULT_PROPS$N = {
   closeMode: 'unmount'
 };
 
@@ -12600,7 +12601,7 @@ const isFooter = isComponent('footer');
 const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    closeMode = DEFAULT_PROPS$M.closeMode,
+    closeMode = DEFAULT_PROPS$N.closeMode,
     children: anyChildren,
     isOpen,
     label,
@@ -12673,11 +12674,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = COMPONENT_NAME$W;
 ExpansionPanel.className = CLASSNAME$W;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$M;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$N;
 
 const COMPONENT_NAME$V = 'Flag';
 const CLASSNAME$V = 'lumx-flag';
-const DEFAULT_PROPS$L = {};
+const DEFAULT_PROPS$M = {};
 const {
   block: block$H,
   element: element$y
@@ -12741,7 +12742,7 @@ const Flag = forwardRef((props, ref) => {
 });
 Flag.displayName = COMPONENT_NAME$V;
 Flag.className = CLASSNAME$V;
-Flag.defaultProps = DEFAULT_PROPS$L;
+Flag.defaultProps = DEFAULT_PROPS$M;
 
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
@@ -12779,7 +12780,7 @@ const CLASSNAME$U = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$L = {};
 
 /**
  * Get Heading component common props
@@ -12839,7 +12840,7 @@ const Heading = forwardRef((props, ref) => {
 });
 Heading.displayName = COMPONENT_NAME$U;
 Heading.className = CLASSNAME$U;
-Heading.defaultProps = DEFAULT_PROPS$K;
+Heading.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -12890,7 +12891,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {
+const DEFAULT_PROPS$K = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -12908,9 +12909,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$J.orientation,
+    orientation = DEFAULT_PROPS$K.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$J.wrap,
+    wrap = DEFAULT_PROPS$K.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -12928,7 +12929,7 @@ const Grid = forwardRef((props, ref) => {
 });
 Grid.displayName = COMPONENT_NAME$T;
 Grid.className = CLASSNAME$T;
-Grid.defaultProps = DEFAULT_PROPS$J;
+Grid.defaultProps = DEFAULT_PROPS$K;
 
 /**
  * Component display name.
@@ -12986,7 +12987,7 @@ const CLASSNAME$R = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {};
+const DEFAULT_PROPS$J = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -13023,7 +13024,7 @@ const GridColumn$1 = props => {
 };
 GridColumn$1.displayName = COMPONENT_NAME$R;
 GridColumn$1.className = CLASSNAME$R;
-GridColumn$1.defaultProps = DEFAULT_PROPS$I;
+GridColumn$1.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Defines the props of the component.
@@ -13034,7 +13035,7 @@ GridColumn$1.defaultProps = DEFAULT_PROPS$I;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {};
+const DEFAULT_PROPS$I = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -13053,7 +13054,7 @@ const GridColumn = forwardRef((props, ref) => {
 });
 GridColumn.displayName = COMPONENT_NAME$R;
 GridColumn.className = CLASSNAME$R;
-GridColumn.defaultProps = DEFAULT_PROPS$H;
+GridColumn.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Image block variants.
@@ -13088,7 +13089,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {
+const DEFAULT_PROPS$H = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -13103,9 +13104,9 @@ const DEFAULT_PROPS$G = {
 const ImageBlock$1 = props => {
   const {
     actions,
-    align = DEFAULT_PROPS$G.align,
+    align = DEFAULT_PROPS$H.align,
     alt,
-    captionPosition = DEFAULT_PROPS$G.captionPosition,
+    captionPosition = DEFAULT_PROPS$H.captionPosition,
     captionStyle,
     className,
     description,
@@ -13277,7 +13278,7 @@ const ImageBlock = forwardRef((props, ref) => {
 });
 ImageBlock.displayName = COMPONENT_NAME$Q;
 ImageBlock.className = CLASSNAME$Q;
-ImageBlock.defaultProps = DEFAULT_PROPS$G;
+ImageBlock.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * Component display name.
@@ -14031,7 +14032,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$F = {};
+const DEFAULT_PROPS$G = {};
 
 /**
  * InlineList component.
@@ -14080,7 +14081,7 @@ const InlineList$1 = props => {
 };
 InlineList$1.displayName = COMPONENT_NAME$O;
 InlineList$1.className = CLASSNAME$O;
-InlineList$1.defaultProps = DEFAULT_PROPS$F;
+InlineList$1.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * Defines the props of the component.
@@ -14106,7 +14107,7 @@ const InlineList = forwardRef((props, ref) => {
 });
 InlineList.displayName = COMPONENT_NAME$O;
 InlineList.className = CLASSNAME$O;
-InlineList.defaultProps = DEFAULT_PROPS$F;
+InlineList.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * InputHelper component.
@@ -14465,7 +14466,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$E = {
+const DEFAULT_PROPS$F = {
   size: Size.regular,
   titleHeading: 'h2'
 };
@@ -14484,7 +14485,7 @@ const LinkPreview$1 = props => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$E.size,
+    size = DEFAULT_PROPS$F.size,
     theme,
     thumbnailProps,
     ref,
@@ -14572,7 +14573,7 @@ const LinkPreview = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     theme = defaultTheme,
-    titleHeading = DEFAULT_PROPS$E.titleHeading,
+    titleHeading = DEFAULT_PROPS$F.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -14588,7 +14589,7 @@ const LinkPreview = forwardRef((props, ref) => {
 });
 LinkPreview.displayName = COMPONENT_NAME$L;
 LinkPreview.className = CLASSNAME$L;
-LinkPreview.defaultProps = DEFAULT_PROPS$E;
+LinkPreview.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * ListItem.Action props.
@@ -14621,7 +14622,7 @@ const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
 }), {
   displayName: COMPONENT_NAME$1g,
   className: CLASSNAME$1e,
-  defaultProps: DEFAULT_PROPS$X
+  defaultProps: DEFAULT_PROPS$Y
 });
 
 /**
@@ -14661,7 +14662,7 @@ const _ListItem = forwardRef((props, ref) => {
 });
 _ListItem.displayName = COMPONENT_NAME$1h;
 _ListItem.className = CLASSNAME$1f;
-_ListItem.defaultProps = DEFAULT_PROPS$Y;
+_ListItem.defaultProps = DEFAULT_PROPS$Z;
 
 /**
  * ListItem component with Action sub-component.
@@ -14705,27 +14706,59 @@ const ListSubheader = forwardRef((props, ref) => {
 ListSubheader.displayName = COMPONENT_NAME$K;
 ListSubheader.className = CLASSNAME$K;
 
+const DEFAULT_PROPS$E = {
+  variant: 'button'
+};
+
+/** ARIA keys set by MenuButton on the trigger — omitted from variant component props. */
+
+/** Per-variant keys internally managed by MenuButton — omitted from variant component props. */
+
+/** Discriminated union of MenuButton props across all trigger variants. */
+
 const COMPONENT_NAME$J = 'MenuButton';
 
 /** Menu button core template (composition of menu provider, trigger, popover and list) */
 const MenuButton$1 = (props, {
-  Menu
+  MenuProvider,
+  MenuTrigger,
+  MenuPopover,
+  MenuList
 }) => {
   const {
     label,
     children,
     triggerProps,
     popoverProps,
-    onOpen
+    onOpen,
+    variant
   } = props;
-  return /*#__PURE__*/jsxs(Menu.Provider, {
+  const extraTriggerProps = {};
+  if (variant === 'chip') {
+    // Chip render as clickable (since the component cannot detect this automatically)
+    extraTriggerProps.isClickable = true;
+  }
+  let triggerChildren;
+  if (variant === 'icon-button') {
+    // Label as prop (renders as tooltip label)
+    extraTriggerProps.label = label;
+    // Default icon
+    if (!triggerProps?.icon) {
+      extraTriggerProps.icon = mdiDotsVertical;
+    }
+  } else {
+    // Only set the label as children when we are not displaying an icon-button
+    triggerChildren = label;
+  }
+  return /*#__PURE__*/jsxs(MenuProvider, {
     onOpen: onOpen,
-    children: [/*#__PURE__*/jsx(Menu.Trigger, {
+    children: [/*#__PURE__*/jsx(MenuTrigger, {
       ...triggerProps,
-      children: label
-    }), /*#__PURE__*/jsx(Menu.Popover, {
+      ...extraTriggerProps,
+      children: triggerChildren
+    }), /*#__PURE__*/jsx(MenuPopover, {
       ...popoverProps,
-      children: /*#__PURE__*/jsx(Menu.List, {
+      children: /*#__PURE__*/jsx(MenuList, {
         children: children
       })
     })]
@@ -15060,11 +15093,11 @@ function setupMenu(options = {}) {
 
 const MenuContext = /*#__PURE__*/createContext(undefined);
 
-/** Use Menu context. @throws if used outside `Menu.Provider`. */
+/** Use Menu context. @throws if used outside `MenuProvider`. */
 function useMenuContext() {
   const context = useContext(MenuContext);
   if (!context) {
-    throw new Error('Menu sub-components must be used within a Menu.Provider');
+    throw new Error('Menu sub-components must be used within a MenuProvider');
   }
   return context;
 }
@@ -15235,10 +15268,6 @@ const MenuPopover$1 = (props, {
     placement = 'bottom-start',
     anchorRef,
     handleClose,
-    closeOnClickAway = true,
-    closeOnEscape = true,
-    usePortal = false,
-    focusAnchorOnClose = true,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(Popover, {
@@ -15247,10 +15276,10 @@ const MenuPopover$1 = (props, {
     anchorRef: anchorRef,
     isOpen: isOpen,
     onClose: handleClose,
-    closeOnClickAway: closeOnClickAway,
-    closeOnEscape: closeOnEscape,
-    usePortal: usePortal,
-    focusAnchorOnClose: focusAnchorOnClose,
+    closeOnClickAway: true,
+    closeOnEscape: true,
+    usePortal: false,
+    focusAnchorOnClose: true,
     withFocusTrap: false,
     closeMode: "hide",
     fitToAnchorWidth: false,
@@ -15364,18 +15393,17 @@ const MenuList = forwardRef((props, ref) => {
 MenuList.displayName = COMPONENT_NAME$G;
 MenuList.className = CLASSNAME$H;
 
-const Menu = {
-  Provider: MenuProvider,
-  Trigger: MenuTrigger,
-  Popover: MenuPopover,
-  List: MenuList
-};
+/** Props that MenuButton explicitly declares. */
 
-/** Keys managed by MenuButton — omitted from the polymorphic trigger props. */
+/** MenuButton props — discriminated union over the variant to inherit the target component's props. */
 
-/** Polymorphic trigger props with index signature stripped and managed keys removed. */
-
-/** Menu button props */
+/** Menu trigger button component by variant */
+const TRIGGER_COMPONENTS = {
+  button: Button,
+  'icon-button': IconButton,
+  chip: Chip,
+  link: Link
+};
 
 /**
  * MenuButton component.
@@ -15383,37 +15411,35 @@ const Menu = {
  * @param  props Component props.
  * @return React element.
  */
-const MenuButton = Object.assign(forwardRefPolymorphic((props, ref) => {
+const MenuButton = forwardRef((props, ref) => {
   const {
     label,
     children,
     popoverProps,
     onOpen,
-    as,
+    variant = DEFAULT_PROPS$E.variant,
     ...triggerProps
   } = props;
-  const isIconButton = as === IconButton;
-  const triggerLabel = isIconButton ? undefined : label;
-  const extraTriggerProps = isIconButton ? {
-    label
-  } : {};
   return MenuButton$1({
-    label: triggerLabel,
+    label,
     children,
     popoverProps,
     onOpen,
+    variant,
     triggerProps: {
       ...triggerProps,
-      ...extraTriggerProps,
-      as,
+      as: TRIGGER_COMPONENTS[variant],
       ref
     }
   }, {
-    Menu
+    MenuProvider,
+    MenuTrigger,
+    MenuPopover,
+    MenuList
   });
-}), {
-  displayName: COMPONENT_NAME$J
 });
+MenuButton.displayName = COMPONENT_NAME$J;
+MenuButton.defaultProps = DEFAULT_PROPS$E;
 
 /** MenuItem props. */
 
@@ -15475,6 +15501,7 @@ const MenuItem = forwardRef((props, ref) => {
   const {
     children,
     icon,
+    afterIcon,
     color,
     before,
     after,
@@ -15509,12 +15536,21 @@ const MenuItem = forwardRef((props, ref) => {
       color: color
     }), before]
   }) : before;
+
+  // Append the optional `afterIcon` to the `after` slot.
+  const mergedAfter = afterIcon ? /*#__PURE__*/jsxs(Fragment, {
+    children: [after, /*#__PURE__*/jsx(Icon, {
+      icon: afterIcon,
+      size: "xs",
+      color: color
+    })]
+  }) : after;
   return MenuItem$1({
     ...rest,
     ref: mergedRef,
     actionRef,
     before: mergedBefore,
-    after,
+    after: mergedAfter,
     children: /*#__PURE__*/jsx(Text, {
       as: "span",
       color: color,
@@ -22314,5 +22350,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1w as CLASSNAME, COMPONENT_NAME$1y as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1c as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, MenuButton, ListDivider as MenuDivider, MenuItem, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME$3 as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME$2 as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1w as CLASSNAME, COMPONENT_NAME$1y as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1d as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSection, ListSubheader, MenuButton, ListDivider as MenuDivider, MenuItem, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectButton, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, CLASSNAME$3 as TIME_PICKER_FIELD_CLASSNAME, COMPONENT_NAME$2 as TIME_PICKER_FIELD_COMPONENT_NAME, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, TimePickerField, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map