@lumx/react 4.3.1-alpha.0 → 4.3.2-alpha.0

package/index.js

@@ -1,12 +1,13 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio, 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, 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, { useMemo, useState, useEffect, useRef, useCallback, useContext, createContext, useReducer, Children, useLayoutEffect, cloneElement, isValidElement } from 'react';
 import { mdiAlert } from '@lumx/icons/esm/alert';
 import { mdiAlertCircle } from '@lumx/icons/esm/alert-circle';
 import { mdiCheckCircle } from '@lumx/icons/esm/check-circle';
 import { mdiInformation } from '@lumx/icons/esm/information';
+import uniqueId from 'lodash/uniqueId';
 import { classNames, onEnterPressed, onEscapePressed, onButtonPressed, detectHorizontalSwipe } from '@lumx/core/js/utils';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import last from 'lodash/last';
@@ -16,7 +17,7 @@ import concat from 'lodash/concat';
 import dropRight from 'lodash/dropRight';
 import partition from 'lodash/partition';
 import reduce from 'lodash/reduce';
-import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
+import { u as useDisabledStateContext, M as MovingFocusContext, a as useVirtualFocusParent, b as useVirtualFocus, c as MovingFocusProvider, P as Portal, C as ClickAwayProvider } from './_internal/Ui3KfDoH.js';
 import isEmpty from 'lodash/isEmpty';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle';
@@ -26,13 +27,15 @@ import isFunction from 'lodash/isFunction';
 import { mdiImageBroken } from '@lumx/icons/esm/image-broken';
 import { mdiCheck } from '@lumx/icons/esm/check';
 import { mdiMinus } from '@lumx/icons/esm/minus';
+import { visuallyHidden, bem as bem$1 } from '@lumx/core/js/utils/classNames';
+import noop from 'lodash/noop';
+import debounce$1 from 'lodash/debounce';
+import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
+import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
+import castArray from 'lodash/castArray';
 import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left';
 import { mdiChevronRight } from '@lumx/icons/esm/chevron-right';
-import castArray from 'lodash/castArray';
 import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical';
-import { mdiChevronDown } from '@lumx/icons/esm/chevron-down';
-import { mdiChevronUp } from '@lumx/icons/esm/chevron-up';
-import noop from 'lodash/noop';
 import pick from 'lodash/pick';
 import isInteger from 'lodash/isInteger';
 import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline';
@@ -52,19 +55,16 @@ import { mdiArrowDown } from '@lumx/icons/esm/arrow-down';
 import { mdiArrowUp } from '@lumx/icons/esm/arrow-up';
 import set from 'lodash/set';
 
-let i = 0;
-
 /**
- * Generate a unique id (for use in a11y or other id based DOM linking).
+ * Generate a unique and stable id that can then safely be used as html id.
+ * This is similar to, but much simpler than, React's `useId` hook.
  *
- * (Tries to emulate React 18 useId hook, to remove once we upgrade React)
+ * Once we upgrade to React 18, this hook will be deprecated.
  */
-function useId() {
-  return React__default.useMemo(() => {
-    i += 1;
-    return `:lumx${i}:`;
-  }, []);
-}
+const useId = (prefix = 'lumx') => {
+  // A common practice to make sure ids are unique is to surround them with colons.
+  return useMemo(() => `:${uniqueId(prefix)}:`, [prefix]);
+};
 
 /**
  * React.forwardRef but re-typed to attach some custom metadata on our components.
@@ -101,15 +101,15 @@ const COMPONENT_NAME$1k = 'AlertDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-alert-dialog';
+const CLASSNAME$1m = 'lumx-alert-dialog';
 const {
-  block: block$14
-} = classNames.bem(CLASSNAME$1j);
+  block: block$18
+} = classNames.bem(CLASSNAME$1m);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$18 = {
+const DEFAULT_PROPS$16 = {
   size: Size$1.tiny,
   kind: Kind$1.info
 };
@@ -130,8 +130,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$18.kind,
-    size = DEFAULT_PROPS$18.size,
+    kind = DEFAULT_PROPS$16.kind,
+    size = DEFAULT_PROPS$16.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -172,7 +172,7 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames.join(className, block$14({
+    className: classNames.join(className, block$18({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -218,8 +218,8 @@ const AlertDialog = forwardRef((props, ref) => {
   });
 });
 AlertDialog.displayName = COMPONENT_NAME$1k;
-AlertDialog.className = CLASSNAME$1j;
-AlertDialog.defaultProps = DEFAULT_PROPS$18;
+AlertDialog.className = CLASSNAME$1m;
+AlertDialog.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Hook focusing an element when defined and `focus` boolean `true`.
@@ -316,12 +316,12 @@ const COMPONENT_NAME$1j = 'Autocomplete';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-autocomplete';
+const CLASSNAME$1l = 'lumx-autocomplete';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$17 = {
+const DEFAULT_PROPS$15 = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -343,13 +343,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$17.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$15.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$17.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$17.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$17.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$15.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$15.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$15.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -370,7 +370,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$17.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$15.shouldFocusOnClose,
     theme = defaultTheme,
     value,
     textFieldProps = {},
@@ -383,7 +383,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1i),
+    className: classNames.join(className, CLASSNAME$1l),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -424,8 +424,8 @@ const Autocomplete = forwardRef((props, ref) => {
   });
 });
 Autocomplete.displayName = COMPONENT_NAME$1j;
-Autocomplete.className = CLASSNAME$1i;
-Autocomplete.defaultProps = DEFAULT_PROPS$17;
+Autocomplete.className = CLASSNAME$1l;
+Autocomplete.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * Component display name.
@@ -435,12 +435,12 @@ const COMPONENT_NAME$1i = 'AutocompleteMultiple';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-autocomplete-multiple';
+const CLASSNAME$1k = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {
+const DEFAULT_PROPS$14 = {
   closeOnClickAway: true,
   closeOnEscape: true,
   selectedChipRender(choice, index, onClear, isDisabled) {
@@ -480,8 +480,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     chipsAlignment,
     className,
-    closeOnClickAway = DEFAULT_PROPS$16.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$16.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$14.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$14.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -503,19 +503,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$16.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$14.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$16.values,
+    values = DEFAULT_PROPS$14.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1h),
+    className: classNames.join(className, CLASSNAME$1k),
     name: name,
     value: value,
     onChange: onChange,
@@ -549,8 +549,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
   });
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
-AutocompleteMultiple.className = CLASSNAME$1h;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$16;
+AutocompleteMultiple.className = CLASSNAME$1k;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
@@ -560,16 +560,16 @@ const COMPONENT_NAME$1h = 'Avatar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-avatar';
+const CLASSNAME$1j = 'lumx-avatar';
 const {
-  block: block$13,
-  element: element$N
-} = classNames.bem(CLASSNAME$1g);
+  block: block$17,
+  element: element$R
+} = classNames.bem(CLASSNAME$1j);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {
+const DEFAULT_PROPS$13 = {
   size: Size$1.m
 };
 
@@ -592,7 +592,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$15.size,
+    size = DEFAULT_PROPS$13.size,
     theme = defaultTheme,
     thumbnailProps,
     ...forwardedProps
@@ -600,14 +600,14 @@ const Avatar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$13({
+    className: classNames.join(className, block$17({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$N('thumbnail'),
+      className: element$R('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -617,17 +617,17 @@ const Avatar = forwardRef((props, ref) => {
       alt: alt,
       theme: theme
     }), actions && /*#__PURE__*/jsx("div", {
-      className: element$N('actions'),
+      className: element$R('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: element$N('badge'),
+      className: element$R('badge'),
       children: badge
     })]
   });
 });
 Avatar.displayName = COMPONENT_NAME$1h;
-Avatar.className = CLASSNAME$1g;
-Avatar.defaultProps = DEFAULT_PROPS$15;
+Avatar.className = CLASSNAME$1j;
+Avatar.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * Component display name.
@@ -637,15 +637,15 @@ const COMPONENT_NAME$1g = 'Badge';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1f = 'lumx-badge';
+const CLASSNAME$1i = 'lumx-badge';
 const {
-  block: block$12
-} = classNames.bem(CLASSNAME$1f);
+  block: block$16
+} = classNames.bem(CLASSNAME$1i);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {
+const DEFAULT_PROPS$12 = {
   color: ColorPalette$1.primary
 };
 
@@ -660,30 +660,30 @@ const Badge = forwardRef((props, ref) => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$14.color,
+    color = DEFAULT_PROPS$12.color,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$12({
+    className: classNames.join(className, block$16({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 });
 Badge.displayName = COMPONENT_NAME$1g;
-Badge.className = CLASSNAME$1f;
-Badge.defaultProps = DEFAULT_PROPS$14;
+Badge.className = CLASSNAME$1i;
+Badge.defaultProps = DEFAULT_PROPS$12;
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-badge-wrapper';
+const CLASSNAME$1h = 'lumx-badge-wrapper';
 const {
-  block: block$11,
-  element: element$M
-} = classNames.bem(CLASSNAME$1e);
+  block: block$15,
+  element: element$Q
+} = classNames.bem(CLASSNAME$1h);
 const BadgeWrapper = forwardRef((props, ref) => {
   const {
     badge,
@@ -694,15 +694,15 @@ const BadgeWrapper = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$11()),
+    className: classNames.join(className, block$15()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$M('badge'),
+      className: element$Q('badge'),
       children: badge
     })]
   });
 });
 BadgeWrapper.displayName = 'BadgeWrapper';
-BadgeWrapper.className = CLASSNAME$1e;
+BadgeWrapper.className = CLASSNAME$1h;
 
 /**
  * Alignments.
@@ -764,8 +764,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;
 }
@@ -926,7 +924,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$14(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -961,11 +959,11 @@ function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$P(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$14(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$14(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -974,15 +972,15 @@ function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$10(baseName, modifiersOrAdditionalClasses);
+      return block$14(baseName, modifiersOrAdditionalClasses);
     }
-    return block$10(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$14(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$L(baseName, elem, modifiersOrAdditionalClasses);
+      return element$P(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$L(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$P(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -1150,15 +1148,15 @@ const COMPONENT_NAME$1e = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-button';
+const CLASSNAME$1g = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1d);
+} = bem(CLASSNAME$1g);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$11 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1172,10 +1170,10 @@ const DEFAULT_PROPS$13 = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$13.emphasis,
+    emphasis = DEFAULT_PROPS$11.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$13.size,
+    size = DEFAULT_PROPS$11.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1191,8 +1189,8 @@ const Button$1 = props => {
   });
 };
 Button$1.displayName = COMPONENT_NAME$1e;
-Button$1.className = CLASSNAME$1d;
-Button$1.defaultProps = DEFAULT_PROPS$13;
+Button$1.className = CLASSNAME$1g;
+Button$1.defaultProps = DEFAULT_PROPS$11;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1259,8 +1257,8 @@ const Button = forwardRef((props, ref) => {
   });
 });
 Button.displayName = COMPONENT_NAME$1e;
-Button.className = CLASSNAME$1d;
-Button.defaultProps = DEFAULT_PROPS$13;
+Button.className = CLASSNAME$1g;
+Button.defaultProps = DEFAULT_PROPS$11;
 
 const COMPONENT_NAME$1d = 'Icon';
 const IconClassName = 'lumx-icon';
@@ -1269,15 +1267,15 @@ const IconClassName = 'lumx-icon';
  * Defines the props of the component.
  */
 
-const CLASSNAME$1c = IconClassName;
+const CLASSNAME$1f = IconClassName;
 const {
-  block: block$$
-} = bem(CLASSNAME$1c);
+  block: block$13
+} = bem(CLASSNAME$1f);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {};
+const DEFAULT_PROPS$10 = {};
 
 /**
  * Icon component.
@@ -1326,7 +1324,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$$({
+    className: classnames(className, block$13({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1356,8 +1354,8 @@ const Icon$1 = props => {
   });
 };
 Icon$1.displayName = COMPONENT_NAME$1d;
-Icon$1.className = CLASSNAME$1c;
-Icon$1.defaultProps = DEFAULT_PROPS$12;
+Icon$1.className = CLASSNAME$1f;
+Icon$1.defaultProps = DEFAULT_PROPS$10;
 
 /**
  * Component display name.
@@ -1367,12 +1365,12 @@ const COMPONENT_NAME$1c = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-icon-button';
+const CLASSNAME$1e = 'lumx-icon-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$$ = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1385,11 +1383,11 @@ const DEFAULT_PROPS$11 = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$11.emphasis,
+    emphasis = DEFAULT_PROPS$$.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$11.size,
+    size = DEFAULT_PROPS$$.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1409,8 +1407,8 @@ const IconButton$1 = props => {
   });
 };
 IconButton$1.displayName = COMPONENT_NAME$1c;
-IconButton$1.className = CLASSNAME$1b;
-IconButton$1.defaultProps = DEFAULT_PROPS$11;
+IconButton$1.className = CLASSNAME$1e;
+IconButton$1.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * IconButton component.
@@ -1446,8 +1444,8 @@ const IconButton = forwardRef((props, ref) => {
   });
 });
 IconButton.displayName = COMPONENT_NAME$1c;
-IconButton.className = CLASSNAME$1b;
-IconButton.defaultProps = DEFAULT_PROPS$11;
+IconButton.className = CLASSNAME$1e;
+IconButton.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Component display name.
@@ -1457,12 +1455,12 @@ const COMPONENT_NAME$1b = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-button-group';
+const CLASSNAME$1d = 'lumx-button-group';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {};
+const DEFAULT_PROPS$_ = {};
 
 /**
  * ButtonGroup component.
@@ -1478,13 +1476,13 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1a),
+    className: classnames(className, CLASSNAME$1d),
     children: children
   });
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1b;
-ButtonGroup$1.className = CLASSNAME$1a;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$10;
+ButtonGroup$1.className = CLASSNAME$1d;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$_;
 
 /**
  * ButtonGroup component.
@@ -1500,16 +1498,16 @@ const ButtonGroup = forwardRef((props, ref) => {
   });
 });
 ButtonGroup.displayName = COMPONENT_NAME$1b;
-ButtonGroup.className = CLASSNAME$1a;
-ButtonGroup.defaultProps = DEFAULT_PROPS$10;
+ButtonGroup.className = CLASSNAME$1d;
+ButtonGroup.defaultProps = DEFAULT_PROPS$_;
 
 const COMPONENT_NAME$1a = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$19 = InputLabelClassName;
+const CLASSNAME$1c = InputLabelClassName;
 const {
-  block: block$_
-} = bem(CLASSNAME$19);
-const DEFAULT_PROPS$$ = {};
+  block: block$12
+} = bem(CLASSNAME$1c);
+const DEFAULT_PROPS$Z = {};
 
 /**
  * InputLabel component.
@@ -1529,7 +1527,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$_({
+    className: classnames(className, block$12({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1538,8 +1536,8 @@ function InputLabel$1(props) {
   });
 }
 InputLabel$1.displayName = COMPONENT_NAME$1a;
-InputLabel$1.className = CLASSNAME$19;
-InputLabel$1.defaultProps = DEFAULT_PROPS$$;
+InputLabel$1.className = CLASSNAME$1c;
+InputLabel$1.defaultProps = DEFAULT_PROPS$Z;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1560,15 +1558,15 @@ const InputHelperClassName = 'lumx-input-helper';
  * Defines the props of the component.
  */
 
-const CLASSNAME$18 = InputHelperClassName;
+const CLASSNAME$1b = InputHelperClassName;
 const {
-  block: block$Z
-} = bem(CLASSNAME$18);
+  block: block$11
+} = bem(CLASSNAME$1b);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {
+const DEFAULT_PROPS$Y = {
   kind: Kind.info
 };
 
@@ -1579,7 +1577,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$_.kind,
+    kind = DEFAULT_PROPS$Y.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1590,7 +1588,7 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$Z({
+    className: classnames(className, block$11({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -1598,8 +1596,8 @@ function InputHelper$1(props) {
   });
 }
 InputHelper$1.displayName = COMPONENT_NAME$19;
-InputHelper$1.className = CLASSNAME$18;
-InputHelper$1.defaultProps = DEFAULT_PROPS$_;
+InputHelper$1.className = CLASSNAME$1b;
+InputHelper$1.defaultProps = DEFAULT_PROPS$Y;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1615,11 +1613,11 @@ const COMPONENT_NAME$18 = 'Checkbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-checkbox';
+const CLASSNAME$1a = 'lumx-checkbox';
 const {
-  block: block$Y,
-  element: element$K
-} = bem(CLASSNAME$17);
+  block: block$10,
+  element: element$O
+} = bem(CLASSNAME$1a);
 
 /**
  * Checkbox component.
@@ -1655,7 +1653,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$Y({
+    className: classnames(className, block$10({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -1663,12 +1661,12 @@ const Checkbox$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$K('input-wrapper'),
+      className: element$O('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$K('input-native'),
+        className: element$O('input-native'),
         name: name,
         value: value,
         checked: isChecked,
@@ -1680,26 +1678,26 @@ const Checkbox$1 = props => {
         } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$K('input-placeholder'),
+        className: element$O('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$K('input-background')
+          className: element$O('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$K('input-indicator'),
+          className: element$O('input-indicator'),
           children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$K('content'),
+      className: element$O('content'),
       children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$K('label'),
+        className: element$O('label'),
         theme,
         children: label
       }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$K('helper'),
+        className: element$O('helper'),
         theme,
         children: helper
       })]
@@ -1714,7 +1712,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Z = {};
+const DEFAULT_PROPS$X = {};
 
 /**
  * Checkbox component.
@@ -1775,8 +1773,8 @@ const Checkbox = forwardRef((props, ref) => {
   });
 });
 Checkbox.displayName = COMPONENT_NAME$18;
-Checkbox.className = CLASSNAME$17;
-Checkbox.defaultProps = DEFAULT_PROPS$Z;
+Checkbox.className = CLASSNAME$1a;
+Checkbox.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1802,16 +1800,16 @@ const COMPONENT_NAME$17 = 'Chip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-chip';
+const CLASSNAME$19 = 'lumx-chip';
 const {
-  block: block$X,
-  element: element$J
-} = classNames.bem(CLASSNAME$16);
+  block: block$$,
+  element: element$N
+} = classNames.bem(CLASSNAME$19);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$W = {
   size: Size$1.m
 };
 
@@ -1841,7 +1839,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$Y.size,
+    size = DEFAULT_PROPS$W.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1872,7 +1870,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,
@@ -1890,19 +1888,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$N('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$J('label'),
+        className: element$N('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$N('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleOnAfterClick,
@@ -1912,8 +1910,8 @@ const Chip = forwardRef((props, ref) => {
   );
 });
 Chip.displayName = COMPONENT_NAME$17;
-Chip.className = CLASSNAME$16;
-Chip.defaultProps = DEFAULT_PROPS$Y;
+Chip.className = CLASSNAME$19;
+Chip.defaultProps = DEFAULT_PROPS$W;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -1969,7 +1967,7 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$V = {};
 
 /**
  * Component display name.
@@ -1979,7 +1977,7 @@ const COMPONENT_NAME$16 = 'ChipGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-chip-group';
+const CLASSNAME$18 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -1998,13 +1996,13 @@ const InternalChipGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$15),
+    className: classNames.join(className, CLASSNAME$18),
     children: children
   });
 });
 InternalChipGroup.displayName = COMPONENT_NAME$16;
-InternalChipGroup.className = CLASSNAME$15;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$X;
+InternalChipGroup.className = CLASSNAME$18;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$V;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2069,124 +2067,1645 @@ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
         return;
       }
 
-      // Prevent default backspace behavior and event bubbling
-      evt.stopPropagation();
-      evt.preventDefault();
+      // Prevent default backspace behavior and event bubbling
+      evt.stopPropagation();
+      evt.preventDefault();
+
+      // Focus the last enabled chip (if any exists)
+      const lastChip = findPreviousEnabledChip();
+      lastChip?.focus();
+    };
+
+    // Attach keyboard event listener
+    input.addEventListener('keydown', onKeyDown);
+
+    // Cleanup listener on unmount
+    return () => {
+      input.removeEventListener('keydown', onKeyDown);
+    };
+  }, [inputRef, findPreviousEnabledChip]);
+  return {
+    findPreviousEnabledChip
+  };
+}
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$17 = 'lumx-selection-chip-group';
+const {
+  block: block$_,
+  element: element$M
+} = classNames.bem(CLASSNAME$17);
+
+/**
+ * SelectionChipGroup component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SelectionChipGroup = ({
+  onChange,
+  value,
+  getOptionId,
+  getOptionName,
+  inputRef,
+  inputLabel,
+  renderChip,
+  theme,
+  isDisabled,
+  chipTooltipLabel,
+  label,
+  ...forwardedProps
+}) => {
+  const chipRefs = React__default.useRef([]);
+  const {
+    findPreviousEnabledChip
+  } = useFocusLastChipOnBackspace(chipRefs, inputRef);
+  return /*#__PURE__*/jsx(ChipGroup, {
+    role: "group",
+    "aria-label": label,
+    className: block$_(),
+    ...forwardedProps,
+    children: value?.map((v, index) => {
+      const name = getWithSelector(getOptionName, v);
+      const id = getWithSelector(getOptionId, v);
+      const onClick = () => {
+        const newValue = [...value];
+        const existingIndex = value.findIndex(vi => getWithSelector(getOptionId, vi) === id);
+        if (existingIndex === -1) {
+          return;
+        }
+        // Remove value
+        newValue.splice(existingIndex, 1);
+        onChange?.(newValue);
+      };
+      const onKeyDown = evt => {
+        if (evt.key !== 'Backspace') {
+          return;
+        }
+        // Activate (remove value) on Backspace pressed
+        onClick();
+        const previousChip = findPreviousEnabledChip(index - 1);
+        const input = inputRef?.current;
+        // Focus the previous chip or the input
+        (previousChip || input)?.focus();
+      };
+      if (!chipRefs.current[index]) {
+        chipRefs.current[index] = /*#__PURE__*/React__default.createRef();
+      }
+      const ref = chipRefs.current[index];
+      const customChip = renderChip?.(v);
+      const props = isComponentType(Chip)(customChip) ? customChip.props : undefined;
+      const chipIsDisabled = props?.isDisabled || isDisabled;
+      const chipName = typeof props?.children === 'string' ? props.children : name;
+      const tooltipLabel = chipTooltipLabel(chipName);
+      return /*#__PURE__*/jsx(Tooltip, {
+        label: !chipIsDisabled ? tooltipLabel : undefined,
+        closeMode: "hide",
+        ariaLinkMode: "aria-labelledby",
+        children: /*#__PURE__*/jsx(Chip, {
+          ...props,
+          after: /*#__PURE__*/jsx(Icon, {
+            icon: mdiClose
+          }),
+          className: element$M('chip', [props?.className]),
+          size: "s",
+          ref: ref,
+          onClick: onClick,
+          onKeyDown: onKeyDown,
+          theme: theme,
+          isDisabled: chipIsDisabled,
+          tabIndex: chipIsDisabled ? -1 : 0,
+          children: props?.children || name
+        })
+      }, id);
+    })
+  });
+};
+
+/** Context to store the refs of the combobox elements */
+const ComboboxRefsContext = /*#__PURE__*/createContext({
+  triggerRef: {
+    current: null
+  },
+  anchorRef: {
+    current: null
+  }
+});
+/** Provider to store the required refs for the Combobox */
+const ComboboxRefsProvider = ({
+  triggerRef,
+  anchorRef,
+  children
+}) => {
+  const value = useMemo(() => ({
+    triggerRef,
+    anchorRef
+  }), [triggerRef, anchorRef]);
+  return /*#__PURE__*/jsx(ComboboxRefsContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+/** 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;
+};
+
+/** 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
+};
+
+/** Actions when the combobox opens. */
+const OPEN_COMBOBOX = (state, action) => {
+  const {
+    manual
+  } = action.payload || {};
+  // If the combobox was manually opened, show all suggestions
+  return {
+    ...state,
+    showAll: Boolean(manual),
+    isOpen: true
+  };
+};
+
+/** Actions when the combobox closes */
+const CLOSE_COMBOBOX = state => {
+  return {
+    ...state,
+    showAll: true,
+    isOpen: false
+  };
+};
+
+/** Actions on input update. */
+const SET_INPUT_VALUE = (state, action) => {
+  return {
+    ...state,
+    inputValue: action.payload,
+    // When the user is changing the value, show only values that are related to the input value.
+    showAll: false,
+    isOpen: true
+  };
+};
+
+/** Register an option to the state */
+const ADD_OPTION = (state, action) => {
+  const {
+    id,
+    option
+  } = action.payload;
+  const {
+    options
+  } = state;
+  if (options[id]) {
+    // Option already exists, return state unchanged
+    return state;
+  }
+  const newOptions = {
+    ...options,
+    [id]: option
+  };
+  let newType = state.type;
+  if (isComboboxAction(option)) {
+    newType = 'grid';
+  }
+  let newOptionsLength = state.optionsLength;
+  if (isComboboxValue(option)) {
+    newOptionsLength += 1;
+  }
+  return {
+    ...state,
+    options: newOptions,
+    type: newType,
+    optionsLength: newOptionsLength
+  };
+};
+
+/** Remove an option from the state */
+const REMOVE_OPTION = (state, action) => {
+  const {
+    id
+  } = action.payload;
+  const {
+    options
+  } = state;
+  const option = options[id];
+  if (!options[id]) {
+    // Option doesn't exist, return state unchanged
+    return state;
+  }
+  const newOptions = {
+    ...options
+  };
+  delete newOptions[id];
+  let newOptionsLength = state.optionsLength;
+  if (isComboboxValue(option)) {
+    newOptionsLength -= 1;
+  }
+  return {
+    ...state,
+    options: newOptions,
+    optionsLength: newOptionsLength
+  };
+};
+
+/** Reducers for each action type: */
+const REDUCERS = {
+  OPEN_COMBOBOX,
+  CLOSE_COMBOBOX,
+  SET_INPUT_VALUE,
+  ADD_OPTION,
+  REMOVE_OPTION
+};
+
+/** Main reducer */
+const reducer$1 = (state, action) => {
+  return REDUCERS[action.type]?.(state, action) || state;
+};
+
+/** 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: ''
+});
+
+/** 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]);
+};
+
+/**
+ * Provide props for the semantic and behaviors the combobox trigger.
+ *
+ *
+ */
+function useComboboxTrigger({
+  context,
+  refs,
+  onBlur,
+  onFocus,
+  onKeyDown
+}) {
+  const {
+    comboboxId,
+    listboxId,
+    isOpen,
+    options,
+    optionsLength,
+    selectedIds,
+    openOnFocus,
+    handleClose,
+    handleOpen,
+    handleSelected,
+    showEmptyState = false,
+    showErrorState = false,
+    status
+  } = context;
+  const highlightedId = useVirtualFocusParent(refs.triggerRef);
+  const {
+    dispatch: movingFocusDispatch
+  } = React__default.useContext(MovingFocusContext);
+  const isErrorStateDisplayed = showErrorState && isOpen && status === 'error';
+  const isEmptyStateDisplayed = showEmptyState && isOpen && status === 'idle' && optionsLength === 0;
+  const showPopover = isOpen && optionsLength > 0 || isEmptyStateDisplayed || isErrorStateDisplayed;
+
+  /**
+   * A debounce close to use to leave time for the
+   * listbox to process things before closing.
+   * This can be useful when clicking an option to leave time for the
+   * event to be processed before closing the popover.
+   */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const debouncedClose = React__default.useCallback(debounce$1(handleClose, 200), []);
+
+  /** Cleanup any ongoing cleanup */
+  React__default.useEffect(() => {
+    return () => {
+      if (debouncedClose?.cancel) {
+        debouncedClose.cancel();
+      }
+    };
+  }, [debouncedClose]);
+  const handleBlur = React__default.useCallback(event => {
+    debouncedClose();
+    if (onBlur) {
+      onBlur(event);
+    }
+  }, [debouncedClose, onBlur]);
+
+  /** Actions triggered when the input field is focused */
+  const handleFocus = event => {
+    // If the field is refocused in the process of closing, cancel close
+    if (debouncedClose?.cancel) {
+      debouncedClose.cancel();
+    }
+    if (onFocus) {
+      onFocus(event);
+    }
+    /**
+     * Only set the open on focus if the combobox isn't already opened.
+     * This avoids the popover re-opening when an option is selected and the
+     * field is refocused
+     */
+    if (openOnFocus && !showPopover) {
+      handleOpen({
+        manual: true
+      });
+    }
+  };
+  const handleClick = () => {
+    handleOpen({
+      manual: true
+    });
+  };
+
+  /**
+   * Keyboard shortcut management following the WAI APG pattern
+   * https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/#kbd_label
+   */
+  const handleKeyDown = React__default.useCallback(async event => {
+    const {
+      key,
+      altKey
+    } = event;
+
+    /**
+     * On Enter key
+     * * Select option that is currently highlighted, if any
+     * * Close suggestions, event if none is highlighted
+     */
+    if (event.key === 'Enter') {
+      if (!showPopover) {
+        return;
+      }
+      if (highlightedId) {
+        // prevent any potential form submission
+        event.preventDefault();
+        const option = options[highlightedId];
+        handleSelected(option, 'keyboard');
+      } else {
+        handleClose();
+      }
+      return;
+    }
+
+    /**
+     * On arrow up/down
+     * * If popover is already opened, do nothing
+     * * If alt key pressed, show the listbox without focusing an option
+     * * If arrow Up is pressed, select last option
+     * * If arrow Down is pressed, select first option
+     * */
+    if (key === 'ArrowDown' || key === 'ArrowUp') {
+      if (showPopover) {
+        return;
+      }
+
+      /** Open the listbox */
+      const listBoxOptions = await handleOpen({
+        manual: true
+      });
+      if (!listBoxOptions) {
+        return;
+      }
+
+      /**
+       * If alt key is pressed, only open without changing visual focus
+       * as per WAI Guidelines
+       */
+      if (!altKey) {
+        /** If a selected id is set, set it as current tabstop */
+        if (selectedIds?.length) {
+          movingFocusDispatch({
+            type: 'SELECT_TAB_STOP',
+            payload: {
+              id: selectedIds?.[0],
+              type: 'keyboard'
+            }
+          });
+        } else {
+          /** Focus either the first or last item depending on the keyboard arrow pressed */
+          movingFocusDispatch({
+            type: 'KEY_NAV',
+            payload: {
+              ctrlKey: false,
+              key: key === 'ArrowUp' ? 'End' : 'Home'
+            }
+          });
+        }
+      }
+      return;
+    }
+
+    // Forward event
+    onKeyDown?.(event);
+  }, [onKeyDown, showPopover, highlightedId, options, handleSelected, handleClose, handleOpen, selectedIds, movingFocusDispatch]);
+  return {
+    id: comboboxId,
+    role: 'combobox',
+    'aria-activedescendant': showPopover && highlightedId ? highlightedId : '',
+    'aria-controls': listboxId,
+    'aria-owns': listboxId,
+    'aria-expanded': showPopover,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  };
+}
+
+/** Is printable character key press */
+const isTypeEvent = ({
+  key,
+  altKey,
+  ctrlKey,
+  metaKey
+}) => key.length === 1 && key !== ' ' && !altKey && !ctrlKey && !metaKey;
+
+/**
+ * Provide props for the semantic and behaviors the combobox button trigger
+ *
+ * Overrides the useComboboxTrigger() props & behavior to add a jump to option
+ * on printable character key down.
+ */
+function useComboboxButton(args) {
+  const {
+    context: {
+      handleOpen
+    },
+    onKeyDown: parentOnKeyDown
+  } = args;
+  const {
+    dispatch: movingFocusDispatch,
+    state: {
+      selectedId: highlightedId
+    }
+  } = React__default.useContext(MovingFocusContext);
+  const searchValueRef = React__default.useRef('');
+  const searchTimeoutRef = React__default.useRef();
+  const onKeyDown = React__default.useMemo(() => {
+    function clearSearchTimeout() {
+      const searchTimeout = searchTimeoutRef.current;
+      if (!searchTimeout) {
+        return;
+      }
+      clearTimeout(searchTimeout);
+      searchTimeoutRef.current = undefined;
+    }
+    function clearSearch() {
+      searchValueRef.current = '';
+      clearSearchTimeout();
+    }
+    return async event => {
+      if (!isTypeEvent(event)) {
+        // Forward key down event
+        parentOnKeyDown?.(event);
+        return undefined;
+      }
+      event.stopPropagation();
+
+      // Clear current search timeout
+      clearSearchTimeout();
+
+      // Open combobox and wait for options to mount
+      const options = await handleOpen({
+        manual: false
+      });
+      const optionArray = options && Object.values(options);
+      if (!optionArray?.length) {
+        return undefined;
+      }
+
+      // Append key to current search
+      searchValueRef.current += event.key.toLowerCase();
+      const searchValue = searchValueRef.current;
+
+      // Clear search after 500ms
+      searchTimeoutRef.current = setTimeout(clearSearch, 500);
+
+      // Search is containing all the same letters (ex: aaaa)
+      const allTheSameLetters = searchValue.split('').every(letter => letter === searchValue[0]);
+
+      // start from currently selected option
+      let startIndex = optionArray.findIndex(option => option.generatedId === highlightedId);
+      if (startIndex === -1) {
+        startIndex = 0;
+      }
+      let index = startIndex;
+      do {
+        // Increment index and loop around to 0 if we get over the array length
+        index = (index + 1) % optionArray.length;
+        const option = optionArray[index];
+        // Search by text value or fallback on id.
+        const optionText = isComboboxValue(option) ? option?.textValue || option?.id : null;
+        if (isComboboxValue(option) && optionText) {
+          const optionTextValue = optionText.toLowerCase();
+
+          // Search on first letter if search is all the same letters
+          const searchText = allTheSameLetters ? searchValue[0] : searchValue;
+
+          // Option text value starts with searched text
+          if (optionTextValue.startsWith(searchText)) {
+            movingFocusDispatch({
+              type: 'SELECT_TAB_STOP',
+              payload: {
+                id: option.generatedId,
+                type: 'keyboard'
+              }
+            });
+            break;
+          }
+        }
+      } while (index !== startIndex);
+      return clearSearchTimeout;
+    };
+  }, [handleOpen, parentOnKeyDown, highlightedId, movingFocusDispatch]);
+  return useComboboxTrigger({
+    ...args,
+    onKeyDown
+  });
+}
+
+/**
+ * Combobox button trigger.
+ *
+ * @family Combobox
+ */
+const ComboboxButton = forwardRef((props, ref) => {
+  const {
+    as,
+    label,
+    onFocus,
+    onBlur,
+    labelDisplayMode = 'show-selection',
+    ...forwardedProps
+  } = props;
+  const refs = useComboboxRefs();
+  const context = useCombobox();
+  const buttonProps = useComboboxButton({
+    context,
+    refs,
+    onBlur,
+    onFocus
+  });
+  const Element = as || Button;
+  const showSelection = labelDisplayMode === 'show-selection';
+  const tooltipOnly = labelDisplayMode === 'show-tooltip';
+  const selectionLabel = showSelection && context.selectedIds?.length && context.inputValue;
+  let content = null;
+  if (!tooltipOnly) {
+    // Display selection label or label
+    content = selectionLabel || label;
+  }
+  const hideTooltip =
+  // Hide tooltip if the displayed label and tooltip label are the same
+  label === content ||
+  // Hide tooltip when the combobox is open
+  context.isOpen;
+  const mergedRefs = useMergeRefs(ref, refs.triggerRef, refs.anchorRef);
+  return /*#__PURE__*/jsx(Tooltip, {
+    className: hideTooltip ? visuallyHidden() : undefined,
+    label: label,
+    closeMode: "hide",
+    ariaLinkMode: "aria-labelledby",
+    children: /*#__PURE__*/jsx(Element, {
+      ref: mergedRefs,
+      ...forwardedProps,
+      ...buttonProps,
+      children: content
+    })
+  });
+});
+
+/**
+ * Provide props for the semantic and behaviors the combobox input trigger
+ *
+ * Overrides the useComboboxTrigger() props & behavior to prevent open on click
+ * if `openOnFocus` is not enabled.
+ */
+function useComboboxInput({
+  onKeyDown: propsOnKeyDown,
+  ...args
+}) {
+  const triggerProps = useComboboxTrigger(args);
+  const {
+    onClick,
+    onKeyDown,
+    'aria-expanded': showPopover
+  } = triggerProps;
+  const handleClick = () => {
+    if (!args.context.openOnFocus && !args.context.openOnClick) {
+      // Skip if input should not opening on focus nor click
+      return;
+    }
+    onClick();
+  };
+  const handleKeyDown = evt => {
+    if (evt.key === 'Escape') {
+      // Reset field if closed
+      if (!showPopover) {
+        args.context.handleInputChange('');
+      }
+      return;
+    }
+    onKeyDown(evt);
+    if (propsOnKeyDown) {
+      propsOnKeyDown(evt);
+    }
+  };
+  return {
+    ...triggerProps,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown
+  };
+}
+
+/**
+ * Combobox input trigger.
+ *
+ * @family Combobox
+ */
+const ComboboxInput = ({
+  hideToggle,
+  inputRef,
+  textFieldRef,
+  afterElement,
+  onFocus,
+  onBlur,
+  onKeyDown,
+  clearButtonProps,
+  hasClearButton,
+  theme,
+  ...textFieldProps
+}) => {
+  const refs = useComboboxRefs();
+  const context = useCombobox();
+  const inputProps = useComboboxInput({
+    refs,
+    context,
+    onBlur,
+    onFocus,
+    onKeyDown
+  });
+  const {
+    listboxId,
+    isOpen,
+    handleOpen,
+    handleClose,
+    inputValue,
+    handleInputChange
+  } = context;
+
+  /** Callback for when the toggle button is trigged */
+  const handleManualToggle = () => {
+    if (isOpen) {
+      handleClose();
+    } else {
+      handleOpen({
+        manual: true
+      });
+    }
+    refs.triggerRef?.current?.focus();
+  };
+  return /*#__PURE__*/jsx(TextField
+  // Disable native autocomplete
+  , {
+    autoComplete: "off",
+    ...textFieldProps,
+    inputRef: mergeRefs(refs.triggerRef, inputRef),
+    textFieldRef: mergeRefs(refs.anchorRef, textFieldRef)
+    // Combobox props
+    ,
+    ...inputProps,
+    theme: theme,
+    value: inputValue,
+    onClear: () => handleInputChange(''),
+    onChange: handleInputChange,
+    clearButtonProps: hasClearButton ? {
+      ...clearButtonProps,
+      label: context.translations.clearLabel
+    } : undefined,
+    afterElement: (!hideToggle || afterElement) && /*#__PURE__*/jsxs(Fragment, {
+      children: [afterElement, !hideToggle && /*#__PURE__*/jsx(IconButton, {
+        theme: theme,
+        onClick: handleManualToggle,
+        label: context.translations.showSuggestionsLabel,
+        emphasis: Emphasis$1.low,
+        size: Size$1.s,
+        icon: inputProps['aria-expanded'] ? mdiChevronUp : mdiChevronDown,
+        type: "button",
+        tabIndex: -1,
+        "aria-expanded": inputProps['aria-expanded'],
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId
+      })]
+    })
+  });
+};
+
+const ComboboxOptionContext = /*#__PURE__*/createContext({});
+/** Context Provider to store the current combobox option id. */
+const ComboboxOptionContextProvider = ({
+  optionId,
+  isKeyboardHighlighted,
+  children
+}) => {
+  const value = React__default.useMemo(() => ({
+    optionId,
+    isKeyboardHighlighted
+  }), [optionId, isKeyboardHighlighted]);
+  return /*#__PURE__*/jsx(ComboboxOptionContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+/** Retrieve the current combobox 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 CLASSNAME$16 = 'lumx-combobox-option';
+const LUMX_CLASSNAME = 'lumx-list-item';
+const {
+  block: block$Z,
+  element: element$L
+} = classNames.bem(CLASSNAME$16);
+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$Z(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$L('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$L('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$L('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$L('description'),
+          typography: "caption",
+          color: "dark",
+          colorVariant: "L2",
+          children: description
+        })]
+      }), after && /*#__PURE__*/jsx(GenericBlock.Actions, {
+        as: "span",
+        role: "presentation",
+        className: element$L('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$Y,
+  element: element$K
+} = classNames.bem(CLASSNAME$16);
+
+/**
+ * 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$Y({
+      skeleton: true
+    }, ['lumx-list-item', `lumx-list-item--size-${size}`, className]),
+    children: [/*#__PURE__*/jsxs("div", {
+      role: "presentation",
+      className: element$K('content', ['lumx-list-item__wrapper']),
+      children: [before && /*#__PURE__*/jsx(Text, {
+        as: "span",
+        role: "presentation",
+        className: element$K('before', ['lumx-list-item__before']),
+        children: before
+      }), content]
+    }), after && /*#__PURE__*/jsx("div", {
+      role: "presentation",
+      className: element$K('after', ['lumx-list-item__after']),
+      children: after
+    })]
+  });
+};
+
+/** Default skeleton for the options list of the combobox */
+const ComboboxListSkeleton = ({
+  isLoadingMore,
+  children
+}) => /*#__PURE__*/jsx(Fragment, {
+  children: Array.from({
+    length: isLoadingMore ? 1 : 3
+  }).map((_, index) => {
+    const renderedChildren = typeof children === 'function' ? children({
+      index
+    }) : children || /*#__PURE__*/jsx(ComboboxOptionSkeleton, {
+      index: index
+    });
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      jsx(React__default.Fragment, {
+        children: renderedChildren
+      }, index)
+    );
+  })
+});
 
-      // Focus the last enabled chip (if any exists)
-      const lastChip = findPreviousEnabledChip();
-      lastChip?.focus();
-    };
+/** The states in which the full loading must be displayed */
+const FULL_LOADING_STATES = ['loading', 'debouncing', 'filtering'];
+const CLASSNAME$15 = 'lumx-combobox-listbox';
+const {
+  block: block$X,
+  element: element$J
+} = bem$1(CLASSNAME$15);
 
-    // Attach keyboard event listener
-    input.addEventListener('keydown', onKeyDown);
+/**
+ * The listbox containing the combobox's options.
+ *
+ * @family Combobox
+ * @param ComboboxListBoxProps
+ * @returns ComboboxListBox
+ */
+const ComboboxListBox = ({
+  children,
+  renderItemSkeleton,
+  label,
+  popoverProps,
+  footer,
+  listRef,
+  ...forwardedProps
+}) => {
+  const {
+    status,
+    listboxId,
+    isOpen,
+    optionsLength,
+    handleClose: contextHandleClose,
+    type,
+    inputValue,
+    showEmptyState,
+    showErrorState,
+    translations
+  } = useCombobox();
+  const {
+    anchorRef
+  } = useComboboxRefs();
+  const {
+    onClose,
+    ...otherPopoverProps
+  } = popoverProps || {};
+  const {
+    style,
+    className,
+    ...listProps
+  } = forwardedProps;
+  // The states to show a full skeleton instead of the options
+  const showFullLoading = FULL_LOADING_STATES.includes(status);
+  const isErrorStateDisplayed = showErrorState && isOpen && status === 'error';
+  const isEmptyStateDisplayed = showEmptyState && isOpen && status === 'idle' && optionsLength === 0;
 
-    // Cleanup listener on unmount
-    return () => {
-      input.removeEventListener('keydown', onKeyDown);
-    };
-  }, [inputRef, findPreviousEnabledChip]);
-  return {
-    findPreviousEnabledChip
+  /**
+   *  The conditions in which we want to show the content of the popover
+   *  * The parent asked for the popover to be opened
+   *  * There is at least one option to displayed OR a skeleton
+   */
+  const showPopover = isOpen && (optionsLength > 0 || showFullLoading) || isEmptyStateDisplayed || isErrorStateDisplayed;
+  const handleClose = () => {
+    if (isOpen) {
+      contextHandleClose?.();
+      onClose?.();
+    }
   };
-}
+  const emptyMessage = translations.noResultsForInputLabel(inputValue);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs(Text, {
+      as: "p",
+      className: visuallyHidden(),
+      role: "log",
+      "aria-live": "assertive",
+      children: [isOpen && !showFullLoading && !isEmptyStateDisplayed && !isErrorStateDisplayed && translations.nbOptionsLabel(optionsLength), isErrorStateDisplayed && `${translations.serviceUnavailableLabel} ${translations.tryReloadLabel}`, showFullLoading && translations.loadingLabel, isEmptyStateDisplayed && emptyMessage]
+    }), /*#__PURE__*/jsx(Popover, {
+      role: "none",
+      onClose: handleClose,
+      anchorRef: anchorRef,
+      fitToAnchorWidth: true,
+      fitWithinViewportHeight: true,
+      closeOnEscape: true,
+      closeOnClickAway: true,
+      placement: Placement.BOTTOM,
+      isOpen: isOpen,
+      ...otherPopoverProps,
+      children: /*#__PURE__*/jsxs("div", {
+        style: {
+          ...style,
+          overflowY: 'auto',
+          display: showPopover ? 'flex' : 'none',
+          flexDirection: 'column'
+        },
+        children: [/*#__PURE__*/jsxs("ul", {
+          ref: listRef,
+          id: listboxId,
+          role: type,
+          "aria-label": label,
+          className: block$X([className, 'lumx-list lumx-list--item-padding-big']),
+          style: {
+            flex: 1,
+            overflowY: 'auto'
+          },
+          ...listProps,
+          children: [!showFullLoading && children, [...FULL_LOADING_STATES, 'loadingMore'].includes(status) && /*#__PURE__*/jsx(ComboboxListSkeleton, {
+            isLoadingMore: status === 'loadingMore',
+            children: renderItemSkeleton
+          })]
+        }), footer, (isEmptyStateDisplayed || isErrorStateDisplayed) && /*#__PURE__*/jsx(GenericBlock, {
+          className: element$J('state'),
+          orientation: "vertical",
+          vAlign: "center",
+          children: /*#__PURE__*/jsxs(GenericBlock.Content, {
+            children: [inputValue && isEmptyStateDisplayed && /*#__PURE__*/jsx(Text, {
+              as: "p",
+              typography: "body1",
+              color: "dark",
+              colorVariant: "L2",
+              dangerouslySetInnerHTML: {
+                __html: translations.noResultsForInputLabel(inputValue)
+              }
+            }), !inputValue && isEmptyStateDisplayed && /*#__PURE__*/jsx(Text, {
+              as: "p",
+              typography: "body1",
+              color: "dark",
+              colorVariant: "L2",
+              children: translations.noResultsForInputLabel()
+            }), isErrorStateDisplayed && /*#__PURE__*/jsxs(Fragment, {
+              children: [/*#__PURE__*/jsx(Heading, {
+                as: "h2",
+                typography: "subtitle2",
+                children: translations.serviceUnavailableLabel
+              }), /*#__PURE__*/jsx(Text, {
+                as: "p",
+                typography: "body1",
+                color: "dark",
+                colorVariant: "L2",
+                children: translations.tryReloadLabel
+              })]
+            })]
+          })
+        })]
+      })
+    })]
+  });
+};
 
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$14 = 'lumx-selection-chip-group';
+const CLASSNAME$14 = 'lumx-combobox-section';
 const {
   block: block$W,
   element: element$I
 } = classNames.bem(CLASSNAME$14);
 
 /**
- * SelectionChipGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * Content of the ComboboxSection.
  */
-const SelectionChipGroup = ({
-  onChange,
-  value,
-  getOptionId,
-  getOptionName,
-  inputRef,
-  inputLabel,
-  renderChip,
-  theme,
-  isDisabled,
-  chipTooltipLabel,
-  label,
-  ...forwardedProps
+const ComboboxSectionContent = ({
+  className,
+  title,
+  children,
+  isLoading,
+  renderItemSkeleton
 }) => {
-  const chipRefs = React__default.useRef([]);
   const {
-    findPreviousEnabledChip
-  } = useFocusLastChipOnBackspace(chipRefs, inputRef);
-  return /*#__PURE__*/jsx(ChipGroup, {
-    role: "group",
-    "aria-label": label,
-    className: block$W(),
-    ...forwardedProps,
-    children: value?.map((v, index) => {
-      const name = getWithSelector(getOptionName, v);
-      const id = getWithSelector(getOptionId, v);
-      const onClick = () => {
-        const newValue = [...value];
-        const existingIndex = value.findIndex(vi => getWithSelector(getOptionId, vi) === id);
-        if (existingIndex === -1) {
-          return;
-        }
-        // Remove value
-        newValue.splice(existingIndex, 1);
-        onChange?.(newValue);
-      };
-      const onKeyDown = evt => {
-        if (evt.key !== 'Backspace') {
-          return;
-        }
-        // Activate (remove value) on Backspace pressed
-        onClick();
-        const previousChip = findPreviousEnabledChip(index - 1);
-        const input = inputRef?.current;
-        // Focus the previous chip or the input
-        (previousChip || input)?.focus();
-      };
-      if (!chipRefs.current[index]) {
-        chipRefs.current[index] = /*#__PURE__*/React__default.createRef();
-      }
-      const ref = chipRefs.current[index];
-      const customChip = renderChip?.(v);
-      const props = isComponentType(Chip)(customChip) ? customChip.props : undefined;
-      const chipIsDisabled = props?.isDisabled || isDisabled;
-      const chipName = typeof props?.children === 'string' ? props.children : name;
-      const tooltipLabel = chipTooltipLabel(chipName);
-      return /*#__PURE__*/jsx(Tooltip, {
-        label: !chipIsDisabled ? tooltipLabel : undefined,
-        closeMode: "hide",
-        ariaLinkMode: "aria-labelledby",
-        children: /*#__PURE__*/jsx(Chip, {
-          ...props,
-          after: /*#__PURE__*/jsx(Icon, {
-            icon: mdiClose
-          }),
-          className: element$I('chip', [props?.className]),
-          size: "s",
-          ref: ref,
-          onClick: onClick,
-          onKeyDown: onKeyDown,
-          theme: theme,
-          isDisabled: chipIsDisabled,
-          tabIndex: chipIsDisabled ? -1 : 0,
-          children: props?.children || name
-        })
-      }, id);
+    options
+  } = useCombobox();
+  const {
+    sectionId
+  } = useComboboxSectionId();
+  const hasRegisteredChildren = Boolean(Object.values(options).find(option => isComboboxValue(option) && option.sectionId === sectionId));
+  const titleId = title && `${sectionId}-title`;
+  if (!children && !isLoading) {
+    return null;
+  }
+  const isHidden = !hasRegisteredChildren && !isLoading;
+  return /*#__PURE__*/jsxs("li", {
+    className: block$W([className]),
+    role: !isHidden ? 'none' : undefined,
+    "aria-hidden": isHidden,
+    style: {
+      display: isHidden ? 'none' : undefined
+    },
+    children: [title && /*#__PURE__*/jsx(Text, {
+      as: "span",
+      className: element$I('header', [ListSubheader.className]),
+      "aria-hidden": "true",
+      id: titleId,
+      children: title
+    }), /*#__PURE__*/jsxs("ul", {
+      className: element$I('content'),
+      role: "group",
+      "aria-labelledby": titleId,
+      children: [children, isLoading && /*#__PURE__*/jsx(ComboboxListSkeleton, {
+        children: renderItemSkeleton
+      })]
+    })]
+  });
+};
+
+/**
+ * Section for options of a Combobox.
+ *
+ * @family Combobox
+ * @param ComboboxSectionProps
+ * @returns ComboboxSection
+ */
+const ComboboxSection = ({
+  children,
+  ...props
+}) => {
+  const sectionId = useId();
+  const value = React__default.useMemo(() => ({
+    sectionId,
+    isLoading: props.isLoading
+  }), [sectionId, props.isLoading]);
+  return /*#__PURE__*/jsx(SectionContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/jsx(ComboboxSectionContent, {
+      ...props,
+      children: children
+    })
+  });
+};
+
+/** Context provider for the combobox. */
+const ComboboxProvider = ({
+  children,
+  value
+}) => {
+  return /*#__PURE__*/jsx(ComboboxContext.Provider, {
+    value: value,
+    children: /*#__PURE__*/jsx(MovingFocusProvider, {
+      options: {
+        direction: value.type === 'grid' ? 'both' : 'vertical',
+        firstFocusDirection: value.type === 'grid' ? 'vertical' : undefined,
+        loopAround: {
+          row: 'next-loop',
+          col: 'inside'
+        },
+        gridJumpToShortcutDirection: 'vertical',
+        defaultSelectedId: value.selectedIds?.[0],
+        listKey: value.inputValue
+      },
+      children: children
+    })
+  });
+};
+
+const Combobox$1 = ({
+  id: htmlId,
+  inputValue,
+  defaultInputValue,
+  autoFilter = true,
+  openOnClick,
+  openOnFocus,
+  status,
+  showEmptyState = !autoFilter,
+  showErrorState = !!status,
+  selectedIds,
+  onInputChange,
+  onSelect,
+  onOpen,
+  children,
+  selectionType,
+  translations
+}) => {
+  const textFieldRef = useRef(null);
+  const triggerRef = useRef(null);
+
+  // Generate a unique id for the combobox that will be used for every child components.
+  const generatedId = useId('combobox');
+  const comboboxId = htmlId || generatedId;
+  const listboxId = `${comboboxId}-popover`;
+
+  /** Generate the selected option id from the given selected id.  */
+  const currentSelectedIds = selectedIds?.map(selectedId => generateOptionId(comboboxId, selectedId.toString()));
+
+  /** Generate the state */
+  const [state, dispatch] = useReducer(reducer$1, initialState, defaultState => ({
+    ...defaultState,
+    comboboxId,
+    listboxId,
+    // a default input value can be set if needed
+    inputValue: defaultInputValue || defaultState.inputValue
+  }));
+
+  /**
+   * Return the current input value.
+   */
+  const currentInputValue = useMemo(() => {
+    // If the component is controlled and a value is already set by the parent, use this value
+    if (inputValue !== null && inputValue !== undefined) {
+      return inputValue;
+    }
+
+    // Then use the local value
+    if (state.inputValue) {
+      return state.inputValue;
+    }
+
+    // In all other cases, return an empty string.
+    return '';
+  }, [inputValue, state.inputValue]);
+
+  /** Return a memoized state */
+  const synchedState = useMemo(() => {
+    return {
+      ...state,
+      showAll: !autoFilter || state.showAll,
+      inputValue: currentInputValue,
+      status: status || state.status,
+      listboxId
+    };
+  }, [currentInputValue, listboxId, autoFilter, state, status]);
+
+  /** Props to set in the context */
+  const comboboxProviderValue = useMemo(() => ({
+    ...synchedState,
+    openOnFocus,
+    openOnClick,
+    onInputChange,
+    onOpen,
+    onSelect,
+    dispatch,
+    selectionType,
+    selectedIds: currentSelectedIds,
+    showEmptyState,
+    showErrorState,
+    translations
+  }), [synchedState, openOnFocus, openOnClick, onInputChange, onOpen, onSelect, selectionType, currentSelectedIds, showEmptyState, showErrorState, translations]);
+  return /*#__PURE__*/jsx(ComboboxRefsProvider, {
+    triggerRef: triggerRef,
+    anchorRef: textFieldRef,
+    children: /*#__PURE__*/jsx(ComboboxProvider, {
+      value: comboboxProviderValue,
+      children: children
     })
   });
 };
 
+const SUB_COMPONENTS = {
+  /**
+   * Option to set within a combobox list.
+   *
+   * @family Combobox
+   * @param ComboboxOptionProps
+   * @returns ComboboxOption
+   */
+  Option: ComboboxOption,
+  /**
+   * Skeleton for a combobox option.
+   * A typography skeleton is rendered by default but can be overridden by passing children.
+   */
+  OptionSkeleton: ComboboxOptionSkeleton,
+  /**
+   * Section for options of a Combobox.
+   *
+   * @family Combobox
+   * @param ComboboxSectionProps
+   * @returns ComboboxSection
+   */
+  Section: ComboboxSection,
+  /**
+   * Combobox input trigger.
+   *
+   * @family Combobox
+   */
+  Input: ComboboxInput,
+  /**
+   * The listbox containing the combobox's options.
+   *
+   * @family Combobox
+   * @param ComboboxListBoxProps
+   * @returns ComboboxListBox
+   */
+  List: ComboboxListBox,
+  /**
+   * Combobox button trigger.
+   *
+   * @family Combobox
+   */
+  Button: ComboboxButton
+};
+
+/**
+ *
+ * A Combobox is a combination of two components:
+ * * An input to enter the user's value
+ * * A popover with a list of suggestions to fill the value.
+ *
+ * These two components are included via the Combobox.Input and Combobox.ListBox components.
+ *
+ * In its simplest implementation the component will automatically filter the given options
+ * from the value of the input and fill the input with the textValue of the selected option.
+ *
+ * Props are available for more complex implementations.
+ *
+ * @family Combobox
+ * @param ComboboxProps
+ * @returns Combobox
+ */
+const Combobox = Object.assign(Combobox$1, SUB_COMPONENTS);
+
 /**
  * Comment block variants.
  */
@@ -2216,7 +3735,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$U = {
   variant: CommentBlockVariant.indented
 };
 
@@ -2246,7 +3765,7 @@ const CommentBlock = forwardRef((props, ref) => {
     onMouseLeave,
     text,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$W.variant,
+    variant = DEFAULT_PROPS$U.variant,
     ...forwardedProps
   } = props;
   const hasChildren = Children.count(children) > 0;
@@ -2315,7 +3834,7 @@ const CommentBlock = forwardRef((props, ref) => {
 });
 CommentBlock.displayName = COMPONENT_NAME$15;
 CommentBlock.className = CLASSNAME$13;
-CommentBlock.defaultProps = DEFAULT_PROPS$W;
+CommentBlock.defaultProps = DEFAULT_PROPS$U;
 
 /**
  * Add a number of months from a date while resetting the day to prevent month length mismatches.
@@ -3420,7 +4939,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {
+const DEFAULT_PROPS$T = {
   size: Size$1.big,
   disableBodyScroll: true
 };
@@ -3451,11 +4970,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$V.size,
+    size = DEFAULT_PROPS$T.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$V.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$T.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -3595,7 +5114,7 @@ const Dialog = forwardRef((props, ref) => {
 });
 Dialog.displayName = COMPONENT_NAME$11;
 Dialog.className = CLASSNAME$11;
-Dialog.defaultProps = DEFAULT_PROPS$V;
+Dialog.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Component display name.
@@ -3613,7 +5132,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$U = {};
+const DEFAULT_PROPS$S = {};
 
 /**
  * Divider component.
@@ -3639,7 +5158,7 @@ const Divider = forwardRef((props, ref) => {
 });
 Divider.displayName = COMPONENT_NAME$10;
 Divider.className = CLASSNAME$10;
-Divider.defaultProps = DEFAULT_PROPS$U;
+Divider.defaultProps = DEFAULT_PROPS$S;
 
 /**
  * Component display name.
@@ -3864,7 +5383,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$R = {
   tabIndex: -1
 };
 
@@ -3883,7 +5402,7 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$T.tabIndex,
+    tabIndex = DEFAULT_PROPS$R.tabIndex,
     ...forwardedProps
   } = props;
   const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
@@ -3899,7 +5418,7 @@ const InternalList = forwardRef((props, ref) => {
 });
 InternalList.displayName = COMPONENT_NAME$_;
 InternalList.className = CLASSNAME$_;
-InternalList.defaultProps = DEFAULT_PROPS$T;
+InternalList.defaultProps = DEFAULT_PROPS$R;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -6344,7 +7863,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {
+const DEFAULT_PROPS$Q = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -6361,24 +7880,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$S.elevation,
+    elevation = DEFAULT_PROPS$Q.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$S.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$S.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$Q.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$Q.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$S.placement,
+    placement = DEFAULT_PROPS$Q.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$S.zIndex,
+    zIndex = DEFAULT_PROPS$Q.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -6464,7 +7983,7 @@ const Popover = skipRender(
 () => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$Z;
 Popover.className = CLASSNAME$Z;
-Popover.defaultProps = DEFAULT_PROPS$S;
+Popover.defaultProps = DEFAULT_PROPS$Q;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -6524,7 +8043,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$P = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6547,18 +8066,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$R.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$R.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$R.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$R.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$R.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$P.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$P.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$P.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$P.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$P.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$R.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$R.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$R.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$P.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$P.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -6604,7 +8123,7 @@ const Dropdown = forwardRef((props, ref) => {
 });
 Dropdown.displayName = COMPONENT_NAME$Y;
 Dropdown.className = CLASSNAME$Y;
-Dropdown.defaultProps = DEFAULT_PROPS$R;
+Dropdown.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
@@ -6623,7 +8142,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$O = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6641,7 +8160,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$Q.closeMode,
+    closeMode = DEFAULT_PROPS$O.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -6758,11 +8277,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = COMPONENT_NAME$X;
 ExpansionPanel.className = CLASSNAME$X;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$Q;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
 
 const COMPONENT_NAME$W = 'Flag';
 const CLASSNAME$W = 'lumx-flag';
-const DEFAULT_PROPS$P = {};
+const DEFAULT_PROPS$N = {};
 const {
   block: block$N,
   element: element$B
@@ -6826,7 +8345,7 @@ const Flag = forwardRef((props, ref) => {
 });
 Flag.displayName = COMPONENT_NAME$W;
 Flag.className = CLASSNAME$W;
-Flag.defaultProps = DEFAULT_PROPS$P;
+Flag.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Defines the props of the component.
@@ -6919,7 +8438,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$M = {
   gap: Size$1.big,
   orientation: Orientation$1.horizontal
 };
@@ -6949,8 +8468,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$O.gap,
-    orientation = DEFAULT_PROPS$O.orientation,
+    gap = DEFAULT_PROPS$M.gap,
+    orientation = DEFAULT_PROPS$M.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -7004,7 +8523,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$U;
 BaseGenericBlock.className = CLASSNAME$U;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$O;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$M;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -7052,7 +8571,7 @@ const CLASSNAME$T = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {};
+const DEFAULT_PROPS$L = {};
 
 /**
  * Get Heading component common props
@@ -7153,7 +8672,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {};
+const DEFAULT_PROPS$K = {};
 
 /**
  * Text component common props
@@ -7240,7 +8759,7 @@ const Text = forwardRef((props, ref) => {
 });
 Text.displayName = COMPONENT_NAME$S;
 Text.className = CLASSNAME$S;
-Text.defaultProps = DEFAULT_PROPS$M;
+Text.defaultProps = DEFAULT_PROPS$K;
 
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
@@ -7277,7 +8796,7 @@ const Heading = forwardRef((props, ref) => {
 });
 Heading.displayName = COMPONENT_NAME$T;
 Heading.className = CLASSNAME$T;
-Heading.defaultProps = DEFAULT_PROPS$N;
+Heading.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -7328,7 +8847,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
+const DEFAULT_PROPS$J = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -7346,9 +8865,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$L.orientation,
+    orientation = DEFAULT_PROPS$J.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$L.wrap,
+    wrap = DEFAULT_PROPS$J.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -7366,7 +8885,7 @@ const Grid = forwardRef((props, ref) => {
 });
 Grid.displayName = COMPONENT_NAME$R;
 Grid.className = CLASSNAME$R;
-Grid.defaultProps = DEFAULT_PROPS$L;
+Grid.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
@@ -7424,7 +8943,7 @@ const CLASSNAME$P = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$I = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7461,7 +8980,7 @@ const GridColumn = forwardRef((props, ref) => {
 });
 GridColumn.displayName = COMPONENT_NAME$P;
 GridColumn.className = CLASSNAME$P;
-GridColumn.defaultProps = DEFAULT_PROPS$K;
+GridColumn.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Icon component.
@@ -7579,7 +9098,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {
+const DEFAULT_PROPS$H = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -7595,9 +9114,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     actions,
-    align = DEFAULT_PROPS$J.align,
+    align = DEFAULT_PROPS$H.align,
     alt,
-    captionPosition = DEFAULT_PROPS$J.captionPosition,
+    captionPosition = DEFAULT_PROPS$H.captionPosition,
     captionStyle,
     className,
     description,
@@ -7651,7 +9170,7 @@ const ImageBlock = forwardRef((props, ref) => {
 });
 ImageBlock.displayName = COMPONENT_NAME$O;
 ImageBlock.className = CLASSNAME$O;
-ImageBlock.defaultProps = DEFAULT_PROPS$J;
+ImageBlock.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * Component display name.
@@ -8411,7 +9930,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {};
+const DEFAULT_PROPS$G = {};
 
 /**
  * InlineList component.
@@ -8464,7 +9983,7 @@ const InlineList = forwardRef((props, ref) => {
 });
 InlineList.displayName = COMPONENT_NAME$M;
 InlineList.className = CLASSNAME$M;
-InlineList.defaultProps = DEFAULT_PROPS$I;
+InlineList.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * InputHelper component.
@@ -8738,7 +10257,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {
+const DEFAULT_PROPS$F = {
   size: Size$1.regular,
   titleHeading: 'h2'
 };
@@ -8758,11 +10277,11 @@ const LinkPreview = forwardRef((props, ref) => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$H.size,
+    size = DEFAULT_PROPS$F.size,
     theme = defaultTheme,
     thumbnailProps,
     title,
-    titleHeading = DEFAULT_PROPS$H.titleHeading,
+    titleHeading = DEFAULT_PROPS$F.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -8830,7 +10349,7 @@ const LinkPreview = forwardRef((props, ref) => {
 });
 LinkPreview.displayName = COMPONENT_NAME$J;
 LinkPreview.className = CLASSNAME$J;
-LinkPreview.defaultProps = DEFAULT_PROPS$H;
+LinkPreview.defaultProps = DEFAULT_PROPS$F;
 
 /**
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
@@ -8863,7 +10382,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {
+const DEFAULT_PROPS$E = {
   size: Size$1.regular
 };
 
@@ -8902,7 +10421,7 @@ const ListItem = forwardRef((props, ref) => {
     linkProps = {},
     linkRef,
     onItemSelected,
-    size = DEFAULT_PROPS$G.size,
+    size = DEFAULT_PROPS$E.size,
     ...forwardedProps
   } = otherProps;
   const role = linkAs || linkProps.href ? 'link' : 'button';
@@ -8959,7 +10478,7 @@ const ListItem = forwardRef((props, ref) => {
 });
 ListItem.displayName = COMPONENT_NAME$I;
 ListItem.className = CLASSNAME$I;
-ListItem.defaultProps = DEFAULT_PROPS$G;
+ListItem.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Component display name.
@@ -9147,7 +10666,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$F = {};
+const DEFAULT_PROPS$D = {};
 
 /**
  * Mosaic component.
@@ -9214,7 +10733,7 @@ const Mosaic = forwardRef((props, ref) => {
 });
 Mosaic.displayName = COMPONENT_NAME$E;
 Mosaic.className = CLASSNAME$E;
-Mosaic.defaultProps = DEFAULT_PROPS$F;
+Mosaic.defaultProps = DEFAULT_PROPS$D;
 
 const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation$1.vertical
@@ -9403,7 +10922,7 @@ const {
 /**
  * Component default props
  */
-const DEFAULT_PROPS$E = {
+const DEFAULT_PROPS$C = {
   orientation: Orientation$1.vertical
 };
 const Navigation = forwardRef((props, ref) => {
@@ -9412,7 +10931,7 @@ const Navigation = forwardRef((props, ref) => {
     children,
     className,
     theme = defaultTheme,
-    orientation = DEFAULT_PROPS$E.orientation,
+    orientation = DEFAULT_PROPS$C.orientation,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(ThemeProvider, {
@@ -9438,7 +10957,7 @@ const Navigation = forwardRef((props, ref) => {
 });
 Navigation.displayName = COMPONENT_NAME$C;
 Navigation.className = CLASSNAME$C;
-Navigation.defaultProps = DEFAULT_PROPS$E;
+Navigation.defaultProps = DEFAULT_PROPS$C;
 
 // Sub components
 Navigation.Section = NavigationSection;
@@ -9483,7 +11002,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$D = {
+const DEFAULT_PROPS$B = {
   zIndex: 9999,
   usePortal: true
 };
@@ -9507,8 +11026,8 @@ const Notification = forwardRef((props, ref) => {
     onClick,
     theme = defaultTheme,
     type,
-    zIndex = DEFAULT_PROPS$D.zIndex,
-    usePortal = DEFAULT_PROPS$D.usePortal,
+    zIndex = DEFAULT_PROPS$B.zIndex,
+    usePortal = DEFAULT_PROPS$B.usePortal,
     style,
     ...forwardedProps
   } = props;
@@ -9573,7 +11092,7 @@ const Notification = forwardRef((props, ref) => {
 });
 Notification.displayName = COMPONENT_NAME$B;
 Notification.className = CLASSNAME$B;
-Notification.defaultProps = DEFAULT_PROPS$D;
+Notification.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Component display name.
@@ -9588,7 +11107,7 @@ const CLASSNAME$A = 'lumx-popover-dialog';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$C = {};
+const DEFAULT_PROPS$A = {};
 
 /**
  * PopoverDialog component.
@@ -9631,7 +11150,7 @@ const PopoverDialog = forwardRef((props, ref) => {
 });
 PopoverDialog.displayName = COMPONENT_NAME$A;
 PopoverDialog.className = CLASSNAME$A;
-PopoverDialog.defaultProps = DEFAULT_PROPS$C;
+PopoverDialog.defaultProps = DEFAULT_PROPS$A;
 
 /**
  * Component display name.
@@ -9650,7 +11169,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$B = {
+const DEFAULT_PROPS$z = {
   orientation: Orientation$1.horizontal
 };
 
@@ -9670,7 +11189,7 @@ const PostBlock = forwardRef((props, ref) => {
     className,
     meta,
     onClick,
-    orientation = DEFAULT_PROPS$B.orientation,
+    orientation = DEFAULT_PROPS$z.orientation,
     tags,
     text,
     theme = defaultTheme,
@@ -9732,7 +11251,7 @@ const PostBlock = forwardRef((props, ref) => {
 });
 PostBlock.displayName = COMPONENT_NAME$z;
 PostBlock.className = CLASSNAME$z;
-PostBlock.defaultProps = DEFAULT_PROPS$B;
+PostBlock.defaultProps = DEFAULT_PROPS$z;
 
 /**
  * Component display name.
@@ -9751,7 +11270,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$A = {};
+const DEFAULT_PROPS$y = {};
 
 /**
  * ProgressLinear component.
@@ -9782,7 +11301,7 @@ const ProgressLinear = forwardRef((props, ref) => {
 });
 ProgressLinear.displayName = COMPONENT_NAME$y;
 ProgressLinear.className = CLASSNAME$y;
-ProgressLinear.defaultProps = DEFAULT_PROPS$A;
+ProgressLinear.defaultProps = DEFAULT_PROPS$y;
 
 /**
  * Component display name.
@@ -9801,7 +11320,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$z = {
+const DEFAULT_PROPS$x = {
   size: Size$1.m,
   display: 'block'
 };
@@ -9818,8 +11337,8 @@ const ProgressCircular = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    size = DEFAULT_PROPS$z.size,
-    display = DEFAULT_PROPS$z.display,
+    size = DEFAULT_PROPS$x.size,
+    display = DEFAULT_PROPS$x.display,
     ...forwardedProps
   } = props;
   const Element = display === 'block' ? 'div' : 'span';
@@ -9851,7 +11370,7 @@ const ProgressCircular = forwardRef((props, ref) => {
 });
 ProgressCircular.displayName = COMPONENT_NAME$x;
 ProgressCircular.className = CLASSNAME$x;
-ProgressCircular.defaultProps = DEFAULT_PROPS$z;
+ProgressCircular.defaultProps = DEFAULT_PROPS$x;
 
 const ProgressVariant = {
   linear: 'linear',
@@ -9878,7 +11397,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$y = {
+const DEFAULT_PROPS$w = {
   variant: ProgressVariant.circular
 };
 
@@ -9895,7 +11414,7 @@ const Progress = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$y.variant,
+    variant = DEFAULT_PROPS$w.variant,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs("div", {
@@ -9914,7 +11433,7 @@ const Progress = forwardRef((props, ref) => {
 });
 Progress.displayName = COMPONENT_NAME$w;
 Progress.className = CLASSNAME$w;
-Progress.defaultProps = DEFAULT_PROPS$y;
+Progress.defaultProps = DEFAULT_PROPS$w;
 
 const INIT_STATE = {
   isLazy: true,
@@ -10041,7 +11560,7 @@ const useTabProviderContextState = () => {
   return context?.[0];
 };
 
-const DEFAULT_PROPS$x = {
+const DEFAULT_PROPS$v = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -10070,7 +11589,7 @@ const ProgressTrackerProvider = props => {
     dispatch({
       type: 'update',
       payload: {
-        ...DEFAULT_PROPS$x,
+        ...DEFAULT_PROPS$v,
         ...propState,
         activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
       }
@@ -10093,7 +11612,7 @@ const ProgressTrackerProvider = props => {
     children: children
   });
 };
-ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$x;
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$v;
 
 const useRovingTabIndex = ({
   parentRef,
@@ -10185,7 +11704,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$w = {};
+const DEFAULT_PROPS$u = {};
 
 /**
  * ProgressTracker component.
@@ -10241,7 +11760,7 @@ const ProgressTracker = forwardRef((props, ref) => {
 });
 ProgressTracker.displayName = COMPONENT_NAME$v;
 ProgressTracker.className = CLASSNAME$v;
-ProgressTracker.defaultProps = DEFAULT_PROPS$w;
+ProgressTracker.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Component display name.
@@ -10260,7 +11779,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$v = {};
+const DEFAULT_PROPS$t = {};
 
 /**
  * ProgressTrackerStep component.
@@ -10355,7 +11874,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
 });
 ProgressTrackerStep.displayName = COMPONENT_NAME$u;
 ProgressTrackerStep.className = CLASSNAME$u;
-ProgressTrackerStep.defaultProps = DEFAULT_PROPS$v;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$t;
 
 /**
  * Component display name.
@@ -10373,7 +11892,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$u = {};
+const DEFAULT_PROPS$s = {};
 
 /**
  * ProgressTrackerStepPanel component.
@@ -10409,7 +11928,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
 });
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
 ProgressTrackerStepPanel.className = CLASSNAME$t;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$u;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$s;
 
 /**
  * Component display name.
@@ -10423,15 +11942,27 @@ const CLASSNAME$s = 'lumx-radio-button';
 const {
   block: block$p,
   element: element$h
-} = bem(CLASSNAME$s);
+} = classNames.bem(CLASSNAME$s);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$r = {};
 
 /**
  * RadioButton component.
  *
  * @param  props Component props.
- * @return JSX element.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-const RadioButton$1 = props => {
+const RadioButton = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme$1.light;
   const {
     checked,
     className,
@@ -10441,15 +11972,14 @@ const RadioButton$1 = props => {
     isChecked = checked,
     label,
     name,
-    ref,
     onChange,
-    theme,
+    theme = defaultTheme,
     value,
-    inputProps = {},
-    isDisabled,
-    inputId,
+    inputProps,
     ...forwardedProps
-  } = props;
+  } = otherProps;
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
   const handleChange = event => {
     if (onChange) {
       onChange(value, name, event);
@@ -10458,9 +11988,9 @@ const RadioButton$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$p({
+    className: classNames.join(className, block$p({
       'is-checked': isChecked,
-      'is-disabled': isDisabled,
+      'is-disabled': isAnyDisabled,
       'is-unchecked': !isChecked,
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -10469,16 +11999,15 @@ const RadioButton$1 = props => {
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         className: element$h('input-native'),
+        ...disabledStateProps,
         id: inputId,
         type: "radio",
         name: name,
         value: value,
         checked: isChecked,
         onChange: handleChange,
+        readOnly: inputProps?.readOnly || isAnyDisabled,
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
-        ...(inputProps?.readOnly ? {
-          readOnly: inputProps.readOnly
-        } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
         className: element$h('input-placeholder'),
@@ -10490,85 +12019,23 @@ const RadioButton$1 = props => {
       })]
     }), /*#__PURE__*/jsxs("div", {
       className: element$h('content'),
-      children: [label && InputLabel$1({
+      children: [label && /*#__PURE__*/jsx(InputLabel, {
         htmlFor: inputId,
+        theme: theme,
         className: element$h('label'),
-        theme,
         children: label
-      }), helper && InputHelper$1({
+      }), helper && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
+        theme: theme,
         className: element$h('helper'),
-        theme,
         children: helper
       })]
     })]
   });
-};
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$t = {};
-
-/**
- * RadioButton component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const RadioButton = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme$1.light;
-  const {
-    checked,
-    className,
-    helper,
-    id,
-    inputRef,
-    isChecked = checked,
-    label,
-    name,
-    onChange,
-    theme = defaultTheme,
-    value,
-    inputProps = {},
-    ...forwardedProps
-  } = otherProps;
-  const generatedInputId = useId();
-  const inputId = id || generatedInputId;
-  return RadioButton$1({
-    ref,
-    className,
-    helper,
-    inputRef,
-    isChecked,
-    label,
-    name,
-    onChange,
-    theme,
-    value,
-    inputProps: {
-      ...inputProps,
-      ...disabledStateProps,
-      readOnly: inputProps.readOnly || disabledStateProps['aria-disabled']
-    },
-    ...forwardedProps,
-    isDisabled: isAnyDisabled,
-    inputId
-  });
 });
 RadioButton.displayName = COMPONENT_NAME$s;
 RadioButton.className = CLASSNAME$s;
-RadioButton.defaultProps = DEFAULT_PROPS$t;
+RadioButton.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
@@ -10580,58 +12047,25 @@ const COMPONENT_NAME$r = 'RadioGroup';
  */
 const CLASSNAME$r = 'lumx-radio-group';
 
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$s = {};
-
 /**
  * RadioGroup component.
  *
  * @param  props Component props.
- * @return JSX element.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-const RadioGroup$1 = props => {
+const RadioGroup = forwardRef((props, ref) => {
   const {
     children,
     className,
-    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$r),
+    className: classNames.join(className, CLASSNAME$r),
     children: children
   });
-};
-RadioGroup$1.displayName = COMPONENT_NAME$r;
-RadioGroup$1.className = CLASSNAME$r;
-RadioGroup$1.defaultProps = DEFAULT_PROPS$s;
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * RadioGroup component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const RadioGroup = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    ...forwardedProps
-  } = props;
-  return RadioGroup$1({
-    ref,
-    className,
-    children,
-    ...forwardedProps
-  });
 });
 RadioGroup.displayName = COMPONENT_NAME$r;
 RadioGroup.className = CLASSNAME$r;
@@ -10791,7 +12225,7 @@ const {
 } = classNames.bem(CLASSNAME$p);
 
 /** The default value of props. */
-const DEFAULT_PROPS$r = {
+const DEFAULT_PROPS$q = {
   selectedValueRender: choice => choice,
   variant: SelectVariant.input
 };
@@ -10914,7 +12348,7 @@ const Select = forwardRef((props, ref) => {
   const isEmpty$1 = isEmpty(props.value);
   const hasInputClear = props.onClear && props.clearButtonProps && !isEmpty$1;
   return WithSelectContext(SelectField, {
-    ...DEFAULT_PROPS$r,
+    ...DEFAULT_PROPS$q,
     ...props,
     className: classNames.join(props.className, block$n({
       'has-input-clear': hasInputClear,
@@ -10926,7 +12360,7 @@ const Select = forwardRef((props, ref) => {
 });
 Select.displayName = COMPONENT_NAME$q;
 Select.className = CLASSNAME$p;
-Select.defaultProps = DEFAULT_PROPS$r;
+Select.defaultProps = DEFAULT_PROPS$q;
 Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
@@ -10940,7 +12374,7 @@ const {
 } = classNames.bem(CLASSNAME$o);
 
 /** The default value of props. */
-const DEFAULT_PROPS$q = {
+const DEFAULT_PROPS$p = {
   selectedChipRender(choice, index, onClear, isDisabled, theme) {
     const onClick = event => onClear && onClear(event, choice);
     return /*#__PURE__*/jsx(Chip, {
@@ -11066,7 +12500,7 @@ const SelectMultipleField = props => {
  */
 const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, {
-    ...DEFAULT_PROPS$q,
+    ...DEFAULT_PROPS$p,
     ...props,
     className: classNames.join(props.className, block$m({
       'has-multiple': !props.isEmpty
@@ -11077,7 +12511,7 @@ const SelectMultiple = forwardRef((props, ref) => {
 });
 SelectMultiple.displayName = COMPONENT_NAME$p;
 SelectMultiple.className = CLASSNAME$o;
-SelectMultiple.defaultProps = DEFAULT_PROPS$q;
+SelectMultiple.defaultProps = DEFAULT_PROPS$p;
 
 /**
  * Component display name.
@@ -11132,7 +12566,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$p = {
+const DEFAULT_PROPS$o = {
   emphasis: Emphasis$1.high,
   closeMode: 'unmount'
 };
@@ -11148,7 +12582,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   const {
     children,
     className,
-    emphasis = DEFAULT_PROPS$p.emphasis,
+    emphasis = DEFAULT_PROPS$o.emphasis,
     icon,
     isOpen,
     isSelected,
@@ -11158,7 +12592,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     onActionClick,
     onClick,
     toggleButtonProps,
-    closeMode = DEFAULT_PROPS$p.closeMode,
+    closeMode = DEFAULT_PROPS$o.closeMode,
     ...forwardedProps
   } = props;
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
@@ -11229,9 +12663,9 @@ const SideNavigationItem = forwardRef((props, ref) => {
 });
 SideNavigationItem.displayName = COMPONENT_NAME$n;
 SideNavigationItem.className = CLASSNAME$m;
-SideNavigationItem.defaultProps = DEFAULT_PROPS$p;
+SideNavigationItem.defaultProps = DEFAULT_PROPS$o;
 
-const DEFAULT_PROPS$o = {};
+const DEFAULT_PROPS$n = {};
 
 /**
  * Component display name.
@@ -11273,7 +12707,7 @@ const SkeletonCircle = forwardRef((props, ref) => {
   });
 });
 SkeletonCircle.displayName = COMPONENT_NAME$m;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$o;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$n;
 SkeletonCircle.className = CLASSNAME$l;
 
 const SkeletonRectangleVariant = {
@@ -11286,7 +12720,7 @@ const SkeletonRectangleVariant = {
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$n = {
+const DEFAULT_PROPS$m = {
   variant: SkeletonRectangleVariant.squared
 };
 
@@ -11318,7 +12752,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
     className,
     height,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$n.variant,
+    variant = DEFAULT_PROPS$m.variant,
     width,
     color,
     ...forwardedProps
@@ -11341,9 +12775,9 @@ const SkeletonRectangle = forwardRef((props, ref) => {
 });
 SkeletonRectangle.displayName = COMPONENT_NAME$l;
 SkeletonRectangle.className = CLASSNAME$k;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS$n;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS$m;
 
-const DEFAULT_PROPS$m = {};
+const DEFAULT_PROPS$l = {};
 
 /**
  * Component display name.
@@ -11394,7 +12828,7 @@ const SkeletonTypography = forwardRef((props, ref) => {
   });
 });
 SkeletonTypography.displayName = COMPONENT_NAME$k;
-SkeletonTypography.defaultProps = DEFAULT_PROPS$m;
+SkeletonTypography.defaultProps = DEFAULT_PROPS$l;
 SkeletonTypography.className = CLASSNAME$j;
 
 const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
@@ -11449,7 +12883,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$l = {
+const DEFAULT_PROPS$k = {
   precision: 0,
   steps: 0
 };
@@ -11500,8 +12934,8 @@ const Slider = forwardRef((props, ref) => {
     name,
     onChange,
     onMouseDown,
-    precision = DEFAULT_PROPS$l.precision,
-    steps = DEFAULT_PROPS$l.steps,
+    precision = DEFAULT_PROPS$k.precision,
+    steps = DEFAULT_PROPS$k.steps,
     theme = defaultTheme,
     value,
     ...forwardedProps
@@ -11704,7 +13138,7 @@ const Slider = forwardRef((props, ref) => {
 });
 Slider.displayName = COMPONENT_NAME$j;
 Slider.className = CLASSNAME$i;
-Slider.defaultProps = DEFAULT_PROPS$l;
+Slider.defaultProps = DEFAULT_PROPS$k;
 
 /**
  * Making setInterval Declarative with React Hooks.
@@ -12082,7 +13516,7 @@ SlideshowItemGroup.className = CLASSNAME$h;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$k = {
+const DEFAULT_PROPS$j = {
   ...DEFAULT_OPTIONS,
   slideMode: SlideMode.transformTranslate
 };
@@ -12098,19 +13532,19 @@ const Slideshow = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     activeIndex,
-    autoPlay = DEFAULT_PROPS$k.autoPlay,
+    autoPlay = DEFAULT_PROPS$j.autoPlay,
     children,
     className,
     fillHeight,
     groupBy = DEFAULT_OPTIONS.groupBy,
-    interval = DEFAULT_PROPS$k.interval,
+    interval = DEFAULT_PROPS$j.interval,
     onChange,
     slideshowControlsProps,
     theme = defaultTheme,
     id,
     slidesId,
     slideGroupLabel,
-    slideMode = DEFAULT_PROPS$k.slideMode,
+    slideMode = DEFAULT_PROPS$j.slideMode,
     ...forwardedProps
   } = props;
   // Number of slideshow items.
@@ -12132,7 +13566,7 @@ const Slideshow = forwardRef((props, ref) => {
     toggleForcePause
   } = SlideshowControls.useSlideshowControls({
     activeIndex,
-    defaultActiveIndex: DEFAULT_PROPS$k.activeIndex,
+    defaultActiveIndex: DEFAULT_PROPS$j.activeIndex,
     autoPlay: Boolean(autoPlay),
     itemsCount,
     groupBy,
@@ -12202,7 +13636,7 @@ const Slideshow = forwardRef((props, ref) => {
   });
 });
 Slideshow.displayName = 'Slideshow';
-Slideshow.defaultProps = DEFAULT_PROPS$k;
+Slideshow.defaultProps = DEFAULT_PROPS$j;
 
 /**
  * Component display name.
@@ -12311,7 +13745,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$j = {
+const DEFAULT_PROPS$i = {
   activeIndex: 0
 };
 
@@ -12325,7 +13759,7 @@ const DEFAULT_PROPS$j = {
 const InternalSlideshowControls = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    activeIndex = DEFAULT_PROPS$j.activeIndex,
+    activeIndex = DEFAULT_PROPS$i.activeIndex,
     className,
     nextButtonProps,
     onNextClick,
@@ -12440,7 +13874,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
 });
 InternalSlideshowControls.displayName = COMPONENT_NAME$g;
 InternalSlideshowControls.className = CLASSNAME$f;
-InternalSlideshowControls.defaultProps = DEFAULT_PROPS$j;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS$i;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls,
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
@@ -12572,7 +14006,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$i = {
+const DEFAULT_PROPS$h = {
   slideMode: SlideMode.transformTranslate
 };
 
@@ -12599,7 +14033,7 @@ const Slides = forwardRef((props, ref) => {
     afterSlides,
     hasControls,
     slideGroupLabel,
-    slideMode = DEFAULT_PROPS$i.slideMode,
+    slideMode = DEFAULT_PROPS$h.slideMode,
     onChange,
     ...forwardedProps
   } = props;
@@ -12681,41 +14115,46 @@ const CLASSNAME$d = 'lumx-switch';
 const {
   block: block$e,
   element: element$7
-} = bem(CLASSNAME$d);
+} = classNames.bem(CLASSNAME$d);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$h = {
-  position: 'left'
+const DEFAULT_PROPS$g = {
+  position: Alignment.left
 };
 
 /**
  * Switch component.
  *
  * @param  props Component props.
- * @return JSX element.
+ * @param  ref   Component ref.
+ * @return React element.
  */
-const Switch$1 = props => {
+const Switch = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const defaultTheme = useTheme() || Theme$1.light;
   const {
     checked,
+    children,
     className,
     helper,
     id,
-    inputRef,
     isChecked = checked,
-    label,
     name,
-    ref,
     onChange,
-    theme,
+    position = DEFAULT_PROPS$g.position,
+    theme = defaultTheme,
     value,
     inputProps = {},
-    isDisabled,
-    inputId,
-    position = DEFAULT_PROPS$h.position,
     ...forwardedProps
-  } = props;
+  } = otherProps;
+  const generatedInputId = useId();
+  const inputId = id || generatedInputId;
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
@@ -12724,30 +14163,28 @@ const Switch$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$e({
+    className: classNames.join(className, block$e({
       'is-checked': isChecked,
-      'is-disabled': isDisabled,
-      'is-unchecked': !isChecked,
+      'is-disabled': isAnyDisabled,
       [`position-${position}`]: Boolean(position),
-      [`theme-${theme}`]: Boolean(theme)
+      [`theme-${theme}`]: Boolean(theme),
+      'is-unchecked': !isChecked
     })),
     children: [/*#__PURE__*/jsxs("div", {
       className: element$7('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
-        ref: inputRef,
         type: "checkbox",
         role: "switch",
         id: inputId,
         className: element$7('input-native'),
         name: name,
         value: value,
-        checked: Boolean(isChecked),
+        ...disabledStateProps,
+        readOnly: inputProps.readOnly || isAnyDisabled,
+        checked: isChecked,
+        "aria-checked": Boolean(isChecked),
         onChange: handleChange,
         "aria-describedby": helper ? `${inputId}-helper` : undefined,
-        "aria-checked": Boolean(isChecked),
-        ...(inputProps?.readOnly ? {
-          readOnly: inputProps.readOnly
-        } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
         className: element$7('input-placeholder'),
@@ -12757,88 +14194,21 @@ const Switch$1 = props => {
           className: element$7('input-indicator')
         })]
       })]
-    }), /*#__PURE__*/jsxs("div", {
+    }), Children.count(children) > 0 && /*#__PURE__*/jsxs("div", {
       className: element$7('content'),
-      children: [label && InputLabel$1({
+      children: [/*#__PURE__*/jsx(InputLabel, {
         htmlFor: inputId,
+        theme: theme,
         className: element$7('label'),
-        theme,
-        children: label
-      }), helper && InputHelper$1({
+        children: children
+      }), !isEmpty(helper) && /*#__PURE__*/jsx(InputHelper, {
         id: `${inputId}-helper`,
+        theme: theme,
         className: element$7('helper'),
-        theme,
         children: helper
       })]
     })]
   });
-};
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$g = {
-  position: Alignment.left
-};
-
-/**
- * Switch component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Switch = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme$1.light;
-  const {
-    checked,
-    children,
-    className,
-    helper,
-    id,
-    inputRef,
-    isChecked = checked,
-    name,
-    onChange,
-    position = DEFAULT_PROPS$g.position,
-    theme = defaultTheme,
-    value,
-    inputProps = {},
-    ...forwardedProps
-  } = otherProps;
-  const localInputRef = React__default.useRef(null);
-  const generatedInputId = useId();
-  const inputId = id || generatedInputId;
-  return Switch$1({
-    ref,
-    className,
-    helper,
-    inputRef: useMergeRefs(inputRef, localInputRef),
-    isChecked,
-    label: children,
-    name,
-    onChange,
-    position,
-    theme,
-    value,
-    inputProps: {
-      ...inputProps,
-      ...disabledStateProps,
-      readOnly: inputProps.readOnly || isAnyDisabled
-    },
-    ...forwardedProps,
-    isDisabled: isAnyDisabled,
-    inputId
-  });
 });
 Switch.displayName = COMPONENT_NAME$e;
 Switch.className = CLASSNAME$d;
@@ -14793,5 +16163,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$13 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$1g as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, Combobox, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$11 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, SUB_COMPONENTS, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map