@lumx/react 4.12.1 → 4.13.0-next.0

package/index.js

@@ -25,7 +25,7 @@ import concat from 'lodash/concat.js';
 import dropRight from 'lodash/dropRight.js';
 import partition from 'lodash/partition.js';
 import reduce from 'lodash/reduce.js';
-import { getWithSelector as getWithSelector$1 } from '@lumx/core/js/utils/selectors';
+import { mdiMenuDown } from '@lumx/icons/esm/menu-down.js';
 import { mdiClose } from '@lumx/icons/esm/close.js';
 import isFunction from 'lodash/isFunction.js';
 import { mdiAlert } from '@lumx/icons/esm/alert.js';
@@ -49,7 +49,6 @@ import chunk from 'lodash/chunk.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';
-import { mdiMenuDown } from '@lumx/icons/esm/menu-down.js';
 import { mdiArrowDown } from '@lumx/icons/esm/arrow-down.js';
 import { mdiArrowUp } from '@lumx/icons/esm/arrow-up.js';
 import set from 'lodash/set.js';
@@ -577,15 +576,15 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1y = 'AlertDialog';
+const COMPONENT_NAME$1z = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1w = 'lumx-alert-dialog';
+const CLASSNAME$1x = 'lumx-alert-dialog';
 const {
   block: block$18
-} = bem(CLASSNAME$1w);
+} = bem(CLASSNAME$1x);
 
 /**
  * Component default props.
@@ -751,8 +750,8 @@ const AlertDialog = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1y;
-AlertDialog.className = CLASSNAME$1w;
+AlertDialog.displayName = COMPONENT_NAME$1z;
+AlertDialog.className = CLASSNAME$1x;
 AlertDialog.defaultProps = DEFAULT_PROPS$1g;
 
 /**
@@ -845,12 +844,12 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1x = 'Autocomplete';
+const COMPONENT_NAME$1y = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1v = 'lumx-autocomplete';
+const CLASSNAME$1w = 'lumx-autocomplete';
 
 /**
  * Component default props.
@@ -918,7 +917,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1v),
+    className: classNames.join(className, CLASSNAME$1w),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -958,19 +957,19 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1x;
-Autocomplete.className = CLASSNAME$1v;
+Autocomplete.displayName = COMPONENT_NAME$1y;
+Autocomplete.className = CLASSNAME$1w;
 Autocomplete.defaultProps = DEFAULT_PROPS$1f;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1w = 'AutocompleteMultiple';
+const COMPONENT_NAME$1x = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1u = 'lumx-autocomplete-multiple';
+const CLASSNAME$1v = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
@@ -1051,7 +1050,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1u),
+    className: classNames.join(className, CLASSNAME$1v),
     name: name,
     value: value,
     onChange: onChange,
@@ -1084,23 +1083,23 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1w;
-AutocompleteMultiple.className = CLASSNAME$1u;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1x;
+AutocompleteMultiple.className = CLASSNAME$1v;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$1e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1v = 'Avatar';
+const COMPONENT_NAME$1w = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1t = 'lumx-avatar';
+const CLASSNAME$1u = 'lumx-avatar';
 const {
   block: block$17,
   element: element$Q
-} = bem(CLASSNAME$1t);
+} = bem(CLASSNAME$1u);
 
 /**
  * Component default props.
@@ -1191,22 +1190,22 @@ const Avatar = forwardRef((props, ref) => {
     })
   });
 });
-Avatar.displayName = COMPONENT_NAME$1v;
-Avatar.className = CLASSNAME$1t;
+Avatar.displayName = COMPONENT_NAME$1w;
+Avatar.className = CLASSNAME$1u;
 Avatar.defaultProps = DEFAULT_PROPS$1d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1u = 'Badge';
+const COMPONENT_NAME$1v = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1s = 'lumx-badge';
+const CLASSNAME$1t = 'lumx-badge';
 const {
   block: block$16
-} = bem(CLASSNAME$1s);
+} = bem(CLASSNAME$1t);
 
 /**
  * Component default props.
@@ -1238,8 +1237,8 @@ const Badge$1 = props => {
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1u;
-Badge$1.className = CLASSNAME$1s;
+Badge$1.displayName = COMPONENT_NAME$1v;
+Badge$1.className = CLASSNAME$1t;
 Badge$1.defaultProps = DEFAULT_PROPS$1c;
 
 /**
@@ -1263,12 +1262,12 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1t = 'BadgeWrapper';
-const CLASSNAME$1r = 'lumx-badge-wrapper';
+const COMPONENT_NAME$1u = 'BadgeWrapper';
+const CLASSNAME$1s = 'lumx-badge-wrapper';
 const {
   block: block$15,
   element: element$P
-} = bem(CLASSNAME$1r);
+} = bem(CLASSNAME$1s);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1294,8 +1293,8 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1t;
-BadgeWrapper.className = CLASSNAME$1r;
+BadgeWrapper.displayName = COMPONENT_NAME$1u;
+BadgeWrapper.className = CLASSNAME$1s;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1345,7 +1344,7 @@ const RawClickable = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1s = 'ButtonRoot';
+const COMPONENT_NAME$1t = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1443,7 +1442,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1s;
+ButtonRoot.displayName = COMPONENT_NAME$1t;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1453,15 +1452,15 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1r = 'Button';
+const COMPONENT_NAME$1s = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1q = 'lumx-button';
+const CLASSNAME$1r = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1q);
+} = bem(CLASSNAME$1r);
 
 /**
  * Component default props.
@@ -1498,8 +1497,8 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1r;
-Button$1.className = CLASSNAME$1q;
+Button$1.displayName = COMPONENT_NAME$1s;
+Button$1.className = CLASSNAME$1r;
 Button$1.defaultProps = DEFAULT_PROPS$1b;
 
 /**
@@ -1573,21 +1572,21 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1r;
-Button.className = CLASSNAME$1q;
+Button.displayName = COMPONENT_NAME$1s;
+Button.className = CLASSNAME$1r;
 Button.defaultProps = DEFAULT_PROPS$1b;
 
-const COMPONENT_NAME$1q = 'Icon';
+const COMPONENT_NAME$1r = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1p = IconClassName;
+const CLASSNAME$1q = IconClassName;
 const {
   block: block$14
-} = bem(CLASSNAME$1p);
+} = bem(CLASSNAME$1q);
 
 /**
  * Component default props.
@@ -1670,19 +1669,19 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1q;
-Icon$1.className = CLASSNAME$1p;
+Icon$1.displayName = COMPONENT_NAME$1r;
+Icon$1.className = CLASSNAME$1q;
 Icon$1.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1p = 'IconButton';
+const COMPONENT_NAME$1q = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1o = 'lumx-icon-button';
+const CLASSNAME$1p = 'lumx-icon-button';
 
 /**
  * Component default props.
@@ -1723,8 +1722,8 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1p;
-IconButton$1.className = CLASSNAME$1o;
+IconButton$1.displayName = COMPONENT_NAME$1q;
+IconButton$1.className = CLASSNAME$1p;
 IconButton$1.defaultProps = DEFAULT_PROPS$19;
 
 /**
@@ -1768,19 +1767,19 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1p;
-IconButton.className = CLASSNAME$1o;
+IconButton.displayName = COMPONENT_NAME$1q;
+IconButton.className = CLASSNAME$1p;
 IconButton.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1o = 'ButtonGroup';
+const COMPONENT_NAME$1p = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1n = 'lumx-button-group';
+const CLASSNAME$1o = 'lumx-button-group';
 
 /**
  * Component default props.
@@ -1801,12 +1800,12 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1n),
+    className: classnames(className, CLASSNAME$1o),
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1o;
-ButtonGroup$1.className = CLASSNAME$1n;
+ButtonGroup$1.displayName = COMPONENT_NAME$1p;
+ButtonGroup$1.className = CLASSNAME$1o;
 ButtonGroup$1.defaultProps = DEFAULT_PROPS$18;
 
 /**
@@ -1822,16 +1821,16 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1o;
-ButtonGroup.className = CLASSNAME$1n;
+ButtonGroup.displayName = COMPONENT_NAME$1p;
+ButtonGroup.className = CLASSNAME$1o;
 ButtonGroup.defaultProps = DEFAULT_PROPS$18;
 
-const COMPONENT_NAME$1n = 'InputLabel';
+const COMPONENT_NAME$1o = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$1m = InputLabelClassName;
+const CLASSNAME$1n = InputLabelClassName;
 const {
   block: block$13
-} = bem(CLASSNAME$1m);
+} = bem(CLASSNAME$1n);
 const DEFAULT_PROPS$17 = {};
 
 /**
@@ -1860,8 +1859,8 @@ function InputLabel$1(props) {
     children: children
   });
 }
-InputLabel$1.displayName = COMPONENT_NAME$1n;
-InputLabel$1.className = CLASSNAME$1m;
+InputLabel$1.displayName = COMPONENT_NAME$1o;
+InputLabel$1.className = CLASSNAME$1n;
 InputLabel$1.defaultProps = DEFAULT_PROPS$17;
 
 const INPUT_HELPER_CONFIGURATION = {
@@ -1876,17 +1875,17 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$1m = 'InputHelper';
+const COMPONENT_NAME$1n = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1l = InputHelperClassName;
+const CLASSNAME$1m = InputHelperClassName;
 const {
   block: block$12
-} = bem(CLASSNAME$1l);
+} = bem(CLASSNAME$1m);
 
 /**
  * Component default props.
@@ -1920,8 +1919,8 @@ function InputHelper$1(props) {
     children: children
   });
 }
-InputHelper$1.displayName = COMPONENT_NAME$1m;
-InputHelper$1.className = CLASSNAME$1l;
+InputHelper$1.displayName = COMPONENT_NAME$1n;
+InputHelper$1.className = CLASSNAME$1m;
 InputHelper$1.defaultProps = DEFAULT_PROPS$16;
 
 const INTERMEDIATE_STATE = 'intermediate';
@@ -1933,16 +1932,16 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'Checkbox';
+const COMPONENT_NAME$1m = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-checkbox';
+const CLASSNAME$1l = 'lumx-checkbox';
 const {
   block: block$11,
   element: element$O
-} = bem(CLASSNAME$1k);
+} = bem(CLASSNAME$1l);
 
 /**
  * Checkbox component.
@@ -2097,8 +2096,8 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$1l;
-Checkbox.className = CLASSNAME$1k;
+Checkbox.displayName = COMPONENT_NAME$1m;
+Checkbox.className = CLASSNAME$1l;
 Checkbox.defaultProps = DEFAULT_PROPS$15;
 
 /**
@@ -2120,16 +2119,16 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'Chip';
+const COMPONENT_NAME$1l = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-chip';
+const CLASSNAME$1k = 'lumx-chip';
 const {
   block: block$10,
   element: element$N
-} = bem(CLASSNAME$1j);
+} = bem(CLASSNAME$1k);
 
 /**
  * Component default props.
@@ -2281,19 +2280,19 @@ const Chip = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Chip.displayName = COMPONENT_NAME$1k;
-Chip.className = CLASSNAME$1j;
+Chip.displayName = COMPONENT_NAME$1l;
+Chip.className = CLASSNAME$1k;
 Chip.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'ChipGroup';
+const COMPONENT_NAME$1k = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-chip-group';
+const CLASSNAME$1j = 'lumx-chip-group';
 
 /**
  * Component default props.
@@ -2316,7 +2315,7 @@ const ChipGroup$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1i),
+    className: classnames(className, CLASSNAME$1j),
     children: children
   });
 };
@@ -2394,8 +2393,8 @@ const InternalChipGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$1j;
-InternalChipGroup.className = CLASSNAME$1i;
+InternalChipGroup.displayName = COMPONENT_NAME$1k;
+InternalChipGroup.className = CLASSNAME$1j;
 InternalChipGroup.defaultProps = DEFAULT_PROPS$13;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
@@ -2404,16 +2403,16 @@ const ChipGroup = Object.assign(InternalChipGroup, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'SelectionChipGroup';
+const COMPONENT_NAME$1j = 'SelectionChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-selection-chip-group';
+const CLASSNAME$1i = 'lumx-selection-chip-group';
 const {
   block: block$$,
   element: element$M
-} = bem(CLASSNAME$1h);
+} = bem(CLASSNAME$1i);
 
 /**
  * SelectionChipGroup component.
@@ -2509,10 +2508,10 @@ function createSelectorTreeWalker(container, selector) {
 }
 
 /** CSS selector for enabled chips (not aria-disabled). */
-const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1j}:not([aria-disabled="true"])`;
+const ENABLED_CHIP_SELECTOR = `.${CLASSNAME$1k}:not([aria-disabled="true"])`;
 
 /** Find the closest chip element from an event target. */
-const getChip = target => target?.closest?.(`.${CLASSNAME$1j}`) || null;
+const getChip = target => target?.closest?.(`.${CLASSNAME$1k}`) || null;
 
 /** Whether the chip is marked as disabled via aria-disabled. */
 const isChipDisabled = chip => chip?.getAttribute('aria-disabled') === 'true';
@@ -2726,15 +2725,15 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Text';
+const COMPONENT_NAME$1i = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-text';
+const CLASSNAME$1h = 'lumx-text';
 const {
   block: block$_
-} = bem(CLASSNAME$1g);
+} = bem(CLASSNAME$1h);
 
 /**
  * Component default props.
@@ -2824,8 +2823,8 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$1h;
-Text.className = CLASSNAME$1g;
+Text.displayName = COMPONENT_NAME$1i;
+Text.className = CLASSNAME$1h;
 Text.defaultProps = DEFAULT_PROPS$12;
 
 /**
@@ -4918,16 +4917,16 @@ const DEFAULT_PROPS$11 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1g = 'Tooltip';
+const COMPONENT_NAME$1h = 'Tooltip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-tooltip';
+const CLASSNAME$1g = 'lumx-tooltip';
 const {
   block: block$Z,
   element: element$L
-} = bem(CLASSNAME$1f);
+} = bem(CLASSNAME$1g);
 
 /**
  * Props for the TooltipPopup rendering component.
@@ -4976,8 +4975,8 @@ const TooltipPopup = props => {
     })]
   });
 };
-TooltipPopup.displayName = COMPONENT_NAME$1g;
-TooltipPopup.className = CLASSNAME$1f;
+TooltipPopup.displayName = COMPONENT_NAME$1h;
+TooltipPopup.className = CLASSNAME$1g;
 
 /**
  * Add ref and ARIA attribute(s) in tooltip children or wrapped children.
@@ -5339,8 +5338,8 @@ const Tooltip = forwardRef((props, ref) => {
     })]
   });
 });
-Tooltip.displayName = COMPONENT_NAME$1g;
-Tooltip.className = CLASSNAME$1f;
+Tooltip.displayName = COMPONENT_NAME$1h;
+Tooltip.className = CLASSNAME$1g;
 Tooltip.defaultProps = DEFAULT_PROPS$11;
 
 /**
@@ -6219,8 +6218,8 @@ const SelectionChipGroup = ({
   }, [container, inputRef, getOptionId]);
   useRovingTabIndexContainer({
     containerRef: container,
-    itemSelector: `.${CLASSNAME$1j}`,
-    itemDisabledSelector: `.${CLASSNAME$1j}[aria-disabled="true"]`
+    itemSelector: `.${CLASSNAME$1k}`,
+    itemDisabledSelector: `.${CLASSNAME$1k}[aria-disabled="true"]`
   });
 
   // Merge getChipProps and renderChip: getChipProps provides base props, renderChip overrides them,
@@ -6260,8 +6259,8 @@ const SelectionChipGroup = ({
     Tooltip
   });
 };
-SelectionChipGroup.displayName = COMPONENT_NAME$1i;
-SelectionChipGroup.className = CLASSNAME$1h;
+SelectionChipGroup.displayName = COMPONENT_NAME$1j;
+SelectionChipGroup.className = CLASSNAME$1i;
 
 /**
  * Get the value for a combobox option element.
@@ -7147,12 +7146,12 @@ function setupComboboxButton(button, callbacks) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'ComboboxButton';
+const COMPONENT_NAME$1g = 'ComboboxButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-combobox-button';
+const CLASSNAME$1f = 'lumx-combobox-button';
 
 /**
  * ComboboxButton core template.
@@ -7177,6 +7176,7 @@ const ComboboxButton$1 = (props, {
     listboxId,
     isOpen,
     ref,
+    renderButton,
     ...forwardedProps
   } = props;
 
@@ -7188,15 +7188,16 @@ const ComboboxButton$1 = (props, {
 
   // Hide tooltip if the displayed content equals the label or when open
   const hideTooltip = label === content || isOpen;
+  const Component = renderButton || Button;
   return /*#__PURE__*/jsx(Tooltip, {
     className: hideTooltip ? visuallyHidden() : undefined,
     label: label,
     closeMode: "hide",
     ariaLinkMode: "aria-labelledby",
-    children: /*#__PURE__*/jsx(Button, {
+    children: /*#__PURE__*/jsx(Component, {
       ref: ref,
       ...forwardedProps,
-      className: classnames(className, CLASSNAME$1e),
+      className: classnames(className, CLASSNAME$1f),
       role: "combobox",
       "aria-controls": listboxId,
       "aria-haspopup": "listbox",
@@ -7327,8 +7328,8 @@ const ComboboxButton = Object.assign(forwardRefPolymorphic((props, ref) => {
     Tooltip
   });
 }), {
-  displayName: COMPONENT_NAME$1f,
-  className: CLASSNAME$1e
+  displayName: COMPONENT_NAME$1g,
+  className: CLASSNAME$1f
 });
 
 /** Options for configuring the input-mode combobox controller. */
@@ -7488,12 +7489,12 @@ function getDisabledState(context, props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'ComboboxInput';
+const COMPONENT_NAME$1f = 'ComboboxInput';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-combobox-input';
+const CLASSNAME$1e = 'lumx-combobox-input';
 
 /**
  * ComboboxInput core template.
@@ -7556,22 +7557,22 @@ const ComboboxInput$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1d = 'TextField';
+const COMPONENT_NAME$1e = 'TextField';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-text-field';
+const CLASSNAME$1d = 'lumx-text-field';
 
 /**
  * Input native element class name.
  */
-const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1c}__input-native`;
+const INPUT_NATIVE_CLASSNAME = `${CLASSNAME$1d}__input-native`;
 
 const {
   block: block$Y,
   element: element$K
-} = bem(CLASSNAME$1c);
+} = bem(CLASSNAME$1d);
 
 /**
  * Defines the props of the component.
@@ -8076,8 +8077,8 @@ const TextField = forwardRef((props, ref) => {
     } : undefined
   });
 });
-TextField.displayName = COMPONENT_NAME$1d;
-TextField.className = CLASSNAME$1c;
+TextField.displayName = COMPONENT_NAME$1e;
+TextField.className = CLASSNAME$1d;
 TextField.defaultProps = DEFAULT_PROPS$Z;
 
 /**
@@ -8155,21 +8156,21 @@ const ComboboxInput = forwardRef((props, ref) => {
     IconButton
   });
 });
-ComboboxInput.displayName = COMPONENT_NAME$1e;
-ComboboxInput.className = CLASSNAME$1d;
+ComboboxInput.displayName = COMPONENT_NAME$1f;
+ComboboxInput.className = CLASSNAME$1e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'List';
+const COMPONENT_NAME$1d = 'List';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-list';
+const CLASSNAME$1c = 'lumx-list';
 const {
   block: block$V
-} = bem(CLASSNAME$1b);
+} = bem(CLASSNAME$1c);
 
 /**
  * Component default props.
@@ -8199,8 +8200,8 @@ const List$1 = props => {
     children: children
   });
 };
-List$1.displayName = COMPONENT_NAME$1c;
-List$1.className = CLASSNAME$1b;
+List$1.displayName = COMPONENT_NAME$1d;
+List$1.className = CLASSNAME$1c;
 List$1.defaultProps = DEFAULT_PROPS$Y;
 
 /**
@@ -8216,12 +8217,12 @@ List$1.defaultProps = DEFAULT_PROPS$Y;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'ComboboxList';
+const COMPONENT_NAME$1c = 'ComboboxList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-combobox-list';
+const CLASSNAME$1b = 'lumx-combobox-list';
 
 /**
  * ComboboxList core template.
@@ -8243,7 +8244,7 @@ const ComboboxList$1 = props => {
   } = props;
   return List$1({
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1a),
+    className: classnames(className, CLASSNAME$1b),
     ref,
     itemPadding: 'big',
     id,
@@ -8328,22 +8329,22 @@ const ComboboxList = forwardRef((props, ref) => {
     })
   });
 });
-ComboboxList.displayName = COMPONENT_NAME$1b;
-ComboboxList.className = CLASSNAME$1a;
+ComboboxList.displayName = COMPONENT_NAME$1c;
+ComboboxList.className = CLASSNAME$1b;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1a = 'ListItem';
+const COMPONENT_NAME$1b = 'ListItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-list-item';
+const CLASSNAME$1a = 'lumx-list-item';
 const {
   block: block$U,
   element: element$J
-} = bem(CLASSNAME$19);
+} = bem(CLASSNAME$1a);
 
 /**
  * Component default props.
@@ -8410,8 +8411,8 @@ const ListItem$1 = props => {
     })
   });
 };
-ListItem$1.displayName = COMPONENT_NAME$1a;
-ListItem$1.className = CLASSNAME$19;
+ListItem$1.displayName = COMPONENT_NAME$1b;
+ListItem$1.className = CLASSNAME$1a;
 ListItem$1.defaultProps = DEFAULT_PROPS$X;
 
 /**
@@ -8421,12 +8422,12 @@ ListItem$1.defaultProps = DEFAULT_PROPS$X;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$19 = 'ListItemAction';
+const COMPONENT_NAME$1a = 'ListItemAction';
 
 /**
  * Component classname (used by action area CSS pattern).
  */
-const CLASSNAME$18 = 'lumx-action-area__action';
+const CLASSNAME$19 = 'lumx-action-area__action';
 const DEFAULT_PROPS$W = {};
 
 /**
@@ -8460,16 +8461,16 @@ const ListItemAction$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'ComboboxOption';
+const COMPONENT_NAME$19 = 'ComboboxOption';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-combobox-option';
+const CLASSNAME$18 = 'lumx-combobox-option';
 const {
   block: block$T,
   element: element$I
-} = bem(CLASSNAME$17);
+} = bem(CLASSNAME$18);
 
 /**
  * ComboboxOption core template.
@@ -8653,8 +8654,8 @@ const ComboboxOption = forwardRef((props, ref) => {
     Tooltip
   });
 });
-ComboboxOption.displayName = COMPONENT_NAME$18;
-ComboboxOption.className = CLASSNAME$17;
+ComboboxOption.displayName = COMPONENT_NAME$19;
+ComboboxOption.className = CLASSNAME$18;
 
 /**
  * Defines the props for the core ComboboxOptionAction template.
@@ -8663,12 +8664,12 @@ ComboboxOption.className = CLASSNAME$17;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'ComboboxOptionAction';
+const COMPONENT_NAME$18 = 'ComboboxOptionAction';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-combobox-option-action';
+const CLASSNAME$17 = 'lumx-combobox-option-action';
 
 /**
  * ComboboxOptionAction core template.
@@ -8691,7 +8692,7 @@ const ComboboxOptionAction$1 = props => {
     as: Element,
     ...forwardedProps,
     role: 'gridcell',
-    className: classnames(className, CLASSNAME$16),
+    className: classnames(className, CLASSNAME$17),
     handleClick,
     children
   });
@@ -8741,23 +8742,23 @@ const ComboboxOptionAction = Object.assign(forwardRefPolymorphic((props, ref) =>
     children
   });
 }), {
-  displayName: COMPONENT_NAME$17,
-  className: CLASSNAME$16
+  displayName: COMPONENT_NAME$18,
+  className: CLASSNAME$17
 });
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'ComboboxOptionMoreInfo';
+const COMPONENT_NAME$17 = 'ComboboxOptionMoreInfo';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-combobox-option-more-info';
+const CLASSNAME$16 = 'lumx-combobox-option-more-info';
 const {
   block: block$S,
   element: element$H
-} = bem(CLASSNAME$15);
+} = bem(CLASSNAME$16);
 
 /**
  * ComboboxOptionMoreInfo core template.
@@ -9074,16 +9075,16 @@ const POPOVER_ZINDEX = 9999;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'Popover';
+const COMPONENT_NAME$16 = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-popover';
+const CLASSNAME$15 = 'lumx-popover';
 const {
   block: block$R,
   element: element$G
-} = bem(CLASSNAME$14);
+} = bem(CLASSNAME$15);
 
 /**
  * Component default props (used by framework wrappers).
@@ -9535,7 +9536,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     ThemeProvider
   });
 });
-_InnerPopover.displayName = COMPONENT_NAME$15;
+_InnerPopover.displayName = COMPONENT_NAME$16;
 
 /**
  * Popover component.
@@ -9547,8 +9548,8 @@ _InnerPopover.displayName = COMPONENT_NAME$15;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT$1), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$15;
-Popover.className = CLASSNAME$14;
+Popover.displayName = COMPONENT_NAME$16;
+Popover.className = CLASSNAME$15;
 Popover.defaultProps = DEFAULT_PROPS$V;
 
 /**
@@ -9611,22 +9612,22 @@ const ComboboxOptionMoreInfo = props => {
     Popover
   });
 };
-ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$16;
-ComboboxOptionMoreInfo.className = CLASSNAME$15;
+ComboboxOptionMoreInfo.displayName = COMPONENT_NAME$17;
+ComboboxOptionMoreInfo.className = CLASSNAME$16;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'SkeletonTypography';
+const COMPONENT_NAME$15 = 'SkeletonTypography';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$13 = 'lumx-skeleton-typography';
+const CLASSNAME$14 = 'lumx-skeleton-typography';
 const {
   block: block$Q,
   element: element$F
-} = bem(CLASSNAME$13);
+} = bem(CLASSNAME$14);
 
 /**
  * SkeletonTypography component.
@@ -9665,12 +9666,12 @@ const SkeletonTypography$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'ComboboxOptionSkeleton';
+const COMPONENT_NAME$14 = 'ComboboxOptionSkeleton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$12 = 'lumx-combobox-option-skeleton';
+const CLASSNAME$13 = 'lumx-combobox-option-skeleton';
 
 /**
  * ComboboxOptionSkeleton core template.
@@ -9697,7 +9698,7 @@ const ComboboxOptionSkeleton$1 = props => {
     size: 'tiny',
     role: 'none',
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$12),
+    className: classnames(className, CLASSNAME$13),
     children: children || /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsx(SkeletonTypography$1, {
         typography: "body1",
@@ -9750,19 +9751,19 @@ const ComboboxOptionSkeleton = props => {
     ...props
   });
 };
-ComboboxOptionSkeleton.displayName = COMPONENT_NAME$13;
-ComboboxOptionSkeleton.className = CLASSNAME$12;
+ComboboxOptionSkeleton.displayName = COMPONENT_NAME$14;
+ComboboxOptionSkeleton.className = CLASSNAME$13;
 
-const COMPONENT_NAME$12 = 'ComboboxPopover';
+const COMPONENT_NAME$13 = 'ComboboxPopover';
 
 /**
  * Component default class name.
  */
-const CLASSNAME$11 = 'lumx-combobox-popover';
+const CLASSNAME$12 = 'lumx-combobox-popover';
 const {
   block: block$P,
   element: element$E
-} = bem(CLASSNAME$11);
+} = bem(CLASSNAME$12);
 
 /**
  * Defines the props for the core ComboboxPopover template.
@@ -9825,15 +9826,15 @@ const ComboboxPopover$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'FlexBox';
+const COMPONENT_NAME$12 = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = 'lumx-flex-box';
+const CLASSNAME$11 = 'lumx-flex-box';
 const {
   block: block$O
-} = bem(CLASSNAME$10);
+} = bem(CLASSNAME$11);
 
 /**
  * Get FlexBox component props (className computation).
@@ -9889,8 +9890,8 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$11;
-FlexBox.className = CLASSNAME$10;
+FlexBox.displayName = COMPONENT_NAME$12;
+FlexBox.className = CLASSNAME$11;
 
 /**
  * Props for Popover that can be passed to Combobox.Popover.
@@ -9928,8 +9929,8 @@ const ComboboxPopover = props => {
     FlexBox
   });
 };
-ComboboxPopover.displayName = COMPONENT_NAME$12;
-ComboboxPopover.className = CLASSNAME$11;
+ComboboxPopover.displayName = COMPONENT_NAME$13;
+ComboboxPopover.className = CLASSNAME$12;
 
 /**
  * Combobox.Provider component.
@@ -9974,12 +9975,12 @@ ComboboxProvider.displayName = 'Combobox.Provider';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'ComboboxSection';
+const COMPONENT_NAME$11 = 'ComboboxSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = 'lumx-combobox-section';
+const CLASSNAME$10 = 'lumx-combobox-section';
 
 /**
  * ComboboxSection core template.
@@ -10006,7 +10007,7 @@ const ComboboxSection$1 = (props, {
     ...forwardedProps,
     hidden: hidden,
     "aria-hidden": ariaHidden || undefined,
-    className: !hidden ? classnames(className, CLASSNAME$$) : undefined,
+    className: !hidden ? classnames(className, CLASSNAME$10) : undefined,
     role: !ariaHidden ? 'none' : undefined,
     itemsWrapperProps: {
       role: 'group'
@@ -10018,16 +10019,16 @@ const ComboboxSection$1 = (props, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'ListSection';
+const COMPONENT_NAME$10 = 'ListSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$_ = 'lumx-list-section';
+const CLASSNAME$$ = 'lumx-list-section';
 const {
   block: block$N,
   element: element$D
-} = bem(CLASSNAME$_);
+} = bem(CLASSNAME$$);
 
 /**
  * Component default props.
@@ -10074,8 +10075,8 @@ const ListSection$1 = props => {
     })]
   });
 };
-ListSection$1.displayName = COMPONENT_NAME$$;
-ListSection$1.className = CLASSNAME$_;
+ListSection$1.displayName = COMPONENT_NAME$10;
+ListSection$1.className = CLASSNAME$$;
 ListSection$1.defaultProps = DEFAULT_PROPS$U;
 
 /**
@@ -10098,8 +10099,8 @@ const ListSection = forwardRef((props, ref) => {
     Text
   });
 });
-ListSection.displayName = COMPONENT_NAME$$;
-ListSection.className = CLASSNAME$_;
+ListSection.displayName = COMPONENT_NAME$10;
+ListSection.className = CLASSNAME$$;
 ListSection.defaultProps = DEFAULT_PROPS$U;
 
 /**
@@ -10148,21 +10149,21 @@ const ComboboxSection = forwardRef((props, ref) => {
     ListSection
   });
 });
-ComboboxSection.displayName = COMPONENT_NAME$10;
-ComboboxSection.className = CLASSNAME$$;
+ComboboxSection.displayName = COMPONENT_NAME$11;
+ComboboxSection.className = CLASSNAME$10;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'ComboboxState';
+const COMPONENT_NAME$$ = 'ComboboxState';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = 'lumx-combobox-state';
+const CLASSNAME$_ = 'lumx-combobox-state';
 const {
   block: block$M
-} = bem(CLASSNAME$Z);
+} = bem(CLASSNAME$_);
 
 /**
  * Defines the props for the core ComboboxState template.
@@ -10335,16 +10336,16 @@ function partitionMulti(elements, predicates) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'GenericBlock';
+const COMPONENT_NAME$_ = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = 'lumx-generic-block';
+const CLASSNAME$Z = 'lumx-generic-block';
 const {
   block: block$L,
   element: element$C
-} = bem(CLASSNAME$Y);
+} = bem(CLASSNAME$Z);
 
 /**
  * Component default props.
@@ -10486,8 +10487,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     }) : undefined
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$Z;
-BaseGenericBlock.className = CLASSNAME$Y;
+BaseGenericBlock.displayName = COMPONENT_NAME$_;
+BaseGenericBlock.className = CLASSNAME$Z;
 BaseGenericBlock.defaultProps = DEFAULT_PROPS$T;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
@@ -10566,18 +10567,18 @@ const ComboboxState = props => {
     Text
   });
 };
-ComboboxState.displayName = COMPONENT_NAME$_;
-ComboboxState.className = CLASSNAME$Z;
+ComboboxState.displayName = COMPONENT_NAME$$;
+ComboboxState.className = CLASSNAME$_;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'ListDivider';
+const COMPONENT_NAME$Z = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = 'lumx-list-divider';
+const CLASSNAME$Y = 'lumx-list-divider';
 
 /**
  * Component default props.
@@ -10601,11 +10602,11 @@ const ListDivider$1 = props => {
     ref: ref,
     role: "none",
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$X)
+    className: classnames(className, CLASSNAME$Y)
   });
 };
-ListDivider$1.displayName = COMPONENT_NAME$Y;
-ListDivider$1.className = CLASSNAME$X;
+ListDivider$1.displayName = COMPONENT_NAME$Z;
+ListDivider$1.className = CLASSNAME$Y;
 ListDivider$1.defaultProps = DEFAULT_PROPS$S;
 
 /**
@@ -10626,8 +10627,8 @@ const ListDivider = forwardRef((props, ref) => {
     ref
   });
 });
-ListDivider.displayName = COMPONENT_NAME$Y;
-ListDivider.className = CLASSNAME$X;
+ListDivider.displayName = COMPONENT_NAME$Z;
+ListDivider.className = CLASSNAME$Y;
 ListDivider.defaultProps = DEFAULT_PROPS$S;
 
 /**
@@ -10677,16 +10678,16 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'CommentBlock';
+const COMPONENT_NAME$Y = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = 'lumx-comment-block';
+const CLASSNAME$X = 'lumx-comment-block';
 const {
   block: block$K,
   element: element$B
-} = classNames.bem(CLASSNAME$W);
+} = classNames.bem(CLASSNAME$X);
 
 /**
  * Component default props.
@@ -10788,8 +10789,8 @@ const CommentBlock = forwardRef((props, ref) => {
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$X;
-CommentBlock.className = CLASSNAME$W;
+CommentBlock.displayName = COMPONENT_NAME$Y;
+CommentBlock.className = CLASSNAME$X;
 CommentBlock.defaultProps = DEFAULT_PROPS$R;
 
 /**
@@ -10810,12 +10811,12 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'DatePicker';
+const COMPONENT_NAME$X = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = 'lumx-date-picker';
+const CLASSNAME$W = 'lumx-date-picker';
 
 /** Get first day of week for locale from the browser API */
 const getFromBrowser = locale => {
@@ -11035,7 +11036,7 @@ function formatDayNumber(locale, date) {
 
 const {
   element: element$A
-} = classNames.bem(CLASSNAME$V);
+} = classNames.bem(CLASSNAME$W);
 
 /**
  * Defines the props of the component.
@@ -11044,7 +11045,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'DatePickerControlled';
+const COMPONENT_NAME$W = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -11129,7 +11130,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
   const yearLabel = getYearDisplayName(locale);
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
-    className: `${CLASSNAME$V}`,
+    className: `${CLASSNAME$W}`,
     style: style,
     children: [/*#__PURE__*/jsx(Toolbar, {
       className: element$A('toolbar'),
@@ -11234,8 +11235,8 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$V;
-DatePickerControlled.className = CLASSNAME$V;
+DatePickerControlled.displayName = COMPONENT_NAME$W;
+DatePickerControlled.className = CLASSNAME$W;
 
 /**
  * DatePicker component.
@@ -11277,8 +11278,8 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$W;
-DatePicker.className = CLASSNAME$V;
+DatePicker.displayName = COMPONENT_NAME$X;
+DatePicker.className = CLASSNAME$W;
 
 const useBooleanState = defaultValue => {
   const [booleanValue, setBoolean] = useState(defaultValue);
@@ -11291,7 +11292,7 @@ const useBooleanState = defaultValue => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'DatePickerField';
+const COMPONENT_NAME$V = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -11380,7 +11381,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$U;
+DatePickerField.displayName = COMPONENT_NAME$V;
 
 /**
  * Convenient hook to create interaction observers.
@@ -11676,16 +11677,16 @@ const useTransitionVisibility = (ref, isComponentVisible, timeout, onVisibilityC
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'Dialog';
+const COMPONENT_NAME$U = 'Dialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = 'lumx-dialog';
+const CLASSNAME$V = 'lumx-dialog';
 const {
   block: block$J,
   element: element$z
-} = bem(CLASSNAME$U);
+} = bem(CLASSNAME$V);
 
 /**
  * Component default props.
@@ -11958,22 +11959,22 @@ const Dialog = forwardRef((props, ref) => {
     ...forwardedProps
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$T;
-Dialog.className = CLASSNAME$U;
+Dialog.displayName = COMPONENT_NAME$U;
+Dialog.className = CLASSNAME$V;
 Dialog.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'Divider';
+const COMPONENT_NAME$T = 'Divider';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = 'lumx-divider';
+const CLASSNAME$U = 'lumx-divider';
 const {
   block: block$I
-} = bem(CLASSNAME$T);
+} = bem(CLASSNAME$U);
 
 /**
  * Divider component.
@@ -12025,22 +12026,22 @@ const Divider = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Divider.displayName = COMPONENT_NAME$S;
-Divider.className = CLASSNAME$T;
+Divider.displayName = COMPONENT_NAME$T;
+Divider.className = CLASSNAME$U;
 Divider.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'DragHandle';
+const COMPONENT_NAME$S = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = 'lumx-drag-handle';
+const CLASSNAME$T = 'lumx-drag-handle';
 const {
   block: block$H
-} = bem(CLASSNAME$S);
+} = bem(CLASSNAME$T);
 
 /**
  * DragHandle component.
@@ -12097,8 +12098,8 @@ const DragHandle = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-DragHandle.displayName = COMPONENT_NAME$R;
-DragHandle.className = CLASSNAME$S;
+DragHandle.displayName = COMPONENT_NAME$S;
+DragHandle.className = CLASSNAME$T;
 DragHandle.defaultProps = DEFAULT_PROPS$N;
 
 const INITIAL_INDEX = -1;
@@ -12293,8 +12294,8 @@ const InternalList = forwardRef((props, ref) => {
     itemPadding: adjustedItemPadding
   });
 });
-InternalList.displayName = COMPONENT_NAME$1c;
-InternalList.className = CLASSNAME$1b;
+InternalList.displayName = COMPONENT_NAME$1d;
+InternalList.className = CLASSNAME$1c;
 InternalList.defaultProps = DEFAULT_PROPS$Y;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
@@ -12344,16 +12345,16 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'Dropdown';
+const COMPONENT_NAME$R = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = 'lumx-dropdown';
+const CLASSNAME$S = 'lumx-dropdown';
 const {
   block: block$G,
   element: element$y
-} = classNames.bem(CLASSNAME$R);
+} = classNames.bem(CLASSNAME$S);
 
 /**
  * Component default props.
@@ -12436,23 +12437,23 @@ const Dropdown = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$Q;
-Dropdown.className = CLASSNAME$R;
+Dropdown.displayName = COMPONENT_NAME$R;
+Dropdown.className = CLASSNAME$S;
 Dropdown.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'ExpansionPanel';
+const COMPONENT_NAME$Q = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = 'lumx-expansion-panel';
+const CLASSNAME$R = 'lumx-expansion-panel';
 const {
   block: block$F,
   element: element$x
-} = bem(CLASSNAME$Q);
+} = bem(CLASSNAME$R);
 
 /**
  * Component default props.
@@ -12641,17 +12642,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$P;
-ExpansionPanel.className = CLASSNAME$Q;
+ExpansionPanel.displayName = COMPONENT_NAME$Q;
+ExpansionPanel.className = CLASSNAME$R;
 ExpansionPanel.defaultProps = DEFAULT_PROPS$L;
 
-const COMPONENT_NAME$O = 'Flag';
-const CLASSNAME$P = 'lumx-flag';
+const COMPONENT_NAME$P = 'Flag';
+const CLASSNAME$Q = 'lumx-flag';
 const DEFAULT_PROPS$K = {};
 const {
   block: block$E,
   element: element$w
-} = bem(CLASSNAME$P);
+} = bem(CLASSNAME$Q);
 
 /**
  * Flag component.
@@ -12709,8 +12710,8 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$O;
-Flag.className = CLASSNAME$P;
+Flag.displayName = COMPONENT_NAME$P;
+Flag.className = CLASSNAME$Q;
 Flag.defaultProps = DEFAULT_PROPS$K;
 
 /** The maximum authorized heading level. */
@@ -12739,12 +12740,12 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'Heading';
+const COMPONENT_NAME$O = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = 'lumx-heading';
+const CLASSNAME$P = 'lumx-heading';
 
 /**
  * Component default props.
@@ -12769,7 +12770,7 @@ const getHeadingProps = (props, contextHeadingElement) => {
   return {
     ...otherProps,
     as: computedHeadingElement,
-    className: classnames(className, CLASSNAME$O),
+    className: classnames(className, CLASSNAME$P),
     typography: typography || DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
   };
 };
@@ -12807,8 +12808,8 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$N;
-Heading.className = CLASSNAME$O;
+Heading.displayName = COMPONENT_NAME$O;
+Heading.className = CLASSNAME$P;
 Heading.defaultProps = DEFAULT_PROPS$J;
 
 /**
@@ -12847,15 +12848,15 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'Grid';
+const COMPONENT_NAME$N = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = 'lumx-grid';
+const CLASSNAME$O = 'lumx-grid';
 const {
   block: block$D
-} = classNames.bem(CLASSNAME$N);
+} = classNames.bem(CLASSNAME$O);
 
 /**
  * Component default props.
@@ -12886,7 +12887,7 @@ const Grid = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, classNames.bem(`${CLASSNAME$N}-container`).block(), block$D({
+    className: classNames.join(className, classNames.bem(`${CLASSNAME$O}-container`).block(), block$D({
       [`h-align-${hAlign}`]: Boolean(hAlign),
       [`v-align-${vAlign}`]: Boolean(vAlign),
       [`orientation-${orientation}`]: Boolean(orientation),
@@ -12896,22 +12897,22 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$M;
-Grid.className = CLASSNAME$N;
+Grid.displayName = COMPONENT_NAME$N;
+Grid.className = CLASSNAME$O;
 Grid.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'GridItem';
+const COMPONENT_NAME$M = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = 'lumx-grid-item';
+const CLASSNAME$N = 'lumx-grid-item';
 const {
   block: block$C
-} = classNames.bem(CLASSNAME$M);
+} = classNames.bem(CLASSNAME$N);
 
 /**
  * GridItem component.
@@ -12940,18 +12941,18 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$L;
-GridItem.className = CLASSNAME$M;
+GridItem.displayName = COMPONENT_NAME$M;
+GridItem.className = CLASSNAME$N;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'GridColumn';
+const COMPONENT_NAME$L = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = 'lumx-grid-column';
+const CLASSNAME$M = 'lumx-grid-column';
 
 /**
  * Component default props.
@@ -12981,7 +12982,7 @@ const GridColumn$1 = props => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classnames(className, CLASSNAME$L),
+    className: classnames(className, CLASSNAME$M),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -12991,8 +12992,8 @@ const GridColumn$1 = props => {
     children: children
   });
 };
-GridColumn$1.displayName = COMPONENT_NAME$K;
-GridColumn$1.className = CLASSNAME$L;
+GridColumn$1.displayName = COMPONENT_NAME$L;
+GridColumn$1.className = CLASSNAME$M;
 GridColumn$1.defaultProps = DEFAULT_PROPS$H;
 
 /**
@@ -13021,8 +13022,8 @@ const GridColumn = forwardRef((props, ref) => {
     ...props
   });
 });
-GridColumn.displayName = COMPONENT_NAME$K;
-GridColumn.className = CLASSNAME$L;
+GridColumn.displayName = COMPONENT_NAME$L;
+GridColumn.className = CLASSNAME$M;
 GridColumn.defaultProps = DEFAULT_PROPS$G;
 
 /**
@@ -13044,16 +13045,16 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'ImageBlock';
+const COMPONENT_NAME$K = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = 'lumx-image-block';
+const CLASSNAME$L = 'lumx-image-block';
 const {
   block: block$B,
   element: element$v
-} = bem(CLASSNAME$K);
+} = bem(CLASSNAME$L);
 
 /**
  * Component default props.
@@ -13114,7 +13115,7 @@ const ImageBlock$1 = props => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$K,
+      baseClassName: CLASSNAME$L,
       theme: theme,
       title: title,
       titleProps: titleProps,
@@ -13245,19 +13246,19 @@ const ImageBlock = forwardRef((props, ref) => {
     ImageCaption
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$J;
-ImageBlock.className = CLASSNAME$K;
+ImageBlock.displayName = COMPONENT_NAME$K;
+ImageBlock.className = CLASSNAME$L;
 ImageBlock.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'ImageLightbox';
+const COMPONENT_NAME$J = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$J = 'lumx-image-lightbox';
+const CLASSNAME$K = 'lumx-image-lightbox';
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -13503,7 +13504,7 @@ function useAnimateScroll(scrollAreaRef) {
 
 const {
   element: element$u
-} = classNames.bem(CLASSNAME$J);
+} = classNames.bem(CLASSNAME$K);
 /** Internal image slide component for ImageLightbox */
 const ImageSlide = /*#__PURE__*/React__default.memo(props => {
   const {
@@ -13595,7 +13596,7 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
 
 const {
   element: element$t
-} = classNames.bem(CLASSNAME$J);
+} = classNames.bem(CLASSNAME$K);
 /** Internal image slideshow component for ImageLightbox */
 const ImageSlideshow = ({
   activeImageIndex,
@@ -13835,7 +13836,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$J
+          name: CLASSNAME$K
         }
       });
     }
@@ -13887,7 +13888,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$J
+          name: CLASSNAME$K
         }
       });
     }
@@ -13941,7 +13942,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames.join(className, CLASSNAME$J),
+    className: classNames.join(className, CLASSNAME$K),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -13970,8 +13971,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$I;
-Inner.className = CLASSNAME$J;
+Inner.displayName = COMPONENT_NAME$J;
+Inner.className = CLASSNAME$K;
 
 /**
  * ImageLightbox component.
@@ -13987,16 +13988,16 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'InlineList';
+const COMPONENT_NAME$I = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$I = 'lumx-inline-list';
+const CLASSNAME$J = 'lumx-inline-list';
 const {
   block: block$A,
   element: element$s
-} = bem(CLASSNAME$I);
+} = bem(CLASSNAME$J);
 
 /**
  * Component default props.
@@ -14048,8 +14049,8 @@ const InlineList$1 = props => {
     })
   );
 };
-InlineList$1.displayName = COMPONENT_NAME$H;
-InlineList$1.className = CLASSNAME$I;
+InlineList$1.displayName = COMPONENT_NAME$I;
+InlineList$1.className = CLASSNAME$J;
 InlineList$1.defaultProps = DEFAULT_PROPS$E;
 
 /**
@@ -14074,8 +14075,8 @@ const InlineList = forwardRef((props, ref) => {
     items: Children.toArray(children)
   });
 });
-InlineList.displayName = COMPONENT_NAME$H;
-InlineList.className = CLASSNAME$I;
+InlineList.displayName = COMPONENT_NAME$I;
+InlineList.className = CLASSNAME$J;
 InlineList.defaultProps = DEFAULT_PROPS$E;
 
 /**
@@ -14119,16 +14120,16 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'Lightbox';
+const COMPONENT_NAME$H = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$H = 'lumx-lightbox';
+const CLASSNAME$I = 'lumx-lightbox';
 const {
   block: block$z,
   element: element$r
-} = bem(CLASSNAME$H);
+} = bem(CLASSNAME$I);
 
 /**
  * Lightbox component.
@@ -14312,8 +14313,8 @@ const Lightbox = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Lightbox.displayName = COMPONENT_NAME$G;
-Lightbox.className = CLASSNAME$H;
+Lightbox.displayName = COMPONENT_NAME$H;
+Lightbox.className = CLASSNAME$I;
 
 /**
  * Defines the props of the component.
@@ -14322,15 +14323,15 @@ Lightbox.className = CLASSNAME$H;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$F = 'Link';
+const COMPONENT_NAME$G = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$G = 'lumx-link';
+const CLASSNAME$H = 'lumx-link';
 const {
   block: block$y
-} = bem(CLASSNAME$G);
+} = bem(CLASSNAME$H);
 
 /**
  * Link component.
@@ -14369,7 +14370,7 @@ const Link$1 = props => {
 
 const {
   element: element$q
-} = classNames.bem(CLASSNAME$G);
+} = classNames.bem(CLASSNAME$H);
 
 /**
  * Defines the props of the component.
@@ -14415,22 +14416,22 @@ const Link = forwardRef((props, ref) => {
     }))
   });
 });
-Link.displayName = COMPONENT_NAME$F;
-Link.className = CLASSNAME$G;
+Link.displayName = COMPONENT_NAME$G;
+Link.className = CLASSNAME$H;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$E = 'LinkPreview';
+const COMPONENT_NAME$F = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$F = 'lumx-link-preview';
+const CLASSNAME$G = 'lumx-link-preview';
 const {
   block: block$x,
   element: element$p
-} = bem(CLASSNAME$F);
+} = bem(CLASSNAME$G);
 
 /**
  * Component default props.
@@ -14556,8 +14557,8 @@ const LinkPreview = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$E;
-LinkPreview.className = CLASSNAME$F;
+LinkPreview.displayName = COMPONENT_NAME$F;
+LinkPreview.className = CLASSNAME$G;
 LinkPreview.defaultProps = DEFAULT_PROPS$D;
 
 /**
@@ -14589,8 +14590,8 @@ const ListItemAction = Object.assign(forwardRefPolymorphic((props, ref) => {
     children
   });
 }), {
-  displayName: COMPONENT_NAME$19,
-  className: CLASSNAME$18,
+  displayName: COMPONENT_NAME$1a,
+  className: CLASSNAME$19,
   defaultProps: DEFAULT_PROPS$W
 });
 
@@ -14629,8 +14630,8 @@ const _ListItem = forwardRef((props, ref) => {
     handleClick: onItemSelected || props.onClick ? handleClick : undefined
   });
 });
-_ListItem.displayName = COMPONENT_NAME$1a;
-_ListItem.className = CLASSNAME$19;
+_ListItem.displayName = COMPONENT_NAME$1b;
+_ListItem.className = CLASSNAME$1a;
 _ListItem.defaultProps = DEFAULT_PROPS$X;
 
 /**
@@ -14644,12 +14645,12 @@ const ListItem = Object.assign(_ListItem, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$D = 'ListSubheader';
+const COMPONENT_NAME$E = 'ListSubheader';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$E = 'lumx-list-subheader';
+const CLASSNAME$F = 'lumx-list-subheader';
 
 /**
  * ListSubheader component.
@@ -14668,26 +14669,26 @@ const ListSubheader = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("li", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$E),
+    className: classNames.join(className, CLASSNAME$F),
     children: children
   });
 });
-ListSubheader.displayName = COMPONENT_NAME$D;
-ListSubheader.className = CLASSNAME$E;
+ListSubheader.displayName = COMPONENT_NAME$E;
+ListSubheader.className = CLASSNAME$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$C = 'Message';
+const COMPONENT_NAME$D = 'Message';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$D = 'lumx-message';
+const CLASSNAME$E = 'lumx-message';
 const {
   block: block$w,
   element: element$o
-} = bem(CLASSNAME$D);
+} = bem(CLASSNAME$E);
 
 /**
  * Associative map from message kind to color and icon.
@@ -14761,8 +14762,8 @@ const Message$1 = props => {
     })]
   });
 };
-Message$1.displayName = COMPONENT_NAME$C;
-Message$1.className = CLASSNAME$D;
+Message$1.displayName = COMPONENT_NAME$D;
+Message$1.className = CLASSNAME$E;
 
 /**
  * Message component.
@@ -14777,22 +14778,22 @@ const Message = forwardRef((props, ref) => {
     ref
   });
 });
-Message.displayName = COMPONENT_NAME$C;
-Message.className = CLASSNAME$D;
+Message.displayName = COMPONENT_NAME$D;
+Message.className = CLASSNAME$E;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$B = 'Mosaic';
+const COMPONENT_NAME$C = 'Mosaic';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$C = 'lumx-mosaic';
+const CLASSNAME$D = 'lumx-mosaic';
 const {
   block: block$v,
   element: element$n
-} = bem(CLASSNAME$C);
+} = bem(CLASSNAME$D);
 
 /**
  * Component default props.
@@ -14890,8 +14891,8 @@ const Mosaic = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-Mosaic.displayName = COMPONENT_NAME$B;
-Mosaic.className = CLASSNAME$C;
+Mosaic.displayName = COMPONENT_NAME$C;
+Mosaic.className = CLASSNAME$D;
 Mosaic.defaultProps = DEFAULT_PROPS$C;
 
 const NavigationContext = /*#__PURE__*/createContext({
@@ -14911,16 +14912,16 @@ const ITEM_CLASSNAME = 'lumx-navigation-item';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$A = 'NavigationSection';
+const COMPONENT_NAME$B = 'NavigationSection';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$B = 'lumx-navigation-section';
+const CLASSNAME$C = 'lumx-navigation-section';
 const {
   block: sectionBlock,
   element: sectionElement
-} = classNames.bem(CLASSNAME$B);
+} = classNames.bem(CLASSNAME$C);
 const {
   block: itemBlock,
   element: itemElement
@@ -15006,8 +15007,8 @@ const NavigationSection = forwardRef((props, ref) => {
     }))]
   });
 });
-NavigationSection.displayName = COMPONENT_NAME$A;
-NavigationSection.className = CLASSNAME$B;
+NavigationSection.displayName = COMPONENT_NAME$B;
+NavigationSection.className = CLASSNAME$C;
 
 const {
   block: block$u,
@@ -15076,16 +15077,16 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$z = 'Navigation';
+const COMPONENT_NAME$A = 'Navigation';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$A = 'lumx-navigation';
+const CLASSNAME$B = 'lumx-navigation';
 const {
   block: block$t,
   element: element$l
-} = classNames.bem(CLASSNAME$A);
+} = classNames.bem(CLASSNAME$B);
 
 /**
  * Component default props
@@ -15123,8 +15124,8 @@ const Navigation = forwardRef((props, ref) => {
     })
   });
 });
-Navigation.displayName = COMPONENT_NAME$z;
-Navigation.className = CLASSNAME$A;
+Navigation.displayName = COMPONENT_NAME$A;
+Navigation.className = CLASSNAME$B;
 Navigation.defaultProps = DEFAULT_PROPS$B;
 
 // Sub components
@@ -15156,16 +15157,16 @@ const NOTIFICATION_CONFIGURATION = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$y = 'Notification';
+const COMPONENT_NAME$z = 'Notification';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$z = 'lumx-notification';
+const CLASSNAME$A = 'lumx-notification';
 const {
   block: block$s,
   element: element$k
-} = classNames.bem(CLASSNAME$z);
+} = classNames.bem(CLASSNAME$A);
 
 /**
  * Component default props.
@@ -15258,8 +15259,8 @@ const Notification = forwardRef((props, ref) => {
     })
   });
 });
-Notification.displayName = COMPONENT_NAME$y;
-Notification.className = CLASSNAME$z;
+Notification.displayName = COMPONENT_NAME$z;
+Notification.className = CLASSNAME$A;
 Notification.defaultProps = DEFAULT_PROPS$A;
 
 /**
@@ -15270,12 +15271,12 @@ Notification.defaultProps = DEFAULT_PROPS$A;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$x = 'PopoverDialog';
+const COMPONENT_NAME$y = 'PopoverDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$y = 'lumx-popover-dialog';
+const CLASSNAME$z = 'lumx-popover-dialog';
 
 /**
  * Component default props.
@@ -15301,7 +15302,7 @@ const PopoverDialog = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Popover, {
     ...forwardedProps,
     ref: ref,
-    className: classNames.join(className, CLASSNAME$y),
+    className: classNames.join(className, CLASSNAME$z),
     role: "dialog",
     "aria-modal": "true"
     /**
@@ -15318,23 +15319,23 @@ const PopoverDialog = forwardRef((props, ref) => {
     })
   });
 });
-PopoverDialog.displayName = COMPONENT_NAME$x;
-PopoverDialog.className = CLASSNAME$y;
+PopoverDialog.displayName = COMPONENT_NAME$y;
+PopoverDialog.className = CLASSNAME$z;
 PopoverDialog.defaultProps = DEFAULT_PROPS$z;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$w = 'PostBlock';
+const COMPONENT_NAME$x = 'PostBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$x = 'lumx-post-block';
+const CLASSNAME$y = 'lumx-post-block';
 const {
   block: block$r,
   element: element$j
-} = classNames.bem(CLASSNAME$x);
+} = classNames.bem(CLASSNAME$y);
 
 /**
  * Component default props.
@@ -15419,23 +15420,23 @@ const PostBlock = forwardRef((props, ref) => {
     })]
   });
 });
-PostBlock.displayName = COMPONENT_NAME$w;
-PostBlock.className = CLASSNAME$x;
+PostBlock.displayName = COMPONENT_NAME$x;
+PostBlock.className = CLASSNAME$y;
 PostBlock.defaultProps = DEFAULT_PROPS$y;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$v = 'ProgressLinear';
+const COMPONENT_NAME$w = 'ProgressLinear';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$w = 'lumx-progress-linear';
+const CLASSNAME$x = 'lumx-progress-linear';
 const {
   block: block$q,
   element: element$i
-} = bem(CLASSNAME$w);
+} = bem(CLASSNAME$x);
 
 /**
  * Component default props.
@@ -15492,8 +15493,8 @@ const ProgressLinear = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-ProgressLinear.displayName = COMPONENT_NAME$v;
-ProgressLinear.className = CLASSNAME$w;
+ProgressLinear.displayName = COMPONENT_NAME$w;
+ProgressLinear.className = CLASSNAME$x;
 ProgressLinear.defaultProps = DEFAULT_PROPS$x;
 
 /* eslint-disable react/no-unknown-property */
@@ -15501,16 +15502,16 @@ ProgressLinear.defaultProps = DEFAULT_PROPS$x;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$u = 'ProgressCircular';
+const COMPONENT_NAME$v = 'ProgressCircular';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$v = 'lumx-progress-circular';
+const CLASSNAME$w = 'lumx-progress-circular';
 const {
   block: block$p,
   element: element$h
-} = bem(CLASSNAME$v);
+} = bem(CLASSNAME$w);
 
 /**
  * Component default props.
@@ -15594,8 +15595,8 @@ const ProgressCircular = forwardRef((props, ref) => {
     }
   });
 });
-ProgressCircular.displayName = COMPONENT_NAME$u;
-ProgressCircular.className = CLASSNAME$v;
+ProgressCircular.displayName = COMPONENT_NAME$v;
+ProgressCircular.className = CLASSNAME$w;
 ProgressCircular.defaultProps = DEFAULT_PROPS$w;
 
 const ProgressVariant = {
@@ -15610,15 +15611,15 @@ const ProgressVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$t = 'Progress';
+const COMPONENT_NAME$u = 'Progress';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$u = 'lumx-progress';
+const CLASSNAME$v = 'lumx-progress';
 const {
   block: block$o
-} = classNames.bem(CLASSNAME$u);
+} = classNames.bem(CLASSNAME$v);
 
 /**
  * Component default props.
@@ -15657,8 +15658,8 @@ const Progress = forwardRef((props, ref) => {
     })]
   });
 });
-Progress.displayName = COMPONENT_NAME$t;
-Progress.className = CLASSNAME$u;
+Progress.displayName = COMPONENT_NAME$u;
+Progress.className = CLASSNAME$v;
 Progress.defaultProps = DEFAULT_PROPS$v;
 
 const INIT_STATE = {
@@ -15842,16 +15843,16 @@ ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$u;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$s = 'ProgressTracker';
+const COMPONENT_NAME$t = 'ProgressTracker';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$t = 'lumx-progress-tracker';
+const CLASSNAME$u = 'lumx-progress-tracker';
 const {
   block: block$n,
   element: element$g
-} = classNames.bem(CLASSNAME$t);
+} = classNames.bem(CLASSNAME$u);
 
 /**
  * Component default props.
@@ -15908,23 +15909,23 @@ const ProgressTracker = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTracker.displayName = COMPONENT_NAME$s;
-ProgressTracker.className = CLASSNAME$t;
+ProgressTracker.displayName = COMPONENT_NAME$t;
+ProgressTracker.className = CLASSNAME$u;
 ProgressTracker.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$r = 'ProgressTrackerStep';
+const COMPONENT_NAME$s = 'ProgressTrackerStep';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$s = 'lumx-progress-tracker-step';
+const CLASSNAME$t = 'lumx-progress-tracker-step';
 const {
   block: block$m,
   element: element$f
-} = classNames.bem(CLASSNAME$s);
+} = classNames.bem(CLASSNAME$t);
 
 /**
  * Component default props.
@@ -16022,22 +16023,22 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTrackerStep.displayName = COMPONENT_NAME$r;
-ProgressTrackerStep.className = CLASSNAME$s;
+ProgressTrackerStep.displayName = COMPONENT_NAME$s;
+ProgressTrackerStep.className = CLASSNAME$t;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$s;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$q = 'ProgressTrackerStepPanel';
+const COMPONENT_NAME$r = 'ProgressTrackerStepPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$r = `lumx-step-panel`;
+const CLASSNAME$s = `lumx-step-panel`;
 const {
   block: block$l
-} = classNames.bem(CLASSNAME$r);
+} = classNames.bem(CLASSNAME$s);
 
 /**
  * Component default props.
@@ -16076,23 +16077,23 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
     children: (!state?.isLazy || isActive) && children
   });
 });
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME$q;
-ProgressTrackerStepPanel.className = CLASSNAME$r;
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME$r;
+ProgressTrackerStepPanel.className = CLASSNAME$s;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$p = 'RadioButton';
+const COMPONENT_NAME$q = 'RadioButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$q = 'lumx-radio-button';
+const CLASSNAME$r = 'lumx-radio-button';
 const {
   block: block$k,
   element: element$e
-} = bem(CLASSNAME$q);
+} = bem(CLASSNAME$r);
 
 /**
  * RadioButton component.
@@ -16235,19 +16236,19 @@ const RadioButton = forwardRef((props, ref) => {
     inputId
   });
 });
-RadioButton.displayName = COMPONENT_NAME$p;
-RadioButton.className = CLASSNAME$q;
+RadioButton.displayName = COMPONENT_NAME$q;
+RadioButton.className = CLASSNAME$r;
 RadioButton.defaultProps = DEFAULT_PROPS$q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$o = 'RadioGroup';
+const COMPONENT_NAME$p = 'RadioGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$p = 'lumx-radio-group';
+const CLASSNAME$q = 'lumx-radio-group';
 
 /**
  * Component default props.
@@ -16270,12 +16271,12 @@ const RadioGroup$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$p),
+    className: classnames(className, CLASSNAME$q),
     children: children
   });
 };
-RadioGroup$1.displayName = COMPONENT_NAME$o;
-RadioGroup$1.className = CLASSNAME$p;
+RadioGroup$1.displayName = COMPONENT_NAME$p;
+RadioGroup$1.className = CLASSNAME$q;
 RadioGroup$1.defaultProps = DEFAULT_PROPS$p;
 
 /**
@@ -16302,8 +16303,8 @@ const RadioGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-RadioGroup.displayName = COMPONENT_NAME$o;
-RadioGroup.className = CLASSNAME$p;
+RadioGroup.displayName = COMPONENT_NAME$p;
+RadioGroup.className = CLASSNAME$q;
 
 /**
  * Listen on element focus to store the focus status.
@@ -16330,11 +16331,11 @@ function useListenFocus(ref) {
 }
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$o = 'lumx-select';
+const CLASSNAME$p = 'lumx-select';
 const {
   block: block$j,
   element: element$d
-} = classNames.bem(CLASSNAME$o);
+} = classNames.bem(CLASSNAME$p);
 const WithSelectContext = (SelectElement, props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
@@ -16450,14 +16451,14 @@ const SelectVariant = {
 };
 
 /** The display name of the component. */
-const COMPONENT_NAME$n = 'Select';
+const COMPONENT_NAME$o = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$n = 'lumx-select';
+const CLASSNAME$o = 'lumx-select';
 const {
   block: block$i,
   element: element$c
-} = classNames.bem(CLASSNAME$n);
+} = classNames.bem(CLASSNAME$o);
 
 /** The default value of props. */
 const DEFAULT_PROPS$o = {
@@ -16594,20 +16595,20 @@ const Select = forwardRef((props, ref) => {
     isEmpty: isEmpty$1
   }, ref);
 });
-Select.displayName = COMPONENT_NAME$n;
-Select.className = CLASSNAME$n;
+Select.displayName = COMPONENT_NAME$o;
+Select.className = CLASSNAME$o;
 Select.defaultProps = DEFAULT_PROPS$o;
-Select.className = CLASSNAME$n;
+Select.className = CLASSNAME$o;
 
 /** The display name of the component. */
-const COMPONENT_NAME$m = 'Select';
+const COMPONENT_NAME$n = 'Select';
 
 /** The default class name and classes prefix for this component. */
-const CLASSNAME$m = 'lumx-select';
+const CLASSNAME$n = 'lumx-select';
 const {
   block: block$h,
   element: element$b
-} = classNames.bem(CLASSNAME$m);
+} = classNames.bem(CLASSNAME$n);
 
 /** The default value of props. */
 const DEFAULT_PROPS$n = {
@@ -16691,13 +16692,13 @@ const SelectMultipleField = props => {
             children: placeholder
           })
         }), (isValid || hasError) && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$m}__input-validity`,
+          className: `${CLASSNAME$n}__input-validity`,
           children: /*#__PURE__*/jsx(Icon, {
             icon: isValid ? mdiCheckCircle : mdiAlertCircle,
             size: Size$1.xxs
           })
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$m}__input-indicator`,
+          className: `${CLASSNAME$n}__input-indicator`,
           children: /*#__PURE__*/jsx(Icon, {
             icon: mdiMenuDown,
             size: Size$1.s
@@ -16748,26 +16749,67 @@ const SelectMultiple = forwardRef((props, ref) => {
     isMultiple: true
   }, ref);
 });
-SelectMultiple.displayName = COMPONENT_NAME$m;
-SelectMultiple.className = CLASSNAME$m;
+SelectMultiple.displayName = COMPONENT_NAME$n;
+SelectMultiple.className = CLASSNAME$n;
 SelectMultiple.defaultProps = DEFAULT_PROPS$n;
 
 /**
- * Get the display name for a single option value.
+ * Find the option whose id matches the given value.
  *
- * Resolves the option's display name by trying `getOptionName` first,
- * then falling back to `getOptionId`, returning `''` for nullish values.
+ * Used by Select* wrappers to resolve a selection event (which carries the option id
+ * as `selectedOption.value`) back to the original option object.
+ *
+ * @param options    The list of options.
+ * @param getOptionId Selector returning the option id (matches `<Combobox.Option value>`).
+ * @param id          The id to match against.
+ * @return The matching option, or `undefined` if none is found / inputs are nullish.
  */
-function getOptionDisplayName(value, getOptionName, getOptionId) {
-  if (value === undefined || value === null) return '';
-  if (getOptionName) {
-    const name = getWithSelector(getOptionName, value);
-    if (name != null) return String(name);
+function findOptionById(options, getOptionId, id) {
+  if (id == null) return undefined;
+  return options?.find(option => getWithSelector(getOptionId, option) === id);
+}
+
+/**
+ * Compute the next selection state after a user toggles an option.
+ *
+ * Single-mode behaviour (`isMultiple=false`):
+ * - Returns the option matched by id (or `undefined` if none matches the id —
+ *   e.g. when the consumer triggers a custom action via `beforeOptions`).
+ *
+ * Multi-mode behaviour (`isMultiple=true`):
+ * - If the option is already in the current value array → returns a new array with it removed.
+ * - Otherwise → returns a new array with the option appended.
+ * - If the id matches no option in `options` (e.g. custom actions), the current array is returned unchanged.
+ *
+ * Pure function: never mutates `currentValue`.
+ *
+ * @param options          The list of options.
+ * @param getOptionId      Selector returning the option id (matches `<Combobox.Option value>`).
+ * @param currentValue     Current selection (option, array of options, or undefined).
+ * @param selectedOptionId Id of the option the user just selected.
+ * @param isMultiple       Whether to use multi-select semantics.
+ * @return                 The new selection — `O | undefined` in single mode, `O[]` in multi mode.
+ */
+function toggleSelection(options, getOptionId, currentValue, selectedOptionId, isMultiple) {
+  const newOption = findOptionById(options, getOptionId, selectedOptionId);
+  if (!isMultiple) {
+    // Single mode — return the matched option (or undefined when nothing matches).
+    return newOption;
   }
-  if (getOptionId) {
-    return String(getWithSelector(getOptionId, value));
+
+  // Multi mode — toggle membership in the current array.
+  const currentArray = Array.isArray(currentValue) ? currentValue : [];
+  const existingIndex = currentArray.findIndex(item => getWithSelector(getOptionId, item) === selectedOptionId);
+  if (existingIndex === -1) {
+    // Skip if no matching option found (e.g. custom action items).
+    if (!newOption) return currentArray;
+    return [...currentArray, newOption];
   }
-  return '';
+
+  // Remove option (toggle off).
+  const updated = [...currentArray];
+  updated.splice(existingIndex, 1);
+  return updated;
 }
 
 /**
@@ -16838,6 +16880,311 @@ function renderSelectOptions(props, components) {
   });
 }
 
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$m = 'SelectButton';
+
+/**
+ * Component default class name.
+ */
+const CLASSNAME$m = 'lumx-select-button';
+
+/**
+ * SelectButton core template.
+ * Renders a Combobox with a button trigger and a dropdown list of options.
+ *
+ * Framework-specific components are passed as a second argument by the React/Vue wrappers.
+ *
+ * @param props      Component props.
+ * @param components Injected framework-specific components.
+ * @return JSX element.
+ */
+const SelectButton$2 = (props, {
+  Combobox,
+  InfiniteScroll
+}) => {
+  const {
+    options,
+    getOptionId,
+    getOptionName,
+    getOptionDescription,
+    renderOption,
+    getSectionId,
+    renderSectionTitle,
+    value,
+    isMultiselectable,
+    label,
+    labelDisplayMode,
+    buttonProps,
+    popoverProps,
+    listProps,
+    handleSelect,
+    listStatus = 'idle',
+    translations,
+    onOpen,
+    onLoadMore,
+    infiniteScrollOptions
+  } = props;
+  const isFullLoading = listStatus === 'loading';
+  const isLoadingMore = listStatus === 'loadingMore';
+  const isError = listStatus === 'error';
+
+  /*
+   * Display value: castArray normalizes single/multi value to an array, then resolve
+   * each option to its name and join with `, `. Falsy entries (undefined, empty names)
+   * are filtered out so partial state still renders cleanly.
+   */
+  const displayValue = value != null ? castArray(value).map(v => v != null && getWithSelector(getOptionName, v)).filter(Boolean).join(', ') : '';
+  return /*#__PURE__*/jsxs(Combobox.Provider, {
+    onOpen: onOpen,
+    children: [/*#__PURE__*/jsx(Combobox.Button, {
+      ...buttonProps,
+      label: label,
+      value: displayValue,
+      onSelect: handleSelect,
+      labelDisplayMode: labelDisplayMode
+    }), /*#__PURE__*/jsxs(Combobox.Popover, {
+      fitToAnchorWidth: "minWidth",
+      fitWithinViewportHeight: true,
+      placement: "bottom-start",
+      ...popoverProps,
+      children: [/*#__PURE__*/jsxs(Combobox.List, {
+        ...listProps,
+        "aria-label": label,
+        "aria-multiselectable": isMultiselectable || undefined,
+        children: [isFullLoading ? /*#__PURE__*/jsx(Combobox.OptionSkeleton, {
+          count: 3
+        }) : renderSelectOptions({
+          options,
+          getOptionId,
+          getOptionName,
+          getOptionDescription,
+          renderOption,
+          getSectionId,
+          renderSectionTitle,
+          selected: value
+        }, {
+          Combobox
+        }), onLoadMore && InfiniteScroll && /*#__PURE__*/jsx(InfiniteScroll, {
+          callback: () => {
+            // Guard: prevent firing during loading or error states to avoid duplicate fetches.
+            if (listStatus && listStatus !== 'idle') return;
+            onLoadMore();
+          },
+          options: infiniteScrollOptions
+        }), isLoadingMore && /*#__PURE__*/jsx(Combobox.OptionSkeleton, {
+          count: 1
+        })]
+      }), /*#__PURE__*/jsx(Combobox.State, {
+        loadingMessage: translations?.loadingMessage,
+        emptyMessage: translations?.emptyMessage,
+        nbOptionMessage: translations?.nbOptionMessage,
+        errorMessage: isError ? translations?.errorMessage : undefined,
+        errorTryReloadMessage: isError ? translations?.errorTryReloadMessage : undefined
+      })]
+    })]
+  });
+};
+SelectButton$2.displayName = COMPONENT_NAME$m;
+SelectButton$2.className = CLASSNAME$m;
+
+/**
+ * Adapts a React `renderOption` callback returning a `<Combobox.Option>` into the
+ * `renderOption` shape expected by the core Select* templates.
+ *
+ * Used by both `SelectTextField` and `SelectButton` React wrappers.
+ *
+ * Behavior:
+ * - If `renderOption` is `undefined`, returns `undefined` (no custom rendering).
+ * - If the consumer returns a `<Combobox.Option>`, its props/children are merged with the
+ *   core-computed `value` / `isSelected` / `description` / `key`.
+ * - If the consumer returns anything else, returns `null` (skips the option).
+ *
+ * @param renderOption Consumer-provided render function.
+ * @return The wrapped `renderOption` callback or `undefined`.
+ */
+function wrapRenderOption(renderOption) {
+  if (!renderOption) return undefined;
+  return (option, {
+    index,
+    value: optionValue,
+    isSelected,
+    description
+  }) => {
+    const node = renderOption(option, index);
+    if (!isComponentType(ComboboxOption)(node)) {
+      return null;
+    }
+    const {
+      children,
+      ...customProps
+    } = node.props;
+    return /*#__PURE__*/jsx(ComboboxOption, {
+      ...customProps,
+      value: optionValue,
+      isSelected: isSelected,
+      description: description,
+      children: children
+    }, optionValue);
+  };
+}
+
+const DefaultButton = forwardRef((props, ref) => /*#__PURE__*/jsx(Button, {
+  rightIcon: mdiMenuDown,
+  ...props,
+  ref: ref
+}));
+
+/** Keys managed internally — never forwarded to the trigger element. */
+
+/** Select-specific props common to both single and multi modes. */
+
+/**
+ * Forwarded trigger props for a given element `E`, minus the keys that the
+ * component manages internally.
+ */
+
+/**
+ * Common base — Select-specific props plus the ARIA / label / popover layer.
+ * `as`, `ref`, `selectionType`, `value`, `onChange` are intentionally hoisted
+ * to the top-level `SelectButtonProps` shape (below) so that TS can infer
+ * `O`, `E`, and `S` directly from those JSX attributes.
+ */
+
+/**
+ * Props for `SelectButton`.
+ *
+ * Polymorphic — pass `as` to render the trigger as a different component
+ * (e.g. `as={IconButton}`, `as={Chip}`, `as={Link}`). With no `as`, the trigger
+ * is the LumX `Button` with the dropdown chevron, so LumX `ButtonProps`
+ * (`emphasis`, `size`, `leftIcon`…) are accepted. With `as`, the trigger is
+ * fully replaced and only props valid for that component apply.
+ *
+ * Discriminated on `selectionType`:
+ * - default / `'single'` → `value?: O`, `onChange?: (newValue?: O) => void`.
+ * - `'multiple'`         → `value?: O[]`, `onChange?: (newValue?: O[]) => void`.
+ *
+ * `as` and `selectionType` are top-level on this type (rather than buried in
+ * an intersection or union member) so that TS can infer `E` from `as` and
+ * `S` from `selectionType` without explicit generic annotations at the call site.
+ *
+ * @typeParam O - Option object type, inferred from `options` / `getOptionId`.
+ * @typeParam E - Trigger element type, inferred from `as`. Defaults to the LumX `Button`.
+ * @typeParam S - Selection mode, inferred from `selectionType`. Defaults to `'single'`.
+ */
+
+/**
+ * Single-selection props (`selectionType` defaults to `'single'`).
+ * Backwards-compatible alias — existing consumers do not need to set `selectionType`.
+ */
+
+/** Multi-selection props (`selectionType: 'multiple'` is required to opt in). */
+
+/**
+ * A button trigger with a dropdown to select an option (single mode) or
+ * options (multi mode) from a list. Polymorphic — pass `as` to customize the trigger element.
+ */
+const SelectButton$1 = props => {
+  const {
+    options,
+    getOptionId,
+    getOptionName,
+    getOptionDescription,
+    renderOption,
+    getSectionId,
+    renderSectionTitle,
+    selectionType,
+    value,
+    onChange,
+    onLoadMore,
+    onOpen,
+    label,
+    popoverProps,
+    labelDisplayMode,
+    listStatus,
+    translations,
+    as,
+    ref,
+    ...buttonProps
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } = props;
+  const [listElement, setListElement] = useState(null);
+  const isMultiple = selectionType === 'multiple';
+
+  // Inject core-computed props into the consumer's renderOption result.
+  const wrappedRenderOption = wrapRenderOption(renderOption);
+
+  // Map the core's option-id selection back to the option object(s).
+  const handleSelect = useCallback(selectedOption => {
+    const next = toggleSelection(options, getOptionId, value, selectedOption?.value, isMultiple);
+    onChange?.(next);
+  }, [getOptionId, isMultiple, onChange, options, value]);
+  return SelectButton$2({
+    options,
+    getOptionId,
+    getOptionName,
+    getOptionDescription,
+    renderOption: wrappedRenderOption,
+    getSectionId,
+    renderSectionTitle,
+    value,
+    isMultiselectable: isMultiple,
+    label,
+    labelDisplayMode,
+    // With no `as`, the default trigger adds the chevron. With `as`, the
+    // caller is responsible for any trailing affordance.
+    buttonProps: {
+      ...buttonProps,
+      as: as ?? DefaultButton,
+      ref
+    },
+    popoverProps,
+    listProps: {
+      ref: setListElement
+    },
+    handleSelect,
+    listStatus,
+    onOpen,
+    translations,
+    onLoadMore,
+    infiniteScrollOptions: {
+      root: listElement,
+      rootMargin: '100px'
+    }
+  }, {
+    Combobox,
+    InfiniteScroll
+  });
+};
+SelectButton$1.displayName = 'SelectButton';
+
+/**
+ * SelectButton compound component.
+ */
+const SelectButton = Object.assign(SelectButton$1, {
+  /** Selectable option within the dropdown list. */
+  Option: ComboboxOption
+});
+
+/**
+ * Get the display name for a single option value.
+ *
+ * Resolves the option's display name by trying `getOptionName` first,
+ * then falling back to `getOptionId`, returning `''` for nullish values.
+ */
+function getOptionDisplayName(value, getOptionName, getOptionId) {
+  if (value === undefined || value === null) return '';
+  if (getOptionName) {
+    const name = getWithSelector(getOptionName, value);
+    if (name != null) return String(name);
+  }
+  if (getOptionId) {
+    return String(getWithSelector(getOptionId, value));
+  }
+  return '';
+}
+
 /**
  * Component display name.
  */
@@ -17011,30 +17358,9 @@ const SelectTextField$1 = props => {
   const renderChip = isMultiple ? props.renderChip : undefined;
   const getChipProps = isMultiple ? props.getChipProps : undefined;
 
-  /* Wrap the consumer's renderOption to inject core-computed props.
-   * The consumer returns a <Combobox.Option> with custom children/props.
-   * This wrapper validates the element type, extracts the consumer's props, and
-   * re-renders a <Combobox.Option> merging them with core-computed value/isSelected/description/key. */
-  const wrappedRenderOption = renderOption ? (option, {
-    index,
-    value: optionValue,
-    isSelected,
-    description
-  }) => {
-    const node = renderOption(option, index);
-    if (!isComponentType(Combobox.Option)(node)) return null;
-    const {
-      children,
-      ...customProps
-    } = node.props;
-    return /*#__PURE__*/jsx(Combobox.Option, {
-      ...customProps,
-      value: optionValue,
-      isSelected: isSelected,
-      description: description,
-      children: children
-    }, optionValue);
-  } : undefined;
+  // Wrap the consumer's renderOption to inject core-computed props
+  // (`value`, `isSelected`, `description`, `key`) into the returned <Combobox.Option>.
+  const wrappedRenderOption = wrapRenderOption(renderOption);
   const [listElement, setListElement] = useState(null);
   const localInputRef = useRef(null);
   const mergedInputRef = useMergeRefs(localInputRef, externalInputRef);
@@ -17061,27 +17387,12 @@ const SelectTextField$1 = props => {
     displayValue = getOptionDisplayName(value, getOptionName, getOptionId);
   }
 
-  // Map option id selection to option object selection.
+  // Map option id selection to option object(s) selection (delegates the toggle math to core).
   const handleSelect = useCallback(selectedOption => {
-    const selectedValue = selectedOption.value;
-    const newOption = selectedValue && options?.find(option => getWithSelector$1(getOptionId, option) === selectedValue);
-    if (!isMultiple) {
-      onChange?.(newOption);
-    } else {
-      const currentValue = value || [];
-      const existingIndex = currentValue.findIndex(item => getWithSelector$1(getOptionId, item) === selectedValue);
-      if (existingIndex === -1) {
-        // Skip if no matching option found (e.g. beforeOptions custom actions).
-        if (newOption) {
-          onChange?.([...currentValue, newOption]);
-        }
-      } else {
-        // Remove option (toggle off)
-        const updated = [...currentValue];
-        updated.splice(existingIndex, 1);
-        onChange?.(updated);
-      }
-    }
+    const next = toggleSelection(options, getOptionId, value, selectedOption.value, isMultiple);
+    // In multi mode, `toggleSelection` skips when no option matches and returns the
+    // unchanged current array — the onChange call is a no-op for the consumer.
+    onChange?.(next);
 
     // Reset search state after selection.
     setIsSearching(false);
@@ -17596,9 +17907,9 @@ const SkeletonTypography = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonTypography.displayName = COMPONENT_NAME$14;
+SkeletonTypography.displayName = COMPONENT_NAME$15;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$i;
-SkeletonTypography.className = CLASSNAME$13;
+SkeletonTypography.className = CLASSNAME$14;
 
 /**
  * Clamp value in range.
@@ -20801,5 +21112,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1q as CLASSNAME, COMPONENT_NAME$1r as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1b 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, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectTextField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1r as CLASSNAME, COMPONENT_NAME$1s as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$1b 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, 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, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map