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

package/index.js

@@ -1,13 +1,12 @@
-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';
+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';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
-import React__default, { useMemo, useState, useEffect, useRef, useCallback, useContext, createContext, useReducer, Children, useLayoutEffect, cloneElement, isValidElement } from 'react';
+import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } 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';
@@ -17,7 +16,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, M as MovingFocusContext, a as useVirtualFocusParent, b as useVirtualFocus, c as MovingFocusProvider, P as Portal, C as ClickAwayProvider } from './_internal/Ui3KfDoH.js';
+import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
 import isEmpty from 'lodash/isEmpty';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle';
@@ -27,15 +26,13 @@ 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';
@@ -55,16 +52,19 @@ 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 and stable id that can then safely be used as html id.
- * This is similar to, but much simpler than, React's `useId` hook.
+ * Generate a unique id (for use in a11y or other id based DOM linking).
  *
- * Once we upgrade to React 18, this hook will be deprecated.
+ * (Tries to emulate React 18 useId hook, to remove once we upgrade React)
  */
-const useId = (prefix = 'lumx') => {
-  // A common practice to make sure ids are unique is to surround them with colons.
-  return useMemo(() => `:${uniqueId(prefix)}:`, [prefix]);
-};
+function useId() {
+  return React__default.useMemo(() => {
+    i += 1;
+    return `:lumx${i}:`;
+  }, []);
+}
 
 /**
  * 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$1m = 'lumx-alert-dialog';
+const CLASSNAME$1j = 'lumx-alert-dialog';
 const {
-  block: block$18
-} = classNames.bem(CLASSNAME$1m);
+  block: block$14
+} = classNames.bem(CLASSNAME$1j);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$16 = {
+const DEFAULT_PROPS$1a = {
   size: Size$1.tiny,
   kind: Kind$1.info
 };
@@ -130,8 +130,8 @@ const AlertDialog = forwardRef((props, ref) => {
     className,
     cancelProps,
     confirmProps,
-    kind = DEFAULT_PROPS$16.kind,
-    size = DEFAULT_PROPS$16.size,
+    kind = DEFAULT_PROPS$1a.kind,
+    size = DEFAULT_PROPS$1a.size,
     dialogProps,
     children,
     ...forwardedProps
@@ -172,7 +172,7 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames.join(className, block$18({
+    className: classNames.join(className, block$14({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -218,8 +218,8 @@ const AlertDialog = forwardRef((props, ref) => {
   });
 });
 AlertDialog.displayName = COMPONENT_NAME$1k;
-AlertDialog.className = CLASSNAME$1m;
-AlertDialog.defaultProps = DEFAULT_PROPS$16;
+AlertDialog.className = CLASSNAME$1j;
+AlertDialog.defaultProps = DEFAULT_PROPS$1a;
 
 /**
  * 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$1l = 'lumx-autocomplete';
+const CLASSNAME$1i = 'lumx-autocomplete';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$15 = {
+const DEFAULT_PROPS$19 = {
   anchorToInput: false,
   closeOnClick: false,
   closeOnClickAway: true,
@@ -343,13 +343,13 @@ const Autocomplete = forwardRef((props, ref) => {
     otherProps
   } = useDisableStateProps(props);
   const {
-    anchorToInput = DEFAULT_PROPS$15.anchorToInput,
+    anchorToInput = DEFAULT_PROPS$19.anchorToInput,
     children,
     chips,
     className,
-    closeOnClick = DEFAULT_PROPS$15.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$15.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$15.closeOnEscape,
+    closeOnClick = DEFAULT_PROPS$19.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$19.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$19.closeOnEscape,
     error,
     fitToAnchorWidth,
     hasError,
@@ -370,7 +370,7 @@ const Autocomplete = forwardRef((props, ref) => {
     onInfiniteScroll,
     placeholder,
     placement,
-    shouldFocusOnClose = DEFAULT_PROPS$15.shouldFocusOnClose,
+    shouldFocusOnClose = DEFAULT_PROPS$19.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$1l),
+    className: classNames.join(className, CLASSNAME$1i),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -424,8 +424,8 @@ const Autocomplete = forwardRef((props, ref) => {
   });
 });
 Autocomplete.displayName = COMPONENT_NAME$1j;
-Autocomplete.className = CLASSNAME$1l;
-Autocomplete.defaultProps = DEFAULT_PROPS$15;
+Autocomplete.className = CLASSNAME$1i;
+Autocomplete.defaultProps = DEFAULT_PROPS$19;
 
 /**
  * Component display name.
@@ -435,12 +435,12 @@ const COMPONENT_NAME$1i = 'AutocompleteMultiple';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-autocomplete-multiple';
+const CLASSNAME$1h = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$14 = {
+const DEFAULT_PROPS$18 = {
   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$14.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$14.closeOnEscape,
+    closeOnClickAway = DEFAULT_PROPS$18.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$18.closeOnEscape,
     fitToAnchorWidth,
     hasError,
     helper,
@@ -503,19 +503,19 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     onKeyDown,
     placeholder,
     placement,
-    selectedChipRender = DEFAULT_PROPS$14.selectedChipRender,
+    selectedChipRender = DEFAULT_PROPS$18.selectedChipRender,
     shouldFocusOnClose,
     theme = defaultTheme,
     type,
     value,
-    values = DEFAULT_PROPS$14.values,
+    values = DEFAULT_PROPS$18.values,
     ...forwardedProps
   } = otherProps;
   return /*#__PURE__*/jsx(Autocomplete, {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1k),
+    className: classNames.join(className, CLASSNAME$1h),
     name: name,
     value: value,
     onChange: onChange,
@@ -549,8 +549,8 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
   });
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
-AutocompleteMultiple.className = CLASSNAME$1k;
-AutocompleteMultiple.defaultProps = DEFAULT_PROPS$14;
+AutocompleteMultiple.className = CLASSNAME$1h;
+AutocompleteMultiple.defaultProps = DEFAULT_PROPS$18;
 
 /**
  * Component display name.
@@ -560,16 +560,16 @@ const COMPONENT_NAME$1h = 'Avatar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-avatar';
+const CLASSNAME$1g = 'lumx-avatar';
 const {
-  block: block$17,
-  element: element$R
-} = classNames.bem(CLASSNAME$1j);
+  block: block$13,
+  element: element$N
+} = classNames.bem(CLASSNAME$1g);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$13 = {
+const DEFAULT_PROPS$17 = {
   size: Size$1.m
 };
 
@@ -592,7 +592,7 @@ const Avatar = forwardRef((props, ref) => {
     linkAs,
     onClick,
     onKeyPress,
-    size = DEFAULT_PROPS$13.size,
+    size = DEFAULT_PROPS$17.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$17({
+    className: classNames.join(className, block$13({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$R('thumbnail'),
+      className: element$N('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$R('actions'),
+      className: element$N('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: element$R('badge'),
+      className: element$N('badge'),
       children: badge
     })]
   });
 });
 Avatar.displayName = COMPONENT_NAME$1h;
-Avatar.className = CLASSNAME$1j;
-Avatar.defaultProps = DEFAULT_PROPS$13;
+Avatar.className = CLASSNAME$1g;
+Avatar.defaultProps = DEFAULT_PROPS$17;
 
 /**
  * Component display name.
@@ -637,15 +637,15 @@ const COMPONENT_NAME$1g = 'Badge';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-badge';
+const CLASSNAME$1f = 'lumx-badge';
 const {
-  block: block$16
-} = classNames.bem(CLASSNAME$1i);
+  block: block$12
+} = classNames.bem(CLASSNAME$1f);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$12 = {
+const DEFAULT_PROPS$16 = {
   color: ColorPalette$1.primary
 };
 
@@ -660,30 +660,30 @@ const Badge = forwardRef((props, ref) => {
   const {
     children,
     className,
-    color = DEFAULT_PROPS$12.color,
+    color = DEFAULT_PROPS$16.color,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$16({
+    className: classNames.join(className, block$12({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 });
 Badge.displayName = COMPONENT_NAME$1g;
-Badge.className = CLASSNAME$1i;
-Badge.defaultProps = DEFAULT_PROPS$12;
+Badge.className = CLASSNAME$1f;
+Badge.defaultProps = DEFAULT_PROPS$16;
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-badge-wrapper';
+const CLASSNAME$1e = 'lumx-badge-wrapper';
 const {
-  block: block$15,
-  element: element$Q
-} = classNames.bem(CLASSNAME$1h);
+  block: block$11,
+  element: element$M
+} = classNames.bem(CLASSNAME$1e);
 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$15()),
+    className: classNames.join(className, block$11()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$Q('badge'),
+      className: element$M('badge'),
       children: badge
     })]
   });
 });
 BadgeWrapper.displayName = 'BadgeWrapper';
-BadgeWrapper.className = CLASSNAME$1h;
+BadgeWrapper.className = CLASSNAME$1e;
 
 /**
  * Alignments.
@@ -764,6 +764,8 @@ const ColorPalette = {
   red: 'red',
   light: 'light'};
 
+/** ColorPalette with all possible color variant combination */
+
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -924,7 +926,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$14(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$10(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -959,11 +961,11 @@ function block$14(baseName, modifiersOrAdditionalClasses, additionalClasses) {
  * element('my-button', 'icon', { active: true }); // 'my-button__icon my-button__icon--active'
  */
 
-function element$P(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
+function element$L(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$14(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$14(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$10(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -972,15 +974,15 @@ function element$P(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$14(baseName, modifiersOrAdditionalClasses);
+      return block$10(baseName, modifiersOrAdditionalClasses);
     }
-    return block$14(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$10(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$P(baseName, elem, modifiersOrAdditionalClasses);
+      return element$L(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$P(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$L(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -1148,15 +1150,15 @@ const COMPONENT_NAME$1e = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-button';
+const CLASSNAME$1d = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1g);
+} = bem(CLASSNAME$1d);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$11 = {
+const DEFAULT_PROPS$15 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1170,10 +1172,10 @@ const DEFAULT_PROPS$11 = {
 const Button$1 = props => {
   const {
     className,
-    emphasis = DEFAULT_PROPS$11.emphasis,
+    emphasis = DEFAULT_PROPS$15.emphasis,
     leftIcon,
     rightIcon,
-    size = DEFAULT_PROPS$11.size,
+    size = DEFAULT_PROPS$15.size,
     ...forwardedProps
   } = props;
   const buttonClassName = classnames(className, modifier({
@@ -1189,8 +1191,8 @@ const Button$1 = props => {
   });
 };
 Button$1.displayName = COMPONENT_NAME$1e;
-Button$1.className = CLASSNAME$1g;
-Button$1.defaultProps = DEFAULT_PROPS$11;
+Button$1.className = CLASSNAME$1d;
+Button$1.defaultProps = DEFAULT_PROPS$15;
 
 /**
  * Properties of a component to use to determine it's name.
@@ -1257,8 +1259,8 @@ const Button = forwardRef((props, ref) => {
   });
 });
 Button.displayName = COMPONENT_NAME$1e;
-Button.className = CLASSNAME$1g;
-Button.defaultProps = DEFAULT_PROPS$11;
+Button.className = CLASSNAME$1d;
+Button.defaultProps = DEFAULT_PROPS$15;
 
 const COMPONENT_NAME$1d = 'Icon';
 const IconClassName = 'lumx-icon';
@@ -1267,15 +1269,15 @@ const IconClassName = 'lumx-icon';
  * Defines the props of the component.
  */
 
-const CLASSNAME$1f = IconClassName;
+const CLASSNAME$1c = IconClassName;
 const {
-  block: block$13
-} = bem(CLASSNAME$1f);
+  block: block$$
+} = bem(CLASSNAME$1c);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$10 = {};
+const DEFAULT_PROPS$14 = {};
 
 /**
  * Icon component.
@@ -1324,7 +1326,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$13({
+    className: classnames(className, block$$({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1354,8 +1356,8 @@ const Icon$1 = props => {
   });
 };
 Icon$1.displayName = COMPONENT_NAME$1d;
-Icon$1.className = CLASSNAME$1f;
-Icon$1.defaultProps = DEFAULT_PROPS$10;
+Icon$1.className = CLASSNAME$1c;
+Icon$1.defaultProps = DEFAULT_PROPS$14;
 
 /**
  * Component display name.
@@ -1365,12 +1367,12 @@ const COMPONENT_NAME$1c = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-icon-button';
+const CLASSNAME$1b = 'lumx-icon-button';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$$ = {
+const DEFAULT_PROPS$13 = {
   emphasis: Emphasis.high,
   size: Size.m
 };
@@ -1383,11 +1385,11 @@ const DEFAULT_PROPS$$ = {
  */
 const IconButton$1 = props => {
   const {
-    emphasis = DEFAULT_PROPS$$.emphasis,
+    emphasis = DEFAULT_PROPS$13.emphasis,
     image,
     icon,
     label,
-    size = DEFAULT_PROPS$$.size,
+    size = DEFAULT_PROPS$13.size,
     ...forwardedProps
   } = props;
   const defaultChildren = image ? /*#__PURE__*/jsx("img", {
@@ -1407,8 +1409,8 @@ const IconButton$1 = props => {
   });
 };
 IconButton$1.displayName = COMPONENT_NAME$1c;
-IconButton$1.className = CLASSNAME$1e;
-IconButton$1.defaultProps = DEFAULT_PROPS$$;
+IconButton$1.className = CLASSNAME$1b;
+IconButton$1.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * IconButton component.
@@ -1444,8 +1446,8 @@ const IconButton = forwardRef((props, ref) => {
   });
 });
 IconButton.displayName = COMPONENT_NAME$1c;
-IconButton.className = CLASSNAME$1e;
-IconButton.defaultProps = DEFAULT_PROPS$$;
+IconButton.className = CLASSNAME$1b;
+IconButton.defaultProps = DEFAULT_PROPS$13;
 
 /**
  * Component display name.
@@ -1455,12 +1457,12 @@ const COMPONENT_NAME$1b = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1d = 'lumx-button-group';
+const CLASSNAME$1a = 'lumx-button-group';
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$_ = {};
+const DEFAULT_PROPS$12 = {};
 
 /**
  * ButtonGroup component.
@@ -1476,13 +1478,13 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1d),
+    className: classnames(className, CLASSNAME$1a),
     children: children
   });
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1b;
-ButtonGroup$1.className = CLASSNAME$1d;
-ButtonGroup$1.defaultProps = DEFAULT_PROPS$_;
+ButtonGroup$1.className = CLASSNAME$1a;
+ButtonGroup$1.defaultProps = DEFAULT_PROPS$12;
 
 /**
  * ButtonGroup component.
@@ -1498,16 +1500,16 @@ const ButtonGroup = forwardRef((props, ref) => {
   });
 });
 ButtonGroup.displayName = COMPONENT_NAME$1b;
-ButtonGroup.className = CLASSNAME$1d;
-ButtonGroup.defaultProps = DEFAULT_PROPS$_;
+ButtonGroup.className = CLASSNAME$1a;
+ButtonGroup.defaultProps = DEFAULT_PROPS$12;
 
 const COMPONENT_NAME$1a = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$1c = InputLabelClassName;
+const CLASSNAME$19 = InputLabelClassName;
 const {
-  block: block$12
-} = bem(CLASSNAME$1c);
-const DEFAULT_PROPS$Z = {};
+  block: block$_
+} = bem(CLASSNAME$19);
+const DEFAULT_PROPS$11 = {};
 
 /**
  * InputLabel component.
@@ -1527,7 +1529,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$12({
+    className: classnames(className, block$_({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1536,8 +1538,8 @@ function InputLabel$1(props) {
   });
 }
 InputLabel$1.displayName = COMPONENT_NAME$1a;
-InputLabel$1.className = CLASSNAME$1c;
-InputLabel$1.defaultProps = DEFAULT_PROPS$Z;
+InputLabel$1.className = CLASSNAME$19;
+InputLabel$1.defaultProps = DEFAULT_PROPS$11;
 
 const INPUT_HELPER_CONFIGURATION = {
   [Kind.error]: {
@@ -1558,15 +1560,15 @@ const InputHelperClassName = 'lumx-input-helper';
  * Defines the props of the component.
  */
 
-const CLASSNAME$1b = InputHelperClassName;
+const CLASSNAME$18 = InputHelperClassName;
 const {
-  block: block$11
-} = bem(CLASSNAME$1b);
+  block: block$Z
+} = bem(CLASSNAME$18);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Y = {
+const DEFAULT_PROPS$10 = {
   kind: Kind.info
 };
 
@@ -1577,7 +1579,7 @@ function InputHelper$1(props) {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$Y.kind,
+    kind = DEFAULT_PROPS$10.kind,
     theme,
     ref,
     ...forwardedProps
@@ -1588,7 +1590,7 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$11({
+    className: classnames(className, block$Z({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -1596,8 +1598,8 @@ function InputHelper$1(props) {
   });
 }
 InputHelper$1.displayName = COMPONENT_NAME$19;
-InputHelper$1.className = CLASSNAME$1b;
-InputHelper$1.defaultProps = DEFAULT_PROPS$Y;
+InputHelper$1.className = CLASSNAME$18;
+InputHelper$1.defaultProps = DEFAULT_PROPS$10;
 
 const INTERMEDIATE_STATE = 'intermediate';
 
@@ -1613,11 +1615,11 @@ const COMPONENT_NAME$18 = 'Checkbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1a = 'lumx-checkbox';
+const CLASSNAME$17 = 'lumx-checkbox';
 const {
-  block: block$10,
-  element: element$O
-} = bem(CLASSNAME$1a);
+  block: block$Y,
+  element: element$K
+} = bem(CLASSNAME$17);
 
 /**
  * Checkbox component.
@@ -1653,7 +1655,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$10({
+    className: classnames(className, block$Y({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -1661,12 +1663,12 @@ const Checkbox$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$O('input-wrapper'),
+      className: element$K('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$O('input-native'),
+        className: element$K('input-native'),
         name: name,
         value: value,
         checked: isChecked,
@@ -1678,26 +1680,26 @@ const Checkbox$1 = props => {
         } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$O('input-placeholder'),
+        className: element$K('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$O('input-background')
+          className: element$K('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$O('input-indicator'),
+          className: element$K('input-indicator'),
           children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$O('content'),
+      className: element$K('content'),
       children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$O('label'),
+        className: element$K('label'),
         theme,
         children: label
       }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$O('helper'),
+        className: element$K('helper'),
         theme,
         children: helper
       })]
@@ -1712,7 +1714,7 @@ const Checkbox$1 = props => {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$X = {};
+const DEFAULT_PROPS$$ = {};
 
 /**
  * Checkbox component.
@@ -1773,8 +1775,8 @@ const Checkbox = forwardRef((props, ref) => {
   });
 });
 Checkbox.displayName = COMPONENT_NAME$18;
-Checkbox.className = CLASSNAME$1a;
-Checkbox.defaultProps = DEFAULT_PROPS$X;
+Checkbox.className = CLASSNAME$17;
+Checkbox.defaultProps = DEFAULT_PROPS$$;
 
 /**
  * Wrap mouse event handler to stop event propagation.
@@ -1800,16 +1802,16 @@ const COMPONENT_NAME$17 = 'Chip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$19 = 'lumx-chip';
+const CLASSNAME$16 = 'lumx-chip';
 const {
-  block: block$$,
-  element: element$N
-} = classNames.bem(CLASSNAME$19);
+  block: block$X,
+  element: element$J
+} = classNames.bem(CLASSNAME$16);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$W = {
+const DEFAULT_PROPS$_ = {
   size: Size$1.m
 };
 
@@ -1839,7 +1841,7 @@ const Chip = forwardRef((props, ref) => {
     onAfterClick,
     onBeforeClick,
     onClick,
-    size = DEFAULT_PROPS$W.size,
+    size = DEFAULT_PROPS$_.size,
     theme = defaultTheme,
     href,
     onKeyDown,
@@ -1870,7 +1872,7 @@ const Chip = forwardRef((props, ref) => {
       ...forwardedProps,
       href: !disabledStateProps.disabled ? href : undefined,
       ref: ref,
-      className: classNames.join(className, block$$({
+      className: classNames.join(className, block$X({
         'is-clickable': isClickable,
         [`color-${chipColor}`]: Boolean(chipColor),
         'is-disabled': isAnyDisabled,
@@ -1888,19 +1890,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$N('before', {
+        className: element$J('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$N('label'),
+        className: element$J('label'),
         children: children
       }), after &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
       jsx("div", {
-        className: element$N('after', {
+        className: element$J('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleOnAfterClick,
@@ -1910,8 +1912,8 @@ const Chip = forwardRef((props, ref) => {
   );
 });
 Chip.displayName = COMPONENT_NAME$17;
-Chip.className = CLASSNAME$19;
-Chip.defaultProps = DEFAULT_PROPS$W;
+Chip.className = CLASSNAME$16;
+Chip.defaultProps = DEFAULT_PROPS$_;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
 
@@ -1967,7 +1969,7 @@ const useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIA
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$V = {};
+const DEFAULT_PROPS$Z = {};
 
 /**
  * Component display name.
@@ -1977,7 +1979,7 @@ const COMPONENT_NAME$16 = 'ChipGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-chip-group';
+const CLASSNAME$15 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -1996,13 +1998,13 @@ const InternalChipGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$18),
+    className: classNames.join(className, CLASSNAME$15),
     children: children
   });
 });
 InternalChipGroup.displayName = COMPONENT_NAME$16;
-InternalChipGroup.className = CLASSNAME$18;
-InternalChipGroup.defaultProps = DEFAULT_PROPS$V;
+InternalChipGroup.className = CLASSNAME$15;
+InternalChipGroup.defaultProps = DEFAULT_PROPS$Z;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
 });
@@ -2092,11 +2094,11 @@ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-selection-chip-group';
+const CLASSNAME$14 = 'lumx-selection-chip-group';
 const {
-  block: block$_,
-  element: element$M
-} = classNames.bem(CLASSNAME$17);
+  block: block$W,
+  element: element$I
+} = classNames.bem(CLASSNAME$14);
 
 /**
  * SelectionChipGroup component.
@@ -2126,7 +2128,7 @@ const SelectionChipGroup = ({
   return /*#__PURE__*/jsx(ChipGroup, {
     role: "group",
     "aria-label": label,
-    className: block$_(),
+    className: block$W(),
     ...forwardedProps,
     children: value?.map((v, index) => {
       const name = getWithSelector(getOptionName, v);
@@ -2170,7 +2172,7 @@ const SelectionChipGroup = ({
           after: /*#__PURE__*/jsx(Icon, {
             icon: mdiClose
           }),
-          className: element$M('chip', [props?.className]),
+          className: element$I('chip', [props?.className]),
           size: "s",
           ref: ref,
           onClick: onClick,
@@ -2185,1711 +2187,190 @@ const SelectionChipGroup = ({
   });
 };
 
-/** 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;
+/**
+ * Comment block variants.
+ */
+const CommentBlockVariant = {
+  indented: 'indented',
+  linear: 'linear'
 };
 
-/** Generate the combobox option id from the combobox id and the given id */
-const generateOptionId = (comboboxId, optionId) => `${comboboxId}-option-${optionId}`;
+/**
+ * Defines the props of the component.
+ */
 
-/** Verifies that the combobox registered option is an action */
-const isComboboxAction = option => Boolean(option?.isAction);
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$15 = 'CommentBlock';
 
-/** Verifies that the combobox registered option is the option's value */
-const isComboboxValue = option => {
-  return !isComboboxAction(option);
-};
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$13 = 'lumx-comment-block';
+const {
+  block: block$V,
+  element: element$H
+} = classNames.bem(CLASSNAME$13);
 
-const comboboxId = `combobox-${uniqueId()}`;
-const initialState = {
-  comboboxId,
-  listboxId: `${comboboxId}-popover`,
-  status: 'idle',
-  isOpen: false,
-  inputValue: '',
-  showAll: true,
-  options: {},
-  type: 'listbox',
-  optionsLength: 0
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$Y = {
+  variant: CommentBlockVariant.indented
 };
 
-/** Actions when the combobox opens. */
-const OPEN_COMBOBOX = (state, action) => {
+/**
+ * CommentBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const CommentBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
   const {
-    manual
-  } = action.payload || {};
-  // If the combobox was manually opened, show all suggestions
-  return {
-    ...state,
-    showAll: Boolean(manual),
-    isOpen: true
-  };
-};
+    actions,
+    avatarProps,
+    children,
+    className,
+    date,
+    fullDate,
+    hasActions,
+    headerActions,
+    isOpen,
+    isRelevant,
+    name,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    text,
+    theme = defaultTheme,
+    variant = DEFAULT_PROPS$Y.variant,
+    ...forwardedProps
+  } = props;
+  const hasChildren = Children.count(children) > 0;
+  return /*#__PURE__*/jsxs("div", {
+    ref: ref,
+    className: classNames.join(className, block$V({
+      'has-children': hasChildren && isOpen,
+      'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
+      'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
+      'is-relevant': isRelevant,
+      [`theme-${theme}`]: Boolean(theme)
+    })),
+    ...forwardedProps,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: element$H('wrapper'),
+      children: [/*#__PURE__*/jsx("div", {
+        className: element$H('avatar'),
+        children: /*#__PURE__*/jsx(Avatar, {
+          ...avatarProps,
+          size: Size$1.m,
+          onClick: onClick
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: element$H('container'),
+        children: [/*#__PURE__*/jsxs("div", {
+          className: element$H('content'),
+          children: [/*#__PURE__*/jsxs("div", {
+            className: element$H('meta'),
+            children: [name &&
+            /*#__PURE__*/
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+            jsx("span", {
+              className: element$H('name'),
+              onClick: onClick,
+              onMouseEnter: onMouseEnter,
+              onMouseLeave: onMouseLeave,
+              children: name
+            }), headerActions && /*#__PURE__*/jsx("span", {
+              className: element$H('header-actions'),
+              children: headerActions
+            })]
+          }), /*#__PURE__*/jsx("div", {
+            className: element$H('text'),
+            children: text
+          }), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
+            label: fullDate,
+            placement: "top",
+            children: /*#__PURE__*/jsx("span", {
+              className: element$H('date'),
+              children: date
+            })
+          }) : /*#__PURE__*/jsx("span", {
+            className: element$H('date'),
+            children: date
+          }))]
+        }), hasActions && /*#__PURE__*/jsx("div", {
+          className: element$H('actions'),
+          children: actions
+        })]
+      })]
+    }), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
+      className: element$H('children'),
+      children: children
+    })]
+  });
+});
+CommentBlock.displayName = COMPONENT_NAME$15;
+CommentBlock.className = CLASSNAME$13;
+CommentBlock.defaultProps = DEFAULT_PROPS$Y;
 
-/** Actions when the combobox closes */
-const CLOSE_COMBOBOX = state => {
-  return {
-    ...state,
-    showAll: true,
-    isOpen: false
-  };
-};
+/**
+ * Add a number of months from a date while resetting the day to prevent month length mismatches.
+ */
+function addMonthResetDay(date, monthOffset) {
+  const newDate = new Date(date.getTime());
+  newDate.setDate(1);
+  newDate.setMonth(date.getMonth() + monthOffset);
+  return newDate;
+}
 
-/** 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
-  };
-};
+/**
+ * Check if given date is valid.
+ */
+const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime());
 
-/** 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
-  };
-};
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$14 = 'DatePicker';
 
-/** 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
-  };
-};
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$12 = 'lumx-date-picker';
 
-/** 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}`
+/** Get first day of week for locale from the browser API */
+const getFromBrowser = locale => {
+  try {
+    const localeMetadata = new Intl.Locale(locale.code);
+    const {
+      firstDay
+    } = localeMetadata.getWeekInfo?.() || localeMetadata.weekInfo;
+    // Sunday is represented as `0` in Date.getDay()
+    if (firstDay === 7) return 0;
+    return firstDay;
+  } catch (e) {
+    return undefined;
   }
-});
+};
 
-/** 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)
-    );
-  })
-});
-
-/** 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);
-
-/**
- * The listbox containing the combobox's options.
- *
- * @family Combobox
- * @param ComboboxListBoxProps
- * @returns ComboboxListBox
- */
-const ComboboxListBox = ({
-  children,
-  renderItemSkeleton,
-  label,
-  popoverProps,
-  footer,
-  listRef,
-  ...forwardedProps
-}) => {
-  const {
-    status,
-    listboxId,
-    isOpen,
-    optionsLength,
-    handleClose: contextHandleClose,
-    type,
-    inputValue,
-    showEmptyState,
-    showErrorState,
-    translations
-  } = useCombobox();
-  const {
-    anchorRef
-  } = useComboboxRefs();
-  const {
-    onClose,
-    ...otherPopoverProps
-  } = popoverProps || {};
-  const {
-    style,
-    className,
-    ...listProps
-  } = forwardedProps;
-  // The states to show a full skeleton instead of the options
-  const showFullLoading = FULL_LOADING_STATES.includes(status);
-  const isErrorStateDisplayed = showErrorState && isOpen && status === 'error';
-  const isEmptyStateDisplayed = showEmptyState && isOpen && status === 'idle' && optionsLength === 0;
-
-  /**
-   *  The conditions in which we want to show the content of the popover
-   *  * The parent asked for the popover to be opened
-   *  * There is at least one option to displayed OR a skeleton
-   */
-  const showPopover = isOpen && (optionsLength > 0 || showFullLoading) || isEmptyStateDisplayed || isErrorStateDisplayed;
-  const handleClose = () => {
-    if (isOpen) {
-      contextHandleClose?.();
-      onClose?.();
-    }
-  };
-  const emptyMessage = translations.noResultsForInputLabel(inputValue);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(Text, {
-      as: "p",
-      className: visuallyHidden(),
-      role: "log",
-      "aria-live": "assertive",
-      children: [isOpen && !showFullLoading && !isEmptyStateDisplayed && !isErrorStateDisplayed && translations.nbOptionsLabel(optionsLength), isErrorStateDisplayed && `${translations.serviceUnavailableLabel} ${translations.tryReloadLabel}`, showFullLoading && translations.loadingLabel, isEmptyStateDisplayed && emptyMessage]
-    }), /*#__PURE__*/jsx(Popover, {
-      role: "none",
-      onClose: handleClose,
-      anchorRef: anchorRef,
-      fitToAnchorWidth: true,
-      fitWithinViewportHeight: true,
-      closeOnEscape: true,
-      closeOnClickAway: true,
-      placement: Placement.BOTTOM,
-      isOpen: isOpen,
-      ...otherPopoverProps,
-      children: /*#__PURE__*/jsxs("div", {
-        style: {
-          ...style,
-          overflowY: 'auto',
-          display: showPopover ? 'flex' : 'none',
-          flexDirection: 'column'
-        },
-        children: [/*#__PURE__*/jsxs("ul", {
-          ref: listRef,
-          id: listboxId,
-          role: type,
-          "aria-label": label,
-          className: block$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
-              })]
-            })]
-          })
-        })]
-      })
-    })]
-  });
-};
-
-const CLASSNAME$14 = 'lumx-combobox-section';
-const {
-  block: block$W,
-  element: element$I
-} = classNames.bem(CLASSNAME$14);
-
-/**
- * Content of the ComboboxSection.
- */
-const ComboboxSectionContent = ({
-  className,
-  title,
-  children,
-  isLoading,
-  renderItemSkeleton
-}) => {
-  const {
-    options
-  } = useCombobox();
-  const {
-    sectionId
-  } = useComboboxSectionId();
-  const hasRegisteredChildren = Boolean(Object.values(options).find(option => isComboboxValue(option) && option.sectionId === sectionId));
-  const titleId = title && `${sectionId}-title`;
-  if (!children && !isLoading) {
-    return null;
-  }
-  const isHidden = !hasRegisteredChildren && !isLoading;
-  return /*#__PURE__*/jsxs("li", {
-    className: block$W([className]),
-    role: !isHidden ? 'none' : undefined,
-    "aria-hidden": isHidden,
-    style: {
-      display: isHidden ? 'none' : undefined
-    },
-    children: [title && /*#__PURE__*/jsx(Text, {
-      as: "span",
-      className: element$I('header', [ListSubheader.className]),
-      "aria-hidden": "true",
-      id: titleId,
-      children: title
-    }), /*#__PURE__*/jsxs("ul", {
-      className: element$I('content'),
-      role: "group",
-      "aria-labelledby": titleId,
-      children: [children, isLoading && /*#__PURE__*/jsx(ComboboxListSkeleton, {
-        children: renderItemSkeleton
-      })]
-    })]
-  });
-};
-
-/**
- * Section for options of a Combobox.
- *
- * @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.
- */
-const CommentBlockVariant = {
-  indented: 'indented',
-  linear: 'linear'
-};
-
-/**
- * Defines the props of the component.
- */
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$15 = 'CommentBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$13 = 'lumx-comment-block';
-const {
-  block: block$V,
-  element: element$H
-} = classNames.bem(CLASSNAME$13);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$U = {
-  variant: CommentBlockVariant.indented
-};
-
-/**
- * CommentBlock component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const CommentBlock = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
-  const {
-    actions,
-    avatarProps,
-    children,
-    className,
-    date,
-    fullDate,
-    hasActions,
-    headerActions,
-    isOpen,
-    isRelevant,
-    name,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    text,
-    theme = defaultTheme,
-    variant = DEFAULT_PROPS$U.variant,
-    ...forwardedProps
-  } = props;
-  const hasChildren = Children.count(children) > 0;
-  return /*#__PURE__*/jsxs("div", {
-    ref: ref,
-    className: classNames.join(className, block$V({
-      'has-children': hasChildren && isOpen,
-      'has-indented-children': hasChildren && variant === CommentBlockVariant.indented,
-      'has-linear-children': hasChildren && variant === CommentBlockVariant.linear,
-      'is-relevant': isRelevant,
-      [`theme-${theme}`]: Boolean(theme)
-    })),
-    ...forwardedProps,
-    children: [/*#__PURE__*/jsxs("div", {
-      className: element$H('wrapper'),
-      children: [/*#__PURE__*/jsx("div", {
-        className: element$H('avatar'),
-        children: /*#__PURE__*/jsx(Avatar, {
-          ...avatarProps,
-          size: Size$1.m,
-          onClick: onClick
-        })
-      }), /*#__PURE__*/jsxs("div", {
-        className: element$H('container'),
-        children: [/*#__PURE__*/jsxs("div", {
-          className: element$H('content'),
-          children: [/*#__PURE__*/jsxs("div", {
-            className: element$H('meta'),
-            children: [name &&
-            /*#__PURE__*/
-            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-            jsx("span", {
-              className: element$H('name'),
-              onClick: onClick,
-              onMouseEnter: onMouseEnter,
-              onMouseLeave: onMouseLeave,
-              children: name
-            }), headerActions && /*#__PURE__*/jsx("span", {
-              className: element$H('header-actions'),
-              children: headerActions
-            })]
-          }), /*#__PURE__*/jsx("div", {
-            className: element$H('text'),
-            children: text
-          }), date && (fullDate ? /*#__PURE__*/jsx(Tooltip, {
-            label: fullDate,
-            placement: "top",
-            children: /*#__PURE__*/jsx("span", {
-              className: element$H('date'),
-              children: date
-            })
-          }) : /*#__PURE__*/jsx("span", {
-            className: element$H('date'),
-            children: date
-          }))]
-        }), hasActions && /*#__PURE__*/jsx("div", {
-          className: element$H('actions'),
-          children: actions
-        })]
-      })]
-    }), hasChildren && isOpen && /*#__PURE__*/jsx("div", {
-      className: element$H('children'),
-      children: children
-    })]
-  });
-});
-CommentBlock.displayName = COMPONENT_NAME$15;
-CommentBlock.className = CLASSNAME$13;
-CommentBlock.defaultProps = DEFAULT_PROPS$U;
-
-/**
- * Add a number of months from a date while resetting the day to prevent month length mismatches.
- */
-function addMonthResetDay(date, monthOffset) {
-  const newDate = new Date(date.getTime());
-  newDate.setDate(1);
-  newDate.setMonth(date.getMonth() + monthOffset);
-  return newDate;
-}
-
-/**
- * Check if given date is valid.
- */
-const isDateValid = date => date instanceof Date && !Number.isNaN(date.getTime());
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$14 = 'DatePicker';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$12 = 'lumx-date-picker';
-
-/** Get first day of week for locale from the browser API */
-const getFromBrowser = locale => {
-  try {
-    const localeMetadata = new Intl.Locale(locale.code);
-    const {
-      firstDay
-    } = localeMetadata.getWeekInfo?.() || localeMetadata.weekInfo;
-    // Sunday is represented as `0` in Date.getDay()
-    if (firstDay === 7) return 0;
-    return firstDay;
-  } catch (e) {
-    return undefined;
-  }
-};
-
-/** List first day for each locale (could be removed when all browser implement Locale weekInfo) */
-const FIRST_DAY_FOR_LOCALES = [{
-  // Locales with Sunday as the first day of the week
-  localeRX: /^(af|ar-(dz|eg|sa)|bn|cy|en-(ca|us|za)|fr-ca|gd|he|hi|ja|km|ko|pt-br|te|th|ug|zh-hk)$/i,
-  firstDay: 0
-}, {
-  // Locales with Monday as the first day of the week
-  localeRX: /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
-  firstDay: 1
-}, {
-  // Locales with Saturday as the first day of the week
-  localeRX: /^(ar|fa-ir)$/i,
-  firstDay: 6
-}];
+/** List first day for each locale (could be removed when all browser implement Locale weekInfo) */
+const FIRST_DAY_FOR_LOCALES = [{
+  // Locales with Sunday as the first day of the week
+  localeRX: /^(af|ar-(dz|eg|sa)|bn|cy|en-(ca|us|za)|fr-ca|gd|he|hi|ja|km|ko|pt-br|te|th|ug|zh-hk)$/i,
+  firstDay: 0
+}, {
+  // Locales with Monday as the first day of the week
+  localeRX: /^(ar-(ma|tn)|az|be|bg|bs|ca|cs|da|de|el|en-(au|gb|ie|in|nz)|eo|es|et|eu|fi|fr|fy|gl|gu|hr|ht|hu|hy|id|is|it|ka|kk|kn|lb|lt|lv|mk|mn|ms|mt|nb|nl|nn|oc|pl|pt|ro|ru|sk|sl|sq|sr|sv|ta|tr|uk|uz|vi|zh-(cn|tw))$/i,
+  firstDay: 1
+}, {
+  // Locales with Saturday as the first day of the week
+  localeRX: /^(ar|fa-ir)$/i,
+  firstDay: 6
+}];
 
 /** Find first day of week for locale from the constant */
 const getFromConstant = (locale, searchBy = 'code') => {
@@ -4939,7 +3420,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$T = {
+const DEFAULT_PROPS$X = {
   size: Size$1.big,
   disableBodyScroll: true
 };
@@ -4970,11 +3451,11 @@ const Dialog = forwardRef((props, ref) => {
     parentElement,
     contentRef,
     preventAutoClose,
-    size = DEFAULT_PROPS$T.size,
+    size = DEFAULT_PROPS$X.size,
     zIndex,
     dialogProps,
     onVisibilityChange,
-    disableBodyScroll = DEFAULT_PROPS$T.disableBodyScroll,
+    disableBodyScroll = DEFAULT_PROPS$X.disableBodyScroll,
     preventCloseOnClick,
     preventCloseOnEscape,
     ...forwardedProps
@@ -5114,7 +3595,7 @@ const Dialog = forwardRef((props, ref) => {
 });
 Dialog.displayName = COMPONENT_NAME$11;
 Dialog.className = CLASSNAME$11;
-Dialog.defaultProps = DEFAULT_PROPS$T;
+Dialog.defaultProps = DEFAULT_PROPS$X;
 
 /**
  * Component display name.
@@ -5127,12 +3608,38 @@ const COMPONENT_NAME$10 = 'Divider';
 const CLASSNAME$10 = 'lumx-divider';
 const {
   block: block$T
-} = classNames.bem(CLASSNAME$10);
+} = bem(CLASSNAME$10);
+
+/**
+ * Divider component.
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const Divider$1 = props => {
+  const {
+    className,
+    theme,
+    ref,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/jsx("hr", {
+    ref: ref,
+    ...forwardedProps,
+    className: classnames(className, block$T({
+      [`theme-${theme}`]: Boolean(theme)
+    }))
+  });
+};
+
+/**
+ * Defines the props of the component.
+ */
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$S = {};
+const DEFAULT_PROPS$W = {};
 
 /**
  * Divider component.
@@ -5144,21 +3651,18 @@ const DEFAULT_PROPS$S = {};
 const Divider = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    className,
     theme = defaultTheme,
-    ...forwardedProps
+    ...otherProps
   } = props;
-  return /*#__PURE__*/jsx("hr", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames.join(className, block$T({
-      [`theme-${theme}`]: Boolean(theme)
-    }))
+  return Divider$1({
+    ref,
+    theme,
+    ...otherProps
   });
 });
 Divider.displayName = COMPONENT_NAME$10;
 Divider.className = CLASSNAME$10;
-Divider.defaultProps = DEFAULT_PROPS$S;
+Divider.defaultProps = DEFAULT_PROPS$W;
 
 /**
  * Component display name.
@@ -5383,7 +3887,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$R = {
+const DEFAULT_PROPS$V = {
   tabIndex: -1
 };
 
@@ -5402,7 +3906,7 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$R.tabIndex,
+    tabIndex = DEFAULT_PROPS$V.tabIndex,
     ...forwardedProps
   } = props;
   const adjustedItemPadding = itemPadding ?? (isClickable ? Size$1.big : undefined);
@@ -5418,7 +3922,7 @@ const InternalList = forwardRef((props, ref) => {
 });
 InternalList.displayName = COMPONENT_NAME$_;
 InternalList.className = CLASSNAME$_;
-InternalList.defaultProps = DEFAULT_PROPS$R;
+InternalList.defaultProps = DEFAULT_PROPS$V;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -7863,7 +6367,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$Q = {
+const DEFAULT_PROPS$U = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -7880,24 +6384,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$Q.elevation,
+    elevation = DEFAULT_PROPS$U.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$Q.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$Q.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$U.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$U.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$Q.placement,
+    placement = DEFAULT_PROPS$U.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$Q.zIndex,
+    zIndex = DEFAULT_PROPS$U.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -7983,7 +6487,7 @@ const Popover = skipRender(
 () => Boolean(DOCUMENT), _InnerPopover);
 Popover.displayName = COMPONENT_NAME$Z;
 Popover.className = CLASSNAME$Z;
-Popover.defaultProps = DEFAULT_PROPS$Q;
+Popover.defaultProps = DEFAULT_PROPS$U;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -8043,7 +6547,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {
+const DEFAULT_PROPS$T = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -8066,18 +6570,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    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,
+    closeOnClick = DEFAULT_PROPS$T.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$T.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$T.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$T.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$T.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$T.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$P.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$P.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$T.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$T.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -8123,7 +6627,7 @@ const Dropdown = forwardRef((props, ref) => {
 });
 Dropdown.displayName = COMPONENT_NAME$Y;
 Dropdown.className = CLASSNAME$Y;
-Dropdown.defaultProps = DEFAULT_PROPS$P;
+Dropdown.defaultProps = DEFAULT_PROPS$T;
 
 /**
  * Component display name.
@@ -8142,7 +6646,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$S = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -8160,7 +6664,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$O.closeMode,
+    closeMode = DEFAULT_PROPS$S.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -8277,11 +6781,11 @@ const ExpansionPanel = forwardRef((props, ref) => {
 });
 ExpansionPanel.displayName = COMPONENT_NAME$X;
 ExpansionPanel.className = CLASSNAME$X;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$S;
 
 const COMPONENT_NAME$W = 'Flag';
 const CLASSNAME$W = 'lumx-flag';
-const DEFAULT_PROPS$N = {};
+const DEFAULT_PROPS$R = {};
 const {
   block: block$N,
   element: element$B
@@ -8345,7 +6849,7 @@ const Flag = forwardRef((props, ref) => {
 });
 Flag.displayName = COMPONENT_NAME$W;
 Flag.className = CLASSNAME$W;
-Flag.defaultProps = DEFAULT_PROPS$N;
+Flag.defaultProps = DEFAULT_PROPS$R;
 
 /**
  * Defines the props of the component.
@@ -8438,7 +6942,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$M = {
+const DEFAULT_PROPS$Q = {
   gap: Size$1.big,
   orientation: Orientation$1.horizontal
 };
@@ -8468,8 +6972,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$M.gap,
-    orientation = DEFAULT_PROPS$M.orientation,
+    gap = DEFAULT_PROPS$Q.gap,
+    orientation = DEFAULT_PROPS$Q.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -8523,7 +7027,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
 });
 BaseGenericBlock.displayName = COMPONENT_NAME$U;
 BaseGenericBlock.className = CLASSNAME$U;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$M;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$Q;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -8571,7 +7075,7 @@ const CLASSNAME$T = 'lumx-heading';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {};
+const DEFAULT_PROPS$P = {};
 
 /**
  * Get Heading component common props
@@ -8672,7 +7176,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$O = {};
 
 /**
  * Text component common props
@@ -8759,7 +7263,7 @@ const Text = forwardRef((props, ref) => {
 });
 Text.displayName = COMPONENT_NAME$S;
 Text.className = CLASSNAME$S;
-Text.defaultProps = DEFAULT_PROPS$K;
+Text.defaultProps = DEFAULT_PROPS$O;
 
 const HeadingLevelContext = /*#__PURE__*/createContext(defaultContext);
 
@@ -8796,7 +7300,7 @@ const Heading = forwardRef((props, ref) => {
 });
 Heading.displayName = COMPONENT_NAME$T;
 Heading.className = CLASSNAME$T;
-Heading.defaultProps = DEFAULT_PROPS$L;
+Heading.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Computes the next heading level based on the optional prop level or the parent context level.
@@ -8847,7 +7351,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {
+const DEFAULT_PROPS$N = {
   orientation: Orientation$1.horizontal,
   wrap: 'nowrap'
 };
@@ -8865,9 +7369,9 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$J.orientation,
+    orientation = DEFAULT_PROPS$N.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$J.wrap,
+    wrap = DEFAULT_PROPS$N.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
@@ -8885,7 +7389,7 @@ const Grid = forwardRef((props, ref) => {
 });
 Grid.displayName = COMPONENT_NAME$R;
 Grid.className = CLASSNAME$R;
-Grid.defaultProps = DEFAULT_PROPS$J;
+Grid.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Component display name.
@@ -8943,7 +7447,7 @@ const CLASSNAME$P = 'lumx-grid-column';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {};
+const DEFAULT_PROPS$M = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -8980,7 +7484,7 @@ const GridColumn = forwardRef((props, ref) => {
 });
 GridColumn.displayName = COMPONENT_NAME$P;
 GridColumn.className = CLASSNAME$P;
-GridColumn.defaultProps = DEFAULT_PROPS$I;
+GridColumn.defaultProps = DEFAULT_PROPS$M;
 
 /**
  * Icon component.
@@ -9098,7 +7602,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {
+const DEFAULT_PROPS$L = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -9114,9 +7618,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     actions,
-    align = DEFAULT_PROPS$H.align,
+    align = DEFAULT_PROPS$L.align,
     alt,
-    captionPosition = DEFAULT_PROPS$H.captionPosition,
+    captionPosition = DEFAULT_PROPS$L.captionPosition,
     captionStyle,
     className,
     description,
@@ -9170,7 +7674,7 @@ const ImageBlock = forwardRef((props, ref) => {
 });
 ImageBlock.displayName = COMPONENT_NAME$O;
 ImageBlock.className = CLASSNAME$O;
-ImageBlock.defaultProps = DEFAULT_PROPS$H;
+ImageBlock.defaultProps = DEFAULT_PROPS$L;
 
 /**
  * Component display name.
@@ -9930,7 +8434,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {};
+const DEFAULT_PROPS$K = {};
 
 /**
  * InlineList component.
@@ -9983,7 +8487,7 @@ const InlineList = forwardRef((props, ref) => {
 });
 InlineList.displayName = COMPONENT_NAME$M;
 InlineList.className = CLASSNAME$M;
-InlineList.defaultProps = DEFAULT_PROPS$G;
+InlineList.defaultProps = DEFAULT_PROPS$K;
 
 /**
  * InputHelper component.
@@ -10155,25 +8659,11 @@ const Lightbox = forwardRef((props, ref) => {
           })
         })
       })]
-    })
-  });
-});
-Lightbox.displayName = COMPONENT_NAME$L;
-Lightbox.className = CLASSNAME$L;
-
-/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
-const forwardRefPolymorphic = React__default.forwardRef;
-
-/**
- * Render clickable element (link, button or custom element)
- * (also does some basic disabled state handling)
- */
-const RawClickable = forwardRefPolymorphic((props, ref) => {
-  return RawClickable$1({
-    ref,
-    ...props
+    })
   });
 });
+Lightbox.displayName = COMPONENT_NAME$L;
+Lightbox.className = CLASSNAME$L;
 
 /**
  * Component display name.
@@ -10187,7 +8677,101 @@ const CLASSNAME$K = 'lumx-link';
 const {
   block: block$E,
   element: element$u
-} = classNames.bem(CLASSNAME$K);
+} = bem(CLASSNAME$K);
+
+/**
+ * Link component (Core UI).
+ *
+ * @param  props Component props.
+ * @return JSX element.
+ */
+const Link$1 = props => {
+  const {
+    label,
+    className,
+    color: propColor,
+    colorVariant: propColorVariant,
+    leftIcon,
+    rightIcon,
+    typography: typography$1,
+    as,
+    ref,
+    isDisabled,
+    theme,
+    href,
+    target,
+    onClick,
+    ...forwardedProps
+  } = props;
+  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
+
+  // Determine element type
+  const ElementType = as || (href ? 'a' : 'button');
+
+  // Build disabled props
+  const disabledProps = {};
+  if (isDisabled) {
+    if (ElementType === 'button' || !href && !as) {
+      disabledProps.disabled = true;
+    } else {
+      disabledProps['aria-disabled'] = true;
+      disabledProps.tabIndex = -1;
+    }
+  }
+
+  // Build class name
+  const combinedClassName = classnames(className, block$E({
+    [`color-${color}`]: Boolean(color),
+    [`color-variant-${colorVariant}`]: Boolean(colorVariant),
+    'has-typography': !!typography$1
+  }), typography$1 && typography(typography$1));
+
+  // Build content with proper spacing for icons
+  const content = /*#__PURE__*/jsxs(Fragment, {
+    children: [leftIcon && /*#__PURE__*/jsxs(Fragment, {
+      children: [" ", Icon$1({
+        icon: leftIcon,
+        className: element$u('left-icon')
+      }), " "]
+    }), label && /*#__PURE__*/jsx("span", {
+      className: element$u('content'),
+      children: label
+    }), rightIcon && /*#__PURE__*/jsxs(Fragment, {
+      children: [" ", Icon$1({
+        icon: rightIcon,
+        className: element$u('right-icon')
+      }), " "]
+    })]
+  });
+
+  // Build element props
+  const elementProps = {
+    ref,
+    className: combinedClassName,
+    onClick: isDisabled ? undefined : onClick,
+    ...forwardedProps,
+    ...disabledProps
+  };
+  if (href) {
+    elementProps.href = href;
+  }
+  if (target) {
+    elementProps.target = target;
+  }
+  return /*#__PURE__*/jsx(ElementType, {
+    ...elementProps,
+    children: content
+  });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$J = {};
 
 /**
  * Link component.
@@ -10198,47 +8782,42 @@ const {
  */
 const Link = forwardRef((props, ref) => {
   const {
+    isAnyDisabled,
     disabledStateProps,
     otherProps
   } = useDisableStateProps(props);
   const {
     children,
     className,
-    color: propColor,
-    colorVariant: propColorVariant,
+    color,
+    colorVariant,
     leftIcon,
     rightIcon,
     typography,
     linkAs,
     ...forwardedProps
   } = otherProps;
-  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
-  return /*#__PURE__*/jsx(RawClickable, {
-    ref: ref,
-    as: linkAs || (forwardedProps.href ? 'a' : 'button'),
+
+  // Wrap children with spaces if they contain icons
+  const label = wrapChildrenIconWithSpaces(children);
+  return Link$1({
+    ref,
+    label,
+    className,
+    color,
+    colorVariant,
+    leftIcon,
+    rightIcon,
+    typography,
+    as: linkAs,
     ...forwardedProps,
     ...disabledStateProps,
-    className: classNames.join(className, block$E({
-      [`color-${color}`]: Boolean(color),
-      [`color-variant-${colorVariant}`]: Boolean(colorVariant),
-      'has-typography': !!typography
-    }), typography && classNames.typography(typography)),
-    children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
-      children: [leftIcon && /*#__PURE__*/jsx(Icon, {
-        icon: leftIcon,
-        className: element$u('left-icon')
-      }), children && /*#__PURE__*/jsx("span", {
-        className: element$u('content'),
-        children: children
-      }), rightIcon && /*#__PURE__*/jsx(Icon, {
-        icon: rightIcon,
-        className: element$u('right-icon')
-      })]
-    }))
+    isDisabled: isAnyDisabled
   });
 });
 Link.displayName = COMPONENT_NAME$K;
 Link.className = CLASSNAME$K;
+Link.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
@@ -10257,7 +8836,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$F = {
+const DEFAULT_PROPS$I = {
   size: Size$1.regular,
   titleHeading: 'h2'
 };
@@ -10277,11 +8856,11 @@ const LinkPreview = forwardRef((props, ref) => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$F.size,
+    size = DEFAULT_PROPS$I.size,
     theme = defaultTheme,
     thumbnailProps,
     title,
-    titleHeading = DEFAULT_PROPS$F.titleHeading,
+    titleHeading = DEFAULT_PROPS$I.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -10349,7 +8928,7 @@ const LinkPreview = forwardRef((props, ref) => {
 });
 LinkPreview.displayName = COMPONENT_NAME$J;
 LinkPreview.className = CLASSNAME$J;
-LinkPreview.defaultProps = DEFAULT_PROPS$F;
+LinkPreview.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Render link with default <a> HTML component or a custom one provided by `linkAs`.
@@ -10382,7 +8961,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$E = {
+const DEFAULT_PROPS$H = {
   size: Size$1.regular
 };
 
@@ -10421,7 +9000,7 @@ const ListItem = forwardRef((props, ref) => {
     linkProps = {},
     linkRef,
     onItemSelected,
-    size = DEFAULT_PROPS$E.size,
+    size = DEFAULT_PROPS$H.size,
     ...forwardedProps
   } = otherProps;
   const role = linkAs || linkProps.href ? 'link' : 'button';
@@ -10478,7 +9057,7 @@ const ListItem = forwardRef((props, ref) => {
 });
 ListItem.displayName = COMPONENT_NAME$I;
 ListItem.className = CLASSNAME$I;
-ListItem.defaultProps = DEFAULT_PROPS$E;
+ListItem.defaultProps = DEFAULT_PROPS$H;
 
 /**
  * Component display name.
@@ -10666,7 +9245,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$D = {};
+const DEFAULT_PROPS$G = {};
 
 /**
  * Mosaic component.
@@ -10733,7 +9312,21 @@ const Mosaic = forwardRef((props, ref) => {
 });
 Mosaic.displayName = COMPONENT_NAME$E;
 Mosaic.className = CLASSNAME$E;
-Mosaic.defaultProps = DEFAULT_PROPS$D;
+Mosaic.defaultProps = DEFAULT_PROPS$G;
+
+/** Same as `React.forwardRef` but inferring Ref type from the `as` prop. */
+const forwardRefPolymorphic = React__default.forwardRef;
+
+/**
+ * Render clickable element (link, button or custom element)
+ * (also does some basic disabled state handling)
+ */
+const RawClickable = forwardRefPolymorphic((props, ref) => {
+  return RawClickable$1({
+    ref,
+    ...props
+  });
+});
 
 const NavigationContext = /*#__PURE__*/createContext({
   orientation: Orientation$1.vertical
@@ -10922,7 +9515,7 @@ const {
 /**
  * Component default props
  */
-const DEFAULT_PROPS$C = {
+const DEFAULT_PROPS$F = {
   orientation: Orientation$1.vertical
 };
 const Navigation = forwardRef((props, ref) => {
@@ -10931,7 +9524,7 @@ const Navigation = forwardRef((props, ref) => {
     children,
     className,
     theme = defaultTheme,
-    orientation = DEFAULT_PROPS$C.orientation,
+    orientation = DEFAULT_PROPS$F.orientation,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx(ThemeProvider, {
@@ -10957,7 +9550,7 @@ const Navigation = forwardRef((props, ref) => {
 });
 Navigation.displayName = COMPONENT_NAME$C;
 Navigation.className = CLASSNAME$C;
-Navigation.defaultProps = DEFAULT_PROPS$C;
+Navigation.defaultProps = DEFAULT_PROPS$F;
 
 // Sub components
 Navigation.Section = NavigationSection;
@@ -11002,7 +9595,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$B = {
+const DEFAULT_PROPS$E = {
   zIndex: 9999,
   usePortal: true
 };
@@ -11026,8 +9619,8 @@ const Notification = forwardRef((props, ref) => {
     onClick,
     theme = defaultTheme,
     type,
-    zIndex = DEFAULT_PROPS$B.zIndex,
-    usePortal = DEFAULT_PROPS$B.usePortal,
+    zIndex = DEFAULT_PROPS$E.zIndex,
+    usePortal = DEFAULT_PROPS$E.usePortal,
     style,
     ...forwardedProps
   } = props;
@@ -11092,7 +9685,7 @@ const Notification = forwardRef((props, ref) => {
 });
 Notification.displayName = COMPONENT_NAME$B;
 Notification.className = CLASSNAME$B;
-Notification.defaultProps = DEFAULT_PROPS$B;
+Notification.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Component display name.
@@ -11107,7 +9700,7 @@ const CLASSNAME$A = 'lumx-popover-dialog';
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$A = {};
+const DEFAULT_PROPS$D = {};
 
 /**
  * PopoverDialog component.
@@ -11150,7 +9743,7 @@ const PopoverDialog = forwardRef((props, ref) => {
 });
 PopoverDialog.displayName = COMPONENT_NAME$A;
 PopoverDialog.className = CLASSNAME$A;
-PopoverDialog.defaultProps = DEFAULT_PROPS$A;
+PopoverDialog.defaultProps = DEFAULT_PROPS$D;
 
 /**
  * Component display name.
@@ -11169,7 +9762,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$z = {
+const DEFAULT_PROPS$C = {
   orientation: Orientation$1.horizontal
 };
 
@@ -11189,7 +9782,7 @@ const PostBlock = forwardRef((props, ref) => {
     className,
     meta,
     onClick,
-    orientation = DEFAULT_PROPS$z.orientation,
+    orientation = DEFAULT_PROPS$C.orientation,
     tags,
     text,
     theme = defaultTheme,
@@ -11251,7 +9844,7 @@ const PostBlock = forwardRef((props, ref) => {
 });
 PostBlock.displayName = COMPONENT_NAME$z;
 PostBlock.className = CLASSNAME$z;
-PostBlock.defaultProps = DEFAULT_PROPS$z;
+PostBlock.defaultProps = DEFAULT_PROPS$C;
 
 /**
  * Component display name.
@@ -11270,7 +9863,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$y = {};
+const DEFAULT_PROPS$B = {};
 
 /**
  * ProgressLinear component.
@@ -11301,7 +9894,7 @@ const ProgressLinear = forwardRef((props, ref) => {
 });
 ProgressLinear.displayName = COMPONENT_NAME$y;
 ProgressLinear.className = CLASSNAME$y;
-ProgressLinear.defaultProps = DEFAULT_PROPS$y;
+ProgressLinear.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Component display name.
@@ -11320,7 +9913,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$x = {
+const DEFAULT_PROPS$A = {
   size: Size$1.m,
   display: 'block'
 };
@@ -11337,8 +9930,8 @@ const ProgressCircular = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    size = DEFAULT_PROPS$x.size,
-    display = DEFAULT_PROPS$x.display,
+    size = DEFAULT_PROPS$A.size,
+    display = DEFAULT_PROPS$A.display,
     ...forwardedProps
   } = props;
   const Element = display === 'block' ? 'div' : 'span';
@@ -11370,7 +9963,7 @@ const ProgressCircular = forwardRef((props, ref) => {
 });
 ProgressCircular.displayName = COMPONENT_NAME$x;
 ProgressCircular.className = CLASSNAME$x;
-ProgressCircular.defaultProps = DEFAULT_PROPS$x;
+ProgressCircular.defaultProps = DEFAULT_PROPS$A;
 
 const ProgressVariant = {
   linear: 'linear',
@@ -11397,7 +9990,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$w = {
+const DEFAULT_PROPS$z = {
   variant: ProgressVariant.circular
 };
 
@@ -11414,7 +10007,7 @@ const Progress = forwardRef((props, ref) => {
   const {
     className,
     theme = defaultTheme,
-    variant = DEFAULT_PROPS$w.variant,
+    variant = DEFAULT_PROPS$z.variant,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsxs("div", {
@@ -11433,7 +10026,7 @@ const Progress = forwardRef((props, ref) => {
 });
 Progress.displayName = COMPONENT_NAME$w;
 Progress.className = CLASSNAME$w;
-Progress.defaultProps = DEFAULT_PROPS$w;
+Progress.defaultProps = DEFAULT_PROPS$z;
 
 const INIT_STATE = {
   isLazy: true,
@@ -11560,7 +10153,7 @@ const useTabProviderContextState = () => {
   return context?.[0];
 };
 
-const DEFAULT_PROPS$v = {
+const DEFAULT_PROPS$y = {
   isLazy: INIT_STATE.isLazy,
   shouldActivateOnFocus: INIT_STATE.shouldActivateOnFocus
 };
@@ -11589,7 +10182,7 @@ const ProgressTrackerProvider = props => {
     dispatch({
       type: 'update',
       payload: {
-        ...DEFAULT_PROPS$v,
+        ...DEFAULT_PROPS$y,
         ...propState,
         activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex
       }
@@ -11612,7 +10205,7 @@ const ProgressTrackerProvider = props => {
     children: children
   });
 };
-ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$v;
+ProgressTrackerProvider.defaultProps = DEFAULT_PROPS$y;
 
 const useRovingTabIndex = ({
   parentRef,
@@ -11704,7 +10297,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$u = {};
+const DEFAULT_PROPS$x = {};
 
 /**
  * ProgressTracker component.
@@ -11760,7 +10353,7 @@ const ProgressTracker = forwardRef((props, ref) => {
 });
 ProgressTracker.displayName = COMPONENT_NAME$v;
 ProgressTracker.className = CLASSNAME$v;
-ProgressTracker.defaultProps = DEFAULT_PROPS$u;
+ProgressTracker.defaultProps = DEFAULT_PROPS$x;
 
 /**
  * Component display name.
@@ -11779,7 +10372,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$t = {};
+const DEFAULT_PROPS$w = {};
 
 /**
  * ProgressTrackerStep component.
@@ -11874,7 +10467,7 @@ const ProgressTrackerStep = forwardRef((props, ref) => {
 });
 ProgressTrackerStep.displayName = COMPONENT_NAME$u;
 ProgressTrackerStep.className = CLASSNAME$u;
-ProgressTrackerStep.defaultProps = DEFAULT_PROPS$t;
+ProgressTrackerStep.defaultProps = DEFAULT_PROPS$w;
 
 /**
  * Component display name.
@@ -11892,7 +10485,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$s = {};
+const DEFAULT_PROPS$v = {};
 
 /**
  * ProgressTrackerStepPanel component.
@@ -11928,7 +10521,7 @@ const ProgressTrackerStepPanel = forwardRef((props, ref) => {
 });
 ProgressTrackerStepPanel.displayName = COMPONENT_NAME$t;
 ProgressTrackerStepPanel.className = CLASSNAME$t;
-ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$s;
+ProgressTrackerStepPanel.defaultProps = DEFAULT_PROPS$v;
 
 /**
  * Component display name.
@@ -11942,27 +10535,15 @@ const CLASSNAME$s = 'lumx-radio-button';
 const {
   block: block$p,
   element: element$h
-} = classNames.bem(CLASSNAME$s);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$r = {};
+} = bem(CLASSNAME$s);
 
 /**
  * RadioButton component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const RadioButton = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme$1.light;
+const RadioButton$1 = props => {
   const {
     checked,
     className,
@@ -11972,14 +10553,15 @@ const RadioButton = forwardRef((props, ref) => {
     isChecked = checked,
     label,
     name,
+    ref,
     onChange,
-    theme = defaultTheme,
+    theme,
     value,
-    inputProps,
+    inputProps = {},
+    isDisabled,
+    inputId,
     ...forwardedProps
-  } = otherProps;
-  const generatedInputId = useId();
-  const inputId = id || generatedInputId;
+  } = props;
   const handleChange = event => {
     if (onChange) {
       onChange(value, name, event);
@@ -11988,9 +10570,9 @@ const RadioButton = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$p({
+    className: classnames(className, block$p({
       'is-checked': isChecked,
-      'is-disabled': isAnyDisabled,
+      'is-disabled': isDisabled,
       'is-unchecked': !isChecked,
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -11999,15 +10581,16 @@ const RadioButton = forwardRef((props, ref) => {
       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'),
@@ -12019,23 +10602,85 @@ const RadioButton = forwardRef((props, ref) => {
       })]
     }), /*#__PURE__*/jsxs("div", {
       className: element$h('content'),
-      children: [label && /*#__PURE__*/jsx(InputLabel, {
+      children: [label && InputLabel$1({
         htmlFor: inputId,
-        theme: theme,
         className: element$h('label'),
+        theme,
         children: label
-      }), helper && /*#__PURE__*/jsx(InputHelper, {
+      }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        theme: theme,
         className: element$h('helper'),
+        theme,
         children: helper
       })]
     })]
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$u = {};
+
+/**
+ * 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$r;
+RadioButton.defaultProps = DEFAULT_PROPS$u;
 
 /**
  * Component display name.
@@ -12047,25 +10692,58 @@ const COMPONENT_NAME$r = 'RadioGroup';
  */
 const CLASSNAME$r = 'lumx-radio-group';
 
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$t = {};
+
 /**
  * RadioGroup component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const RadioGroup = forwardRef((props, ref) => {
+const RadioGroup$1 = props => {
   const {
     children,
     className,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$r),
+    className: classnames(className, CLASSNAME$r),
     children: children
   });
+};
+RadioGroup$1.displayName = COMPONENT_NAME$r;
+RadioGroup$1.className = CLASSNAME$r;
+RadioGroup$1.defaultProps = DEFAULT_PROPS$t;
+
+/**
+ * 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;
@@ -12225,7 +10903,7 @@ const {
 } = classNames.bem(CLASSNAME$p);
 
 /** The default value of props. */
-const DEFAULT_PROPS$q = {
+const DEFAULT_PROPS$s = {
   selectedValueRender: choice => choice,
   variant: SelectVariant.input
 };
@@ -12348,7 +11026,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$q,
+    ...DEFAULT_PROPS$s,
     ...props,
     className: classNames.join(props.className, block$n({
       'has-input-clear': hasInputClear,
@@ -12360,7 +11038,7 @@ const Select = forwardRef((props, ref) => {
 });
 Select.displayName = COMPONENT_NAME$q;
 Select.className = CLASSNAME$p;
-Select.defaultProps = DEFAULT_PROPS$q;
+Select.defaultProps = DEFAULT_PROPS$s;
 Select.className = CLASSNAME$p;
 
 /** The display name of the component. */
@@ -12374,7 +11052,7 @@ const {
 } = classNames.bem(CLASSNAME$o);
 
 /** The default value of props. */
-const DEFAULT_PROPS$p = {
+const DEFAULT_PROPS$r = {
   selectedChipRender(choice, index, onClear, isDisabled, theme) {
     const onClick = event => onClear && onClear(event, choice);
     return /*#__PURE__*/jsx(Chip, {
@@ -12500,7 +11178,7 @@ const SelectMultipleField = props => {
  */
 const SelectMultiple = forwardRef((props, ref) => {
   return WithSelectContext(SelectMultipleField, {
-    ...DEFAULT_PROPS$p,
+    ...DEFAULT_PROPS$r,
     ...props,
     className: classNames.join(props.className, block$m({
       'has-multiple': !props.isEmpty
@@ -12511,7 +11189,7 @@ const SelectMultiple = forwardRef((props, ref) => {
 });
 SelectMultiple.displayName = COMPONENT_NAME$p;
 SelectMultiple.className = CLASSNAME$o;
-SelectMultiple.defaultProps = DEFAULT_PROPS$p;
+SelectMultiple.defaultProps = DEFAULT_PROPS$r;
 
 /**
  * Component display name.
@@ -12566,7 +11244,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$o = {
+const DEFAULT_PROPS$q = {
   emphasis: Emphasis$1.high,
   closeMode: 'unmount'
 };
@@ -12582,7 +11260,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
   const {
     children,
     className,
-    emphasis = DEFAULT_PROPS$o.emphasis,
+    emphasis = DEFAULT_PROPS$q.emphasis,
     icon,
     isOpen,
     isSelected,
@@ -12592,7 +11270,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
     onActionClick,
     onClick,
     toggleButtonProps,
-    closeMode = DEFAULT_PROPS$o.closeMode,
+    closeMode = DEFAULT_PROPS$q.closeMode,
     ...forwardedProps
   } = props;
   const content = children && Children.toArray(children).filter(isComponent(SideNavigationItem));
@@ -12663,9 +11341,7 @@ const SideNavigationItem = forwardRef((props, ref) => {
 });
 SideNavigationItem.displayName = COMPONENT_NAME$n;
 SideNavigationItem.className = CLASSNAME$m;
-SideNavigationItem.defaultProps = DEFAULT_PROPS$o;
-
-const DEFAULT_PROPS$n = {};
+SideNavigationItem.defaultProps = DEFAULT_PROPS$q;
 
 /**
  * Component display name.
@@ -12678,38 +11354,37 @@ const COMPONENT_NAME$m = 'SkeletonCircle';
 const CLASSNAME$l = 'lumx-skeleton-circle';
 const {
   block: block$k
-} = classNames.bem(CLASSNAME$l);
+} = bem(CLASSNAME$l);
 
 /**
  * SkeletonCircle component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const SkeletonCircle = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const SkeletonCircle$1 = props => {
   const {
     className,
     size,
     color,
-    theme = defaultTheme,
+    theme,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$k({
+    className: classnames(className, block$k({
       [`size-${size}`]: Boolean(size),
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     }))
   });
-});
-SkeletonCircle.displayName = COMPONENT_NAME$m;
-SkeletonCircle.defaultProps = DEFAULT_PROPS$n;
-SkeletonCircle.className = CLASSNAME$l;
+};
 
+/**
+ * Skeleton variants.
+ */
 const SkeletonRectangleVariant = {
   squared: 'squared',
   rounded: 'rounded',
@@ -12720,10 +11395,6 @@ const SkeletonRectangleVariant = {
  * Defines the props of the component.
  */
 
-const DEFAULT_PROPS$m = {
-  variant: SkeletonRectangleVariant.squared
-};
-
 /**
  * Component display name.
  */
@@ -12736,31 +11407,37 @@ const CLASSNAME$k = 'lumx-skeleton-rectangle';
 const {
   block: block$j,
   element: element$c
-} = classNames.bem(CLASSNAME$k);
+} = bem(CLASSNAME$k);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$p = {
+  variant: SkeletonRectangleVariant.squared
+};
 
 /**
  * SkeletonRectangle component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const SkeletonRectangle = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const SkeletonRectangle$1 = props => {
   const {
     aspectRatio,
     className,
     height,
-    theme = defaultTheme,
-    variant = DEFAULT_PROPS$m.variant,
+    theme,
+    variant = DEFAULT_PROPS$p.variant,
     width,
     color,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$j({
+    className: classnames(className, block$j({
       [`aspect-ratio-${aspectRatio}`]: Boolean(aspectRatio),
       [`height-${height}`]: Boolean(aspectRatio ? undefined : height),
       [`theme-${theme}`]: Boolean(theme),
@@ -12772,12 +11449,7 @@ const SkeletonRectangle = forwardRef((props, ref) => {
       className: element$c('inner')
     })
   });
-});
-SkeletonRectangle.displayName = COMPONENT_NAME$l;
-SkeletonRectangle.className = CLASSNAME$k;
-SkeletonRectangle.defaultProps = DEFAULT_PROPS$m;
-
-const DEFAULT_PROPS$l = {};
+};
 
 /**
  * Component display name.
@@ -12791,29 +11463,28 @@ const CLASSNAME$j = 'lumx-skeleton-typography';
 const {
   block: block$i,
   element: element$b
-} = classNames.bem(CLASSNAME$j);
+} = bem(CLASSNAME$j);
 
 /**
  * SkeletonTypography component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const SkeletonTypography = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme$1.light;
+const SkeletonTypography$1 = props => {
   const {
     className,
-    theme = defaultTheme,
+    theme,
     typography,
     width,
     color,
+    ref,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$i({
+    className: classnames(className, block$i({
       [`theme-${theme}`]: Boolean(theme),
       [`typography-${typography}`]: Boolean(typography),
       [`color-${color}`]: Boolean(color)
@@ -12826,9 +11497,119 @@ const SkeletonTypography = forwardRef((props, ref) => {
       className: element$b('inner')
     })
   });
+};
+
+/**
+ * Defines the props of the component.
+ */
+
+const DEFAULT_PROPS$o = {};
+
+/**
+ * SkeletonCircle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonCircle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    className,
+    size,
+    color,
+    theme = defaultTheme,
+    ...forwardedProps
+  } = props;
+  return SkeletonCircle$1({
+    ref,
+    className,
+    size,
+    color,
+    theme,
+    ...forwardedProps
+  });
+});
+SkeletonCircle.displayName = COMPONENT_NAME$m;
+SkeletonCircle.defaultProps = DEFAULT_PROPS$o;
+SkeletonCircle.className = CLASSNAME$l;
+
+/**
+ * Defines the props of the component.
+ */
+
+const DEFAULT_PROPS$n = DEFAULT_PROPS$p;
+
+/**
+ * SkeletonRectangle component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonRectangle = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    aspectRatio,
+    className,
+    height,
+    theme = defaultTheme,
+    variant = DEFAULT_PROPS$n.variant,
+    width,
+    color,
+    ...forwardedProps
+  } = props;
+  return SkeletonRectangle$1({
+    ref,
+    aspectRatio,
+    className,
+    height,
+    theme,
+    variant,
+    width,
+    color,
+    ...forwardedProps
+  });
+});
+SkeletonRectangle.displayName = COMPONENT_NAME$l;
+SkeletonRectangle.className = CLASSNAME$k;
+SkeletonRectangle.defaultProps = DEFAULT_PROPS$n;
+
+/**
+ * Defines the props of the component.
+ */
+
+const DEFAULT_PROPS$m = {};
+
+/**
+ * SkeletonTypography component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const SkeletonTypography = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme$1.light;
+  const {
+    className,
+    theme = defaultTheme,
+    typography,
+    width,
+    color,
+    ...forwardedProps
+  } = props;
+  return SkeletonTypography$1({
+    ref,
+    className,
+    theme,
+    typography,
+    width,
+    color,
+    ...forwardedProps
+  });
 });
 SkeletonTypography.displayName = COMPONENT_NAME$k;
-SkeletonTypography.defaultProps = DEFAULT_PROPS$l;
+SkeletonTypography.defaultProps = DEFAULT_PROPS$m;
 SkeletonTypography.className = CLASSNAME$j;
 
 const useEnhancedEffect = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
@@ -12883,7 +11664,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$k = {
+const DEFAULT_PROPS$l = {
   precision: 0,
   steps: 0
 };
@@ -12934,8 +11715,8 @@ const Slider = forwardRef((props, ref) => {
     name,
     onChange,
     onMouseDown,
-    precision = DEFAULT_PROPS$k.precision,
-    steps = DEFAULT_PROPS$k.steps,
+    precision = DEFAULT_PROPS$l.precision,
+    steps = DEFAULT_PROPS$l.steps,
     theme = defaultTheme,
     value,
     ...forwardedProps
@@ -13138,7 +11919,7 @@ const Slider = forwardRef((props, ref) => {
 });
 Slider.displayName = COMPONENT_NAME$j;
 Slider.className = CLASSNAME$i;
-Slider.defaultProps = DEFAULT_PROPS$k;
+Slider.defaultProps = DEFAULT_PROPS$l;
 
 /**
  * Making setInterval Declarative with React Hooks.
@@ -13516,7 +12297,7 @@ SlideshowItemGroup.className = CLASSNAME$h;
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$j = {
+const DEFAULT_PROPS$k = {
   ...DEFAULT_OPTIONS,
   slideMode: SlideMode.transformTranslate
 };
@@ -13532,19 +12313,19 @@ const Slideshow = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
     activeIndex,
-    autoPlay = DEFAULT_PROPS$j.autoPlay,
+    autoPlay = DEFAULT_PROPS$k.autoPlay,
     children,
     className,
     fillHeight,
     groupBy = DEFAULT_OPTIONS.groupBy,
-    interval = DEFAULT_PROPS$j.interval,
+    interval = DEFAULT_PROPS$k.interval,
     onChange,
     slideshowControlsProps,
     theme = defaultTheme,
     id,
     slidesId,
     slideGroupLabel,
-    slideMode = DEFAULT_PROPS$j.slideMode,
+    slideMode = DEFAULT_PROPS$k.slideMode,
     ...forwardedProps
   } = props;
   // Number of slideshow items.
@@ -13566,7 +12347,7 @@ const Slideshow = forwardRef((props, ref) => {
     toggleForcePause
   } = SlideshowControls.useSlideshowControls({
     activeIndex,
-    defaultActiveIndex: DEFAULT_PROPS$j.activeIndex,
+    defaultActiveIndex: DEFAULT_PROPS$k.activeIndex,
     autoPlay: Boolean(autoPlay),
     itemsCount,
     groupBy,
@@ -13636,7 +12417,7 @@ const Slideshow = forwardRef((props, ref) => {
   });
 });
 Slideshow.displayName = 'Slideshow';
-Slideshow.defaultProps = DEFAULT_PROPS$j;
+Slideshow.defaultProps = DEFAULT_PROPS$k;
 
 /**
  * Component display name.
@@ -13745,7 +12526,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$i = {
+const DEFAULT_PROPS$j = {
   activeIndex: 0
 };
 
@@ -13759,7 +12540,7 @@ const DEFAULT_PROPS$i = {
 const InternalSlideshowControls = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme$1.light;
   const {
-    activeIndex = DEFAULT_PROPS$i.activeIndex,
+    activeIndex = DEFAULT_PROPS$j.activeIndex,
     className,
     nextButtonProps,
     onNextClick,
@@ -13874,7 +12655,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
 });
 InternalSlideshowControls.displayName = COMPONENT_NAME$g;
 InternalSlideshowControls.className = CLASSNAME$f;
-InternalSlideshowControls.defaultProps = DEFAULT_PROPS$i;
+InternalSlideshowControls.defaultProps = DEFAULT_PROPS$j;
 const SlideshowControls = Object.assign(InternalSlideshowControls, {
   useSlideshowControls,
   useSlideshowControlsDefaultOptions: DEFAULT_OPTIONS
@@ -14006,7 +12787,7 @@ const {
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$h = {
+const DEFAULT_PROPS$i = {
   slideMode: SlideMode.transformTranslate
 };
 
@@ -14033,7 +12814,7 @@ const Slides = forwardRef((props, ref) => {
     afterSlides,
     hasControls,
     slideGroupLabel,
-    slideMode = DEFAULT_PROPS$h.slideMode,
+    slideMode = DEFAULT_PROPS$i.slideMode,
     onChange,
     ...forwardedProps
   } = props;
@@ -14115,46 +12896,41 @@ const CLASSNAME$d = 'lumx-switch';
 const {
   block: block$e,
   element: element$7
-} = classNames.bem(CLASSNAME$d);
+} = bem(CLASSNAME$d);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$g = {
-  position: Alignment.left
+const DEFAULT_PROPS$h = {
+  position: 'left'
 };
 
 /**
  * Switch component.
  *
  * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
+ * @return JSX element.
  */
-const Switch = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const defaultTheme = useTheme() || Theme$1.light;
+const Switch$1 = props => {
   const {
     checked,
-    children,
     className,
     helper,
     id,
+    inputRef,
     isChecked = checked,
+    label,
     name,
+    ref,
     onChange,
-    position = DEFAULT_PROPS$g.position,
-    theme = defaultTheme,
+    theme,
     value,
     inputProps = {},
+    isDisabled,
+    inputId,
+    position = DEFAULT_PROPS$h.position,
     ...forwardedProps
-  } = otherProps;
-  const generatedInputId = useId();
-  const inputId = id || generatedInputId;
+  } = props;
   const handleChange = event => {
     if (onChange) {
       onChange(!isChecked, value, name, event);
@@ -14163,28 +12939,30 @@ const Switch = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$e({
+    className: classnames(className, block$e({
       'is-checked': isChecked,
-      'is-disabled': isAnyDisabled,
+      'is-disabled': isDisabled,
+      'is-unchecked': !isChecked,
       [`position-${position}`]: Boolean(position),
-      [`theme-${theme}`]: Boolean(theme),
-      'is-unchecked': !isChecked
+      [`theme-${theme}`]: Boolean(theme)
     })),
     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,
-        ...disabledStateProps,
-        readOnly: inputProps.readOnly || isAnyDisabled,
-        checked: isChecked,
-        "aria-checked": Boolean(isChecked),
+        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'),
@@ -14194,21 +12972,88 @@ const Switch = forwardRef((props, ref) => {
           className: element$7('input-indicator')
         })]
       })]
-    }), Children.count(children) > 0 && /*#__PURE__*/jsxs("div", {
+    }), /*#__PURE__*/jsxs("div", {
       className: element$7('content'),
-      children: [/*#__PURE__*/jsx(InputLabel, {
+      children: [label && InputLabel$1({
         htmlFor: inputId,
-        theme: theme,
         className: element$7('label'),
-        children: children
-      }), !isEmpty(helper) && /*#__PURE__*/jsx(InputHelper, {
+        theme,
+        children: label
+      }), helper && InputHelper$1({
         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;
@@ -16163,5 +15008,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-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 };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1d as CLASSNAME, COMPONENT_NAME$1e as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$15 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
 //# sourceMappingURL=index.js.map