@lumx/react 4.3.2-alpha.20 → 4.3.2-alpha.21

package/index.js

@@ -1,8 +1,8 @@
-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';
+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';
 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, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
+import React__default, { useState, useEffect, useMemo, useRef, useCallback, useContext, createContext, Children, useLayoutEffect, cloneElement, isValidElement, 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';
@@ -16,7 +16,7 @@ import concat from 'lodash/concat.js';
 import dropRight from 'lodash/dropRight.js';
 import partition from 'lodash/partition.js';
 import reduce from 'lodash/reduce.js';
-import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
+import { u as useDisabledStateContext, M as MovingFocusContext, a as useVirtualFocus, A as A11YLiveMessage, P as Portal, C as ClickAwayProvider } from './_internal/CzTdCnO5.js';
 import isEmpty from 'lodash/isEmpty.js';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
@@ -24,15 +24,17 @@ import memoize from 'lodash/memoize.js';
 import { mdiClose } from '@lumx/icons/esm/close.js';
 import isFunction from 'lodash/isFunction.js';
 import { mdiImageBroken } from '@lumx/icons/esm/image-broken.js';
+import noop from 'lodash/noop.js';
+import uniqueId from 'lodash/uniqueId.js';
+import castArray from 'lodash/castArray.js';
 import { mdiCheck } from '@lumx/icons/esm/check.js';
 import { mdiMinus } from '@lumx/icons/esm/minus.js';
+import { mdiInformationOutline } from '@lumx/icons/esm/information-outline.js';
 import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left.js';
 import { mdiChevronRight } from '@lumx/icons/esm/chevron-right.js';
-import castArray from 'lodash/castArray.js';
 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.js';
 import pick from 'lodash/pick.js';
 import isInteger from 'lodash/isInteger.js';
 import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline.js';
@@ -96,20 +98,20 @@ const CONFIG$1 = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1l = 'AlertDialog';
+const COMPONENT_NAME$1k = 'AlertDialog';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-alert-dialog';
+const CLASSNAME$1k = 'lumx-alert-dialog';
 const {
-  block: block$14
-} = classNames.bem(CLASSNAME$1j);
+  block: block$17
+} = classNames.bem(CLASSNAME$1k);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$1a = {
+const DEFAULT_PROPS$1b = {
   size: Size$1.tiny,
   kind: Kind$1.info
 };
@@ -130,8 +132,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$1a.kind,
-    size = DEFAULT_PROPS$1a.size,
+    kind = DEFAULT_PROPS$1b.kind,
+    size = DEFAULT_PROPS$1b.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -172,7 +174,7 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames.join(className, block$14({
+    className: classNames.join(className, block$17({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -217,9 +219,9 @@ const AlertDialog = forwardRef((props, ref) => {
     })]
   });
 });
-AlertDialog.displayName = COMPONENT_NAME$1l;
-AlertDialog.className = CLASSNAME$1j;
-AlertDialog.defaultProps = DEFAULT_PROPS$1a;
+AlertDialog.displayName = COMPONENT_NAME$1k;
+AlertDialog.className = CLASSNAME$1k;
+AlertDialog.defaultProps = DEFAULT_PROPS$1b;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -311,17 +313,17 @@ function useDisableStateProps(props) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1k = 'Autocomplete';
+const COMPONENT_NAME$1j = 'Autocomplete';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-autocomplete';
+const CLASSNAME$1j = 'lumx-autocomplete';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$19 = {
+const DEFAULT_PROPS$1a = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -343,13 +345,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$19.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$1a.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$19.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$1a.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$1a.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$1a.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -370,7 +372,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$19.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$1a.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -383,7 +385,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1i),
+    className: classNames.join(className, CLASSNAME$1j),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -423,24 +425,24 @@ const Autocomplete = forwardRef((props, ref) => {
     })]
   });
 });
-Autocomplete.displayName = COMPONENT_NAME$1k;
-Autocomplete.className = CLASSNAME$1i;
-Autocomplete.defaultProps = DEFAULT_PROPS$19;
+Autocomplete.displayName = COMPONENT_NAME$1j;
+Autocomplete.className = CLASSNAME$1j;
+Autocomplete.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1j = 'AutocompleteMultiple';
+const COMPONENT_NAME$1i = 'AutocompleteMultiple';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-autocomplete-multiple';
+const CLASSNAME$1i = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {
+const DEFAULT_PROPS$19 = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -480,8 +482,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$18.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$18.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -503,19 +505,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$18.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$19.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$18.values,
+    values = DEFAULT_PROPS$19.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1h),
+    className: classNames.join(className, CLASSNAME$1i),
     name: name,
     value: value,
     onChange: onChange,
@@ -548,28 +550,28 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     children: children
   });
 });
-AutocompleteMultiple.displayName = COMPONENT_NAME$1j;
-AutocompleteMultiple.className = CLASSNAME$1h;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$18;
+AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
+AutocompleteMultiple.className = CLASSNAME$1i;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1i = 'Avatar';
+const COMPONENT_NAME$1h = 'Avatar';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-avatar';
+const CLASSNAME$1h = 'lumx-avatar';
 const {
-  block: block$13,
-  element: element$N
-} = classNames.bem(CLASSNAME$1g);
+  block: block$16,
+  element: element$Q
+} = classNames.bem(CLASSNAME$1h);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {
+const DEFAULT_PROPS$18 = {
   size: Size$1.m
 };
 
@@ -592,7 +594,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$17.size,
+    size = DEFAULT_PROPS$18.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -600,14 +602,14 @@ const Avatar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$13({
+    className: classNames.join(className, block$16({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$N('thumbnail'),
+      className: element$Q('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -617,17 +619,17 @@ const Avatar = forwardRef((props, ref) => {
       alt: alt,
       theme: theme
     }), actions && /*#__PURE__*/jsx("div", {
-      className: element$N('actions'),
+      className: element$Q('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: element$N('badge'),
+      className: element$Q('badge'),
       children: badge
     })]
   });
 });
-Avatar.displayName = COMPONENT_NAME$1i;
-Avatar.className = CLASSNAME$1g;
-Avatar.defaultProps = DEFAULT_PROPS$17;
+Avatar.displayName = COMPONENT_NAME$1h;
+Avatar.className = CLASSNAME$1h;
+Avatar.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Alignments.
@@ -695,8 +697,6 @@ 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;
 }
@@ -857,7 +857,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$15(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -892,11 +892,11 @@ function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$P(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$15(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$15(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -905,15 +905,15 @@ function element$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$12(baseName, modifiersOrAdditionalClasses);
+      return block$15(baseName, modifiersOrAdditionalClasses);
     }
-    return block$12(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$15(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$M(baseName, elem, modifiersOrAdditionalClasses);
+      return element$P(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$M(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$P(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -925,20 +925,20 @@ function bem(baseName) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1h = 'Badge';
+const COMPONENT_NAME$1g = 'Badge';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-badge';
+const CLASSNAME$1g = 'lumx-badge';
 const {
-  block: block$11
-} = bem(CLASSNAME$1f);
+  block: block$14
+} = bem(CLASSNAME$1g);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {
+const DEFAULT_PROPS$17 = {
   color: ColorPalette.primary
 };
 
@@ -952,22 +952,22 @@ const Badge$1 = props => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$16.color,
+    color = DEFAULT_PROPS$17.color,
     ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$11({
+    className: classnames(className, block$14({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 };
-Badge$1.displayName = COMPONENT_NAME$1h;
-Badge$1.className = CLASSNAME$1f;
-Badge$1.defaultProps = DEFAULT_PROPS$16;
+Badge$1.displayName = COMPONENT_NAME$1g;
+Badge$1.className = CLASSNAME$1g;
+Badge$1.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * Defines the props of the component.
@@ -990,12 +990,12 @@ Badge.displayName = Badge$1.displayName;
 Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
-const COMPONENT_NAME$1g = 'BadgeWrapper';
-const CLASSNAME$1e = 'lumx-badge-wrapper';
+const COMPONENT_NAME$1f = 'BadgeWrapper';
+const CLASSNAME$1f = 'lumx-badge-wrapper';
 const {
-  block: block$10,
-  element: element$L
-} = bem(CLASSNAME$1e);
+  block: block$13,
+  element: element$O
+} = bem(CLASSNAME$1f);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1007,9 +1007,9 @@ const BadgeWrapper$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$10()),
+    className: classnames(className, block$13()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$L('badge'),
+      className: element$O('badge'),
       children: badge
     })]
   });
@@ -1021,8 +1021,8 @@ const BadgeWrapper = forwardRef((props, ref) => {
     ref
   });
 });
-BadgeWrapper.displayName = COMPONENT_NAME$1g;
-BadgeWrapper.className = CLASSNAME$1e;
+BadgeWrapper.displayName = COMPONENT_NAME$1f;
+BadgeWrapper.className = CLASSNAME$1f;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1070,7 +1070,7 @@ const RawClickable$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1f = 'ButtonRoot';
+const COMPONENT_NAME$1e = 'ButtonRoot';
 const BUTTON_WRAPPER_CLASSNAME = `lumx-button-wrapper`;
 const {
   block: buttonWrapperBlock
@@ -1168,7 +1168,7 @@ const ButtonRoot = props => {
     children
   });
 };
-ButtonRoot.displayName = COMPONENT_NAME$1f;
+ButtonRoot.displayName = COMPONENT_NAME$1e;
 ButtonRoot.defaultProps = {};
 
 /**
@@ -1178,20 +1178,20 @@ ButtonRoot.defaultProps = {};
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1e = 'Button';
+const COMPONENT_NAME$1d = 'Button';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-button';
+const CLASSNAME$1e = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1d);
+} = bem(CLASSNAME$1e);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {
+const DEFAULT_PROPS$16 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1205,10 +1205,10 @@ const DEFAULT_PROPS$15 = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$15.emphasis,
+    emphasis = DEFAULT_PROPS$16.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$15.size,
+    size = DEFAULT_PROPS$16.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1223,9 +1223,9 @@ const Button$1 = props => {
     variant: 'button'
   });
 };
-Button$1.displayName = COMPONENT_NAME$1e;
-Button$1.className = CLASSNAME$1d;
-Button$1.defaultProps = DEFAULT_PROPS$15;
+Button$1.displayName = COMPONENT_NAME$1d;
+Button$1.className = CLASSNAME$1e;
+Button$1.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1291,26 +1291,26 @@ const Button = forwardRef((props, ref) => {
     })
   });
 });
-Button.displayName = COMPONENT_NAME$1e;
-Button.className = CLASSNAME$1d;
-Button.defaultProps = DEFAULT_PROPS$15;
+Button.displayName = COMPONENT_NAME$1d;
+Button.className = CLASSNAME$1e;
+Button.defaultProps = DEFAULT_PROPS$16;
 
-const COMPONENT_NAME$1d = 'Icon';
+const COMPONENT_NAME$1c = 'Icon';
 const IconClassName = 'lumx-icon';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$1c = IconClassName;
+const CLASSNAME$1d = IconClassName;
 const {
-  block: block$$
-} = bem(CLASSNAME$1c);
+  block: block$12
+} = bem(CLASSNAME$1d);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {};
+const DEFAULT_PROPS$15 = {};
 
 /**
  * Icon component.
@@ -1359,7 +1359,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$$({
+    className: classnames(className, block$12({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1388,24 +1388,24 @@ const Icon$1 = props => {
     })
   });
 };
-Icon$1.displayName = COMPONENT_NAME$1d;
-Icon$1.className = CLASSNAME$1c;
-Icon$1.defaultProps = DEFAULT_PROPS$14;
+Icon$1.displayName = COMPONENT_NAME$1c;
+Icon$1.className = CLASSNAME$1d;
+Icon$1.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1c = 'IconButton';
+const COMPONENT_NAME$1b = 'IconButton';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-icon-button';
+const CLASSNAME$1c = 'lumx-icon-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$14 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1418,11 +1418,11 @@ const DEFAULT_PROPS$13 = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$13.emphasis,
+    emphasis = DEFAULT_PROPS$14.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$13.size,
+    size = DEFAULT_PROPS$14.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1441,9 +1441,9 @@ const IconButton$1 = props => {
     children: defaultChildren
   });
 };
-IconButton$1.displayName = COMPONENT_NAME$1c;
-IconButton$1.className = CLASSNAME$1b;
-IconButton$1.defaultProps = DEFAULT_PROPS$13;
+IconButton$1.displayName = COMPONENT_NAME$1b;
+IconButton$1.className = CLASSNAME$1c;
+IconButton$1.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * IconButton component.
@@ -1478,24 +1478,24 @@ const IconButton = forwardRef((props, ref) => {
     })
   });
 });
-IconButton.displayName = COMPONENT_NAME$1c;
-IconButton.className = CLASSNAME$1b;
-IconButton.defaultProps = DEFAULT_PROPS$13;
+IconButton.displayName = COMPONENT_NAME$1b;
+IconButton.className = CLASSNAME$1c;
+IconButton.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$1b = 'ButtonGroup';
+const COMPONENT_NAME$1a = 'ButtonGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-button-group';
+const CLASSNAME$1b = 'lumx-button-group';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {};
+const DEFAULT_PROPS$13 = {};
 
 /**
  * ButtonGroup component.
@@ -1511,13 +1511,13 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1a),
+    className: classnames(className, CLASSNAME$1b),
     children: children
   });
 };
-ButtonGroup$1.displayName = COMPONENT_NAME$1b;
-ButtonGroup$1.className = CLASSNAME$1a;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$12;
+ButtonGroup$1.displayName = COMPONENT_NAME$1a;
+ButtonGroup$1.className = CLASSNAME$1b;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * ButtonGroup component.
@@ -1532,17 +1532,17 @@ const ButtonGroup = forwardRef((props, ref) => {
     ...props
   });
 });
-ButtonGroup.displayName = COMPONENT_NAME$1b;
-ButtonGroup.className = CLASSNAME$1a;
-ButtonGroup.defaultProps = DEFAULT_PROPS$12;
+ButtonGroup.displayName = COMPONENT_NAME$1a;
+ButtonGroup.className = CLASSNAME$1b;
+ButtonGroup.defaultProps = DEFAULT_PROPS$13;
 
-const COMPONENT_NAME$1a = 'InputLabel';
+const COMPONENT_NAME$19 = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$19 = InputLabelClassName;
+const CLASSNAME$1a = InputLabelClassName;
 const {
-  block: block$_
-} = bem(CLASSNAME$19);
-const DEFAULT_PROPS$11 = {};
+  block: block$11
+} = bem(CLASSNAME$1a);
+const DEFAULT_PROPS$12 = {};
 
 /**
  * InputLabel component.
@@ -1562,7 +1562,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$_({
+    className: classnames(className, block$11({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1570,9 +1570,9 @@ function InputLabel$1(props) {
     children: children
   });
 }
-InputLabel$1.displayName = COMPONENT_NAME$1a;
-InputLabel$1.className = CLASSNAME$19;
-InputLabel$1.defaultProps = DEFAULT_PROPS$11;
+InputLabel$1.displayName = COMPONENT_NAME$19;
+InputLabel$1.className = CLASSNAME$1a;
+InputLabel$1.defaultProps = DEFAULT_PROPS$12;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1586,22 +1586,22 @@ const INPUT_HELPER_CONFIGURATION = {
   }
 };
 
-const COMPONENT_NAME$19 = 'InputHelper';
+const COMPONENT_NAME$18 = 'InputHelper';
 const InputHelperClassName = 'lumx-input-helper';
 
 /**
  * Defines the props of the component.
  */
 
-const CLASSNAME$18 = InputHelperClassName;
+const CLASSNAME$19 = InputHelperClassName;
 const {
-  block: block$Z
-} = bem(CLASSNAME$18);
+  block: block$10
+} = bem(CLASSNAME$19);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {
+const DEFAULT_PROPS$11 = {
   kind: Kind.info
 };
 
@@ -1612,7 +1612,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$10.kind,
+    kind = DEFAULT_PROPS$11.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1623,16 +1623,16 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$Z({
+    className: classnames(className, block$10({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: children
   });
 }
-InputHelper$1.displayName = COMPONENT_NAME$19;
-InputHelper$1.className = CLASSNAME$18;
-InputHelper$1.defaultProps = DEFAULT_PROPS$10;
+InputHelper$1.displayName = COMPONENT_NAME$18;
+InputHelper$1.className = CLASSNAME$19;
+InputHelper$1.defaultProps = DEFAULT_PROPS$11;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1643,16 +1643,16 @@ const INTERMEDIATE_STATE = 'intermediate';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$18 = 'Checkbox';
+const COMPONENT_NAME$17 = 'Checkbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-checkbox';
+const CLASSNAME$18 = 'lumx-checkbox';
 const {
-  block: block$Y,
-  element: element$K
-} = bem(CLASSNAME$17);
+  block: block$$,
+  element: element$N
+} = bem(CLASSNAME$18);
 
 /**
  * Checkbox component.
@@ -1688,7 +1688,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$Y({
+    className: classnames(className, block$$({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -1696,12 +1696,12 @@ const Checkbox$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$K('input-wrapper'),
+      className: element$N('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$K('input-native'),
+        className: element$N('input-native'),
         name: name,
         value: value,
         checked: isChecked,
@@ -1713,26 +1713,26 @@ const Checkbox$1 = props => {
         } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$K('input-placeholder'),
+        className: element$N('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$K('input-background')
+          className: element$N('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$K('input-indicator'),
+          className: element$N('input-indicator'),
           children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$K('content'),
+      className: element$N('content'),
       children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$K('label'),
+        className: element$N('label'),
         theme,
         children: label
       }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$K('helper'),
+        className: element$N('helper'),
         theme,
         children: helper
       })]
@@ -1747,7 +1747,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {};
+const DEFAULT_PROPS$10 = {};
 
 /**
  * Checkbox component.
@@ -1807,9 +1807,9 @@ const Checkbox = forwardRef((props, ref) => {
     inputId
   });
 });
-Checkbox.displayName = COMPONENT_NAME$18;
-Checkbox.className = CLASSNAME$17;
-Checkbox.defaultProps = DEFAULT_PROPS$$;
+Checkbox.displayName = COMPONENT_NAME$17;
+Checkbox.className = CLASSNAME$18;
+Checkbox.defaultProps = DEFAULT_PROPS$10;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1830,21 +1830,21 @@ function useStopPropagation(handler) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$17 = 'Chip';
+const COMPONENT_NAME$16 = 'Chip';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-chip';
+const CLASSNAME$17 = 'lumx-chip';
 const {
-  block: block$X,
-  element: element$J
-} = classNames.bem(CLASSNAME$16);
+  block: block$_,
+  element: element$M
+} = classNames.bem(CLASSNAME$17);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$$ = {
   size: Size$1.m
 };
 
@@ -1874,7 +1874,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$_.size,
+    size = DEFAULT_PROPS$$.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1905,7 +1905,7 @@ const Chip = forwardRef((props, ref) => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classNames.join(className, block$X({
+      className: classNames.join(className, block$_({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -1923,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$J('before', {
+        className: element$M('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$J('label'),
+        className: element$M('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$J('after', {
+        className: element$M('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleOnAfterClick,
@@ -1944,9 +1944,9 @@ const Chip = forwardRef((props, ref) => {
     })
   );
 });
-Chip.displayName = COMPONENT_NAME$17;
-Chip.className = CLASSNAME$16;
-Chip.defaultProps = DEFAULT_PROPS$_;
+Chip.displayName = COMPONENT_NAME$16;
+Chip.className = CLASSNAME$17;
+Chip.defaultProps = DEFAULT_PROPS$$;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -2002,17 +2002,17 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {};
+const DEFAULT_PROPS$_ = {};
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$16 = 'ChipGroup';
+const COMPONENT_NAME$15 = 'ChipGroup';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-chip-group';
+const CLASSNAME$16 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -2031,13 +2031,13 @@ const InternalChipGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$15),
+    className: classNames.join(className, CLASSNAME$16),
     children: children
   });
 });
-InternalChipGroup.displayName = COMPONENT_NAME$16;
-InternalChipGroup.className = CLASSNAME$15;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$Z;
+InternalChipGroup.displayName = COMPONENT_NAME$15;
+InternalChipGroup.className = CLASSNAME$16;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$_;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2127,11 +2127,11 @@ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$14 = 'lumx-selection-chip-group';
+const CLASSNAME$15 = 'lumx-selection-chip-group';
 const {
-  block: block$W,
-  element: element$I
-} = classNames.bem(CLASSNAME$14);
+  block: block$Z,
+  element: element$L
+} = classNames.bem(CLASSNAME$15);
 
 /**
  * SelectionChipGroup component.
@@ -2161,7 +2161,7 @@ const SelectionChipGroup = ({
   return /*#__PURE__*/jsx(ChipGroup, {
     role: "group",
     "aria-label": label,
-    className: block$W(),
+    className: block$Z(),
     ...forwardedProps,
     children: value?.map((v, index) => {
       const name = getWithSelector(getOptionName, v);
@@ -2205,7 +2205,7 @@ const SelectionChipGroup = ({
           after: /*#__PURE__*/jsx(Icon, {
             icon: mdiClose
           }),
-          className: element$I('chip', [props?.className]),
+          className: element$L('chip', [props?.className]),
           size: "s",
           ref: ref,
           onClick: onClick,
@@ -2220,6 +2220,654 @@ const SelectionChipGroup = ({
   });
 };
 
+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;
+};
+
+/** Generate the combobox option id from the combobox id and the given id */
+const generateOptionId = (comboboxId, optionId) => `${comboboxId}-option-${optionId}`;
+
+/** Verifies that the combobox registered option is an action */
+const isComboboxAction = option => Boolean(option?.isAction);
+
+/** Verifies that the combobox registered option is the option's value */
+const isComboboxValue = option => {
+  return !isComboboxAction(option);
+};
+
+const comboboxId = `combobox-${uniqueId()}`;
+const initialState = {
+  comboboxId,
+  listboxId: `${comboboxId}-popover`,
+  status: 'idle',
+  isOpen: false,
+  inputValue: '',
+  showAll: true,
+  options: {},
+  type: 'listbox',
+  optionsLength: 0
+};
+
+/** Dispatch for the combobox component */
+
+/** Context for the Combobox component */
+const ComboboxContext = /*#__PURE__*/React__default.createContext({
+  ...initialState,
+  openOnFocus: false,
+  openOnClick: false,
+  selectionType: 'single',
+  optionsLength: 0,
+  onSelect: noop,
+  onInputChange: noop,
+  onOpen: noop,
+  dispatch: noop,
+  translations: {
+    clearLabel: '',
+    tryReloadLabel: '',
+    showSuggestionsLabel: '',
+    noResultsForInputLabel: input => input || '',
+    loadingLabel: '',
+    serviceUnavailableLabel: '',
+    nbOptionsLabel: options => `${options}`
+  }
+});
+
+/** Context for a combobox section to store its unique id */
+const SectionContext = /*#__PURE__*/React__default.createContext({
+  sectionId: ''
+});
+
+/** Context to store the refs of the combobox elements */
+const ComboboxRefsContext = /*#__PURE__*/createContext({
+  triggerRef: {
+    current: null
+  },
+  anchorRef: {
+    current: null
+  }
+});
+
+/** Retrieves the combobox elements references from context */
+const useComboboxRefs = () => {
+  const refs = useContext(ComboboxRefsContext);
+  if (!refs) {
+    throw new Error('The useComboboxRefs hook must be called within a ComboboxRefsProvider');
+  }
+  return refs;
+};
+
+/** Retrieve the current combobox state and actions */
+const useCombobox = () => {
+  const comboboxContext = React__default.useContext(ComboboxContext);
+  const {
+    dispatch: movingFocusDispatch
+  } = React__default.useContext(MovingFocusContext);
+  const {
+    onSelect,
+    onInputChange,
+    onOpen,
+    dispatch,
+    inputValue,
+    ...contextValues
+  } = comboboxContext;
+  const {
+    triggerRef
+  } = useComboboxRefs();
+
+  /** Action triggered when the listBox is closed without selecting any option */
+  const handleClose = React__default.useCallback(() => {
+    dispatch({
+      type: 'CLOSE_COMBOBOX'
+    });
+    // Reset visual focus
+    movingFocusDispatch({
+      type: 'RESET_SELECTED_TAB_STOP'
+    });
+  }, [dispatch, movingFocusDispatch]);
+
+  // Handle callbacks on options mounted
+  const [optionsMountedCallbacks, setOptionsMountedCallback] = React__default.useState();
+  React__default.useEffect(() => {
+    if (comboboxContext.optionsLength > 0 && optionsMountedCallbacks?.length) {
+      const optionsArray = Object.values(comboboxContext.options);
+      // Execute callbacks
+      for (const callback of optionsMountedCallbacks) {
+        callback(optionsArray);
+      }
+      setOptionsMountedCallback(undefined);
+    }
+  }, [comboboxContext.options, comboboxContext.optionsLength, optionsMountedCallbacks]);
+
+  /** Callback for when an option is selected */
+  const handleSelected = React__default.useCallback((option, source) => {
+    if (option?.isDisabled) {
+      return;
+    }
+    if (isComboboxValue(option)) {
+      /**
+       * We only close the list if the selection type is single.
+       * If it is multiple, we want to allow the user to continue
+       * selecting multiple options.
+       */
+      if (comboboxContext.selectionType !== 'multiple') {
+        handleClose();
+      }
+      /** Call parent onSelect callback  */
+      if (onSelect) {
+        onSelect(option);
+      }
+    }
+
+    /** If the option itself has a custom action, also call it */
+    if (option?.onSelect) {
+      option.onSelect(option, source);
+    }
+
+    /** Reset focus on input */
+    if (triggerRef?.current) {
+      triggerRef.current?.focus();
+    }
+  }, [comboboxContext.selectionType, handleClose, onSelect, triggerRef]);
+
+  /** Callback for when the input must be updated */
+  const handleInputChange = React__default.useCallback((value, ...args) => {
+    // Update the local state
+    dispatch({
+      type: 'SET_INPUT_VALUE',
+      payload: value
+    });
+    // If a callback if given, call it with the value
+    if (onInputChange) {
+      onInputChange(value, ...args);
+    }
+    // Reset visual focus
+    movingFocusDispatch({
+      type: 'RESET_SELECTED_TAB_STOP'
+    });
+  }, [dispatch, movingFocusDispatch, onInputChange]);
+
+  /**
+   * Open the popover
+   *
+   * @returns a promise with the updated context once all options are mounted
+   */
+  const handleOpen = React__default.useCallback(params => {
+    /** update the local state */
+    dispatch({
+      type: 'OPEN_COMBOBOX',
+      payload: params
+    });
+    /** If a parent callback was given, trigger it with state information */
+    if (onOpen) {
+      onOpen({
+        currentValue: inputValue,
+        manual: Boolean(params?.manual)
+      });
+    }
+
+    // Promise resolving options on mount
+    return new Promise(resolve => {
+      // Append to the list of callback on options mounted
+      setOptionsMountedCallback((callbacks = []) => {
+        callbacks.push(resolve);
+        return callbacks;
+      });
+    });
+  }, [dispatch, inputValue, onOpen]);
+  return React__default.useMemo(() => ({
+    handleClose,
+    handleOpen,
+    handleInputChange,
+    handleSelected,
+    dispatch,
+    inputValue,
+    ...contextValues
+  }), [contextValues, dispatch, handleClose, handleInputChange, handleOpen, handleSelected, inputValue]);
+};
+
+/** 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$Y,
+  element: element$K
+} = 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$Y(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$K('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$K('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$K('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$K('description'),
+          typography: "caption",
+          color: "dark",
+          colorVariant: "L2",
+          children: description
+        })]
+      }), after && /*#__PURE__*/jsx(GenericBlock.Actions, {
+        as: "span",
+        role: "presentation",
+        className: element$K('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$X,
+  element: element$J
+} = 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$X({
+      skeleton: true
+    }, ['lumx-list-item', `lumx-list-item--size-${size}`, className]),
+    children: [/*#__PURE__*/jsxs("div", {
+      role: "presentation",
+      className: element$J('content', ['lumx-list-item__wrapper']),
+      children: [before && /*#__PURE__*/jsx(Text, {
+        as: "span",
+        role: "presentation",
+        className: element$J('before', ['lumx-list-item__before']),
+        children: before
+      }), content]
+    }), after && /*#__PURE__*/jsx("div", {
+      role: "presentation",
+      className: element$J('after', ['lumx-list-item__after']),
+      children: after
+    })]
+  });
+};
+
+/**
+ * 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 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];
+};
+
+const CLASSNAME$14 = 'lumx-combobox-option-more-info';
+const {
+  block: block$W,
+  element: element$I
+} = classNames.bem(CLASSNAME$14);
+
+/**
+ * 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
+ */
+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$W([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$I('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
+    })]
+  });
+};
+
 /**
  * Comment block variants.
  */
@@ -2235,7 +2883,7 @@ const CommentBlockVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$15 = 'CommentBlock';
+const COMPONENT_NAME$14 = 'CommentBlock';
 
 /**
  * Component default class name and class prefix.
@@ -2249,7 +2897,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$Z = {
   variant: CommentBlockVariant.indented
 };
 
@@ -2279,7 +2927,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$Y.variant,
+    variant = DEFAULT_PROPS$Z.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -2346,9 +2994,9 @@ const CommentBlock = forwardRef((props, ref) => {
     })]
   });
 });
-CommentBlock.displayName = COMPONENT_NAME$15;
+CommentBlock.displayName = COMPONENT_NAME$14;
 CommentBlock.className = CLASSNAME$13;
-CommentBlock.defaultProps = DEFAULT_PROPS$Y;
+CommentBlock.defaultProps = DEFAULT_PROPS$Z;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -2368,7 +3016,7 @@ const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime()
 /**
  * Component display name.
  */
-const COMPONENT_NAME$14 = 'DatePicker';
+const COMPONENT_NAME$13 = 'DatePicker';
 
 /**
  * Component default class name and class prefix.
@@ -2602,7 +3250,7 @@ const {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'DatePickerControlled';
+const COMPONENT_NAME$12 = 'DatePickerControlled';
 
 /**
  * DatePickerControlled component.
@@ -2792,7 +3440,7 @@ const DatePickerControlled = forwardRef((props, ref) => {
     })]
   });
 });
-DatePickerControlled.displayName = COMPONENT_NAME$13;
+DatePickerControlled.displayName = COMPONENT_NAME$12;
 DatePickerControlled.className = CLASSNAME$12;
 
 /**
@@ -2835,21 +3483,13 @@ const DatePicker = forwardRef((props, ref) => {
     onMonthChange: setSelectedMonth
   });
 });
-DatePicker.displayName = COMPONENT_NAME$14;
+DatePicker.displayName = COMPONENT_NAME$13;
 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.
  */
-const COMPONENT_NAME$12 = 'DatePickerField';
+const COMPONENT_NAME$11 = 'DatePickerField';
 
 /**
  * DatePickerField component.
@@ -2938,7 +3578,7 @@ const DatePickerField = forwardRef((props, ref) => {
     }) : null]
   });
 });
-DatePickerField.displayName = COMPONENT_NAME$12;
+DatePickerField.displayName = COMPONENT_NAME$11;
 
 /**
  * Optional global `window` instance (not defined when running SSR).
@@ -3439,7 +4079,7 @@ const isFooter$1 = isComponent('footer');
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'Dialog';
+const COMPONENT_NAME$10 = 'Dialog';
 
 /**
  * Component default class name and class prefix.
@@ -3453,7 +4093,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {
+const DEFAULT_PROPS$Y = {
   size: Size$1.big,
   disableBodyScroll: true
 };
@@ -3484,11 +4124,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$X.size,
+    size = DEFAULT_PROPS$Y.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$X.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$Y.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -3626,14 +4266,14 @@ const Dialog = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dialog.displayName = COMPONENT_NAME$11;
+Dialog.displayName = COMPONENT_NAME$10;
 Dialog.className = CLASSNAME$11;
-Dialog.defaultProps = DEFAULT_PROPS$X;
+Dialog.defaultProps = DEFAULT_PROPS$Y;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'Divider';
+const COMPONENT_NAME$$ = 'Divider';
 
 /**
  * Component default class name and class prefix.
@@ -3672,7 +4312,7 @@ const Divider$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {};
+const DEFAULT_PROPS$X = {};
 
 /**
  * Divider component.
@@ -3693,14 +4333,14 @@ const Divider = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Divider.displayName = COMPONENT_NAME$10;
+Divider.displayName = COMPONENT_NAME$$;
 Divider.className = CLASSNAME$10;
-Divider.defaultProps = DEFAULT_PROPS$W;
+Divider.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'DragHandle';
+const COMPONENT_NAME$_ = 'DragHandle';
 
 /**
  * Component default class name and class prefix.
@@ -3737,7 +4377,7 @@ const DragHandle = forwardRef((props, ref) => {
     })
   });
 });
-DragHandle.displayName = COMPONENT_NAME$$;
+DragHandle.displayName = COMPONENT_NAME$_;
 DragHandle.className = CLASSNAME$$;
 
 const INITIAL_INDEX = -1;
@@ -3907,7 +4547,7 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
 /**
  * Component display name.
  */
-const COMPONENT_NAME$_ = 'List';
+const COMPONENT_NAME$Z = 'List';
 
 /**
  * Component default class name and class prefix.
@@ -3920,7 +4560,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$W = {
   tabIndex: -1
 };
 
@@ -3939,7 +4579,7 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$V.tabIndex,
+    tabIndex = DEFAULT_PROPS$W.tabIndex,
     ...forwardedProps
   } = props;
   const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
@@ -3953,9 +4593,9 @@ const InternalList = forwardRef((props, ref) => {
     children: children
   });
 });
-InternalList.displayName = COMPONENT_NAME$_;
+InternalList.displayName = COMPONENT_NAME$Z;
 InternalList.className = CLASSNAME$_;
-InternalList.defaultProps = DEFAULT_PROPS$V;
+InternalList.defaultProps = DEFAULT_PROPS$W;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -6386,7 +7026,7 @@ function usePopoverStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'Popover';
+const COMPONENT_NAME$Y = 'Popover';
 
 /**
  * Component default class name and class prefix.
@@ -6400,7 +7040,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {
+const DEFAULT_PROPS$V = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -6417,24 +7057,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$U.elevation,
+    elevation = DEFAULT_PROPS$V.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$U.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$V.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$V.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$U.placement,
+    placement = DEFAULT_PROPS$V.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$U.zIndex,
+    zIndex = DEFAULT_PROPS$V.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -6506,7 +7146,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     })
   }) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$Z;
+_InnerPopover.displayName = COMPONENT_NAME$Y;
 
 /**
  * Popover component.
@@ -6518,9 +7158,9 @@ _InnerPopover.displayName = COMPONENT_NAME$Z;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$Z;
+Popover.displayName = COMPONENT_NAME$Y;
 Popover.className = CLASSNAME$Z;
-Popover.defaultProps = DEFAULT_PROPS$U;
+Popover.defaultProps = DEFAULT_PROPS$V;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -6566,7 +7206,7 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'Dropdown';
+const COMPONENT_NAME$X = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
@@ -6580,7 +7220,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$U = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6603,18 +7243,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    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,
+    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,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$T.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$T.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$T.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$U.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$U.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -6658,14 +7298,14 @@ const Dropdown = forwardRef((props, ref) => {
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$Y;
+Dropdown.displayName = COMPONENT_NAME$X;
 Dropdown.className = CLASSNAME$Y;
-Dropdown.defaultProps = DEFAULT_PROPS$T;
+Dropdown.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'ExpansionPanel';
+const COMPONENT_NAME$W = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
@@ -6679,7 +7319,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$T = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6697,7 +7337,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$S.closeMode,
+    closeMode = DEFAULT_PROPS$T.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -6812,13 +7452,13 @@ const ExpansionPanel = forwardRef((props, ref) => {
     })]
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$X;
+ExpansionPanel.displayName = COMPONENT_NAME$W;
 ExpansionPanel.className = CLASSNAME$X;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$S;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$T;
 
-const COMPONENT_NAME$W = 'Flag';
+const COMPONENT_NAME$V = 'Flag';
 const CLASSNAME$W = 'lumx-flag';
-const DEFAULT_PROPS$R = {};
+const DEFAULT_PROPS$S = {};
 const {
   block: block$N,
   element: element$B
@@ -6880,9 +7520,9 @@ const Flag = forwardRef((props, ref) => {
     Text
   });
 });
-Flag.displayName = COMPONENT_NAME$W;
+Flag.displayName = COMPONENT_NAME$V;
 Flag.className = CLASSNAME$W;
-Flag.defaultProps = DEFAULT_PROPS$R;
+Flag.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Defines the props of the component.
@@ -6891,7 +7531,7 @@ Flag.defaultProps = DEFAULT_PROPS$R;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'FlexBox';
+const COMPONENT_NAME$U = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
@@ -6955,13 +7595,13 @@ const FlexBox = forwardRef((props, ref) => {
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$V;
+FlexBox.displayName = COMPONENT_NAME$U;
 FlexBox.className = CLASSNAME$V;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'GenericBlock';
+const COMPONENT_NAME$T = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
@@ -6975,7 +7615,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$R = {
   gap: Size$1.big,
   orientation: Orientation$1.horizontal
 };
@@ -7005,8 +7645,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$Q.gap,
-    orientation = DEFAULT_PROPS$Q.orientation,
+    gap = DEFAULT_PROPS$R.gap,
+    orientation = DEFAULT_PROPS$R.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -7058,9 +7698,9 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     })]
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$U;
+BaseGenericBlock.displayName = COMPONENT_NAME$T;
 BaseGenericBlock.className = CLASSNAME$U;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$Q;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$R;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -7098,7 +7738,7 @@ const defaultContext = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'Heading';
+const COMPONENT_NAME$S = 'Heading';
 
 /**
  * Component default class name and class prefix.
@@ -7108,7 +7748,7 @@ const CLASSNAME$T = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$Q = {};
 
 /**
  * Get Heading component common props
@@ -7196,7 +7836,7 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'Text';
+const COMPONENT_NAME$R = 'Text';
 
 /**
  * Component default class name and class prefix.
@@ -7209,7 +7849,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * Text component common props
@@ -7294,9 +7934,9 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$S;
+Text.displayName = COMPONENT_NAME$R;
 Text.className = CLASSNAME$S;
-Text.defaultProps = DEFAULT_PROPS$O;
+Text.defaultProps = DEFAULT_PROPS$P;
 
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
@@ -7331,9 +7971,9 @@ const Heading = forwardRef((props, ref) => {
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$T;
+Heading.displayName = COMPONENT_NAME$S;
 Heading.className = CLASSNAME$T;
-Heading.defaultProps = DEFAULT_PROPS$P;
+Heading.defaultProps = DEFAULT_PROPS$Q;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -7371,7 +8011,7 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'Grid';
+const COMPONENT_NAME$Q = 'Grid';
 
 /**
  * Component default class name and class prefix.
@@ -7384,7 +8024,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -7402,9 +8042,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$N.orientation,
+    orientation = DEFAULT_PROPS$O.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$N.wrap,
+    wrap = DEFAULT_PROPS$O.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -7420,14 +8060,14 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$R;
+Grid.displayName = COMPONENT_NAME$Q;
 Grid.className = CLASSNAME$R;
-Grid.defaultProps = DEFAULT_PROPS$N;
+Grid.defaultProps = DEFAULT_PROPS$O;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'GridItem';
+const COMPONENT_NAME$P = 'GridItem';
 
 /**
  * Component default class name and class prefix.
@@ -7464,13 +8104,13 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$Q;
+GridItem.displayName = COMPONENT_NAME$P;
 GridItem.className = CLASSNAME$Q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'GridColumn';
+const COMPONENT_NAME$O = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
@@ -7480,7 +8120,7 @@ const CLASSNAME$P = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {};
+const DEFAULT_PROPS$N = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7488,10 +8128,9 @@ const DEFAULT_PROPS$M = {};
  * 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.
+ * @return JSX element.
  */
-const GridColumn = forwardRef((props, ref) => {
+const GridColumn$1 = props => {
   const {
     as: Component = 'div',
     gap,
@@ -7500,12 +8139,13 @@ const GridColumn = forwardRef((props, ref) => {
     children,
     className,
     style = {},
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classNames.join(className, CLASSNAME$P),
+    className: classnames(className, CLASSNAME$P),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -7514,8 +8154,38 @@ const GridColumn = forwardRef((props, ref) => {
     },
     children: children
   });
+};
+GridColumn$1.displayName = COMPONENT_NAME$O;
+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.displayName = COMPONENT_NAME$O;
 GridColumn.className = CLASSNAME$P;
 GridColumn.defaultProps = DEFAULT_PROPS$M;
 
@@ -7621,7 +8291,7 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'ImageBlock';
+const COMPONENT_NAME$N = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
@@ -7705,14 +8375,14 @@ const ImageBlock = forwardRef((props, ref) => {
     })]
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$O;
+ImageBlock.displayName = COMPONENT_NAME$N;
 ImageBlock.className = CLASSNAME$O;
 ImageBlock.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'ImageLightbox';
+const COMPONENT_NAME$M = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
@@ -8436,7 +9106,7 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$N;
+Inner.displayName = COMPONENT_NAME$M;
 Inner.className = CLASSNAME$N;
 
 /**
@@ -8453,7 +9123,7 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'InlineList';
+const COMPONENT_NAME$L = 'InlineList';
 
 /**
  * Component default class name and class prefix.
@@ -8518,7 +9188,7 @@ const InlineList = forwardRef((props, ref) => {
     })
   );
 });
-InlineList.displayName = COMPONENT_NAME$M;
+InlineList.displayName = COMPONENT_NAME$L;
 InlineList.className = CLASSNAME$M;
 InlineList.defaultProps = DEFAULT_PROPS$K;
 
@@ -8563,7 +9233,7 @@ InputLabel.defaultProps = InputLabel$1.defaultProps;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'Lightbox';
+const COMPONENT_NAME$K = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
@@ -8695,13 +9365,13 @@ const Lightbox = forwardRef((props, ref) => {
     })
   });
 });
-Lightbox.displayName = COMPONENT_NAME$L;
+Lightbox.displayName = COMPONENT_NAME$K;
 Lightbox.className = CLASSNAME$L;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'Link';
+const COMPONENT_NAME$J = 'Link';
 
 /**
  * Component default class name and class prefix.
@@ -8848,14 +9518,14 @@ const Link = forwardRef((props, ref) => {
     isDisabled: isAnyDisabled
   });
 });
-Link.displayName = COMPONENT_NAME$K;
+Link.displayName = COMPONENT_NAME$J;
 Link.className = CLASSNAME$K;
 Link.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$J = 'LinkPreview';
+const COMPONENT_NAME$I = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
@@ -8959,7 +9629,7 @@ const LinkPreview = forwardRef((props, ref) => {
     })
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$J;
+LinkPreview.displayName = COMPONENT_NAME$I;
 LinkPreview.className = CLASSNAME$J;
 LinkPreview.defaultProps = DEFAULT_PROPS$I;
 
@@ -8980,7 +9650,7 @@ const renderLink = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$I = 'ListItem';
+const COMPONENT_NAME$H = 'ListItem';
 
 /**
  * Component default class name and class prefix.
@@ -9088,14 +9758,14 @@ const ListItem = forwardRef((props, ref) => {
     })
   });
 });
-ListItem.displayName = COMPONENT_NAME$I;
+ListItem.displayName = COMPONENT_NAME$H;
 ListItem.className = CLASSNAME$I;
 ListItem.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$H = 'ListDivider';
+const COMPONENT_NAME$G = 'ListDivider';
 
 /**
  * Component default class name and class prefix.
@@ -9120,13 +9790,13 @@ const ListDivider = forwardRef((props, ref) => {
     className: classNames.join(className, CLASSNAME$H)
   });
 });
-ListDivider.displayName = COMPONENT_NAME$H;
+ListDivider.displayName = COMPONENT_NAME$G;
 ListDivider.className = CLASSNAME$H;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$G = 'ListSubheader';
+const COMPONENT_NAME$F = 'ListSubheader';
 
 /**
  * Component default class name and class prefix.
@@ -9153,13 +9823,13 @@ const ListSubheader = forwardRef((props, ref) => {
     children: children
   });
 });
-ListSubheader.displayName = COMPONENT_NAME$G;
+ListSubheader.displayName = COMPONENT_NAME$F;
 ListSubheader.className = CLASSNAME$G;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$F = 'Message';
+const COMPONENT_NAME$E = 'Message';
 
 /**
  * Component default class name and class prefix.
@@ -9242,7 +9912,7 @@ const Message$1 = props => {
     })]
   });
 };
-Message$1.displayName = COMPONENT_NAME$F;
+Message$1.displayName = COMPONENT_NAME$E;
 Message$1.className = CLASSNAME$F;
 
 /**
@@ -9258,13 +9928,13 @@ const Message = forwardRef((props, ref) => {
     ref
   });
 });
-Message.displayName = COMPONENT_NAME$F;
+Message.displayName = COMPONENT_NAME$E;
 Message.className = CLASSNAME$F;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$E = 'Mosaic';
+const COMPONENT_NAME$D = 'Mosaic';
 
 /**
  * Component default class name and class prefix.
@@ -9343,7 +10013,7 @@ const Mosaic = forwardRef((props, ref) => {
     })
   });
 });
-Mosaic.displayName = COMPONENT_NAME$E;
+Mosaic.displayName = COMPONENT_NAME$D;
 Mosaic.className = CLASSNAME$E;
 Mosaic.defaultProps = DEFAULT_PROPS$G;
 
@@ -9378,7 +10048,7 @@ const ITEM_CLASSNAME = 'lumx-navigation-item';
 /**
  * Component display name.
  */
-const COMPONENT_NAME$D = 'NavigationSection';
+const COMPONENT_NAME$C = 'NavigationSection';
 
 /**
  * Component default class name and class prefix.
@@ -9470,7 +10140,7 @@ const NavigationSection = forwardRef((props, ref) => {
     }))]
   });
 });
-NavigationSection.displayName = COMPONENT_NAME$D;
+NavigationSection.displayName = COMPONENT_NAME$C;
 NavigationSection.className = CLASSNAME$D;
 
 const {
@@ -9534,7 +10204,7 @@ const NavigationItem = Object.assign(forwardRefPolymorphic((props, ref) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$C = 'Navigation';
+const COMPONENT_NAME$B = 'Navigation';
 
 /**
  * Component default class name and class prefix.
@@ -9581,7 +10251,7 @@ const Navigation = forwardRef((props, ref) => {
     })
   });
 });
-Navigation.displayName = COMPONENT_NAME$C;
+Navigation.displayName = COMPONENT_NAME$B;
 Navigation.className = CLASSNAME$C;
 Navigation.defaultProps = DEFAULT_PROPS$F;
 
@@ -9614,7 +10284,7 @@ const NOTIFICATION_CONFIGURATION = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$B = 'Notification';
+const COMPONENT_NAME$A = 'Notification';
 
 /**
  * Component default class name and class prefix.
@@ -9716,14 +10386,14 @@ const Notification = forwardRef((props, ref) => {
     })
   });
 });
-Notification.displayName = COMPONENT_NAME$B;
+Notification.displayName = COMPONENT_NAME$A;
 Notification.className = CLASSNAME$B;
 Notification.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$A = 'PopoverDialog';
+const COMPONENT_NAME$z = 'PopoverDialog';
 
 /**
  * Component default class name and class prefix.
@@ -9774,14 +10444,14 @@ const PopoverDialog = forwardRef((props, ref) => {
     })
   });
 });
-PopoverDialog.displayName = COMPONENT_NAME$A;
+PopoverDialog.displayName = COMPONENT_NAME$z;
 PopoverDialog.className = CLASSNAME$A;
 PopoverDialog.defaultProps = DEFAULT_PROPS$D;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$z = 'PostBlock';
+const COMPONENT_NAME$y = 'PostBlock';
 
 /**
  * Component default class name and class prefix.
@@ -9875,14 +10545,14 @@ const PostBlock = forwardRef((props, ref) => {
     })]
   });
 });
-PostBlock.displayName = COMPONENT_NAME$z;
+PostBlock.displayName = COMPONENT_NAME$y;
 PostBlock.className = CLASSNAME$z;
 PostBlock.defaultProps = DEFAULT_PROPS$C;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$y = 'ProgressLinear';
+const COMPONENT_NAME$x = 'ProgressLinear';
 
 /**
  * Component default class name and class prefix.
@@ -9925,14 +10595,14 @@ const ProgressLinear = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressLinear.displayName = COMPONENT_NAME$y;
+ProgressLinear.displayName = COMPONENT_NAME$x;
 ProgressLinear.className = CLASSNAME$y;
 ProgressLinear.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$x = 'ProgressCircular';
+const COMPONENT_NAME$w = 'ProgressCircular';
 
 /**
  * Component default class name and class prefix.
@@ -9994,7 +10664,7 @@ const ProgressCircular = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressCircular.displayName = COMPONENT_NAME$x;
+ProgressCircular.displayName = COMPONENT_NAME$w;
 ProgressCircular.className = CLASSNAME$x;
 ProgressCircular.defaultProps = DEFAULT_PROPS$A;
 
@@ -10010,7 +10680,7 @@ const ProgressVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$w = 'Progress';
+const COMPONENT_NAME$v = 'Progress';
 
 /**
  * Component default class name and class prefix.
@@ -10057,7 +10727,7 @@ const Progress = forwardRef((props, ref) => {
     })]
   });
 });
-Progress.displayName = COMPONENT_NAME$w;
+Progress.displayName = COMPONENT_NAME$v;
 Progress.className = CLASSNAME$w;
 Progress.defaultProps = DEFAULT_PROPS$z;
 
@@ -10316,7 +10986,7 @@ const useRovingTabIndex = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$v = 'ProgressTracker';
+const COMPONENT_NAME$u = 'ProgressTracker';
 
 /**
  * Component default class name and class prefix.
@@ -10384,14 +11054,14 @@ const ProgressTracker = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTracker.displayName = COMPONENT_NAME$v;
+ProgressTracker.displayName = COMPONENT_NAME$u;
 ProgressTracker.className = CLASSNAME$v;
 ProgressTracker.defaultProps = DEFAULT_PROPS$x;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$u = 'ProgressTrackerStep';
+const COMPONENT_NAME$t = 'ProgressTrackerStep';
 
 /**
  * Component default class name and class prefix.
@@ -10498,14 +11168,14 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
     })]
   });
 });
-ProgressTrackerStep.displayName = COMPONENT_NAME$u;
+ProgressTrackerStep.displayName = COMPONENT_NAME$t;
 ProgressTrackerStep.className = CLASSNAME$u;
 ProgressTrackerStep.defaultProps = DEFAULT_PROPS$w;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$t = 'ProgressTrackerStepPanel';
+const COMPONENT_NAME$s = 'ProgressTrackerStepPanel';
 
 /**
  * Component default class name and class prefix.
@@ -10552,14 +11222,14 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
     children: (!state?.isLazy || isActive) && children
   });
 });
-ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
+ProgressTrackerStepPanel.displayName = COMPONENT_NAME$s;
 ProgressTrackerStepPanel.className = CLASSNAME$t;
 ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$v;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$s = 'RadioButton';
+const COMPONENT_NAME$r = 'RadioButton';
 
 /**
  * Component default class name and class prefix.
@@ -10711,14 +11381,14 @@ const RadioButton = forwardRef((props, ref) => {
     inputId
   });
 });
-RadioButton.displayName = COMPONENT_NAME$s;
+RadioButton.displayName = COMPONENT_NAME$r;
 RadioButton.className = CLASSNAME$s;
 RadioButton.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$r = 'RadioGroup';
+const COMPONENT_NAME$q = 'RadioGroup';
 
 /**
  * Component default class name and class prefix.
@@ -10750,7 +11420,7 @@ const RadioGroup$1 = props => {
     children: children
   });
 };
-RadioGroup$1.displayName = COMPONENT_NAME$r;
+RadioGroup$1.displayName = COMPONENT_NAME$q;
 RadioGroup$1.className = CLASSNAME$r;
 RadioGroup$1.defaultProps = DEFAULT_PROPS$t;
 
@@ -10778,7 +11448,7 @@ const RadioGroup = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-RadioGroup.displayName = COMPONENT_NAME$r;
+RadioGroup.displayName = COMPONENT_NAME$q;
 RadioGroup.className = CLASSNAME$r;
 
 /**
@@ -10926,7 +11596,7 @@ const SelectVariant = {
 };
 
 /** The display name of the component. */
-const COMPONENT_NAME$q = 'Select';
+const COMPONENT_NAME$p = 'Select';
 
 /** The default class name and classes prefix for this component. */
 const CLASSNAME$p = 'lumx-select';
@@ -11069,13 +11739,13 @@ const Select = forwardRef((props, ref) => {
     isEmpty: isEmpty$1
   }, ref);
 });
-Select.displayName = COMPONENT_NAME$q;
+Select.displayName = COMPONENT_NAME$p;
 Select.className = CLASSNAME$p;
 Select.defaultProps = DEFAULT_PROPS$s;
 Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
-const COMPONENT_NAME$p = 'Select';
+const COMPONENT_NAME$o = 'Select';
 
 /** The default class name and classes prefix for this component. */
 const CLASSNAME$o = 'lumx-select';
@@ -11222,14 +11892,14 @@ const SelectMultiple = forwardRef((props, ref) => {
     isMultiple: true
   }, ref);
 });
-SelectMultiple.displayName = COMPONENT_NAME$p;
+SelectMultiple.displayName = COMPONENT_NAME$o;
 SelectMultiple.className = CLASSNAME$o;
 SelectMultiple.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$o = 'SideNavigation';
+const COMPONENT_NAME$n = 'SideNavigation';
 
 /**
  * Component default class name and class prefix.
@@ -11259,13 +11929,13 @@ const SideNavigation = forwardRef((props, ref) => {
     children: content
   });
 });
-SideNavigation.displayName = COMPONENT_NAME$o;
+SideNavigation.displayName = COMPONENT_NAME$n;
 SideNavigation.className = CLASSNAME$n;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$n = 'SideNavigationItem';
+const COMPONENT_NAME$m = 'SideNavigationItem';
 
 /**
  * Component default class name and class prefix.
@@ -11374,14 +12044,14 @@ const SideNavigationItem = forwardRef((props, ref) => {
     })]
   });
 });
-SideNavigationItem.displayName = COMPONENT_NAME$n;
+SideNavigationItem.displayName = COMPONENT_NAME$m;
 SideNavigationItem.className = CLASSNAME$m;
 SideNavigationItem.defaultProps = DEFAULT_PROPS$q;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$m = 'SkeletonCircle';
+const COMPONENT_NAME$l = 'SkeletonCircle';
 
 /**
  * Component default class name and class prefix.
@@ -11433,7 +12103,7 @@ const SkeletonRectangleVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$l = 'SkeletonRectangle';
+const COMPONENT_NAME$k = 'SkeletonRectangle';
 
 /**
  * Component default class name and class prefix.
@@ -11489,7 +12159,7 @@ const SkeletonRectangle$1 = props => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$k = 'SkeletonTypography';
+const COMPONENT_NAME$j = 'SkeletonTypography';
 
 /**
  * Component default class name and class prefix.
@@ -11565,7 +12235,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonCircle.displayName = COMPONENT_NAME$m;
+SkeletonCircle.displayName = COMPONENT_NAME$l;
 SkeletonCircle.defaultProps = DEFAULT_PROPS$o;
 SkeletonCircle.className = CLASSNAME$l;
 
@@ -11606,7 +12276,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonRectangle.displayName = COMPONENT_NAME$l;
+SkeletonRectangle.displayName = COMPONENT_NAME$k;
 SkeletonRectangle.className = CLASSNAME$k;
 SkeletonRectangle.defaultProps = DEFAULT_PROPS$n;
 
@@ -11643,7 +12313,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-SkeletonTypography.displayName = COMPONENT_NAME$k;
+SkeletonTypography.displayName = COMPONENT_NAME$j;
 SkeletonTypography.defaultProps = DEFAULT_PROPS$m;
 SkeletonTypography.className = CLASSNAME$j;
 
@@ -11685,7 +12355,7 @@ const clamp = (value, min, max) => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$j = 'Slider';
+const COMPONENT_NAME$i = 'Slider';
 
 /**
  * Component default class name and class prefix.
@@ -11952,7 +12622,7 @@ const Slider = forwardRef((props, ref) => {
     })]
   });
 });
-Slider.displayName = COMPONENT_NAME$j;
+Slider.displayName = COMPONENT_NAME$i;
 Slider.className = CLASSNAME$i;
 Slider.defaultProps = DEFAULT_PROPS$l;
 
@@ -12287,7 +12957,7 @@ const useSlideFocusManagement = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$i = 'SlideshowItemGroup';
+const COMPONENT_NAME$h = 'SlideshowItemGroup';
 
 /**
  * Component default class name and class prefix.
@@ -12326,7 +12996,7 @@ const SlideshowItemGroup = forwardRef((props, ref) => {
     children: children
   });
 });
-SlideshowItemGroup.displayName = COMPONENT_NAME$i;
+SlideshowItemGroup.displayName = COMPONENT_NAME$h;
 SlideshowItemGroup.className = CLASSNAME$h;
 
 /**
@@ -12457,7 +13127,7 @@ Slideshow.defaultProps = DEFAULT_PROPS$k;
 /**
  * Component display name.
  */
-const COMPONENT_NAME$h = 'SlideshowItem';
+const COMPONENT_NAME$g = 'SlideshowItem';
 
 /**
  * Component default class name and class prefix.
@@ -12484,7 +13154,7 @@ const SlideshowItem = forwardRef((props, ref) => {
     children: children
   });
 });
-SlideshowItem.displayName = COMPONENT_NAME$h;
+SlideshowItem.displayName = COMPONENT_NAME$g;
 SlideshowItem.className = CLASSNAME$g;
 
 const isTouchDevice = () => 'ontouchstart' in window;
@@ -12547,7 +13217,7 @@ function usePaginationVisibleRange(activeIndex, slideCount) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$g = 'SlideshowControls';
+const COMPONENT_NAME$f = 'SlideshowControls';
 
 /**
  * Component default class name and class prefix.
@@ -12688,7 +13358,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
     })]
   });
 });
-InternalSlideshowControls.displayName = COMPONENT_NAME$g;
+InternalSlideshowControls.displayName = COMPONENT_NAME$f;
 InternalSlideshowControls.className = CLASSNAME$f;
 InternalSlideshowControls.defaultProps = DEFAULT_PROPS$j;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
@@ -12808,7 +13478,7 @@ const useSlideScroll = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$f = 'Slideshow';
+const COMPONENT_NAME$e = 'Slideshow';
 
 /**
  * Component default class name and class prefix.
@@ -12916,13 +13586,13 @@ const Slides = forwardRef((props, ref) => {
     }), afterSlides]
   });
 });
-Slides.displayName = COMPONENT_NAME$f;
+Slides.displayName = COMPONENT_NAME$e;
 Slides.className = CLASSNAME$e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$e = 'Switch';
+const COMPONENT_NAME$d = 'Switch';
 
 /**
  * Component default class name and class prefix.
@@ -13090,14 +13760,14 @@ const Switch = forwardRef((props, ref) => {
     inputId
   });
 });
-Switch.displayName = COMPONENT_NAME$e;
+Switch.displayName = COMPONENT_NAME$d;
 Switch.className = CLASSNAME$d;
 Switch.defaultProps = DEFAULT_PROPS$g;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$d = 'Table';
+const COMPONENT_NAME$c = 'Table';
 
 /**
  * Component default class name and class prefix.
@@ -13170,14 +13840,14 @@ const Table = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-Table.displayName = COMPONENT_NAME$d;
+Table.displayName = COMPONENT_NAME$c;
 Table.className = CLASSNAME$c;
 Table.defaultProps = DEFAULT_PROPS$f;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$c = 'TableBody';
+const COMPONENT_NAME$b = 'TableBody';
 
 /**
  * Component default class name and class prefix.
@@ -13227,7 +13897,7 @@ const TableBody = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableBody.displayName = COMPONENT_NAME$c;
+TableBody.displayName = COMPONENT_NAME$b;
 TableBody.className = CLASSNAME$b;
 
 const ThOrder = {
@@ -13249,7 +13919,7 @@ const TableCellVariant = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$b = 'TableCell';
+const COMPONENT_NAME$a = 'TableCell';
 
 /**
  * Component default class name and class prefix.
@@ -13365,14 +14035,14 @@ const TableCell = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableCell.displayName = COMPONENT_NAME$b;
+TableCell.displayName = COMPONENT_NAME$a;
 TableCell.className = CLASSNAME$a;
 TableCell.defaultProps = DEFAULT_PROPS$e;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$a = 'TableHeader';
+const COMPONENT_NAME$9 = 'TableHeader';
 
 /**
  * Component default class name and class prefix.
@@ -13427,14 +14097,14 @@ const TableHeader = forwardRef((props, ref) => {
     ...otherProps
   });
 });
-TableHeader.displayName = COMPONENT_NAME$a;
+TableHeader.displayName = COMPONENT_NAME$9;
 TableHeader.className = CLASSNAME$9;
 TableHeader.defaultProps = DEFAULT_PROPS$d;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$9 = 'TableRow';
+const COMPONENT_NAME$8 = 'TableRow';
 
 /**
  * Component default class name and class prefix.
@@ -13517,7 +14187,7 @@ const TableRow = forwardRef((props, ref) => {
     ...forwardedProps
   });
 });
-TableRow.displayName = COMPONENT_NAME$9;
+TableRow.displayName = COMPONENT_NAME$8;
 TableRow.className = CLASSNAME$8;
 TableRow.defaultProps = DEFAULT_PROPS$c;
 
@@ -13601,7 +14271,7 @@ let TabListLayout = /*#__PURE__*/function (TabListLayout) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$8 = 'TabList';
+const COMPONENT_NAME$7 = 'TabList';
 
 /**
  * Component default props.
@@ -13654,14 +14324,14 @@ const TabList = forwardRef((props, ref) => {
     })
   });
 });
-TabList.displayName = COMPONENT_NAME$8;
+TabList.displayName = COMPONENT_NAME$7;
 TabList.className = TABS_CLASSNAME;
 TabList.defaultProps = DEFAULT_PROPS$a;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$7 = 'Tab';
+const COMPONENT_NAME$6 = 'Tab';
 
 /**
  * Component default class name and class prefix.
@@ -13751,14 +14421,14 @@ const Tab = forwardRef((props, ref) => {
     })]
   });
 });
-Tab.displayName = COMPONENT_NAME$7;
+Tab.displayName = COMPONENT_NAME$6;
 Tab.className = CLASSNAME$7;
 Tab.defaultProps = DEFAULT_PROPS$9;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$6 = 'TabPanel';
+const COMPONENT_NAME$5 = 'TabPanel';
 
 /**
  * Component default class name and class prefix.
@@ -13805,14 +14475,14 @@ const TabPanel = forwardRef((props, ref) => {
     children: (!state?.isLazy || isActive) && children
   });
 });
-TabPanel.displayName = COMPONENT_NAME$6;
+TabPanel.displayName = COMPONENT_NAME$5;
 TabPanel.className = CLASSNAME$6;
 TabPanel.defaultProps = DEFAULT_PROPS$8;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$5 = 'TextField';
+const COMPONENT_NAME$4 = 'TextField';
 
 /**
  * Component default class name and class prefix.
@@ -14176,7 +14846,7 @@ const TextField = forwardRef((props, ref) => {
     })]
   });
 });
-TextField.displayName = COMPONENT_NAME$5;
+TextField.displayName = COMPONENT_NAME$4;
 TextField.className = CLASSNAME$5;
 TextField.defaultProps = DEFAULT_PROPS$5;
 
@@ -14327,7 +14997,7 @@ function calculateFocusPointStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$4 = 'Thumbnail';
+const COMPONENT_NAME$3 = 'Thumbnail';
 
 /**
  * Component default class name and class prefix.
@@ -14609,7 +15279,7 @@ const Thumbnail = forwardRef((props, ref) => {
     })
   });
 });
-Thumbnail.displayName = COMPONENT_NAME$4;
+Thumbnail.displayName = COMPONENT_NAME$3;
 Thumbnail.className = CLASSNAME$4;
 Thumbnail.defaultProps = DEFAULT_PROPS$4;
 
@@ -14653,7 +15323,7 @@ const ThumbnailObjectFit = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$3 = 'Toolbar';
+const TOOLBAR_NAME = 'Toolbar';
 
 /**
  * Component default class name and class prefix.
@@ -14662,7 +15332,7 @@ const CLASSNAME$3 = 'lumx-toolbar';
 const {
   block: block$3,
   element: element$3
-} = classNames.bem(CLASSNAME$3);
+} = bem(CLASSNAME$3);
 
 /**
  * Component default props.
@@ -14673,21 +15343,21 @@ const DEFAULT_PROPS$3 = {};
  * Toolbar component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const Toolbar = forwardRef((props, ref) => {
+const Toolbar$1 = props => {
   const {
     after,
     before,
     className,
     label,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$3({
+    className: classnames(className, block$3({
       'has-after': Boolean(after),
       'has-before': Boolean(before),
       'has-label': Boolean(label)
@@ -14703,8 +15373,26 @@ const Toolbar = forwardRef((props, ref) => {
       children: after
     })]
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Toolbar component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Toolbar = forwardRef((props, ref) => {
+  return Toolbar$1({
+    ref,
+    ...props
+  });
 });
-Toolbar.displayName = COMPONENT_NAME$3;
+Toolbar.displayName = TOOLBAR_NAME;
 Toolbar.className = CLASSNAME$3;
 Toolbar.defaultProps = DEFAULT_PROPS$3;
 
@@ -15304,5 +15992,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-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 };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1e as CLASSNAME, COMBOBOX_OPTION_CLASSNAME, COMPONENT_NAME$1d as COMPONENT_NAME, Checkbox, Chip, ChipGroup, ComboboxOption, ComboboxOptionAction, ComboboxOptionMoreInfo, ComboboxOptionSkeleton, 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, 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