@lumx/react 4.3.2-alpha.11 → 4.3.2-alpha.12

package/index.js

@@ -1,12 +1,12 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, REAL_SIZE_FOR_LUMX_SIZE, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useRef, useCallback, useContext, createContext, useReducer, Children, useLayoutEffect, cloneElement, isValidElement } from 'react';
-import { mdiAlert } from '@lumx/icons/esm/alert';
-import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
-import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
-import { mdiInformation } from '@lumx/icons/esm/information';
+import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
+import { mdiAlert } from '@lumx/icons/esm/alert.js';
+import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle.js';
+import { mdiCheckCircle } from '@lumx/icons/esm/check-circle.js';
+import { mdiInformation } from '@lumx/icons/esm/information.js';
 import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import last from 'lodash/last';
@@ -16,43 +16,40 @@ import concat from 'lodash/concat';
 import dropRight from 'lodash/dropRight';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
-import { u as useDisabledStateContext, a as useVirtualFocusParent, M as MovingFocusContext, i as isComboboxValue, b as useComboboxRefs, c as useCombobox, S as SectionContext, g as generateOptionId, d as useVirtualFocus, A as A11YLiveMessage, C as ComboboxContext, e as MovingFocusProvider, r as reducer$1, f as initialState, h as ComboboxRefsProvider, P as Portal, j as ClickAwayProvider } from './_internal/BCgo9dYV.js';
+import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
 import isEmpty from 'lodash/isEmpty';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
-import { mdiCloseCircle } from '@lumx/icons/esm/close-circle';
+import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
 import memoize from 'lodash/memoize';
-import { mdiClose } from '@lumx/icons/esm/close';
+import { mdiClose } from '@lumx/icons/esm/close.js';
 import isFunction from 'lodash/isFunction';
-import { mdiImageBroken } from '@lumx/icons/esm/image-broken';
-import noop from 'lodash/noop';
+import { mdiImageBroken } from '@lumx/icons/esm/image-broken.js';
+import { mdiCheck } from '@lumx/icons/esm/check.js';
+import { mdiMinus } from '@lumx/icons/esm/minus.js';
+import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left.js';
+import { mdiChevronRight } from '@lumx/icons/esm/chevron-right.js';
 import castArray from 'lodash/castArray';
-import { mdiCheck } from '@lumx/icons/esm/check';
-import { mdiMinus } from '@lumx/icons/esm/minus';
-import { visuallyHidden, bem as bem$1 } from '@lumx/core/js/utils/classNames';
-import debounce$1 from 'lodash/debounce';
-import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
-import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
-import { mdiInformationOutline } from '@lumx/icons/esm/information-outline';
-import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left';
-import { mdiChevronRight } from '@lumx/icons/esm/chevron-right';
-import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical';
+import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical.js';
+import { mdiChevronDown } from '@lumx/icons/esm/chevron-down.js';
+import { mdiChevronUp } from '@lumx/icons/esm/chevron-up.js';
+import noop from 'lodash/noop';
 import pick from 'lodash/pick';
 import isInteger from 'lodash/isInteger';
-import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline';
-import { mdiMagnifyPlusOutline } from '@lumx/icons/esm/magnify-plus-outline';
+import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline.js';
+import { mdiMagnifyPlusOutline } from '@lumx/icons/esm/magnify-plus-outline.js';
 import throttle from 'lodash/throttle';
 import range from 'lodash/range';
-import { mdiPlayCircleOutline } from '@lumx/icons/esm/play-circle-outline';
-import { mdiPauseCircleOutline } from '@lumx/icons/esm/pause-circle-outline';
+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';
 import ReactDOM from 'react-dom';
 import take from 'lodash/take';
-import { mdiRadioboxBlank } from '@lumx/icons/esm/radiobox-blank';
-import { mdiRadioboxMarked } from '@lumx/icons/esm/radiobox-marked';
-import { mdiMenuDown } from '@lumx/icons/esm/menu-down';
+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 { getWithSelector } from '@lumx/core/js/utils/selectors/getWithSelector';
-import { mdiArrowDown } from '@lumx/icons/esm/arrow-down';
-import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
+import { mdiArrowDown } from '@lumx/icons/esm/arrow-down.js';
+import { mdiArrowUp } from '@lumx/icons/esm/arrow-up.js';
 import set from 'lodash/set';
 
 let i = 0;
@@ -104,15 +101,15 @@ const COMPONENT_NAME$1l = 'AlertDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1n = 'lumx-alert-dialog';
+const CLASSNAME$1j = 'lumx-alert-dialog';
 const {
-  block: block$19
-} = classNames.bem(CLASSNAME$1n);
+  block: block$14
+} = classNames.bem(CLASSNAME$1j);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1b = {
+const DEFAULT_PROPS$1a = {
   size: Size$1.tiny,
   kind: Kind$1.info
 };
@@ -133,8 +130,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$1b.kind,
-    size = DEFAULT_PROPS$1b.size,
+    kind = DEFAULT_PROPS$1a.kind,
+    size = DEFAULT_PROPS$1a.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -175,7 +172,7 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames.join(className, block$19({
+    className: classNames.join(className, block$14({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -221,8 +218,8 @@ const AlertDialog = forwardRef((props, ref) => {
   });
 });
 AlertDialog.displayName = COMPONENT_NAME$1l;
-AlertDialog.className = CLASSNAME$1n;
-AlertDialog.defaultProps = DEFAULT_PROPS$1b;
+AlertDialog.className = CLASSNAME$1j;
+AlertDialog.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -319,12 +316,12 @@ const COMPONENT_NAME$1k = 'Autocomplete';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1m = 'lumx-autocomplete';
+const CLASSNAME$1i = 'lumx-autocomplete';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1a = {
+const DEFAULT_PROPS$19 = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -346,13 +343,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$1a.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$19.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$1a.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$1a.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$1a.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$19.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -373,7 +370,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$1a.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$19.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -386,7 +383,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1m),
+    className: classNames.join(className, CLASSNAME$1i),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -427,8 +424,8 @@ const Autocomplete = forwardRef((props, ref) => {
   });
 });
 Autocomplete.displayName = COMPONENT_NAME$1k;
-Autocomplete.className = CLASSNAME$1m;
-Autocomplete.defaultProps = DEFAULT_PROPS$1a;
+Autocomplete.className = CLASSNAME$1i;
+Autocomplete.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
@@ -438,12 +435,12 @@ const COMPONENT_NAME$1j = 'AutocompleteMultiple';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1l = 'lumx-autocomplete-multiple';
+const CLASSNAME$1h = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$19 = {
+const DEFAULT_PROPS$18 = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -483,8 +480,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$18.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$18.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -506,19 +503,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$19.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$18.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$19.values,
+    values = DEFAULT_PROPS$18.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1l),
+    className: classNames.join(className, CLASSNAME$1h),
     name: name,
     value: value,
     onChange: onChange,
@@ -552,8 +549,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
   });
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1j;
-AutocompleteMultiple.className = CLASSNAME$1l;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$19;
+AutocompleteMultiple.className = CLASSNAME$1h;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Component display name.
@@ -563,16 +560,16 @@ const COMPONENT_NAME$1i = 'Avatar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-avatar';
+const CLASSNAME$1g = 'lumx-avatar';
 const {
-  block: block$18,
-  element: element$S
-} = classNames.bem(CLASSNAME$1k);
+  block: block$13,
+  element: element$N
+} = classNames.bem(CLASSNAME$1g);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {
+const DEFAULT_PROPS$17 = {
   size: Size$1.m
 };
 
@@ -595,7 +592,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$18.size,
+    size = DEFAULT_PROPS$17.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -603,14 +600,14 @@ const Avatar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$18({
+    className: classNames.join(className, block$13({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$S('thumbnail'),
+      className: element$N('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -620,17 +617,17 @@ const Avatar = forwardRef((props, ref) => {
       alt: alt,
       theme: theme
     }), actions && /*#__PURE__*/jsx("div", {
-      className: element$S('actions'),
+      className: element$N('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: element$S('badge'),
+      className: element$N('badge'),
       children: badge
     })]
   });
 });
 Avatar.displayName = COMPONENT_NAME$1i;
-Avatar.className = CLASSNAME$1k;
-Avatar.defaultProps = DEFAULT_PROPS$18;
+Avatar.className = CLASSNAME$1g;
+Avatar.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * Alignments.
@@ -698,6 +695,8 @@ const ColorPalette = {
   red: 'red',
   light: 'light'};
 
+/** ColorPalette with all possible color variant combination */
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -858,7 +857,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$17(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -893,11 +892,11 @@ function block$17(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$17(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$17(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -906,15 +905,15 @@ function element$R(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$17(baseName, modifiersOrAdditionalClasses);
+      return block$12(baseName, modifiersOrAdditionalClasses);
     }
-    return block$17(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$12(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$R(baseName, elem, modifiersOrAdditionalClasses);
+      return element$M(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$R(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$M(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -931,15 +930,15 @@ const COMPONENT_NAME$1h = 'Badge';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-badge';
+const CLASSNAME$1f = 'lumx-badge';
 const {
-  block: block$16
-} = bem(CLASSNAME$1j);
+  block: block$11
+} = bem(CLASSNAME$1f);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {
+const DEFAULT_PROPS$16 = {
   color: ColorPalette.primary
 };
 
@@ -953,22 +952,22 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$17.color,
+    color = DEFAULT_PROPS$16.color,
     ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$16({
+    className: classnames(className, block$11({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 };
 Badge$1.displayName = COMPONENT_NAME$1h;
-Badge$1.className = CLASSNAME$1j;
-Badge$1.defaultProps = DEFAULT_PROPS$17;
+Badge$1.className = CLASSNAME$1f;
+Badge$1.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Defines the props of the component.
@@ -992,11 +991,11 @@ Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
 const COMPONENT_NAME$1g = 'BadgeWrapper';
-const CLASSNAME$1i = 'lumx-badge-wrapper';
+const CLASSNAME$1e = 'lumx-badge-wrapper';
 const {
-  block: block$15,
-  element: element$Q
-} = bem(CLASSNAME$1i);
+  block: block$10,
+  element: element$L
+} = bem(CLASSNAME$1e);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1008,9 +1007,9 @@ const BadgeWrapper$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$15()),
+    className: classnames(className, block$10()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$Q('badge'),
+      className: element$L('badge'),
       children: badge
     })]
   });
@@ -1023,7 +1022,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
   });
 });
 BadgeWrapper.displayName = COMPONENT_NAME$1g;
-BadgeWrapper.className = CLASSNAME$1i;
+BadgeWrapper.className = CLASSNAME$1e;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1184,15 +1183,15 @@ const COMPONENT_NAME$1e = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-button';
+const CLASSNAME$1d = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1h);
+} = bem(CLASSNAME$1d);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {
+const DEFAULT_PROPS$15 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1206,10 +1205,10 @@ const DEFAULT_PROPS$16 = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$16.emphasis,
+    emphasis = DEFAULT_PROPS$15.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$16.size,
+    size = DEFAULT_PROPS$15.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1225,8 +1224,8 @@ const Button$1 = props => {
   });
 };
 Button$1.displayName = COMPONENT_NAME$1e;
-Button$1.className = CLASSNAME$1h;
-Button$1.defaultProps = DEFAULT_PROPS$16;
+Button$1.className = CLASSNAME$1d;
+Button$1.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1293,8 +1292,8 @@ const Button = forwardRef((props, ref) => {
   });
 });
 Button.displayName = COMPONENT_NAME$1e;
-Button.className = CLASSNAME$1h;
-Button.defaultProps = DEFAULT_PROPS$16;
+Button.className = CLASSNAME$1d;
+Button.defaultProps = DEFAULT_PROPS$15;
 
 const COMPONENT_NAME$1d = 'Icon';
 const IconClassName = 'lumx-icon';
@@ -1303,15 +1302,15 @@ const IconClassName = 'lumx-icon';
  * Defines the props of the component.
  */
 
-const CLASSNAME$1g = IconClassName;
+const CLASSNAME$1c = IconClassName;
 const {
-  block: block$14
-} = bem(CLASSNAME$1g);
+  block: block$$
+} = bem(CLASSNAME$1c);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {};
+const DEFAULT_PROPS$14 = {};
 
 /**
  * Icon component.
@@ -1360,7 +1359,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$14({
+    className: classnames(className, block$$({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1390,8 +1389,8 @@ const Icon$1 = props => {
   });
 };
 Icon$1.displayName = COMPONENT_NAME$1d;
-Icon$1.className = CLASSNAME$1g;
-Icon$1.defaultProps = DEFAULT_PROPS$15;
+Icon$1.className = CLASSNAME$1c;
+Icon$1.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
@@ -1401,12 +1400,12 @@ const COMPONENT_NAME$1c = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-icon-button';
+const CLASSNAME$1b = 'lumx-icon-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {
+const DEFAULT_PROPS$13 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1419,11 +1418,11 @@ const DEFAULT_PROPS$14 = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$14.emphasis,
+    emphasis = DEFAULT_PROPS$13.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$14.size,
+    size = DEFAULT_PROPS$13.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1443,8 +1442,8 @@ const IconButton$1 = props => {
   });
 };
 IconButton$1.displayName = COMPONENT_NAME$1c;
-IconButton$1.className = CLASSNAME$1f;
-IconButton$1.defaultProps = DEFAULT_PROPS$14;
+IconButton$1.className = CLASSNAME$1b;
+IconButton$1.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * IconButton component.
@@ -1480,8 +1479,8 @@ const IconButton = forwardRef((props, ref) => {
   });
 });
 IconButton.displayName = COMPONENT_NAME$1c;
-IconButton.className = CLASSNAME$1f;
-IconButton.defaultProps = DEFAULT_PROPS$14;
+IconButton.className = CLASSNAME$1b;
+IconButton.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * Component display name.
@@ -1491,12 +1490,12 @@ const COMPONENT_NAME$1b = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-button-group';
+const CLASSNAME$1a = 'lumx-button-group';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {};
+const DEFAULT_PROPS$12 = {};
 
 /**
  * ButtonGroup component.
@@ -1512,13 +1511,13 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1e),
+    className: classnames(className, CLASSNAME$1a),
     children: children
   });
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1b;
-ButtonGroup$1.className = CLASSNAME$1e;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$13;
+ButtonGroup$1.className = CLASSNAME$1a;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$12;
 
 /**
  * ButtonGroup component.
@@ -1534,16 +1533,16 @@ const ButtonGroup = forwardRef((props, ref) => {
   });
 });
 ButtonGroup.displayName = COMPONENT_NAME$1b;
-ButtonGroup.className = CLASSNAME$1e;
-ButtonGroup.defaultProps = DEFAULT_PROPS$13;
+ButtonGroup.className = CLASSNAME$1a;
+ButtonGroup.defaultProps = DEFAULT_PROPS$12;
 
 const COMPONENT_NAME$1a = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$1d = InputLabelClassName;
+const CLASSNAME$19 = InputLabelClassName;
 const {
-  block: block$13
-} = bem(CLASSNAME$1d);
-const DEFAULT_PROPS$12 = {};
+  block: block$_
+} = bem(CLASSNAME$19);
+const DEFAULT_PROPS$11 = {};
 
 /**
  * InputLabel component.
@@ -1563,7 +1562,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$13({
+    className: classnames(className, block$_({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1572,8 +1571,8 @@ function InputLabel$1(props) {
   });
 }
 InputLabel$1.displayName = COMPONENT_NAME$1a;
-InputLabel$1.className = CLASSNAME$1d;
-InputLabel$1.defaultProps = DEFAULT_PROPS$12;
+InputLabel$1.className = CLASSNAME$19;
+InputLabel$1.defaultProps = DEFAULT_PROPS$11;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1594,15 +1593,15 @@ const InputHelperClassName = 'lumx-input-helper';
  * Defines the props of the component.
  */
 
-const CLASSNAME$1c = InputHelperClassName;
+const CLASSNAME$18 = InputHelperClassName;
 const {
-  block: block$12
-} = bem(CLASSNAME$1c);
+  block: block$Z
+} = bem(CLASSNAME$18);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$10 = {
   kind: Kind.info
 };
 
@@ -1613,7 +1612,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$11.kind,
+    kind = DEFAULT_PROPS$10.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1624,7 +1623,7 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$12({
+    className: classnames(className, block$Z({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -1632,8 +1631,8 @@ function InputHelper$1(props) {
   });
 }
 InputHelper$1.displayName = COMPONENT_NAME$19;
-InputHelper$1.className = CLASSNAME$1c;
-InputHelper$1.defaultProps = DEFAULT_PROPS$11;
+InputHelper$1.className = CLASSNAME$18;
+InputHelper$1.defaultProps = DEFAULT_PROPS$10;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1649,11 +1648,11 @@ const COMPONENT_NAME$18 = 'Checkbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-checkbox';
+const CLASSNAME$17 = 'lumx-checkbox';
 const {
-  block: block$11,
-  element: element$P
-} = bem(CLASSNAME$1b);
+  block: block$Y,
+  element: element$K
+} = bem(CLASSNAME$17);
 
 /**
  * Checkbox component.
@@ -1689,7 +1688,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$11({
+    className: classnames(className, block$Y({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -1697,12 +1696,12 @@ const Checkbox$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$P('input-wrapper'),
+      className: element$K('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$P('input-native'),
+        className: element$K('input-native'),
         name: name,
         value: value,
         checked: isChecked,
@@ -1714,26 +1713,26 @@ const Checkbox$1 = props => {
         } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$P('input-placeholder'),
+        className: element$K('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$P('input-background')
+          className: element$K('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$P('input-indicator'),
+          className: element$K('input-indicator'),
           children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$P('content'),
+      className: element$K('content'),
       children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$P('label'),
+        className: element$K('label'),
         theme,
         children: label
       }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$P('helper'),
+        className: element$K('helper'),
         theme,
         children: helper
       })]
@@ -1748,7 +1747,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {};
+const DEFAULT_PROPS$$ = {};
 
 /**
  * Checkbox component.
@@ -1809,8 +1808,8 @@ const Checkbox = forwardRef((props, ref) => {
   });
 });
 Checkbox.displayName = COMPONENT_NAME$18;
-Checkbox.className = CLASSNAME$1b;
-Checkbox.defaultProps = DEFAULT_PROPS$10;
+Checkbox.className = CLASSNAME$17;
+Checkbox.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1836,16 +1835,16 @@ const COMPONENT_NAME$17 = 'Chip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-chip';
+const CLASSNAME$16 = 'lumx-chip';
 const {
-  block: block$10,
-  element: element$O
-} = classNames.bem(CLASSNAME$1a);
+  block: block$X,
+  element: element$J
+} = classNames.bem(CLASSNAME$16);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$_ = {
   size: Size$1.m
 };
 
@@ -1875,7 +1874,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$$.size,
+    size = DEFAULT_PROPS$_.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1906,7 +1905,7 @@ const Chip = forwardRef((props, ref) => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classNames.join(className, block$10({
+      className: classNames.join(className, block$X({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -1924,19 +1923,19 @@ const Chip = forwardRef((props, ref) => {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: element$O('before', {
+        className: element$J('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$O('label'),
+        className: element$J('label'),
         children: children
       }), after &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: element$O('after', {
+        className: element$J('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleOnAfterClick,
@@ -1946,8 +1945,8 @@ const Chip = forwardRef((props, ref) => {
   );
 });
 Chip.displayName = COMPONENT_NAME$17;
-Chip.className = CLASSNAME$1a;
-Chip.defaultProps = DEFAULT_PROPS$$;
+Chip.className = CLASSNAME$16;
+Chip.defaultProps = DEFAULT_PROPS$_;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -2003,7 +2002,7 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {};
+const DEFAULT_PROPS$Z = {};
 
 /**
  * Component display name.
@@ -2013,7 +2012,7 @@ const COMPONENT_NAME$16 = 'ChipGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-chip-group';
+const CLASSNAME$15 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -2032,13 +2031,13 @@ const InternalChipGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$19),
+    className: classNames.join(className, CLASSNAME$15),
     children: children
   });
 });
 InternalChipGroup.displayName = COMPONENT_NAME$16;
-InternalChipGroup.className = CLASSNAME$19;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$_;
+InternalChipGroup.className = CLASSNAME$15;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$Z;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2108,1469 +2107,119 @@ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
       evt.preventDefault();
 
       // Focus the last enabled chip (if any exists)
-      const lastChip = findPreviousEnabledChip();
-      lastChip?.focus();
-    };
-
-    // Attach keyboard event listener
-    input.addEventListener('keydown', onKeyDown);
-
-    // Cleanup listener on unmount
-    return () => {
-      input.removeEventListener('keydown', onKeyDown);
-    };
-  }, [inputRef, findPreviousEnabledChip]);
-  return {
-    findPreviousEnabledChip
-  };
-}
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$18 = 'lumx-selection-chip-group';
-const {
-  block: block$$,
-  element: element$N
-} = classNames.bem(CLASSNAME$18);
-
-/**
- * SelectionChipGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const SelectionChipGroup = ({
-  onChange,
-  value,
-  getOptionId,
-  getOptionName,
-  inputRef,
-  inputLabel,
-  renderChip,
-  theme,
-  isDisabled,
-  chipTooltipLabel,
-  label,
-  ...forwardedProps
-}) => {
-  const chipRefs = React__default.useRef([]);
-  const {
-    findPreviousEnabledChip
-  } = useFocusLastChipOnBackspace(chipRefs, inputRef);
-  return /*#__PURE__*/jsx(ChipGroup, {
-    role: "group",
-    "aria-label": label,
-    className: block$$(),
-    ...forwardedProps,
-    children: value?.map((v, index) => {
-      const name = getWithSelector(getOptionName, v);
-      const id = getWithSelector(getOptionId, v);
-      const onClick = () => {
-        const newValue = [...value];
-        const existingIndex = value.findIndex(vi => getWithSelector(getOptionId, vi) === id);
-        if (existingIndex === -1) {
-          return;
-        }
-        // Remove value
-        newValue.splice(existingIndex, 1);
-        onChange?.(newValue);
-      };
-      const onKeyDown = evt => {
-        if (evt.key !== 'Backspace') {
-          return;
-        }
-        // Activate (remove value) on Backspace pressed
-        onClick();
-        const previousChip = findPreviousEnabledChip(index - 1);
-        const input = inputRef?.current;
-        // Focus the previous chip or the input
-        (previousChip || input)?.focus();
-      };
-      if (!chipRefs.current[index]) {
-        chipRefs.current[index] = /*#__PURE__*/React__default.createRef();
-      }
-      const ref = chipRefs.current[index];
-      const customChip = renderChip?.(v);
-      const props = isComponentType(Chip)(customChip) ? customChip.props : undefined;
-      const chipIsDisabled = props?.isDisabled || isDisabled;
-      const chipName = typeof props?.children === 'string' ? props.children : name;
-      const tooltipLabel = chipTooltipLabel(chipName);
-      return /*#__PURE__*/jsx(Tooltip, {
-        label: !chipIsDisabled ? tooltipLabel : undefined,
-        closeMode: "hide",
-        ariaLinkMode: "aria-labelledby",
-        children: /*#__PURE__*/jsx(Chip, {
-          ...props,
-          after: /*#__PURE__*/jsx(Icon, {
-            icon: mdiClose
-          }),
-          className: element$N('chip', [props?.className]),
-          size: "s",
-          ref: ref,
-          onClick: onClick,
-          onKeyDown: onKeyDown,
-          theme: theme,
-          isDisabled: chipIsDisabled,
-          tabIndex: chipIsDisabled ? -1 : 0,
-          children: props?.children || name
-        })
-      }, id);
-    })
-  });
-};
-
-/**
- * Provide props for the semantic and behaviors the combobox trigger.
- *
- *
- */
-function useComboboxTrigger({
-  context,
-  refs,
-  onBlur,
-  onFocus,
-  onKeyDown
-}) {
-  const {
-    comboboxId,
-    listboxId,
-    isOpen,
-    options,
-    optionsLength,
-    selectedIds,
-    openOnFocus,
-    handleClose,
-    handleOpen,
-    handleSelected,
-    showEmptyState = false,
-    showErrorState = false,
-    status
-  } = context;
-  const highlightedId = useVirtualFocusParent(refs.triggerRef);
-  const {
-    dispatch: movingFocusDispatch
-  } = React__default.useContext(MovingFocusContext);
-  const isErrorStateDisplayed = showErrorState && isOpen && status === 'error';
-  const isEmptyStateDisplayed = showEmptyState && isOpen && status === 'idle' && optionsLength === 0;
-  const showPopover = isOpen && optionsLength > 0 || isEmptyStateDisplayed || isErrorStateDisplayed;
-
-  /**
-   * A debounce close to use to leave time for the
-   * listbox to process things before closing.
-   * This can be useful when clicking an option to leave time for the
-   * event to be processed before closing the popover.
-   */
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedClose = React__default.useCallback(debounce$1(handleClose, 200), []);
-
-  /** Cleanup any ongoing cleanup */
-  React__default.useEffect(() => {
-    return () => {
-      if (debouncedClose?.cancel) {
-        debouncedClose.cancel();
-      }
-    };
-  }, [debouncedClose]);
-  const handleBlur = React__default.useCallback(event => {
-    debouncedClose();
-    if (onBlur) {
-      onBlur(event);
-    }
-  }, [debouncedClose, onBlur]);
-
-  /** Actions triggered when the input field is focused */
-  const handleFocus = event => {
-    // If the field is refocused in the process of closing, cancel close
-    if (debouncedClose?.cancel) {
-      debouncedClose.cancel();
-    }
-    if (onFocus) {
-      onFocus(event);
-    }
-    /**
-     * Only set the open on focus if the combobox isn't already opened.
-     * This avoids the popover re-opening when an option is selected and the
-     * field is refocused
-     */
-    if (openOnFocus && !showPopover) {
-      handleOpen({
-        manual: true
-      });
-    }
-  };
-  const handleClick = () => {
-    handleOpen({
-      manual: true
-    });
-  };
-
-  /**
-   * Keyboard shortcut management following the WAI APG pattern
-   * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/#kbd_label
-   */
-  const handleKeyDown = React__default.useCallback(async event => {
-    const {
-      key,
-      altKey
-    } = event;
-
-    /**
-     * On Enter key
-     * * Select option that is currently highlighted, if any
-     * * Close suggestions, event if none is highlighted
-     */
-    if (event.key === 'Enter') {
-      if (!showPopover) {
-        return;
-      }
-      if (highlightedId) {
-        // prevent any potential form submission
-        event.preventDefault();
-        const option = options[highlightedId];
-        handleSelected(option, 'keyboard');
-      } else {
-        handleClose();
-      }
-      return;
-    }
-
-    /**
-     * On arrow up/down
-     * * If popover is already opened, do nothing
-     * * If alt key pressed, show the listbox without focusing an option
-     * * If arrow Up is pressed, select last option
-     * * If arrow Down is pressed, select first option
-     * */
-    if (key === 'ArrowDown' || key === 'ArrowUp') {
-      if (showPopover) {
-        return;
-      }
-
-      /** Open the listbox */
-      const listBoxOptions = await handleOpen({
-        manual: true
-      });
-      if (!listBoxOptions) {
-        return;
-      }
-
-      /**
-       * If alt key is pressed, only open without changing visual focus
-       * as per WAI Guidelines
-       */
-      if (!altKey) {
-        /** If a selected id is set, set it as current tabstop */
-        if (selectedIds?.length) {
-          movingFocusDispatch({
-            type: 'SELECT_TAB_STOP',
-            payload: {
-              id: selectedIds?.[0],
-              type: 'keyboard'
-            }
-          });
-        } else {
-          /** Focus either the first or last item depending on the keyboard arrow pressed */
-          movingFocusDispatch({
-            type: 'KEY_NAV',
-            payload: {
-              ctrlKey: false,
-              key: key === 'ArrowUp' ? 'End' : 'Home'
-            }
-          });
-        }
-      }
-      return;
-    }
-
-    // Forward event
-    onKeyDown?.(event);
-  }, [onKeyDown, showPopover, highlightedId, options, handleSelected, handleClose, handleOpen, selectedIds, movingFocusDispatch]);
-  return {
-    id: comboboxId,
-    role: 'combobox',
-    'aria-activedescendant': showPopover && highlightedId ? highlightedId : '',
-    'aria-controls': listboxId,
-    'aria-owns': listboxId,
-    'aria-expanded': showPopover,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  };
-}
-
-/** Is printable character key press */
-const isTypeEvent = ({
-  key,
-  altKey,
-  ctrlKey,
-  metaKey
-}) => key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey;
-
-/**
- * Provide props for the semantic and behaviors the combobox button trigger
- *
- * Overrides the useComboboxTrigger() props & behavior to add a jump to option
- * on printable character key down.
- */
-function useComboboxButton(args) {
-  const {
-    context: {
-      handleOpen
-    },
-    onKeyDown: parentOnKeyDown
-  } = args;
-  const {
-    dispatch: movingFocusDispatch,
-    state: {
-      selectedId: highlightedId
-    }
-  } = React__default.useContext(MovingFocusContext);
-  const searchValueRef = React__default.useRef('');
-  const searchTimeoutRef = React__default.useRef();
-  const onKeyDown = React__default.useMemo(() => {
-    function clearSearchTimeout() {
-      const searchTimeout = searchTimeoutRef.current;
-      if (!searchTimeout) {
-        return;
-      }
-      clearTimeout(searchTimeout);
-      searchTimeoutRef.current = undefined;
-    }
-    function clearSearch() {
-      searchValueRef.current = '';
-      clearSearchTimeout();
-    }
-    return async event => {
-      if (!isTypeEvent(event)) {
-        // Forward key down event
-        parentOnKeyDown?.(event);
-        return undefined;
-      }
-      event.stopPropagation();
-
-      // Clear current search timeout
-      clearSearchTimeout();
-
-      // Open combobox and wait for options to mount
-      const options = await handleOpen({
-        manual: false
-      });
-      const optionArray = options && Object.values(options);
-      if (!optionArray?.length) {
-        return undefined;
-      }
-
-      // Append key to current search
-      searchValueRef.current += event.key.toLowerCase();
-      const searchValue = searchValueRef.current;
-
-      // Clear search after 500ms
-      searchTimeoutRef.current = setTimeout(clearSearch, 500);
-
-      // Search is containing all the same letters (ex: aaaa)
-      const allTheSameLetters = searchValue.split('').every(letter => letter === searchValue[0]);
-
-      // start from currently selected option
-      let startIndex = optionArray.findIndex(option => option.generatedId === highlightedId);
-      if (startIndex === -1) {
-        startIndex = 0;
-      }
-      let index = startIndex;
-      do {
-        // Increment index and loop around to 0 if we get over the array length
-        index = (index + 1) % optionArray.length;
-        const option = optionArray[index];
-        // Search by text value or fallback on id.
-        const optionText = isComboboxValue(option) ? option?.textValue || option?.id : null;
-        if (isComboboxValue(option) && optionText) {
-          const optionTextValue = optionText.toLowerCase();
-
-          // Search on first letter if search is all the same letters
-          const searchText = allTheSameLetters ? searchValue[0] : searchValue;
-
-          // Option text value starts with searched text
-          if (optionTextValue.startsWith(searchText)) {
-            movingFocusDispatch({
-              type: 'SELECT_TAB_STOP',
-              payload: {
-                id: option.generatedId,
-                type: 'keyboard'
-              }
-            });
-            break;
-          }
-        }
-      } while (index !== startIndex);
-      return clearSearchTimeout;
-    };
-  }, [handleOpen, parentOnKeyDown, highlightedId, movingFocusDispatch]);
-  return useComboboxTrigger({
-    ...args,
-    onKeyDown
-  });
-}
-
-/**
- * Combobox button trigger.
- *
- * @family Combobox
- */
-const ComboboxButton = forwardRef((props, ref) => {
-  const {
-    as,
-    label,
-    onFocus,
-    onBlur,
-    labelDisplayMode = 'show-selection',
-    ...forwardedProps
-  } = props;
-  const refs = useComboboxRefs();
-  const context = useCombobox();
-  const buttonProps = useComboboxButton({
-    context,
-    refs,
-    onBlur,
-    onFocus
-  });
-  const Element = as || Button;
-  const showSelection = labelDisplayMode === 'show-selection';
-  const tooltipOnly = labelDisplayMode === 'show-tooltip';
-  const selectionLabel = showSelection && context.selectedIds?.length && context.inputValue;
-  let content = null;
-  if (!tooltipOnly) {
-    // Display selection label or label
-    content = selectionLabel || label;
-  }
-  const hideTooltip =
-  // Hide tooltip if the displayed label and tooltip label are the same
-  label === content ||
-  // Hide tooltip when the combobox is open
-  context.isOpen;
-  const mergedRefs = useMergeRefs(ref, refs.triggerRef, refs.anchorRef);
-  return /*#__PURE__*/jsx(Tooltip, {
-    className: hideTooltip ? visuallyHidden() : undefined,
-    label: label,
-    closeMode: "hide",
-    ariaLinkMode: "aria-labelledby",
-    children: /*#__PURE__*/jsx(Element, {
-      ref: mergedRefs,
-      ...forwardedProps,
-      ...buttonProps,
-      children: content
-    })
-  });
-});
-
-const CLASSNAME$17 = 'lumx-combobox-divider';
-
-/** Combobox option divider */
-function ComboboxDivider() {
-  return /*#__PURE__*/jsx(ListDivider, {
-    className: CLASSNAME$17,
-    role: "presentation"
-  });
-}
-
-/**
- * Provide props for the semantic and behaviors the combobox input trigger
- *
- * Overrides the useComboboxTrigger() props & behavior to prevent open on click
- * if `openOnFocus` is not enabled.
- */
-function useComboboxInput({
-  onKeyDown: propsOnKeyDown,
-  ...args
-}) {
-  const triggerProps = useComboboxTrigger(args);
-  const {
-    onClick,
-    onKeyDown,
-    'aria-expanded': showPopover
-  } = triggerProps;
-  const handleClick = () => {
-    if (!args.context.openOnFocus && !args.context.openOnClick) {
-      // Skip if input should not opening on focus nor click
-      return;
-    }
-    onClick();
-  };
-  const handleKeyDown = evt => {
-    if (evt.key === 'Escape') {
-      // Reset field if closed
-      if (!showPopover) {
-        args.context.handleInputChange('');
-      }
-      return;
-    }
-    onKeyDown(evt);
-    if (propsOnKeyDown) {
-      propsOnKeyDown(evt);
-    }
-  };
-  return {
-    ...triggerProps,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown
-  };
-}
-
-/**
- * Combobox input trigger.
- *
- * @family Combobox
- */
-const ComboboxInput = ({
-  hideToggle,
-  inputRef,
-  textFieldRef,
-  afterElement,
-  onFocus,
-  onBlur,
-  onKeyDown,
-  clearButtonProps,
-  hasClearButton,
-  theme,
-  ...textFieldProps
-}) => {
-  const refs = useComboboxRefs();
-  const context = useCombobox();
-  const inputProps = useComboboxInput({
-    refs,
-    context,
-    onBlur,
-    onFocus,
-    onKeyDown
-  });
-  const {
-    listboxId,
-    isOpen,
-    handleOpen,
-    handleClose,
-    inputValue,
-    handleInputChange
-  } = context;
-
-  /** Callback for when the toggle button is trigged */
-  const handleManualToggle = () => {
-    if (isOpen) {
-      handleClose();
-    } else {
-      handleOpen({
-        manual: true
-      });
-    }
-    refs.triggerRef?.current?.focus();
-  };
-  return /*#__PURE__*/jsx(TextField
-  // Disable native autocomplete
-  , {
-    autoComplete: "off",
-    ...textFieldProps,
-    inputRef: mergeRefs(refs.triggerRef, inputRef),
-    textFieldRef: mergeRefs(refs.anchorRef, textFieldRef)
-    // Combobox props
-    ,
-    ...inputProps,
-    theme: theme,
-    value: inputValue,
-    onClear: () => handleInputChange(''),
-    onChange: handleInputChange,
-    clearButtonProps: hasClearButton ? {
-      ...clearButtonProps,
-      label: context.translations.clearLabel
-    } : undefined,
-    afterElement: (!hideToggle || afterElement) && /*#__PURE__*/jsxs(Fragment, {
-      children: [afterElement, !hideToggle && /*#__PURE__*/jsx(IconButton, {
-        theme: theme,
-        onClick: handleManualToggle,
-        label: context.translations.showSuggestionsLabel,
-        emphasis: Emphasis$1.low,
-        size: Size$1.s,
-        icon: inputProps['aria-expanded'] ? mdiChevronUp : mdiChevronDown,
-        type: "button",
-        tabIndex: -1,
-        "aria-expanded": inputProps['aria-expanded'],
-        "aria-haspopup": "listbox",
-        "aria-controls": listboxId
-      })]
-    })
-  });
-};
-
-const ComboboxOptionContext = /*#__PURE__*/createContext({});
-/** Context Provider to store the current combobox option id. */
-const ComboboxOptionContextProvider = ({
-  optionId,
-  isKeyboardHighlighted,
-  children
-}) => {
-  const value = React__default.useMemo(() => ({
-    optionId,
-    isKeyboardHighlighted
-  }), [optionId, isKeyboardHighlighted]);
-  return /*#__PURE__*/jsx(ComboboxOptionContext.Provider, {
-    value: value,
-    children: children
-  });
-};
-
-/**
- * Retrieve the current combobox option id.
- * Must be used within a ComboboxOptionIdProvider
- */
-const useComboboxOptionContext = () => {
-  const comboboxOption = useContext(ComboboxOptionContext);
-  if (!comboboxOption?.optionId) {
-    throw new Error('This hook must be used within a ComboboxOptionIdProvider');
-  }
-  return comboboxOption;
-};
-
-/** Retrieve the current combobox section id */
-const useComboboxSectionId = () => {
-  return useContext(SectionContext);
-};
-
-/**
- * Register the given option to the context
- */
-const useRegisterOption = (registerId, option, shouldRegister) => {
-  const {
-    dispatch
-  } = useCombobox();
-
-  /** Register the given options */
-  React__default.useEffect(() => {
-    if (option && shouldRegister) {
-      dispatch({
-        type: 'ADD_OPTION',
-        payload: {
-          id: registerId,
-          option
-        }
-      });
-    }
-
-    // Unregister ids if/when the component unmounts or if option changes
-    return () => {
-      if (option) {
-        dispatch({
-          type: 'REMOVE_OPTION',
-          payload: {
-            id: registerId
-          }
-        });
-      }
-    };
-  }, [dispatch, option, registerId, shouldRegister]);
-};
-
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-const COMBOBOX_OPTION_CLASSNAME = 'lumx-combobox-option';
-const LUMX_CLASSNAME = 'lumx-list-item';
-const {
-  block: block$_,
-  element: element$M
-} = classNames.bem(COMBOBOX_OPTION_CLASSNAME);
-const lumxListItem = classNames.bem(LUMX_CLASSNAME);
-
-/**
- * Content of the option.
- * This should only be rendered if the option is shown.
- */
-const OptionContent = forwardRef((props, ref) => {
-  const {
-    id,
-    onSelect,
-    isSelected,
-    isDisabled,
-    children,
-    className,
-    before,
-    after,
-    as,
-    size = Size$1.tiny,
-    comboboxType,
-    tooltipProps,
-    description,
-    'aria-hidden': ariaHidden,
-    autofocus,
-    ...forwardedProps
-  } = props;
-  const itemRef = React__default.useRef(null);
-  const {
-    state
-  } = React__default.useContext(MovingFocusContext);
-  const {
-    selectedIds
-  } = useCombobox();
-  const hasSelection = selectedIds !== undefined;
-  const isHighlighted = useVirtualFocus(id, itemRef, false, comboboxType === 'grid' ? id : undefined, autofocus);
-  const Element = as || 'span';
-  const ariaSelected = isSelected ? 'true' : 'false';
-  const ariaDescriptionId = description ? `${id}-description` : undefined;
-  const isKeyboardHighlighted = state.isUsingKeyboard && isHighlighted;
-
-  /**
-   * The DS `ListItem` component has a lot of behavior / default props we do not want here.
-   * Notably the before/after items are within the interactive element, which we do not want.
-   * So we use a native li tag.
-   */
-  return /*#__PURE__*/jsx("li", {
-    className: block$_(undefined, [className ?? '', lumxListItem.block({
-      [`size-${size}`]: !!size
-    })]),
-    role: "presentation",
-    ref: itemRef,
-    "aria-hidden": ariaHidden,
-    style: {
-      display: ariaHidden ? 'none' : undefined
-    },
-    ...forwardedProps,
-    children: /*#__PURE__*/jsxs(GenericBlock, {
-      as: "div",
-      role: comboboxType === 'grid' ? 'row' : 'presentation',
-      className: element$M('content', {
-        // Not using the lumx list item disabled style as it blocks pointer events
-        'is-disabled': !!isDisabled
-      },
-      // TODO: migrate away from using lumx-list-item styles https://lumapps.atlassian.net/browse/DSW-288
-      [lumxListItem.element('link', {
-        'is-selected': Boolean(isSelected),
-        'is-highlighted': Boolean(isHighlighted)
-      })]),
-      "data-focus-visible-added": isKeyboardHighlighted ? 'true' : undefined,
-      children: [before && /*#__PURE__*/jsx(GenericBlock.Figure, {
-        as: "span",
-        role: "presentation",
-        className: element$M('before', undefined, [lumxListItem.element('before')]),
-        children: before
-      }), /*#__PURE__*/jsxs(GenericBlock.Content, {
-        as: "span",
-        role: "presentation",
-        className: lumxListItem.element('content'),
-        children: [/*#__PURE__*/jsx(Tooltip, {
-          forceOpen: isKeyboardHighlighted,
-          closeMode: "hide",
-          ...tooltipProps,
-          children: /*#__PURE__*/jsx(Element, {
-            id: id,
-            className: element$M('trigger'),
-            role: comboboxType === 'grid' ? 'gridcell' : 'option',
-            "aria-selected": hasSelection ? ariaSelected : undefined,
-            "aria-disabled": isDisabled,
-            "aria-describedby": ariaDescriptionId,
-            onClick: onSelect
-            // Prevent mouse down to avoid blur before the click is activated
-            ,
-            onMouseDown: event => event.preventDefault(),
-            ref: ref,
-            ...forwardedProps,
-            children: children
-          })
-        }), description && /*#__PURE__*/jsx(Text, {
-          as: "span",
-          id: ariaDescriptionId,
-          role: "presentation",
-          className: element$M('description'),
-          typography: "caption",
-          color: "dark",
-          colorVariant: "L2",
-          children: description
-        })]
-      }), after && /*#__PURE__*/jsx(GenericBlock.Actions, {
-        as: "span",
-        role: "presentation",
-        className: element$M('after', undefined, [lumxListItem.element('after')]),
-        children: /*#__PURE__*/jsx(ComboboxOptionContextProvider, {
-          optionId: id,
-          isKeyboardHighlighted: isKeyboardHighlighted,
-          children: after
-        })
-      })]
-    })
-  });
-});
-
-/**
- * Props for ComboboxOption with additional generic properties.
- */
-
-/**
- * Option to set within a combobox list.
- *
- * @family Combobox
- * @param ComboboxOptionProps
- * @returns ComboboxOption
- */
-const ComboboxOption = forwardRef((props, ref) => {
-  const {
-    children,
-    id,
-    textValue,
-    data,
-    filterFromInput = true,
-    onSelect: onOptionSelect,
-    isDisabled,
-    as = 'span',
-    ...optionProps
-  } = props;
-
-  // Get the id of the current group, if any.
-  const section = useComboboxSectionId();
-  const {
-    comboboxId,
-    selectedIds,
-    showAll,
-    inputValue,
-    handleSelected,
-    type
-  } = useCombobox();
-  // Generate a unique id for this option.
-  const generatedId = generateOptionId(comboboxId, id);
-  const isSelected = selectedIds?.includes(generatedId);
-
-  // If no text value is set and the direct child is a simple string, use it as value.
-  const isStringChild = typeof children === 'string' || typeof children === 'number';
-  const value = children && !textValue && isStringChild ? children.toString() : textValue;
-  const showOption = !filterFromInput || showAll || value?.toString()?.toLowerCase().includes(inputValue?.toLowerCase());
-  const registeredOption = React__default.useMemo(() => ({
-    id,
-    generatedId,
-    textValue: value,
-    data,
-    filter: filterFromInput,
-    isDisabled: isDisabled || !showOption,
-    sectionId: section.sectionId,
-    onSelect: onOptionSelect
-  }), [data, filterFromInput, generatedId, section.sectionId, id, isDisabled, onOptionSelect, showOption, value]);
-
-  // Register the option
-  useRegisterOption(generatedId, registeredOption, showOption);
-  const handleSelect = React__default.useCallback(() => handleSelected(registeredOption, 'click'), [handleSelected, registeredOption]);
-  if (!id || !showOption) {
-    return null;
-  }
-  return /*#__PURE__*/jsx(OptionContent, {
-    id: generatedId,
-    onSelect: handleSelect,
-    isSelected: isSelected,
-    isDisabled: isDisabled,
-    as: as,
-    ref: ref,
-    comboboxType: type,
-    "aria-hidden": section.isLoading,
-    ...optionProps,
-    children: children || textValue
-  });
-});
-
-// Default widths the skeletons must have
-const defaultWidths = [REAL_SIZE_FOR_LUMX_SIZE.xxl, REAL_SIZE_FOR_LUMX_SIZE.xl, REAL_SIZE_FOR_LUMX_SIZE.l];
-const {
-  block: block$Z,
-  element: element$L
-} = classNames.bem(COMBOBOX_OPTION_CLASSNAME);
-
-/**
- * Skeleton for a combobox option.
- * A typography skeleton is rendered by default but can be overridden by passing children.
- */
-const ComboboxOptionSkeleton = ({
-  className,
-  index,
-  before,
-  after,
-  size = Size$1.tiny,
-  children
-}) => {
-  const renderedChildren = typeof children === 'function' ? children({
-    index
-  }) : children;
-  const content = renderedChildren || /*#__PURE__*/jsx(SkeletonTypography, {
-    typography: "body1",
-    width: index !== undefined && defaultWidths[index] ? defaultWidths[index] : REAL_SIZE_FOR_LUMX_SIZE.xl
-  });
-  return /*#__PURE__*/jsxs("li", {
-    role: "presentation",
-    className: block$Z({
-      skeleton: true
-    }, ['lumx-list-item', `lumx-list-item--size-${size}`, className]),
-    children: [/*#__PURE__*/jsxs("div", {
-      role: "presentation",
-      className: element$L('content', ['lumx-list-item__wrapper']),
-      children: [before && /*#__PURE__*/jsx(Text, {
-        as: "span",
-        role: "presentation",
-        className: element$L('before', ['lumx-list-item__before']),
-        children: before
-      }), content]
-    }), after && /*#__PURE__*/jsx("div", {
-      role: "presentation",
-      className: element$L('after', ['lumx-list-item__after']),
-      children: after
-    })]
-  });
-};
-
-/** Default skeleton for the options list of the combobox */
-const ComboboxListSkeleton = ({
-  isLoadingMore,
-  children
-}) => /*#__PURE__*/jsx(Fragment, {
-  children: Array.from({
-    length: isLoadingMore ? 1 : 3
-  }).map((_, index) => {
-    const renderedChildren = typeof children === 'function' ? children({
-      index
-    }) : children || /*#__PURE__*/jsx(ComboboxOptionSkeleton, {
-      index: index
-    });
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      jsx(React__default.Fragment, {
-        children: renderedChildren
-      }, index)
-    );
-  })
-});
-
-/** The states in which the full loading must be displayed */
-const FULL_LOADING_STATES = ['loading', 'debouncing', 'filtering'];
-const CLASSNAME$16 = 'lumx-combobox-listbox';
-const {
-  block: block$Y,
-  element: element$K
-} = bem$1(CLASSNAME$16);
-
-/**
- * The listbox containing the combobox's options.
- *
- * @family Combobox
- * @param ComboboxListBoxProps
- * @returns ComboboxListBox
- */
-const ComboboxListBox = ({
-  children,
-  renderItemSkeleton,
-  label,
-  popoverProps,
-  footer,
-  listRef,
-  ...forwardedProps
-}) => {
-  const {
-    status,
-    listboxId,
-    isOpen,
-    optionsLength,
-    handleClose: contextHandleClose,
-    type,
-    inputValue,
-    showEmptyState,
-    showErrorState,
-    translations
-  } = useCombobox();
-  const {
-    anchorRef
-  } = useComboboxRefs();
-  const {
-    onClose,
-    ...otherPopoverProps
-  } = popoverProps || {};
-  const {
-    style,
-    className,
-    ...listProps
-  } = forwardedProps;
-  // The states to show a full skeleton instead of the options
-  const showFullLoading = FULL_LOADING_STATES.includes(status);
-  const isErrorStateDisplayed = showErrorState && isOpen && status === 'error';
-  const isEmptyStateDisplayed = showEmptyState && isOpen && status === 'idle' && optionsLength === 0;
-
-  /**
-   *  The conditions in which we want to show the content of the popover
-   *  * The parent asked for the popover to be opened
-   *  * There is at least one option to displayed OR a skeleton
-   */
-  const showPopover = isOpen && (optionsLength > 0 || showFullLoading) || isEmptyStateDisplayed || isErrorStateDisplayed;
-  const handleClose = () => {
-    if (isOpen) {
-      contextHandleClose?.();
-      onClose?.();
-    }
-  };
-  const emptyMessage = translations.noResultsForInputLabel(inputValue);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(Text, {
-      as: "p",
-      className: visuallyHidden(),
-      role: "log",
-      "aria-live": "assertive",
-      children: [isOpen && !showFullLoading && !isEmptyStateDisplayed && !isErrorStateDisplayed && translations.nbOptionsLabel(optionsLength), isErrorStateDisplayed && `${translations.serviceUnavailableLabel} ${translations.tryReloadLabel}`, showFullLoading && translations.loadingLabel, isEmptyStateDisplayed && emptyMessage]
-    }), /*#__PURE__*/jsx(Popover, {
-      role: "none",
-      onClose: handleClose,
-      anchorRef: anchorRef,
-      fitToAnchorWidth: true,
-      fitWithinViewportHeight: true,
-      closeOnEscape: true,
-      closeOnClickAway: true,
-      placement: Placement.BOTTOM,
-      isOpen: isOpen,
-      ...otherPopoverProps,
-      children: /*#__PURE__*/jsxs("div", {
-        style: {
-          ...style,
-          overflowY: 'auto',
-          display: showPopover ? 'flex' : 'none',
-          flexDirection: 'column'
-        },
-        children: [/*#__PURE__*/jsxs("ul", {
-          ref: listRef,
-          id: listboxId,
-          role: type,
-          "aria-label": label,
-          className: block$Y([className, 'lumx-list lumx-list--item-padding-big']),
-          style: {
-            flex: 1,
-            overflowY: 'auto'
-          },
-          ...listProps,
-          children: [!showFullLoading && children, [...FULL_LOADING_STATES, 'loadingMore'].includes(status) && /*#__PURE__*/jsx(ComboboxListSkeleton, {
-            isLoadingMore: status === 'loadingMore',
-            children: renderItemSkeleton
-          })]
-        }), footer, (isEmptyStateDisplayed || isErrorStateDisplayed) && /*#__PURE__*/jsx(GenericBlock, {
-          className: element$K('state'),
-          orientation: "vertical",
-          vAlign: "center",
-          children: /*#__PURE__*/jsxs(GenericBlock.Content, {
-            children: [inputValue && isEmptyStateDisplayed && /*#__PURE__*/jsx(Text, {
-              as: "p",
-              typography: "body1",
-              color: "dark",
-              colorVariant: "L2",
-              dangerouslySetInnerHTML: {
-                __html: translations.noResultsForInputLabel(inputValue)
-              }
-            }), !inputValue && isEmptyStateDisplayed && /*#__PURE__*/jsx(Text, {
-              as: "p",
-              typography: "body1",
-              color: "dark",
-              colorVariant: "L2",
-              children: translations.noResultsForInputLabel()
-            }), isErrorStateDisplayed && /*#__PURE__*/jsxs(Fragment, {
-              children: [/*#__PURE__*/jsx(Heading, {
-                as: "h2",
-                typography: "subtitle2",
-                children: translations.serviceUnavailableLabel
-              }), /*#__PURE__*/jsx(Text, {
-                as: "p",
-                typography: "body1",
-                color: "dark",
-                colorVariant: "L2",
-                children: translations.tryReloadLabel
-              })]
-            })]
-          })
-        })]
-      })
-    })]
-  });
-};
-
-/**
- * Action to set on a Combobox Option.
- * Allows to add an interactive element that
- * can be navigated to and triggered using the keyboard.
- *
- * Defaults as "button"
- *
- * @family Combobox
- * @param ComboboxOptionActionProps
- * @returns ComboboxOptionAction
- */
-const ComboboxOptionAction = props => {
-  const {
-    as,
-    isDisabled,
-    onClick,
-    id: originalId,
-    ...forwardedProps
-  } = props;
-  const {
-    optionId
-  } = useComboboxOptionContext();
-  const {
-    triggerRef
-  } = useComboboxRefs();
-  const itemRef = React__default.useRef(null);
-  const generatedId = useId();
-  const id = originalId || generatedId;
-  const isHighlighted = useVirtualFocus(id, itemRef, isDisabled, optionId);
-  const {
-    state
-  } = React__default.useContext(MovingFocusContext);
-  const Component = as || 'button';
-  const registeredActionOption = React__default.useMemo(() => ({
-    id,
-    generatedId: id,
-    isAction: true,
-    isDisabled,
-    onSelect: () => {
-      itemRef.current?.click();
-    }
-  }), [id, isDisabled]);
-
-  // Register the option
-  useRegisterOption(id, registeredActionOption, !isDisabled);
-  const handleActionClick = React__default.useCallback(() => {
-    if (onClick) {
-      onClick();
-    }
-    if (triggerRef?.current) {
-      triggerRef.current?.focus();
-    }
-  }, [triggerRef, onClick]);
-  return /*#__PURE__*/jsx(Component, {
-    ...forwardedProps,
-    isDisabled: isDisabled,
-    id: id,
-    role: "gridcell",
-    ref: itemRef,
-    "data-focus-visible-added": state.isUsingKeyboard && isHighlighted ? 'true' : undefined,
-    "aria-disabled": isDisabled,
-    onClick: handleActionClick
-  });
-};
+      const lastChip = findPreviousEnabledChip();
+      lastChip?.focus();
+    };
 
-const useBooleanState = defaultValue => {
-  const [booleanValue, setBoolean] = useState(defaultValue);
-  const setToFalse = useCallback(() => setBoolean(false), []);
-  const setToTrue = useCallback(() => setBoolean(true), []);
-  const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
-  return [booleanValue, setToFalse, setToTrue, toggleBoolean];
-};
+    // Attach keyboard event listener
+    input.addEventListener('keydown', onKeyDown);
 
-const CLASSNAME$15 = 'lumx-combobox-option-more-info';
-const {
-  block: block$X,
-  element: element$J
-} = classNames.bem(CLASSNAME$15);
+    // Cleanup listener on unmount
+    return () => {
+      input.removeEventListener('keydown', onKeyDown);
+    };
+  }, [inputRef, findPreviousEnabledChip]);
+  return {
+    findPreviousEnabledChip
+  };
+}
 
 /**
- * Display more info on the option as a popover opening on mouse hover or keyboard nav
- * Please consider using a simpler option description instead for better UX and a11y.
- *
- * @family Combobox
+ * Component default class name and class prefix.
  */
-const ComboboxOptionMoreInfo = ({
-  buttonProps,
-  popoverProps,
-  onToggle,
-  children
-}) => {
-  const ref = React__default.useRef(null);
-  const [isHovered,, onMouseLeave, onMouseEnter] = useBooleanState(false);
-  const comboboxOption = useComboboxOptionContext();
-
-  // Open on mouse hover or key nav
-  const isOpen = isHovered || comboboxOption.isKeyboardHighlighted;
-  React__default.useEffect(() => {
-    onToggle?.(isOpen);
-  }, [isOpen, onToggle]);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(IconButton, {
-      ...buttonProps,
-      ref: ref,
-      className: block$X([buttonProps?.className]),
-      icon: mdiInformationOutline,
-      size: "s",
-      emphasis: "low",
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave
-      // Button actually plays no role here other than a target for the mouse hover
-      // Keyboard accessibility is handled via combobox keyboard highlighting
-      ,
-      "aria-hidden": true,
-      label: ""
-    }), /*#__PURE__*/jsx(Popover, {
-      ...popoverProps,
-      className: element$J('popover', [popoverProps?.className]),
-      anchorRef: ref,
-      isOpen: isOpen,
-      closeOnEscape: true,
-      closeOnClickAway: true,
-      placement: "bottom-start",
-      children: children
-    }), /*#__PURE__*/jsx(A11YLiveMessage, {
-      hidden: true,
-      children: isOpen ? children : undefined
-    })]
-  });
-};
-
-const CLASSNAME$14 = 'lumx-combobox-section';
+const CLASSNAME$14 = 'lumx-selection-chip-group';
 const {
   block: block$W,
   element: element$I
 } = classNames.bem(CLASSNAME$14);
 
 /**
- * Content of the ComboboxSection.
- */
-const ComboboxSectionContent = ({
-  className,
-  title,
-  children,
-  isLoading,
-  renderItemSkeleton
-}) => {
-  const {
-    options
-  } = useCombobox();
-  const {
-    sectionId
-  } = useComboboxSectionId();
-  const hasRegisteredChildren = Boolean(Object.values(options).find(option => isComboboxValue(option) && option.sectionId === sectionId));
-  const titleId = title && `${sectionId}-title`;
-  if (!children && !isLoading) {
-    return null;
-  }
-  const isHidden = !hasRegisteredChildren && !isLoading;
-  return /*#__PURE__*/jsxs("li", {
-    className: block$W([className]),
-    role: !isHidden ? 'none' : undefined,
-    "aria-hidden": isHidden,
-    style: {
-      display: isHidden ? 'none' : undefined
-    },
-    children: [title && /*#__PURE__*/jsx(Text, {
-      as: "span",
-      className: element$I('header', [ListSubheader.className]),
-      "aria-hidden": "true",
-      id: titleId,
-      children: title
-    }), /*#__PURE__*/jsxs("ul", {
-      className: element$I('content'),
-      role: "group",
-      "aria-labelledby": titleId,
-      children: [children, isLoading && /*#__PURE__*/jsx(ComboboxListSkeleton, {
-        children: renderItemSkeleton
-      })]
-    })]
-  });
-};
-
-/**
- * Section for options of a Combobox.
+ * SelectionChipGroup component.
  *
- * @family Combobox
- * @param ComboboxSectionProps
- * @returns ComboboxSection
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-const ComboboxSection = ({
-  children,
-  ...props
-}) => {
-  const sectionId = useId();
-  const value = React__default.useMemo(() => ({
-    sectionId,
-    isLoading: props.isLoading
-  }), [sectionId, props.isLoading]);
-  return /*#__PURE__*/jsx(SectionContext.Provider, {
-    value: value,
-    children: /*#__PURE__*/jsx(ComboboxSectionContent, {
-      ...props,
-      children: children
-    })
-  });
-};
-
-/** Context provider for the combobox. */
-const ComboboxProvider = ({
-  children,
-  value
-}) => {
-  return /*#__PURE__*/jsx(ComboboxContext.Provider, {
-    value: value,
-    children: /*#__PURE__*/jsx(MovingFocusProvider, {
-      options: {
-        direction: value.type === 'grid' ? 'both' : 'vertical',
-        firstFocusDirection: value.type === 'grid' ? 'vertical' : undefined,
-        loopAround: {
-          row: 'next-loop',
-          col: 'inside'
-        },
-        gridJumpToShortcutDirection: 'vertical',
-        defaultSelectedId: value.selectedIds?.[0],
-        listKey: value.inputValue
-      },
-      children: children
-    })
-  });
-};
-
-const Combobox$1 = ({
-  id: htmlId,
-  inputValue,
-  defaultInputValue,
-  autoFilter = true,
-  openOnClick,
-  openOnFocus,
-  status,
-  showEmptyState = !autoFilter,
-  showErrorState = !!status,
-  selectedIds,
-  onInputChange,
-  onSelect,
-  onOpen,
-  children,
-  selectionType,
-  translations
+const SelectionChipGroup = ({
+  onChange,
+  value,
+  getOptionId,
+  getOptionName,
+  inputRef,
+  inputLabel,
+  renderChip,
+  theme,
+  isDisabled,
+  chipTooltipLabel,
+  label,
+  ...forwardedProps
 }) => {
-  const textFieldRef = useRef(null);
-  const triggerRef = useRef(null);
-
-  // Generate a unique id for the combobox that will be used for every child components.
-  const generatedId = useId();
-  const comboboxId = htmlId || generatedId;
-  const listboxId = `${comboboxId}-popover`;
-
-  /** Generate the selected option id from the given selected id.  */
-  const currentSelectedIds = selectedIds?.map(selectedId => generateOptionId(comboboxId, selectedId.toString()));
-
-  /** Generate the state */
-  const [state, dispatch] = useReducer(reducer$1, initialState, defaultState => ({
-    ...defaultState,
-    comboboxId,
-    listboxId,
-    // a default input value can be set if needed
-    inputValue: defaultInputValue || defaultState.inputValue
-  }));
-
-  /**
-   * Return the current input value.
-   */
-  const currentInputValue = useMemo(() => {
-    // If the component is controlled and a value is already set by the parent, use this value
-    if (inputValue !== null && inputValue !== undefined) {
-      return inputValue;
-    }
-
-    // Then use the local value
-    if (state.inputValue) {
-      return state.inputValue;
-    }
-
-    // In all other cases, return an empty string.
-    return '';
-  }, [inputValue, state.inputValue]);
-
-  /** Return a memoized state */
-  const synchedState = useMemo(() => {
-    return {
-      ...state,
-      showAll: !autoFilter || state.showAll,
-      inputValue: currentInputValue,
-      status: status || state.status,
-      listboxId
-    };
-  }, [currentInputValue, listboxId, autoFilter, state, status]);
-
-  /** Props to set in the context */
-  const comboboxProviderValue = useMemo(() => ({
-    ...synchedState,
-    openOnFocus,
-    openOnClick,
-    onInputChange,
-    onOpen,
-    onSelect,
-    dispatch,
-    selectionType,
-    selectedIds: currentSelectedIds,
-    showEmptyState,
-    showErrorState,
-    translations
-  }), [synchedState, openOnFocus, openOnClick, onInputChange, onOpen, onSelect, selectionType, currentSelectedIds, showEmptyState, showErrorState, translations]);
-  return /*#__PURE__*/jsx(ComboboxRefsProvider, {
-    triggerRef: triggerRef,
-    anchorRef: textFieldRef,
-    children: /*#__PURE__*/jsx(ComboboxProvider, {
-      value: comboboxProviderValue,
-      children: children
+  const chipRefs = React__default.useRef([]);
+  const {
+    findPreviousEnabledChip
+  } = useFocusLastChipOnBackspace(chipRefs, inputRef);
+  return /*#__PURE__*/jsx(ChipGroup, {
+    role: "group",
+    "aria-label": label,
+    className: block$W(),
+    ...forwardedProps,
+    children: value?.map((v, index) => {
+      const name = getWithSelector(getOptionName, v);
+      const id = getWithSelector(getOptionId, v);
+      const onClick = () => {
+        const newValue = [...value];
+        const existingIndex = value.findIndex(vi => getWithSelector(getOptionId, vi) === id);
+        if (existingIndex === -1) {
+          return;
+        }
+        // Remove value
+        newValue.splice(existingIndex, 1);
+        onChange?.(newValue);
+      };
+      const onKeyDown = evt => {
+        if (evt.key !== 'Backspace') {
+          return;
+        }
+        // Activate (remove value) on Backspace pressed
+        onClick();
+        const previousChip = findPreviousEnabledChip(index - 1);
+        const input = inputRef?.current;
+        // Focus the previous chip or the input
+        (previousChip || input)?.focus();
+      };
+      if (!chipRefs.current[index]) {
+        chipRefs.current[index] = /*#__PURE__*/React__default.createRef();
+      }
+      const ref = chipRefs.current[index];
+      const customChip = renderChip?.(v);
+      const props = isComponentType(Chip)(customChip) ? customChip.props : undefined;
+      const chipIsDisabled = props?.isDisabled || isDisabled;
+      const chipName = typeof props?.children === 'string' ? props.children : name;
+      const tooltipLabel = chipTooltipLabel(chipName);
+      return /*#__PURE__*/jsx(Tooltip, {
+        label: !chipIsDisabled ? tooltipLabel : undefined,
+        closeMode: "hide",
+        ariaLinkMode: "aria-labelledby",
+        children: /*#__PURE__*/jsx(Chip, {
+          ...props,
+          after: /*#__PURE__*/jsx(Icon, {
+            icon: mdiClose
+          }),
+          className: element$I('chip', [props?.className]),
+          size: "s",
+          ref: ref,
+          onClick: onClick,
+          onKeyDown: onKeyDown,
+          theme: theme,
+          isDisabled: chipIsDisabled,
+          tabIndex: chipIsDisabled ? -1 : 0,
+          children: props?.children || name
+        })
+      }, id);
     })
   });
 };
 
-const SUB_COMPONENTS = {
-  /**
-   * Option to set within a combobox list.
-   *
-   * @family Combobox
-   * @param ComboboxOptionProps
-   * @returns ComboboxOption
-   */
-  Option: ComboboxOption,
-  /**
-   * Skeleton for a combobox option.
-   * A typography skeleton is rendered by default but can be overridden by passing children.
-   */
-  OptionSkeleton: ComboboxOptionSkeleton,
-  /**
-   * Section for options of a Combobox.
-   *
-   * @family Combobox
-   * @param ComboboxSectionProps
-   * @returns ComboboxSection
-   */
-  Section: ComboboxSection,
-  /**
-   * Combobox input trigger.
-   *
-   * @family Combobox
-   */
-  Input: ComboboxInput,
-  /**
-   * The listbox containing the combobox's options.
-   *
-   * @family Combobox
-   * @param ComboboxListBoxProps
-   * @returns ComboboxListBox
-   */
-  List: ComboboxListBox,
-  /**
-   * Combobox button trigger.
-   *
-   * @family Combobox
-   */
-  Button: ComboboxButton
-};
-
-/**
- *
- * A Combobox is a combination of two components:
- * * An input to enter the user's value
- * * A popover with a list of suggestions to fill the value.
- *
- * These two components are included via the Combobox.Input and Combobox.ListBox components.
- *
- * In its simplest implementation the component will automatically filter the given options
- * from the value of the input and fill the input with the textValue of the selected option.
- *
- * Props are available for more complex implementations.
- *
- * @family Combobox
- * @param ComboboxProps
- * @returns Combobox
- */
-const Combobox = Object.assign(Combobox$1, SUB_COMPONENTS);
-
 /**
  * Comment block variants.
  */
@@ -3600,7 +2249,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {
+const DEFAULT_PROPS$Y = {
   variant: CommentBlockVariant.indented
 };
 
@@ -3630,7 +2279,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$Z.variant,
+    variant = DEFAULT_PROPS$Y.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -3699,7 +2348,7 @@ const CommentBlock = forwardRef((props, ref) => {
 });
 CommentBlock.displayName = COMPONENT_NAME$15;
 CommentBlock.className = CLASSNAME$13;
-CommentBlock.defaultProps = DEFAULT_PROPS$Z;
+CommentBlock.defaultProps = DEFAULT_PROPS$Y;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -4189,6 +2838,14 @@ const DatePicker = forwardRef((props, ref) => {
 DatePicker.displayName = COMPONENT_NAME$14;
 DatePicker.className = CLASSNAME$12;
 
+const useBooleanState = defaultValue => {
+  const [booleanValue, setBoolean] = useState(defaultValue);
+  const setToFalse = useCallback(() => setBoolean(false), []);
+  const setToTrue = useCallback(() => setBoolean(true), []);
+  const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
+  return [booleanValue, setToFalse, setToTrue, toggleBoolean];
+};
+
 /**
  * Component display name.
  */
@@ -4796,7 +3453,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$X = {
   size: Size$1.big,
   disableBodyScroll: true
 };
@@ -4827,11 +3484,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$Y.size,
+    size = DEFAULT_PROPS$X.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$Y.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$X.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -4971,7 +3628,7 @@ const Dialog = forwardRef((props, ref) => {
 });
 Dialog.displayName = COMPONENT_NAME$11;
 Dialog.className = CLASSNAME$11;
-Dialog.defaultProps = DEFAULT_PROPS$Y;
+Dialog.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Component display name.
@@ -5015,7 +3672,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$W = {};
 
 /**
  * Divider component.
@@ -5038,7 +3695,7 @@ const Divider = forwardRef((props, ref) => {
 });
 Divider.displayName = COMPONENT_NAME$10;
 Divider.className = CLASSNAME$10;
-Divider.defaultProps = DEFAULT_PROPS$X;
+Divider.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Component display name.
@@ -5263,7 +3920,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$V = {
   tabIndex: -1
 };
 
@@ -5282,7 +3939,7 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$W.tabIndex,
+    tabIndex = DEFAULT_PROPS$V.tabIndex,
     ...forwardedProps
   } = props;
   const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
@@ -5298,7 +3955,7 @@ const InternalList = forwardRef((props, ref) => {
 });
 InternalList.displayName = COMPONENT_NAME$_;
 InternalList.className = CLASSNAME$_;
-InternalList.defaultProps = DEFAULT_PROPS$W;
+InternalList.defaultProps = DEFAULT_PROPS$V;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -7743,7 +6400,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$U = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -7760,24 +6417,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$V.elevation,
+    elevation = DEFAULT_PROPS$U.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$V.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$V.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$U.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$V.placement,
+    placement = DEFAULT_PROPS$U.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$V.zIndex,
+    zIndex = DEFAULT_PROPS$U.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -7863,7 +6520,7 @@ const Popover = skipRender(
 () => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$Z;
 Popover.className = CLASSNAME$Z;
-Popover.defaultProps = DEFAULT_PROPS$V;
+Popover.defaultProps = DEFAULT_PROPS$U;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -7923,7 +6580,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$T = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -7946,18 +6603,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$U.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$U.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$U.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$U.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$U.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$T.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$T.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$T.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$T.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$T.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$T.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$U.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$U.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$T.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$T.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -8003,7 +6660,7 @@ const Dropdown = forwardRef((props, ref) => {
 });
 Dropdown.displayName = COMPONENT_NAME$Y;
 Dropdown.className = CLASSNAME$Y;
-Dropdown.defaultProps = DEFAULT_PROPS$U;
+Dropdown.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Component display name.
@@ -8022,7 +6679,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$S = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -8040,7 +6697,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$T.closeMode,
+    closeMode = DEFAULT_PROPS$S.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -8157,11 +6814,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = COMPONENT_NAME$X;
 ExpansionPanel.className = CLASSNAME$X;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$T;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$S;
 
 const COMPONENT_NAME$W = 'Flag';
 const CLASSNAME$W = 'lumx-flag';
-const DEFAULT_PROPS$S = {};
+const DEFAULT_PROPS$R = {};
 const {
   block: block$N,
   element: element$B
@@ -8225,7 +6882,7 @@ const Flag = forwardRef((props, ref) => {
 });
 Flag.displayName = COMPONENT_NAME$W;
 Flag.className = CLASSNAME$W;
-Flag.defaultProps = DEFAULT_PROPS$S;
+Flag.defaultProps = DEFAULT_PROPS$R;
 
 /**
  * Defines the props of the component.
@@ -8318,7 +6975,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$Q = {
   gap: Size$1.big,
   orientation: Orientation$1.horizontal
 };
@@ -8348,8 +7005,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$R.gap,
-    orientation = DEFAULT_PROPS$R.orientation,
+    gap = DEFAULT_PROPS$Q.gap,
+    orientation = DEFAULT_PROPS$Q.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -8403,7 +7060,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$U;
 BaseGenericBlock.className = CLASSNAME$U;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$R;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$Q;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -8451,7 +7108,7 @@ const CLASSNAME$T = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * Get Heading component common props
@@ -8552,7 +7209,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$O = {};
 
 /**
  * Text component common props
@@ -8639,7 +7296,7 @@ const Text = forwardRef((props, ref) => {
 });
 Text.displayName = COMPONENT_NAME$S;
 Text.className = CLASSNAME$S;
-Text.defaultProps = DEFAULT_PROPS$P;
+Text.defaultProps = DEFAULT_PROPS$O;
 
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
@@ -8676,7 +7333,7 @@ const Heading = forwardRef((props, ref) => {
 });
 Heading.displayName = COMPONENT_NAME$T;
 Heading.className = CLASSNAME$T;
-Heading.defaultProps = DEFAULT_PROPS$Q;
+Heading.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -8727,7 +7384,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$N = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -8745,9 +7402,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$O.orientation,
+    orientation = DEFAULT_PROPS$N.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$O.wrap,
+    wrap = DEFAULT_PROPS$N.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -8765,7 +7422,7 @@ const Grid = forwardRef((props, ref) => {
 });
 Grid.displayName = COMPONENT_NAME$R;
 Grid.className = CLASSNAME$R;
-Grid.defaultProps = DEFAULT_PROPS$O;
+Grid.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Component display name.
@@ -8823,7 +7480,7 @@ const CLASSNAME$P = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {};
+const DEFAULT_PROPS$M = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -8831,9 +7488,10 @@ const DEFAULT_PROPS$N = {};
  * with a number of column that reduce when there is not enough space for each item.
  *
  * @param props Component props.
- * @return JSX element.
+ * @param ref Component ref.
+ * @return React element.
  */
-const GridColumn$1 = props => {
+const GridColumn = forwardRef((props, ref) => {
   const {
     as: Component = 'div',
     gap,
@@ -8842,13 +7500,12 @@ const GridColumn$1 = props => {
     children,
     className,
     style = {},
-    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classnames(className, CLASSNAME$P),
+    className: classNames.join(className, CLASSNAME$P),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -8857,36 +7514,6 @@ const GridColumn$1 = props => {
     },
     children: children
   });
-};
-GridColumn$1.displayName = COMPONENT_NAME$P;
-GridColumn$1.className = CLASSNAME$P;
-GridColumn$1.defaultProps = DEFAULT_PROPS$N;
-
-/**
- * Defines the props of the component.
- */
-
-// Re-export types for backward compatibility
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$M = {};
-
-/**
- * The GridColumn is a layout component that can display children in a grid
- * with custom display properties. It also comes with a responsive design,
- * with a number of column that reduce when there is not enough space for each item.
- *
- * @param props Component props.
- * @param ref Component ref.
- * @return React element.
- */
-const GridColumn = forwardRef((props, ref) => {
-  return GridColumn$1({
-    ref,
-    ...props
-  });
 });
 GridColumn.displayName = COMPONENT_NAME$P;
 GridColumn.className = CLASSNAME$P;
@@ -16677,5 +15304,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1h as CLASSNAME, COMBOBOX_OPTION_CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, ComboboxButton, ComboboxDivider, ComboboxInput, ComboboxListBox, ComboboxOption, ComboboxOptionAction, ComboboxOptionMoreInfo, ComboboxOptionSkeleton, ComboboxSection, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$16 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, LUMX_CLASSNAME, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, SUB_COMPONENTS, Select, SelectMultiple, SelectMultipleField, 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, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1d as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$15 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, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, 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, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map