@lumx/react 4.3.2-alpha.24 → 4.3.2-alpha.25

package/index.js

@@ -1,4 +1,4 @@
-import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, REAL_SIZE_FOR_LUMX_SIZE, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
+import { Kind as Kind$1, Size as Size$1, ColorPalette as ColorPalette$1, Emphasis as Emphasis$1, Theme as Theme$1, AspectRatio as AspectRatio$1, ColorVariant, DIALOG_TRANSITION_DURATION, Orientation as Orientation$1, Alignment, NOTIFICATION_TRANSITION_DURATION, TOOLTIP_LONG_PRESS_DELAY, TOOLTIP_HOVER_DELAY } from '@lumx/core/js/constants';
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
@@ -16,7 +16,7 @@ import concat from 'lodash/concat.js';
 import dropRight from 'lodash/dropRight.js';
 import partition from 'lodash/partition.js';
 import reduce from 'lodash/reduce.js';
-import { u as useDisabledStateContext, a as useComboboxSectionId, b as useCombobox, c as useRegisterOption, g as generateOptionId, M as MovingFocusContext, d as useVirtualFocus, C as ComboboxOptionContextProvider, e as useComboboxOptionContext, f as useComboboxRefs, A as A11YLiveMessage, P as Portal, h as ClickAwayProvider } from './_internal/BQFZG9jO.js';
+import { u as useDisabledStateContext, P as Portal, C as ClickAwayProvider } from './_internal/DpdvhbTO.js';
 import isEmpty from 'lodash/isEmpty.js';
 import { getDisabledState } from '@lumx/core/js/utils/disabledState';
 import { mdiCloseCircle } from '@lumx/icons/esm/close-circle.js';
@@ -24,16 +24,15 @@ import memoize from 'lodash/memoize.js';
 import { mdiClose } from '@lumx/icons/esm/close.js';
 import isFunction from 'lodash/isFunction.js';
 import { mdiImageBroken } from '@lumx/icons/esm/image-broken.js';
-import noop from 'lodash/noop.js';
-import castArray from 'lodash/castArray.js';
 import { mdiCheck } from '@lumx/icons/esm/check.js';
 import { mdiMinus } from '@lumx/icons/esm/minus.js';
-import { mdiInformationOutline } from '@lumx/icons/esm/information-outline.js';
 import { mdiChevronLeft } from '@lumx/icons/esm/chevron-left.js';
 import { mdiChevronRight } from '@lumx/icons/esm/chevron-right.js';
+import castArray from 'lodash/castArray.js';
 import { mdiDragVertical } from '@lumx/icons/esm/drag-vertical.js';
 import { mdiChevronDown } from '@lumx/icons/esm/chevron-down.js';
 import { mdiChevronUp } from '@lumx/icons/esm/chevron-up.js';
+import noop from 'lodash/noop.js';
 import pick from 'lodash/pick.js';
 import isInteger from 'lodash/isInteger.js';
 import { mdiMagnifyMinusOutline } from '@lumx/icons/esm/magnify-minus-outline.js';
@@ -102,10 +101,10 @@ const COMPONENT_NAME$1k = 'AlertDialog';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1k = 'lumx-alert-dialog';
+const CLASSNAME$1j = 'lumx-alert-dialog';
 const {
-  block: block$17
-} = classNames.bem(CLASSNAME$1k);
+  block: block$14
+} = classNames.bem(CLASSNAME$1j);
 
 /**
  * Component default props.
@@ -173,7 +172,7 @@ const AlertDialog = forwardRef((props, ref) => {
       'aria-describedby': descriptionId,
       ...dialogProps
     },
-    className: classNames.join(className, block$17({
+    className: classNames.join(className, block$14({
       [`kind-${kind}`]: Boolean(kind)
     })),
     ...forwardedProps,
@@ -219,7 +218,7 @@ const AlertDialog = forwardRef((props, ref) => {
   });
 });
 AlertDialog.displayName = COMPONENT_NAME$1k;
-AlertDialog.className = CLASSNAME$1k;
+AlertDialog.className = CLASSNAME$1j;
 AlertDialog.defaultProps = DEFAULT_PROPS$1b;
 
 /**
@@ -317,7 +316,7 @@ const COMPONENT_NAME$1j = 'Autocomplete';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1j = 'lumx-autocomplete';
+const CLASSNAME$1i = 'lumx-autocomplete';
 
 /**
  * Component default props.
@@ -384,7 +383,7 @@ const Autocomplete = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$1j),
+    className: classNames.join(className, CLASSNAME$1i),
     children: [/*#__PURE__*/jsx(TextField, {
       ...textFieldProps,
       chips: chips,
@@ -425,7 +424,7 @@ const Autocomplete = forwardRef((props, ref) => {
   });
 });
 Autocomplete.displayName = COMPONENT_NAME$1j;
-Autocomplete.className = CLASSNAME$1j;
+Autocomplete.className = CLASSNAME$1i;
 Autocomplete.defaultProps = DEFAULT_PROPS$1a;
 
 /**
@@ -436,7 +435,7 @@ const COMPONENT_NAME$1i = 'AutocompleteMultiple';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1i = 'lumx-autocomplete-multiple';
+const CLASSNAME$1h = 'lumx-autocomplete-multiple';
 
 /**
  * Component default props.
@@ -516,7 +515,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     anchorToInput: anchorToInput,
-    className: classNames.join(className, CLASSNAME$1i),
+    className: classNames.join(className, CLASSNAME$1h),
     name: name,
     value: value,
     onChange: onChange,
@@ -550,7 +549,7 @@ const AutocompleteMultiple = forwardRef((props, ref) => {
   });
 });
 AutocompleteMultiple.displayName = COMPONENT_NAME$1i;
-AutocompleteMultiple.className = CLASSNAME$1i;
+AutocompleteMultiple.className = CLASSNAME$1h;
 AutocompleteMultiple.defaultProps = DEFAULT_PROPS$19;
 
 /**
@@ -561,11 +560,11 @@ const COMPONENT_NAME$1h = 'Avatar';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1h = 'lumx-avatar';
+const CLASSNAME$1g = 'lumx-avatar';
 const {
-  block: block$16,
-  element: element$Q
-} = classNames.bem(CLASSNAME$1h);
+  block: block$13,
+  element: element$N
+} = classNames.bem(CLASSNAME$1g);
 
 /**
  * Component default props.
@@ -601,14 +600,14 @@ const Avatar = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, block$16({
+    className: classNames.join(className, block$13({
       [`size-${size}`]: Boolean(size),
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       linkProps: linkProps,
       linkAs: linkAs,
-      className: element$Q('thumbnail'),
+      className: element$N('thumbnail'),
       onClick: onClick,
       onKeyPress: onKeyPress,
       ...thumbnailProps,
@@ -618,16 +617,16 @@ const Avatar = forwardRef((props, ref) => {
       alt: alt,
       theme: theme
     }), actions && /*#__PURE__*/jsx("div", {
-      className: element$Q('actions'),
+      className: element$N('actions'),
       children: actions
     }), badge && /*#__PURE__*/jsx("div", {
-      className: element$Q('badge'),
+      className: element$N('badge'),
       children: badge
     })]
   });
 });
 Avatar.displayName = COMPONENT_NAME$1h;
-Avatar.className = CLASSNAME$1h;
+Avatar.className = CLASSNAME$1g;
 Avatar.defaultProps = DEFAULT_PROPS$18;
 
 /**
@@ -856,7 +855,7 @@ function modifier$1(baseName, modifiers) {
  * block('button', { active: true, disabled: false }); // 'button button--active'
  */
 
-function block$15(baseName, modifiersOrAdditionalClasses, additionalClasses) {
+function block$12(baseName, modifiersOrAdditionalClasses, additionalClasses) {
   let modifiers;
   let classes;
   if (Array.isArray(modifiersOrAdditionalClasses)) {
@@ -891,11 +890,11 @@ function block$15(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$M(baseClass, elem, modifiersOrAdditionalClasses, additionalClasses) {
   if (Array.isArray(modifiersOrAdditionalClasses)) {
-    return block$15(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
+    return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses);
   }
-  return block$15(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
+  return block$12(`${baseClass}__${elem}`, modifiersOrAdditionalClasses, additionalClasses);
 }
 
 /**
@@ -904,15 +903,15 @@ function element$P(baseClass, elem, modifiersOrAdditionalClasses, additionalClas
 function bem(baseName) {
   function blockFn(modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return block$15(baseName, modifiersOrAdditionalClasses);
+      return block$12(baseName, modifiersOrAdditionalClasses);
     }
-    return block$15(baseName, modifiersOrAdditionalClasses, additionalClasses);
+    return block$12(baseName, modifiersOrAdditionalClasses, additionalClasses);
   }
   function elementFn(elem, modifiersOrAdditionalClasses, additionalClasses) {
     if (Array.isArray(modifiersOrAdditionalClasses)) {
-      return element$P(baseName, elem, modifiersOrAdditionalClasses);
+      return element$M(baseName, elem, modifiersOrAdditionalClasses);
     }
-    return element$P(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
+    return element$M(baseName, elem, modifiersOrAdditionalClasses, additionalClasses);
   }
   return {
     block: blockFn,
@@ -929,10 +928,10 @@ const COMPONENT_NAME$1g = 'Badge';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1g = 'lumx-badge';
+const CLASSNAME$1f = 'lumx-badge';
 const {
-  block: block$14
-} = bem(CLASSNAME$1g);
+  block: block$11
+} = bem(CLASSNAME$1f);
 
 /**
  * Component default props.
@@ -958,14 +957,14 @@ const Badge$1 = props => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$14({
+    className: classnames(className, block$11({
       [`color-${color}`]: Boolean(color)
     })),
     children: children
   });
 };
 Badge$1.displayName = COMPONENT_NAME$1g;
-Badge$1.className = CLASSNAME$1g;
+Badge$1.className = CLASSNAME$1f;
 Badge$1.defaultProps = DEFAULT_PROPS$17;
 
 /**
@@ -990,11 +989,11 @@ Badge.className = Badge$1.className;
 Badge.defaultProps = Badge$1.defaultProps;
 
 const COMPONENT_NAME$1f = 'BadgeWrapper';
-const CLASSNAME$1f = 'lumx-badge-wrapper';
+const CLASSNAME$1e = 'lumx-badge-wrapper';
 const {
-  block: block$13,
-  element: element$O
-} = bem(CLASSNAME$1f);
+  block: block$10,
+  element: element$L
+} = bem(CLASSNAME$1e);
 const BadgeWrapper$1 = props => {
   const {
     badge,
@@ -1006,9 +1005,9 @@ const BadgeWrapper$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$13()),
+    className: classnames(className, block$10()),
     children: [children, badge && /*#__PURE__*/jsx("div", {
-      className: element$O('badge'),
+      className: element$L('badge'),
       children: badge
     })]
   });
@@ -1021,7 +1020,7 @@ const BadgeWrapper = forwardRef((props, ref) => {
   });
 });
 BadgeWrapper.displayName = COMPONENT_NAME$1f;
-BadgeWrapper.className = CLASSNAME$1f;
+BadgeWrapper.className = CLASSNAME$1e;
 
 /**
  * Render clickable element (link, button or custom element)
@@ -1182,10 +1181,10 @@ const COMPONENT_NAME$1d = 'Button';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1e = 'lumx-button';
+const CLASSNAME$1d = 'lumx-button';
 const {
   modifier
-} = bem(CLASSNAME$1e);
+} = bem(CLASSNAME$1d);
 
 /**
  * Component default props.
@@ -1223,7 +1222,7 @@ const Button$1 = props => {
   });
 };
 Button$1.displayName = COMPONENT_NAME$1d;
-Button$1.className = CLASSNAME$1e;
+Button$1.className = CLASSNAME$1d;
 Button$1.defaultProps = DEFAULT_PROPS$16;
 
 /**
@@ -1291,7 +1290,7 @@ const Button = forwardRef((props, ref) => {
   });
 });
 Button.displayName = COMPONENT_NAME$1d;
-Button.className = CLASSNAME$1e;
+Button.className = CLASSNAME$1d;
 Button.defaultProps = DEFAULT_PROPS$16;
 
 const COMPONENT_NAME$1c = 'Icon';
@@ -1301,10 +1300,10 @@ const IconClassName = 'lumx-icon';
  * Defines the props of the component.
  */
 
-const CLASSNAME$1d = IconClassName;
+const CLASSNAME$1c = IconClassName;
 const {
-  block: block$12
-} = bem(CLASSNAME$1d);
+  block: block$$
+} = bem(CLASSNAME$1c);
 
 /**
  * Component default props.
@@ -1358,7 +1357,7 @@ const Icon$1 = props => {
   return /*#__PURE__*/jsx("i", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$12({
+    className: classnames(className, block$$({
       [`color-${iconColor}`]: Boolean(iconColor),
       [`color-variant-${iconColorVariant}`]: Boolean(iconColorVariant),
       'has-shape': hasShape,
@@ -1388,7 +1387,7 @@ const Icon$1 = props => {
   });
 };
 Icon$1.displayName = COMPONENT_NAME$1c;
-Icon$1.className = CLASSNAME$1d;
+Icon$1.className = CLASSNAME$1c;
 Icon$1.defaultProps = DEFAULT_PROPS$15;
 
 /**
@@ -1399,7 +1398,7 @@ const COMPONENT_NAME$1b = 'IconButton';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1c = 'lumx-icon-button';
+const CLASSNAME$1b = 'lumx-icon-button';
 
 /**
  * Component default props.
@@ -1441,7 +1440,7 @@ const IconButton$1 = props => {
   });
 };
 IconButton$1.displayName = COMPONENT_NAME$1b;
-IconButton$1.className = CLASSNAME$1c;
+IconButton$1.className = CLASSNAME$1b;
 IconButton$1.defaultProps = DEFAULT_PROPS$14;
 
 /**
@@ -1478,7 +1477,7 @@ const IconButton = forwardRef((props, ref) => {
   });
 });
 IconButton.displayName = COMPONENT_NAME$1b;
-IconButton.className = CLASSNAME$1c;
+IconButton.className = CLASSNAME$1b;
 IconButton.defaultProps = DEFAULT_PROPS$14;
 
 /**
@@ -1489,7 +1488,7 @@ const COMPONENT_NAME$1a = 'ButtonGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$1b = 'lumx-button-group';
+const CLASSNAME$1a = 'lumx-button-group';
 
 /**
  * Component default props.
@@ -1510,12 +1509,12 @@ const ButtonGroup$1 = props => {
   } = props;
   return /*#__PURE__*/jsx("div", {
     ...forwardedProps,
-    className: classnames(className, CLASSNAME$1b),
+    className: classnames(className, CLASSNAME$1a),
     children: children
   });
 };
 ButtonGroup$1.displayName = COMPONENT_NAME$1a;
-ButtonGroup$1.className = CLASSNAME$1b;
+ButtonGroup$1.className = CLASSNAME$1a;
 ButtonGroup$1.defaultProps = DEFAULT_PROPS$13;
 
 /**
@@ -1532,15 +1531,15 @@ const ButtonGroup = forwardRef((props, ref) => {
   });
 });
 ButtonGroup.displayName = COMPONENT_NAME$1a;
-ButtonGroup.className = CLASSNAME$1b;
+ButtonGroup.className = CLASSNAME$1a;
 ButtonGroup.defaultProps = DEFAULT_PROPS$13;
 
 const COMPONENT_NAME$19 = 'InputLabel';
 const InputLabelClassName = 'lumx-input-label';
-const CLASSNAME$1a = InputLabelClassName;
+const CLASSNAME$19 = InputLabelClassName;
 const {
-  block: block$11
-} = bem(CLASSNAME$1a);
+  block: block$_
+} = bem(CLASSNAME$19);
 const DEFAULT_PROPS$12 = {};
 
 /**
@@ -1561,7 +1560,7 @@ function InputLabel$1(props) {
     ref: ref,
     ...forwardedProps,
     htmlFor: htmlFor,
-    className: classnames(className, block$11({
+    className: classnames(className, block$_({
       'is-required': isRequired,
       [`theme-${theme}`]: Boolean(theme),
       'has-custom-typography': Boolean(typography$1)
@@ -1570,7 +1569,7 @@ function InputLabel$1(props) {
   });
 }
 InputLabel$1.displayName = COMPONENT_NAME$19;
-InputLabel$1.className = CLASSNAME$1a;
+InputLabel$1.className = CLASSNAME$19;
 InputLabel$1.defaultProps = DEFAULT_PROPS$12;
 
 const INPUT_HELPER_CONFIGURATION = {
@@ -1592,10 +1591,10 @@ const InputHelperClassName = 'lumx-input-helper';
  * Defines the props of the component.
  */
 
-const CLASSNAME$19 = InputHelperClassName;
+const CLASSNAME$18 = InputHelperClassName;
 const {
-  block: block$10
-} = bem(CLASSNAME$19);
+  block: block$Z
+} = bem(CLASSNAME$18);
 
 /**
  * Component default props.
@@ -1622,7 +1621,7 @@ function InputHelper$1(props) {
   return /*#__PURE__*/jsx("p", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$10({
+    className: classnames(className, block$Z({
       [`color-${color}`]: Boolean(color),
       [`theme-${theme}`]: Boolean(theme)
     })),
@@ -1630,7 +1629,7 @@ function InputHelper$1(props) {
   });
 }
 InputHelper$1.displayName = COMPONENT_NAME$18;
-InputHelper$1.className = CLASSNAME$19;
+InputHelper$1.className = CLASSNAME$18;
 InputHelper$1.defaultProps = DEFAULT_PROPS$11;
 
 const INTERMEDIATE_STATE = 'intermediate';
@@ -1647,11 +1646,11 @@ const COMPONENT_NAME$17 = 'Checkbox';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$18 = 'lumx-checkbox';
+const CLASSNAME$17 = 'lumx-checkbox';
 const {
-  block: block$$,
-  element: element$N
-} = bem(CLASSNAME$18);
+  block: block$Y,
+  element: element$K
+} = bem(CLASSNAME$17);
 
 /**
  * Checkbox component.
@@ -1687,7 +1686,7 @@ const Checkbox$1 = props => {
   return /*#__PURE__*/jsxs("div", {
     ref: ref,
     ...forwardedProps,
-    className: classnames(className, block$$({
+    className: classnames(className, block$Y({
       // Whether state is intermediate class name will "-checked"
       'is-checked': intermediateState ? true : isChecked,
       'is-disabled': isDisabled,
@@ -1695,12 +1694,12 @@ const Checkbox$1 = props => {
       [`theme-${theme}`]: Boolean(theme)
     })),
     children: [/*#__PURE__*/jsxs("div", {
-      className: element$N('input-wrapper'),
+      className: element$K('input-wrapper'),
       children: [/*#__PURE__*/jsx("input", {
         ref: inputRef,
         type: "checkbox",
         id: inputId,
-        className: element$N('input-native'),
+        className: element$K('input-native'),
         name: name,
         value: value,
         checked: isChecked,
@@ -1712,26 +1711,26 @@ const Checkbox$1 = props => {
         } : {}),
         ...inputProps
       }), /*#__PURE__*/jsxs("div", {
-        className: element$N('input-placeholder'),
+        className: element$K('input-placeholder'),
         children: [/*#__PURE__*/jsx("div", {
-          className: element$N('input-background')
+          className: element$K('input-background')
         }), /*#__PURE__*/jsx("div", {
-          className: element$N('input-indicator'),
+          className: element$K('input-indicator'),
           children: Icon$1({
             icon: intermediateState ? mdiMinus : mdiCheck
           })
         })]
       })]
     }), /*#__PURE__*/jsxs("div", {
-      className: element$N('content'),
+      className: element$K('content'),
       children: [label && InputLabel$1({
         htmlFor: inputId,
-        className: element$N('label'),
+        className: element$K('label'),
         theme,
         children: label
       }), helper && InputHelper$1({
         id: `${inputId}-helper`,
-        className: element$N('helper'),
+        className: element$K('helper'),
         theme,
         children: helper
       })]
@@ -1807,7 +1806,7 @@ const Checkbox = forwardRef((props, ref) => {
   });
 });
 Checkbox.displayName = COMPONENT_NAME$17;
-Checkbox.className = CLASSNAME$18;
+Checkbox.className = CLASSNAME$17;
 Checkbox.defaultProps = DEFAULT_PROPS$10;
 
 /**
@@ -1834,11 +1833,11 @@ const COMPONENT_NAME$16 = 'Chip';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$17 = 'lumx-chip';
+const CLASSNAME$16 = 'lumx-chip';
 const {
-  block: block$_,
-  element: element$M
-} = classNames.bem(CLASSNAME$17);
+  block: block$X,
+  element: element$J
+} = classNames.bem(CLASSNAME$16);
 
 /**
  * Component default props.
@@ -1904,7 +1903,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,
@@ -1922,19 +1921,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$M('before', {
+        className: element$J('before', {
           'is-clickable': hasBeforeClick
         }),
         onClick: handleOnBeforeClick,
         children: before
       }), /*#__PURE__*/jsx("div", {
-        className: element$M('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$M('after', {
+        className: element$J('after', {
           'is-clickable': hasAfterClick
         }),
         onClick: handleOnAfterClick,
@@ -1944,7 +1943,7 @@ const Chip = forwardRef((props, ref) => {
   );
 });
 Chip.displayName = COMPONENT_NAME$16;
-Chip.className = CLASSNAME$17;
+Chip.className = CLASSNAME$16;
 Chip.defaultProps = DEFAULT_PROPS$$;
 
 const INITIAL_STATE_ACTIVE_CHIP = -1;
@@ -2011,7 +2010,7 @@ const COMPONENT_NAME$15 = 'ChipGroup';
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$16 = 'lumx-chip-group';
+const CLASSNAME$15 = 'lumx-chip-group';
 
 /**
  * ChipGroup component.
@@ -2030,12 +2029,12 @@ const InternalChipGroup = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames.join(className, CLASSNAME$16),
+    className: classNames.join(className, CLASSNAME$15),
     children: children
   });
 });
 InternalChipGroup.displayName = COMPONENT_NAME$15;
-InternalChipGroup.className = CLASSNAME$16;
+InternalChipGroup.className = CLASSNAME$15;
 InternalChipGroup.defaultProps = DEFAULT_PROPS$_;
 const ChipGroup = Object.assign(InternalChipGroup, {
   useChipGroupNavigation
@@ -2126,11 +2125,11 @@ function useFocusLastChipOnBackspace(chipRefs, inputRef) {
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$15 = 'lumx-selection-chip-group';
+const CLASSNAME$14 = 'lumx-selection-chip-group';
 const {
-  block: block$Z,
-  element: element$L
-} = classNames.bem(CLASSNAME$15);
+  block: block$W,
+  element: element$I
+} = classNames.bem(CLASSNAME$14);
 
 /**
  * SelectionChipGroup component.
@@ -2160,7 +2159,7 @@ const SelectionChipGroup = ({
   return /*#__PURE__*/jsx(ChipGroup, {
     role: "group",
     "aria-label": label,
-    className: block$Z(),
+    className: block$W(),
     ...forwardedProps,
     children: value?.map((v, index) => {
       const name = getWithSelector(getOptionName, v);
@@ -2204,7 +2203,7 @@ const SelectionChipGroup = ({
           after: /*#__PURE__*/jsx(Icon, {
             icon: mdiClose
           }),
-          className: element$L('chip', [props?.className]),
+          className: element$I('chip', [props?.className]),
           size: "s",
           ref: ref,
           onClick: onClick,
@@ -2219,385 +2218,6 @@ const SelectionChipGroup = ({
   });
 };
 
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-const COMBOBOX_OPTION_CLASSNAME = 'lumx-combobox-option';
-const LUMX_CLASSNAME = 'lumx-list-item';
-const {
-  block: block$Y,
-  element: element$K
-} = classNames.bem(COMBOBOX_OPTION_CLASSNAME);
-const lumxListItem = classNames.bem(LUMX_CLASSNAME);
-
-/**
- * Content of the option.
- * This should only be rendered if the option is shown.
- */
-const OptionContent = forwardRef((props, ref) => {
-  const {
-    id,
-    onSelect,
-    isSelected,
-    isDisabled,
-    children,
-    className,
-    before,
-    after,
-    as,
-    size = Size$1.tiny,
-    comboboxType,
-    tooltipProps,
-    description,
-    'aria-hidden': ariaHidden,
-    autofocus,
-    ...forwardedProps
-  } = props;
-  const itemRef = React__default.useRef(null);
-  const {
-    state
-  } = React__default.useContext(MovingFocusContext);
-  const {
-    selectedIds
-  } = useCombobox();
-  const hasSelection = selectedIds !== undefined;
-  const isHighlighted = useVirtualFocus(id, itemRef, false, comboboxType === 'grid' ? id : undefined, autofocus);
-  const Element = as || 'span';
-  const ariaSelected = isSelected ? 'true' : 'false';
-  const ariaDescriptionId = description ? `${id}-description` : undefined;
-  const isKeyboardHighlighted = state.isUsingKeyboard && isHighlighted;
-
-  /**
-   * The DS `ListItem` component has a lot of behavior / default props we do not want here.
-   * Notably the before/after items are within the interactive element, which we do not want.
-   * So we use a native li tag.
-   */
-  return /*#__PURE__*/jsx("li", {
-    className: block$Y(undefined, [className ?? '', lumxListItem.block({
-      [`size-${size}`]: !!size
-    })]),
-    role: "presentation",
-    ref: itemRef,
-    "aria-hidden": ariaHidden,
-    style: {
-      display: ariaHidden ? 'none' : undefined
-    },
-    ...forwardedProps,
-    children: /*#__PURE__*/jsxs(GenericBlock, {
-      as: "div",
-      role: comboboxType === 'grid' ? 'row' : 'presentation',
-      className: element$K('content', {
-        // Not using the lumx list item disabled style as it blocks pointer events
-        'is-disabled': !!isDisabled
-      },
-      // TODO: migrate away from using lumx-list-item styles https://lumapps.atlassian.net/browse/DSW-288
-      [lumxListItem.element('link', {
-        'is-selected': Boolean(isSelected),
-        'is-highlighted': Boolean(isHighlighted)
-      })]),
-      "data-focus-visible-added": isKeyboardHighlighted ? 'true' : undefined,
-      children: [before && /*#__PURE__*/jsx(GenericBlock.Figure, {
-        as: "span",
-        role: "presentation",
-        className: element$K('before', undefined, [lumxListItem.element('before')]),
-        children: before
-      }), /*#__PURE__*/jsxs(GenericBlock.Content, {
-        as: "span",
-        role: "presentation",
-        className: lumxListItem.element('content'),
-        children: [/*#__PURE__*/jsx(Tooltip, {
-          forceOpen: isKeyboardHighlighted,
-          closeMode: "hide",
-          ...tooltipProps,
-          children: /*#__PURE__*/jsx(Element, {
-            id: id,
-            className: element$K('trigger'),
-            role: comboboxType === 'grid' ? 'gridcell' : 'option',
-            "aria-selected": hasSelection ? ariaSelected : undefined,
-            "aria-disabled": isDisabled,
-            "aria-describedby": ariaDescriptionId,
-            onClick: onSelect
-            // Prevent mouse down to avoid blur before the click is activated
-            ,
-            onMouseDown: event => event.preventDefault(),
-            ref: ref,
-            ...forwardedProps,
-            children: children
-          })
-        }), description && /*#__PURE__*/jsx(Text, {
-          as: "span",
-          id: ariaDescriptionId,
-          role: "presentation",
-          className: element$K('description'),
-          typography: "caption",
-          color: "dark",
-          colorVariant: "L2",
-          children: description
-        })]
-      }), after && /*#__PURE__*/jsx(GenericBlock.Actions, {
-        as: "span",
-        role: "presentation",
-        className: element$K('after', undefined, [lumxListItem.element('after')]),
-        children: /*#__PURE__*/jsx(ComboboxOptionContextProvider, {
-          optionId: id,
-          isKeyboardHighlighted: isKeyboardHighlighted,
-          children: after
-        })
-      })]
-    })
-  });
-});
-
-/**
- * Props for ComboboxOption with additional generic properties.
- */
-
-/**
- * Option to set within a combobox list.
- *
- * @family Combobox
- * @param ComboboxOptionProps
- * @returns ComboboxOption
- */
-const ComboboxOption = forwardRef((props, ref) => {
-  const {
-    children,
-    id,
-    textValue,
-    data,
-    filterFromInput = true,
-    onSelect: onOptionSelect,
-    isDisabled,
-    as = 'span',
-    ...optionProps
-  } = props;
-
-  // Get the id of the current group, if any.
-  const section = useComboboxSectionId();
-  const {
-    comboboxId,
-    selectedIds,
-    showAll,
-    inputValue,
-    handleSelected,
-    type
-  } = useCombobox();
-  // Generate a unique id for this option.
-  const generatedId = generateOptionId(comboboxId, id);
-  const isSelected = selectedIds?.includes(generatedId);
-
-  // If no text value is set and the direct child is a simple string, use it as value.
-  const isStringChild = typeof children === 'string' || typeof children === 'number';
-  const value = children && !textValue && isStringChild ? children.toString() : textValue;
-  const showOption = !filterFromInput || showAll || value?.toString()?.toLowerCase().includes(inputValue?.toLowerCase());
-  const registeredOption = React__default.useMemo(() => ({
-    id,
-    generatedId,
-    textValue: value,
-    data,
-    filter: filterFromInput,
-    isDisabled: isDisabled || !showOption,
-    sectionId: section.sectionId,
-    onSelect: onOptionSelect
-  }), [data, filterFromInput, generatedId, section.sectionId, id, isDisabled, onOptionSelect, showOption, value]);
-
-  // Register the option
-  useRegisterOption(generatedId, registeredOption, showOption);
-  const handleSelect = React__default.useCallback(() => handleSelected(registeredOption, 'click'), [handleSelected, registeredOption]);
-  if (!id || !showOption) {
-    return null;
-  }
-  return /*#__PURE__*/jsx(OptionContent, {
-    id: generatedId,
-    onSelect: handleSelect,
-    isSelected: isSelected,
-    isDisabled: isDisabled,
-    as: as,
-    ref: ref,
-    comboboxType: type,
-    "aria-hidden": section.isLoading,
-    ...optionProps,
-    children: children || textValue
-  });
-});
-
-// Default widths the skeletons must have
-const defaultWidths = [REAL_SIZE_FOR_LUMX_SIZE.xxl, REAL_SIZE_FOR_LUMX_SIZE.xl, REAL_SIZE_FOR_LUMX_SIZE.l];
-const {
-  block: block$X,
-  element: element$J
-} = classNames.bem(COMBOBOX_OPTION_CLASSNAME);
-
-/**
- * Skeleton for a combobox option.
- * A typography skeleton is rendered by default but can be overridden by passing children.
- */
-const ComboboxOptionSkeleton = ({
-  className,
-  index,
-  before,
-  after,
-  size = Size$1.tiny,
-  children
-}) => {
-  const renderedChildren = typeof children === 'function' ? children({
-    index
-  }) : children;
-  const content = renderedChildren || /*#__PURE__*/jsx(SkeletonTypography, {
-    typography: "body1",
-    width: index !== undefined && defaultWidths[index] ? defaultWidths[index] : REAL_SIZE_FOR_LUMX_SIZE.xl
-  });
-  return /*#__PURE__*/jsxs("li", {
-    role: "presentation",
-    className: block$X({
-      skeleton: true
-    }, ['lumx-list-item', `lumx-list-item--size-${size}`, className]),
-    children: [/*#__PURE__*/jsxs("div", {
-      role: "presentation",
-      className: element$J('content', ['lumx-list-item__wrapper']),
-      children: [before && /*#__PURE__*/jsx(Text, {
-        as: "span",
-        role: "presentation",
-        className: element$J('before', ['lumx-list-item__before']),
-        children: before
-      }), content]
-    }), after && /*#__PURE__*/jsx("div", {
-      role: "presentation",
-      className: element$J('after', ['lumx-list-item__after']),
-      children: after
-    })]
-  });
-};
-
-/**
- * Action to set on a Combobox Option.
- * Allows to add an interactive element that
- * can be navigated to and triggered using the keyboard.
- *
- * Defaults as "button"
- *
- * @family Combobox
- * @param ComboboxOptionActionProps
- * @returns ComboboxOptionAction
- */
-const ComboboxOptionAction = props => {
-  const {
-    as,
-    isDisabled,
-    onClick,
-    id: originalId,
-    ...forwardedProps
-  } = props;
-  const {
-    optionId
-  } = useComboboxOptionContext();
-  const {
-    triggerRef
-  } = useComboboxRefs();
-  const itemRef = React__default.useRef(null);
-  const generatedId = useId();
-  const id = originalId || generatedId;
-  const isHighlighted = useVirtualFocus(id, itemRef, isDisabled, optionId);
-  const {
-    state
-  } = React__default.useContext(MovingFocusContext);
-  const Component = as || 'button';
-  const registeredActionOption = React__default.useMemo(() => ({
-    id,
-    generatedId: id,
-    isAction: true,
-    isDisabled,
-    onSelect: () => {
-      itemRef.current?.click();
-    }
-  }), [id, isDisabled]);
-
-  // Register the option
-  useRegisterOption(id, registeredActionOption, !isDisabled);
-  const handleActionClick = React__default.useCallback(() => {
-    if (onClick) {
-      onClick();
-    }
-    if (triggerRef?.current) {
-      triggerRef.current?.focus();
-    }
-  }, [triggerRef, onClick]);
-  return /*#__PURE__*/jsx(Component, {
-    ...forwardedProps,
-    isDisabled: isDisabled,
-    id: id,
-    role: "gridcell",
-    ref: itemRef,
-    "data-focus-visible-added": state.isUsingKeyboard && isHighlighted ? 'true' : undefined,
-    "aria-disabled": isDisabled,
-    onClick: handleActionClick
-  });
-};
-
-const useBooleanState = defaultValue => {
-  const [booleanValue, setBoolean] = useState(defaultValue);
-  const setToFalse = useCallback(() => setBoolean(false), []);
-  const setToTrue = useCallback(() => setBoolean(true), []);
-  const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
-  return [booleanValue, setToFalse, setToTrue, toggleBoolean];
-};
-
-const CLASSNAME$14 = 'lumx-combobox-option-more-info';
-const {
-  block: block$W,
-  element: element$I
-} = classNames.bem(CLASSNAME$14);
-
-/**
- * Display more info on the option as a popover opening on mouse hover or keyboard nav
- * Please consider using a simpler option description instead for better UX and a11y.
- *
- * @family Combobox
- */
-const ComboboxOptionMoreInfo = ({
-  buttonProps,
-  popoverProps,
-  onToggle,
-  children
-}) => {
-  const ref = React__default.useRef(null);
-  const [isHovered,, onMouseLeave, onMouseEnter] = useBooleanState(false);
-  const comboboxOption = useComboboxOptionContext();
-
-  // Open on mouse hover or key nav
-  const isOpen = isHovered || comboboxOption.isKeyboardHighlighted;
-  React__default.useEffect(() => {
-    onToggle?.(isOpen);
-  }, [isOpen, onToggle]);
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(IconButton, {
-      ...buttonProps,
-      ref: ref,
-      className: block$W([buttonProps?.className]),
-      icon: mdiInformationOutline,
-      size: "s",
-      emphasis: "low",
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave
-      // Button actually plays no role here other than a target for the mouse hover
-      // Keyboard accessibility is handled via combobox keyboard highlighting
-      ,
-      "aria-hidden": true,
-      label: ""
-    }), /*#__PURE__*/jsx(Popover, {
-      ...popoverProps,
-      className: element$I('popover', [popoverProps?.className]),
-      anchorRef: ref,
-      isOpen: isOpen,
-      closeOnEscape: true,
-      closeOnClickAway: true,
-      placement: "bottom-start",
-      children: children
-    }), /*#__PURE__*/jsx(A11YLiveMessage, {
-      hidden: true,
-      children: isOpen ? children : undefined
-    })]
-  });
-};
-
 /**
  * Comment block variants.
  */
@@ -3216,6 +2836,14 @@ const DatePicker = forwardRef((props, ref) => {
 DatePicker.displayName = COMPONENT_NAME$13;
 DatePicker.className = CLASSNAME$12;
 
+const useBooleanState = defaultValue => {
+  const [booleanValue, setBoolean] = useState(defaultValue);
+  const setToFalse = useCallback(() => setBoolean(false), []);
+  const setToTrue = useCallback(() => setBoolean(true), []);
+  const toggleBoolean = useCallback(() => setBoolean(previousValue => !previousValue), []);
+  return [booleanValue, setToFalse, setToTrue, toggleBoolean];
+};
+
 /**
  * Component display name.
  */
@@ -13037,7 +12665,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
       className: element$9('navigation'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low,
-      onClick: onPreviousClick
+      onClick: () => onPreviousClick?.()
     }), /*#__PURE__*/jsx("div", {
       ref: paginationRef,
       className: element$9('pagination'),
@@ -13084,7 +12712,7 @@ const InternalSlideshowControls = forwardRef((props, ref) => {
       className: element$9('navigation'),
       color: theme === Theme$1.dark ? 'light' : 'dark',
       emphasis: Emphasis$1.low,
-      onClick: onNextClick
+      onClick: () => onNextClick?.()
     })]
   });
 });
@@ -15722,5 +15350,5 @@ UserBlock.displayName = COMPONENT_NAME;
 UserBlock.className = CLASSNAME;
 UserBlock.defaultProps = DEFAULT_PROPS;
 
-export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1e as CLASSNAME, COMBOBOX_OPTION_CLASSNAME, COMPONENT_NAME$1d as COMPONENT_NAME, Checkbox, Chip, ChipGroup, ComboboxOption, ComboboxOptionAction, ComboboxOptionMoreInfo, ComboboxOptionSkeleton, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$16 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, LUMX_CLASSNAME, Lightbox, Link, LinkPreview, List, ListDivider, ListItem, ListSubheader, Message, Mosaic, Navigation, Notification, Placement, Popover, PopoverDialog, PostBlock, Progress, ProgressCircular, ProgressLinear, ProgressTracker, ProgressTrackerProvider, ProgressTrackerStep, ProgressTrackerStepPanel, ProgressVariant, RadioButton, RadioGroup, RawInputText, RawInputTextarea, Select, SelectMultiple, SelectMultipleField, SelectVariant, SelectionChipGroup, SideNavigation, SideNavigationItem, SkeletonCircle, SkeletonRectangle, SkeletonRectangleVariant, SkeletonTypography, Slider, Slides, Slideshow, SlideshowControls, SlideshowItem, Switch, Tab, TabList, TabListLayout, TabPanel, TabProvider, Table, TableBody, TableCell, TableCellVariant, TableHeader, TableRow, Text, TextField, ThOrder, ThemeProvider, Thumbnail, ThumbnailAspectRatio, ThumbnailObjectFit, ThumbnailVariant, Toolbar, Tooltip, Uploader, UploaderVariant, UserBlock, clamp, isClickable, useFocusPointStyle, useHeadingLevel, useTheme };
+export { AlertDialog, Autocomplete, AutocompleteMultiple, Avatar, Badge, BadgeWrapper, Button, ButtonGroup, CLASSNAME$1d as CLASSNAME, COMPONENT_NAME$1d as COMPONENT_NAME, Checkbox, Chip, ChipGroup, CommentBlock, CommentBlockVariant, DEFAULT_PROPS$16 as DEFAULT_PROPS, DatePicker, DatePickerControlled, DatePickerField, Dialog, Divider, DragHandle, Dropdown, ExpansionPanel, Flag, FlexBox, GenericBlock, GenericBlockGapSize, Grid, GridColumn, GridItem, Heading, HeadingLevelProvider, Icon, IconButton, ImageBlock, ImageBlockCaptionPosition, ImageLightbox, InlineList, InputHelper, InputLabel, 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