@lumx/react 3.20.1-alpha.39 → 3.20.1-alpha.40

package/index.js

@@ -2,7 +2,7 @@ import { Kind, Size, ColorPalette, Emphasis, Theme, AspectRatio, CSS_PREFIX, DIA
 export * from '@lumx/core/js/constants';
 export * from '@lumx/core/js/types';
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, isValidElement, cloneElement, useLayoutEffect, createContext, useContext, useReducer } from 'react';
+import React__default, { useState, useEffect, useMemo, useRef, useCallback, Children, useLayoutEffect, cloneElement, createContext, isValidElement, useContext, useReducer } from 'react';
 import classNames from 'classnames';
 import { handleBasicClasses, getRootClassName, getBasicClass, getTypographyClassName, fontColorClass, resolveColorWithVariants } from '@lumx/core/js/utils/className';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
@@ -2914,7 +2914,7 @@ const DragHandle = forwardRef((props, ref) => {
 DragHandle.displayName = COMPONENT_NAME$14;
 DragHandle.className = CLASSNAME$14;
 
-const INITIAL_INDEX$1 = -1;
+const INITIAL_INDEX = -1;
 
 /**
  * This custom hook provides the necessary set of functions and values to properly navigate
@@ -2931,7 +2931,7 @@ const INITIAL_INDEX$1 = -1;
  * @param  preventTabOnEnteredValue determines whether upon TAB, if there is a value entered, the event is prevented or not.
  * @return useKeyboardListNavigation helpers.
  */
-const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNavigated, onEnterPressed, onBackspacePressed, keepFocusAfterSelection = false, initialIndex = INITIAL_INDEX$1, preventTabOnEnteredValue = true) => {
+const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNavigated, onEnterPressed, onBackspacePressed, keepFocusAfterSelection = false, initialIndex = INITIAL_INDEX, preventTabOnEnteredValue = true) => {
   const [activeItemIndex, setActiveItemIndex] = useState(initialIndex);
 
   /**
@@ -3078,24 +3078,10 @@ const useKeyboardListNavigation = (items, ref, onListItemSelected, onListItemNav
   };
 };
 
-/**
- * Render link with default <a> HTML component or a custom one provided by `linkAs`.
- *
- * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
- *
- * @param linkAs    Custom link component.
- * @param children  Link children.
- * @return          A link.
- */
-const renderLink = ({
-  linkAs,
-  ...forwardedProps
-}, ...children) => /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
-
 /**
  * Component display name.
  */
-const COMPONENT_NAME$13 = 'ListItem';
+const COMPONENT_NAME$13 = 'List';
 
 /**
  * Component default class name and class prefix.
@@ -3106,574 +3092,6 @@ const CLASSNAME$13 = getRootClassName(COMPONENT_NAME$13);
  * Component default props.
  */
 const DEFAULT_PROPS$R = {
-  size: Size.regular
-};
-
-/**
- * Check if the list item is clickable.
- * @return `true` if the list item is clickable; `false` otherwise.
- */
-function isClickable({
-  linkProps,
-  onItemSelected
-}) {
-  return !isEmpty(linkProps?.href) || !!onItemSelected;
-}
-
-/**
- * ListItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const ListItem = forwardRef((props, ref) => {
-  const {
-    isAnyDisabled,
-    disabledStateProps,
-    otherProps
-  } = useDisableStateProps(props);
-  const {
-    after,
-    before,
-    children,
-    className,
-    isHighlighted,
-    isSelected,
-    linkAs,
-    linkProps = {},
-    linkRef,
-    onItemSelected,
-    size = DEFAULT_PROPS$R.size,
-    ...forwardedProps
-  } = otherProps;
-  const role = linkAs || linkProps.href ? 'link' : 'button';
-  const onKeyDown = useMemo(() => {
-    if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
-    if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected);
-    return undefined;
-  }, [role, onItemSelected]);
-  const content = /*#__PURE__*/jsxs(Fragment, {
-    children: [before && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$13}__before`,
-      children: before
-    }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$13}__content`,
-      children: children
-    }), after && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$13}__after`,
-      children: after
-    })]
-  });
-  return /*#__PURE__*/jsx("li", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$13,
-      size
-    })),
-    children: isClickable({
-      linkProps,
-      onItemSelected
-    }) ? (/* Clickable list item */
-    renderLink({
-      linkAs,
-      tabIndex: !disabledStateProps.disabled ? 0 : undefined,
-      role,
-      'aria-disabled': isAnyDisabled,
-      ...linkProps,
-      href: isAnyDisabled ? undefined : linkProps.href,
-      className: classNames(handleBasicClasses({
-        prefix: `${CLASSNAME$13}__link`,
-        isHighlighted,
-        isSelected,
-        isDisabled: isAnyDisabled
-      })),
-      onClick: isAnyDisabled ? undefined : onItemSelected,
-      onKeyDown: isAnyDisabled ? undefined : onKeyDown,
-      ref: linkRef
-    }, content)) :
-    /*#__PURE__*/
-    /* Non clickable list item */
-    jsx("div", {
-      className: `${CLASSNAME$13}__wrapper`,
-      children: content
-    })
-  });
-});
-ListItem.displayName = COMPONENT_NAME$13;
-ListItem.className = CLASSNAME$13;
-ListItem.defaultProps = DEFAULT_PROPS$R;
-
-function getDefaultExportFromCjs (x) {
-	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-
-var reactIs = {exports: {}};
-
-var reactIs_production_min = {};
-
-/**
- * @license React
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_production_min;
-
-function requireReactIs_production_min () {
-	if (hasRequiredReactIs_production_min) return reactIs_production_min;
-	hasRequiredReactIs_production_min = 1;
-var b=Symbol.for("react.element"),c=Symbol.for("react.portal"),d=Symbol.for("react.fragment"),e=Symbol.for("react.strict_mode"),f=Symbol.for("react.profiler"),g=Symbol.for("react.provider"),h=Symbol.for("react.context"),k=Symbol.for("react.server_context"),l=Symbol.for("react.forward_ref"),m=Symbol.for("react.suspense"),n=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),q=Symbol.for("react.lazy"),t=Symbol.for("react.offscreen"),u;u=Symbol.for("react.module.reference");
-	function v(a){if("object"===typeof a&&null!==a){var r=a.$$typeof;switch(r){case b:switch(a=a.type,a){case d:case f:case e:case m:case n:return a;default:switch(a=a&&a.$$typeof,a){case k:case h:case l:case q:case p:case g:return a;default:return r}}case c:return r}}}reactIs_production_min.ContextConsumer=h;reactIs_production_min.ContextProvider=g;reactIs_production_min.Element=b;reactIs_production_min.ForwardRef=l;reactIs_production_min.Fragment=d;reactIs_production_min.Lazy=q;reactIs_production_min.Memo=p;reactIs_production_min.Portal=c;reactIs_production_min.Profiler=f;reactIs_production_min.StrictMode=e;reactIs_production_min.Suspense=m;
-	reactIs_production_min.SuspenseList=n;reactIs_production_min.isAsyncMode=function(){return  false};reactIs_production_min.isConcurrentMode=function(){return  false};reactIs_production_min.isContextConsumer=function(a){return v(a)===h};reactIs_production_min.isContextProvider=function(a){return v(a)===g};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===b};reactIs_production_min.isForwardRef=function(a){return v(a)===l};reactIs_production_min.isFragment=function(a){return v(a)===d};reactIs_production_min.isLazy=function(a){return v(a)===q};reactIs_production_min.isMemo=function(a){return v(a)===p};
-	reactIs_production_min.isPortal=function(a){return v(a)===c};reactIs_production_min.isProfiler=function(a){return v(a)===f};reactIs_production_min.isStrictMode=function(a){return v(a)===e};reactIs_production_min.isSuspense=function(a){return v(a)===m};reactIs_production_min.isSuspenseList=function(a){return v(a)===n};
-	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===d||a===f||a===e||a===m||a===n||a===t||"object"===typeof a&&null!==a&&(a.$$typeof===q||a.$$typeof===p||a.$$typeof===g||a.$$typeof===h||a.$$typeof===l||a.$$typeof===u||void 0!==a.getModuleId)?true:false};reactIs_production_min.typeOf=v;
-	return reactIs_production_min;
-}
-
-var reactIs_development = {};
-
-/**
- * @license React
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_development;
-
-function requireReactIs_development () {
-	if (hasRequiredReactIs_development) return reactIs_development;
-	hasRequiredReactIs_development = 1;
-
-	if (process.env.NODE_ENV !== "production") {
-	  (function() {
-
-	// ATTENTION
-	// When adding new symbols to this file,
-	// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
-	// The Symbol used to tag the ReactElement-like types.
-	var REACT_ELEMENT_TYPE = Symbol.for('react.element');
-	var REACT_PORTAL_TYPE = Symbol.for('react.portal');
-	var REACT_FRAGMENT_TYPE = Symbol.for('react.fragment');
-	var REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');
-	var REACT_PROFILER_TYPE = Symbol.for('react.profiler');
-	var REACT_PROVIDER_TYPE = Symbol.for('react.provider');
-	var REACT_CONTEXT_TYPE = Symbol.for('react.context');
-	var REACT_SERVER_CONTEXT_TYPE = Symbol.for('react.server_context');
-	var REACT_FORWARD_REF_TYPE = Symbol.for('react.forward_ref');
-	var REACT_SUSPENSE_TYPE = Symbol.for('react.suspense');
-	var REACT_SUSPENSE_LIST_TYPE = Symbol.for('react.suspense_list');
-	var REACT_MEMO_TYPE = Symbol.for('react.memo');
-	var REACT_LAZY_TYPE = Symbol.for('react.lazy');
-	var REACT_OFFSCREEN_TYPE = Symbol.for('react.offscreen');
-
-	// -----------------------------------------------------------------------------
-
-	var enableScopeAPI = false; // Experimental Create Event Handle API.
-	var enableCacheElement = false;
-	var enableTransitionTracing = false; // No known bugs, but needs performance testing
-
-	var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber
-	// stuff. Intended to enable React core members to more easily debug scheduling
-	// issues in DEV builds.
-
-	var enableDebugTracing = false; // Track which Fiber(s) schedule render work.
-
-	var REACT_MODULE_REFERENCE;
-
-	{
-	  REACT_MODULE_REFERENCE = Symbol.for('react.module.reference');
-	}
-
-	function isValidElementType(type) {
-	  if (typeof type === 'string' || typeof type === 'function') {
-	    return true;
-	  } // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
-
-
-	  if (type === REACT_FRAGMENT_TYPE || type === REACT_PROFILER_TYPE || enableDebugTracing  || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || enableLegacyHidden  || type === REACT_OFFSCREEN_TYPE || enableScopeAPI  || enableCacheElement  || enableTransitionTracing ) {
-	    return true;
-	  }
-
-	  if (typeof type === 'object' && type !== null) {
-	    if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || // This needs to include all possible module reference object
-	    // types supported by any Flight configuration anywhere since
-	    // we don't know which Flight build this will end up being used
-	    // with.
-	    type.$$typeof === REACT_MODULE_REFERENCE || type.getModuleId !== undefined) {
-	      return true;
-	    }
-	  }
-
-	  return false;
-	}
-
-	function typeOf(object) {
-	  if (typeof object === 'object' && object !== null) {
-	    var $$typeof = object.$$typeof;
-
-	    switch ($$typeof) {
-	      case REACT_ELEMENT_TYPE:
-	        var type = object.type;
-
-	        switch (type) {
-	          case REACT_FRAGMENT_TYPE:
-	          case REACT_PROFILER_TYPE:
-	          case REACT_STRICT_MODE_TYPE:
-	          case REACT_SUSPENSE_TYPE:
-	          case REACT_SUSPENSE_LIST_TYPE:
-	            return type;
-
-	          default:
-	            var $$typeofType = type && type.$$typeof;
-
-	            switch ($$typeofType) {
-	              case REACT_SERVER_CONTEXT_TYPE:
-	              case REACT_CONTEXT_TYPE:
-	              case REACT_FORWARD_REF_TYPE:
-	              case REACT_LAZY_TYPE:
-	              case REACT_MEMO_TYPE:
-	              case REACT_PROVIDER_TYPE:
-	                return $$typeofType;
-
-	              default:
-	                return $$typeof;
-	            }
-
-	        }
-
-	      case REACT_PORTAL_TYPE:
-	        return $$typeof;
-	    }
-	  }
-
-	  return undefined;
-	}
-	var ContextConsumer = REACT_CONTEXT_TYPE;
-	var ContextProvider = REACT_PROVIDER_TYPE;
-	var Element = REACT_ELEMENT_TYPE;
-	var ForwardRef = REACT_FORWARD_REF_TYPE;
-	var Fragment = REACT_FRAGMENT_TYPE;
-	var Lazy = REACT_LAZY_TYPE;
-	var Memo = REACT_MEMO_TYPE;
-	var Portal = REACT_PORTAL_TYPE;
-	var Profiler = REACT_PROFILER_TYPE;
-	var StrictMode = REACT_STRICT_MODE_TYPE;
-	var Suspense = REACT_SUSPENSE_TYPE;
-	var SuspenseList = REACT_SUSPENSE_LIST_TYPE;
-	var hasWarnedAboutDeprecatedIsAsyncMode = false;
-	var hasWarnedAboutDeprecatedIsConcurrentMode = false; // AsyncMode should be deprecated
-
-	function isAsyncMode(object) {
-	  {
-	    if (!hasWarnedAboutDeprecatedIsAsyncMode) {
-	      hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
-
-	      console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-	    }
-	  }
-
-	  return false;
-	}
-	function isConcurrentMode(object) {
-	  {
-	    if (!hasWarnedAboutDeprecatedIsConcurrentMode) {
-	      hasWarnedAboutDeprecatedIsConcurrentMode = true; // Using console['warn'] to evade Babel and ESLint
-
-	      console['warn']('The ReactIs.isConcurrentMode() alias has been deprecated, ' + 'and will be removed in React 18+.');
-	    }
-	  }
-
-	  return false;
-	}
-	function isContextConsumer(object) {
-	  return typeOf(object) === REACT_CONTEXT_TYPE;
-	}
-	function isContextProvider(object) {
-	  return typeOf(object) === REACT_PROVIDER_TYPE;
-	}
-	function isElement(object) {
-	  return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
-	}
-	function isForwardRef(object) {
-	  return typeOf(object) === REACT_FORWARD_REF_TYPE;
-	}
-	function isFragment(object) {
-	  return typeOf(object) === REACT_FRAGMENT_TYPE;
-	}
-	function isLazy(object) {
-	  return typeOf(object) === REACT_LAZY_TYPE;
-	}
-	function isMemo(object) {
-	  return typeOf(object) === REACT_MEMO_TYPE;
-	}
-	function isPortal(object) {
-	  return typeOf(object) === REACT_PORTAL_TYPE;
-	}
-	function isProfiler(object) {
-	  return typeOf(object) === REACT_PROFILER_TYPE;
-	}
-	function isStrictMode(object) {
-	  return typeOf(object) === REACT_STRICT_MODE_TYPE;
-	}
-	function isSuspense(object) {
-	  return typeOf(object) === REACT_SUSPENSE_TYPE;
-	}
-	function isSuspenseList(object) {
-	  return typeOf(object) === REACT_SUSPENSE_LIST_TYPE;
-	}
-
-	reactIs_development.ContextConsumer = ContextConsumer;
-	reactIs_development.ContextProvider = ContextProvider;
-	reactIs_development.Element = Element;
-	reactIs_development.ForwardRef = ForwardRef;
-	reactIs_development.Fragment = Fragment;
-	reactIs_development.Lazy = Lazy;
-	reactIs_development.Memo = Memo;
-	reactIs_development.Portal = Portal;
-	reactIs_development.Profiler = Profiler;
-	reactIs_development.StrictMode = StrictMode;
-	reactIs_development.Suspense = Suspense;
-	reactIs_development.SuspenseList = SuspenseList;
-	reactIs_development.isAsyncMode = isAsyncMode;
-	reactIs_development.isConcurrentMode = isConcurrentMode;
-	reactIs_development.isContextConsumer = isContextConsumer;
-	reactIs_development.isContextProvider = isContextProvider;
-	reactIs_development.isElement = isElement;
-	reactIs_development.isForwardRef = isForwardRef;
-	reactIs_development.isFragment = isFragment;
-	reactIs_development.isLazy = isLazy;
-	reactIs_development.isMemo = isMemo;
-	reactIs_development.isPortal = isPortal;
-	reactIs_development.isProfiler = isProfiler;
-	reactIs_development.isStrictMode = isStrictMode;
-	reactIs_development.isSuspense = isSuspense;
-	reactIs_development.isSuspenseList = isSuspenseList;
-	reactIs_development.isValidElementType = isValidElementType;
-	reactIs_development.typeOf = typeOf;
-	  })();
-	}
-	return reactIs_development;
-}
-
-var hasRequiredReactIs;
-
-function requireReactIs () {
-	if (hasRequiredReactIs) return reactIs.exports;
-	hasRequiredReactIs = 1;
-
-	if (process.env.NODE_ENV === 'production') {
-	  reactIs.exports = requireReactIs_production_min();
-	} else {
-	  reactIs.exports = requireReactIs_development();
-	}
-	return reactIs.exports;
-}
-
-var reactIsExports = requireReactIs();
-
-/**
- * Flatten list of react nodes removing fragments and adding keys.
- * based on: https://github.com/grrowl/react-keyed-flatten-children/blob/5d421644a449765ddd62b659946196b4b5d7b135/index.ts
- *
- * @param  children React nodes to flatten.
- * @return Flattened react nodes.
- * @deprecated This function was used to develop keyboard navigation in the List component,
- *    but we will replace this with a better method that does not require to hack the children inspection
- *
- * TODO: remove List keyboard navigation once we have provided alternative component (Menu, Combobox, etc.),
- *       remove this function and then remove react-is from the dependencies
- */
-function flattenChildren(children) {
-  function recur(nodes, keys = []) {
-    return Children.toArray(nodes).reduce((acc, node, index) => {
-      const nodeKeys = keys.concat(get(node, 'key') ?? index);
-      if (reactIsExports.isFragment(node)) {
-        acc.push(...recur(node.props.children, nodeKeys));
-      } else if (/*#__PURE__*/isValidElement(node)) {
-        acc.push(/*#__PURE__*/cloneElement(node, {
-          key: nodeKeys.join('.')
-        }));
-      } else if (typeof node === 'string' || typeof node === 'number') {
-        acc.push(node);
-      }
-      return acc;
-    }, []);
-  }
-  return recur(children);
-}
-
-const INITIAL_INDEX = -1;
-function onKeyboardFocus(props, handler) {
-  let isMouseDown = false;
-  return {
-    onFocus(evt) {
-      props.onFocus?.(evt);
-      if (!isMouseDown) {
-        handler(evt);
-      }
-    },
-    onMouseDown(evt) {
-      props.onMouseDown?.(evt);
-      isMouseDown = true;
-    },
-    onMouseUp(evt) {
-      props.onMouseUp?.(evt);
-      isMouseDown = false;
-    }
-  };
-}
-const isNavigableItem = node => {
-  return isComponent('ListItem')(node) && isClickable(node.props) && !node.props.isDisabled;
-};
-
-/**
- * This custom hook detects clickable list item in a list and make them navigable with the keyboard.
- *
- * @param  options See {@link Options}
- * @return See {@link Output}
- */
-const useInteractiveList = options => {
-  const {
-    ref,
-    onListItemSelected,
-    onListItemNavigated
-  } = options;
-  const items = useMemo(() => flattenChildren(options.items), [options.items]);
-  const [activeItemIndex, setActiveItemIndex] = useState(INITIAL_INDEX);
-
-  // Attach listeners to the list.
-  useEffect(() => {
-    const {
-      current: listElement
-    } = ref;
-    if (!listElement) {
-      return undefined;
-    }
-
-    /**
-     * This function calculates the next index in the list to be active
-     * @param  index current index
-     * @param  code  key code pressed
-     * @return next index
-     */
-    const getNextIndex = (index, key) => {
-      switch (key) {
-        case 'ArrowDown':
-          return index + 1 < items.length ? index + 1 : 0;
-        case 'ArrowUp':
-          return index - 1 >= 0 ? index - 1 : items.length - 1;
-        default:
-          return INITIAL_INDEX;
-      }
-    };
-
-    /**
-     * Resets the active index to the initial state
-     */
-    const resetActiveIndex = () => {
-      setActiveItemIndex(INITIAL_INDEX);
-    };
-
-    /**
-     * Handles navigation with the arrows using the keyboard
-     * @param evt Key event
-     */
-    const onArrowPressed = evt => {
-      const {
-        key
-      } = evt;
-      if (key !== 'ArrowUp' && key !== 'ArrowDown') {
-        return;
-      }
-      let nextIndex = activeItemIndex;
-      let iterations = 0;
-
-      // Move to next navigable item.
-      do {
-        nextIndex = getNextIndex(nextIndex, key);
-        iterations += 1;
-      } while (nextIndex !== INITIAL_INDEX && nextIndex !== activeItemIndex && !isNavigableItem(items[nextIndex]) && iterations < items.length);
-      setActiveItemIndex(nextIndex);
-      evt.preventDefault();
-      evt.stopPropagation();
-      onListItemNavigated?.(nextIndex, get(items, [nextIndex, 'key']));
-    };
-
-    /**
-     * Reset active list item index when focusing outside the list.
-     * @param evt Focus out event
-     */
-    const onFocusOut = evt => {
-      if (!evt.relatedTarget || !listElement.contains(evt.relatedTarget)) {
-        resetActiveIndex();
-      }
-    };
-    listElement.addEventListener('focusout', onFocusOut);
-    listElement.addEventListener('keydown', onArrowPressed);
-    return () => {
-      listElement.removeEventListener('focusout', onFocusOut);
-      listElement.removeEventListener('keydown', onArrowPressed);
-    };
-  }, [ref, activeItemIndex, items, onListItemNavigated]);
-  return useMemo(() => {
-    let hasClickableItem = false;
-    const transformedItems = items.map((item, index) => {
-      // Ignore if list not clickable or item is not a simple list item.
-      if (!isNavigableItem(item)) {
-        return item;
-      }
-      hasClickableItem = true;
-      const isHighlighted = index === activeItemIndex;
-
-      // Clone list item: inject ref, add tab index and active state.
-      return /*#__PURE__*/cloneElement(item, {
-        ...item.props,
-        isHighlighted: item.props.isHighlighted ?? isHighlighted,
-        linkRef: mergeRefs(item.props.linkRef, element => {
-          if (isHighlighted) {
-            element?.focus();
-          }
-        }),
-        onItemSelected(evt) {
-          item.props.onItemSelected?.();
-          onListItemSelected?.(index, item.key, evt);
-        },
-        ...onKeyboardFocus(item.props, () => {
-          setActiveItemIndex(index);
-        })
-      });
-    });
-    return {
-      items: transformedItems,
-      hasClickableItem
-    };
-  }, [items, activeItemIndex, onListItemSelected]);
-};
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$12 = 'List';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$12 = getRootClassName(COMPONENT_NAME$12);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS$Q = {
   tabIndex: -1
 };
 
@@ -3692,33 +3110,23 @@ const InternalList = forwardRef((props, ref) => {
     isClickable,
     itemPadding,
     onListItemSelected,
-    tabIndex = DEFAULT_PROPS$Q.tabIndex,
+    tabIndex = DEFAULT_PROPS$R.tabIndex,
     ...forwardedProps
   } = props;
-  const listElementRef = useRef(null);
-  const {
-    items,
-    hasClickableItem
-  } = useInteractiveList({
-    items: children,
-    ref: listElementRef,
-    onListItemSelected
-  });
-  const clickable = hasClickableItem || isClickable;
   return /*#__PURE__*/jsx("ul", {
     ...forwardedProps,
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$12,
-      itemPadding: itemPadding ?? (clickable ? Size.big : undefined)
+      prefix: CLASSNAME$13,
+      itemPadding: itemPadding ?? (isClickable ? Size.big : undefined)
     })),
     tabIndex: tabIndex,
-    ref: mergeRefs(ref, listElementRef),
-    children: items
+    ref: ref,
+    children: children
   });
 });
-InternalList.displayName = COMPONENT_NAME$12;
-InternalList.className = CLASSNAME$12;
-InternalList.defaultProps = DEFAULT_PROPS$Q;
+InternalList.displayName = COMPONENT_NAME$13;
+InternalList.className = CLASSNAME$13;
+InternalList.defaultProps = DEFAULT_PROPS$R;
 const List = Object.assign(InternalList, {
   useKeyboardListNavigation
 });
@@ -5655,6 +5063,10 @@ var fromEntries = function fromEntries(entries) {
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React.useLayoutEffect : React.useEffect;
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 /* global Map:readonly, Set:readonly, ArrayBuffer:readonly */
 
 var reactFastCompare;
@@ -6149,17 +5561,17 @@ function usePopoverStyle({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$11 = 'Popover';
+const COMPONENT_NAME$12 = 'Popover';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$11 = getRootClassName(COMPONENT_NAME$11);
+const CLASSNAME$12 = getRootClassName(COMPONENT_NAME$12);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$P = {
+const DEFAULT_PROPS$Q = {
   elevation: 3,
   placement: Placement.AUTO,
   focusAnchorOnClose: true,
@@ -6176,24 +5588,24 @@ const _InnerPopover = forwardRef((props, ref) => {
     className,
     closeOnClickAway,
     closeOnEscape,
-    elevation = DEFAULT_PROPS$P.elevation,
+    elevation = DEFAULT_PROPS$Q.elevation,
     focusElement,
     hasArrow,
     isOpen,
     onClose,
     parentElement,
-    usePortal = DEFAULT_PROPS$P.usePortal,
-    focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
+    usePortal = DEFAULT_PROPS$Q.usePortal,
+    focusAnchorOnClose = DEFAULT_PROPS$Q.focusAnchorOnClose,
     withFocusTrap,
     boundaryRef,
     fitToAnchorWidth,
     fitWithinViewportHeight,
     focusTrapZoneElement,
     offset,
-    placement = DEFAULT_PROPS$P.placement,
+    placement = DEFAULT_PROPS$Q.placement,
     style,
     theme,
-    zIndex = DEFAULT_PROPS$P.zIndex,
+    zIndex = DEFAULT_PROPS$Q.zIndex,
     ...forwardedProps
   } = props;
   const popoverRef = useRef(null);
@@ -6235,7 +5647,7 @@ const _InnerPopover = forwardRef((props, ref) => {
       ...forwardedProps,
       ref: mergedRefs,
       className: classNames(className, handleBasicClasses({
-        prefix: CLASSNAME$11,
+        prefix: CLASSNAME$12,
         theme,
         elevation: Math.min(elevation || 0, 5),
         position,
@@ -6248,7 +5660,7 @@ const _InnerPopover = forwardRef((props, ref) => {
         childrenRefs: clickAwayRefs,
         children: [hasArrow && /*#__PURE__*/jsx("div", {
           ref: setArrowElement,
-          className: `${CLASSNAME$11}__arrow`,
+          className: `${CLASSNAME$12}__arrow`,
           style: styles.arrow,
           children: /*#__PURE__*/jsx("svg", {
             viewBox: "0 0 14 14",
@@ -6265,7 +5677,7 @@ const _InnerPopover = forwardRef((props, ref) => {
     })
   }) : null;
 });
-_InnerPopover.displayName = COMPONENT_NAME$11;
+_InnerPopover.displayName = COMPONENT_NAME$12;
 
 /**
  * Popover component.
@@ -6277,9 +5689,9 @@ _InnerPopover.displayName = COMPONENT_NAME$11;
 const Popover = skipRender(
 // Skip render in SSR
 () => Boolean(DOCUMENT), _InnerPopover);
-Popover.displayName = COMPONENT_NAME$11;
-Popover.className = CLASSNAME$11;
-Popover.defaultProps = DEFAULT_PROPS$P;
+Popover.displayName = COMPONENT_NAME$12;
+Popover.className = CLASSNAME$12;
+Popover.defaultProps = DEFAULT_PROPS$Q;
 
 // The error margin in px we want to have for triggering infinite scroll
 const SCROLL_TRIGGER_MARGIN = 5;
@@ -6325,17 +5737,17 @@ const useInfiniteScroll = (ref, callback, callbackOnMount = false, scrollTrigger
 /**
  * Component display name.
  */
-const COMPONENT_NAME$10 = 'Dropdown';
+const COMPONENT_NAME$11 = 'Dropdown';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$10);
+const CLASSNAME$11 = getRootClassName(COMPONENT_NAME$11);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$O = {
+const DEFAULT_PROPS$P = {
   closeOnClick: true,
   closeOnClickAway: true,
   closeOnEscape: true,
@@ -6358,18 +5770,18 @@ const Dropdown = forwardRef((props, ref) => {
     anchorRef,
     children,
     className,
-    closeOnClick = DEFAULT_PROPS$O.closeOnClick,
-    closeOnClickAway = DEFAULT_PROPS$O.closeOnClickAway,
-    closeOnEscape = DEFAULT_PROPS$O.closeOnEscape,
-    fitToAnchorWidth = DEFAULT_PROPS$O.fitToAnchorWidth,
-    fitWithinViewportHeight = DEFAULT_PROPS$O.fitWithinViewportHeight,
+    closeOnClick = DEFAULT_PROPS$P.closeOnClick,
+    closeOnClickAway = DEFAULT_PROPS$P.closeOnClickAway,
+    closeOnEscape = DEFAULT_PROPS$P.closeOnEscape,
+    fitToAnchorWidth = DEFAULT_PROPS$P.fitToAnchorWidth,
+    fitWithinViewportHeight = DEFAULT_PROPS$P.fitWithinViewportHeight,
     isOpen,
     offset,
-    focusAnchorOnClose = DEFAULT_PROPS$O.focusAnchorOnClose,
+    focusAnchorOnClose = DEFAULT_PROPS$P.focusAnchorOnClose,
     onClose,
     onInfiniteScroll,
-    placement = DEFAULT_PROPS$O.placement,
-    shouldFocusOnOpen = DEFAULT_PROPS$O.shouldFocusOnOpen,
+    placement = DEFAULT_PROPS$P.placement,
+    shouldFocusOnOpen = DEFAULT_PROPS$P.shouldFocusOnOpen,
     zIndex,
     ...forwardedProps
   } = props;
@@ -6394,7 +5806,7 @@ const Dropdown = forwardRef((props, ref) => {
     ...forwardedProps,
     focusAnchorOnClose: focusAnchorOnClose,
     anchorRef: anchorRef,
-    className: classNames(className, CLASSNAME$10),
+    className: classNames(className, CLASSNAME$11),
     elevation: 0,
     closeOnClickAway: closeOnClickAway,
     closeOnEscape: closeOnEscape,
@@ -6407,30 +5819,30 @@ const Dropdown = forwardRef((props, ref) => {
     placement: placement,
     zIndex: zIndex,
     children: /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$10}__menu`,
+      className: `${CLASSNAME$11}__menu`,
       ref: innerRef,
       children: popperElement
     })
   }) : null;
 });
-Dropdown.displayName = COMPONENT_NAME$10;
-Dropdown.className = CLASSNAME$10;
-Dropdown.defaultProps = DEFAULT_PROPS$O;
+Dropdown.displayName = COMPONENT_NAME$11;
+Dropdown.className = CLASSNAME$11;
+Dropdown.defaultProps = DEFAULT_PROPS$P;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$$ = 'ExpansionPanel';
+const COMPONENT_NAME$10 = 'ExpansionPanel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$$);
+const CLASSNAME$10 = getRootClassName(COMPONENT_NAME$10);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$N = {
+const DEFAULT_PROPS$O = {
   closeMode: 'unmount'
 };
 const isDragHandle = isComponent(DragHandle);
@@ -6448,7 +5860,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
     className,
-    closeMode = DEFAULT_PROPS$N.closeMode,
+    closeMode = DEFAULT_PROPS$O.closeMode,
     children: anyChildren,
     hasBackground,
     hasHeaderDivider,
@@ -6469,7 +5881,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
   // Either take the header in children or create one with the label.
   const headerProps = /*#__PURE__*/React__default.isValidElement(header) ? header.props : {};
   const headerContent = !isEmpty(headerProps.children) ? headerProps.children : /*#__PURE__*/jsx("span", {
-    className: `${CLASSNAME$$}__label`,
+    className: `${CLASSNAME$10}__label`,
     children: label
   });
   const toggleOpen = event => {
@@ -6492,7 +5904,7 @@ const ExpansionPanel = forwardRef((props, ref) => {
     isClose: !isOpen,
     isDraggable: Boolean(dragHandle),
     isOpen,
-    prefix: CLASSNAME$$,
+    prefix: CLASSNAME$10,
     theme
   }));
   const wrapperRef = useRef(null);
@@ -6529,17 +5941,17 @@ const ExpansionPanel = forwardRef((props, ref) => {
     ...forwardedProps,
     className: rootClassName,
     children: [/*#__PURE__*/jsxs("header", {
-      className: `${CLASSNAME$$}__header`,
+      className: `${CLASSNAME$10}__header`,
       onClick: toggleOpen,
       children: [dragHandle && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$$}__header-drag`,
+        className: `${CLASSNAME$10}__header-drag`,
         children: dragHandle
       }), /*#__PURE__*/jsx("div", {
         ...headerProps,
-        className: `${CLASSNAME$$}__header-content`,
+        className: `${CLASSNAME$10}__header-content`,
         children: headerContent
       }), /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$$}__header-toggle`,
+        className: `${CLASSNAME$10}__header-toggle`,
         children: /*#__PURE__*/jsx(IconButton, {
           ...toggleButtonProps,
           color: color,
@@ -6549,28 +5961,28 @@ const ExpansionPanel = forwardRef((props, ref) => {
         })
       })]
     }), /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$$}__wrapper`,
+      className: `${CLASSNAME$10}__wrapper`,
       ref: wrapperRef,
       children: (isOpen || isChildrenVisible) && /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$$}__container`,
+        className: `${CLASSNAME$10}__container`,
         children: [/*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$$}__content`,
+          className: `${CLASSNAME$10}__content`,
           children: content
         }), footer && /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$$}__footer`,
+          className: `${CLASSNAME$10}__footer`,
           children: footer
         })]
       })
     })]
   });
 });
-ExpansionPanel.displayName = COMPONENT_NAME$$;
-ExpansionPanel.className = CLASSNAME$$;
-ExpansionPanel.defaultProps = DEFAULT_PROPS$N;
+ExpansionPanel.displayName = COMPONENT_NAME$10;
+ExpansionPanel.className = CLASSNAME$10;
+ExpansionPanel.defaultProps = DEFAULT_PROPS$O;
 
-const COMPONENT_NAME$_ = 'Flag';
-const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
-const DEFAULT_PROPS$M = {};
+const COMPONENT_NAME$$ = 'Flag';
+const CLASSNAME$$ = getRootClassName(COMPONENT_NAME$$);
+const DEFAULT_PROPS$N = {};
 
 /**
  * Flag component.
@@ -6595,7 +6007,7 @@ const Flag = forwardRef((props, ref) => {
   return /*#__PURE__*/jsxs("div", {
     ...forwardedProps,
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$_,
+      prefix: CLASSNAME$$,
       color: flagColor,
       isTruncated
     })),
@@ -6603,29 +6015,29 @@ const Flag = forwardRef((props, ref) => {
     children: [icon && /*#__PURE__*/jsx(Icon, {
       icon: icon,
       size: Size.xxs,
-      className: `${CLASSNAME$_}__icon`
+      className: `${CLASSNAME$$}__icon`
     }), /*#__PURE__*/jsx(Text, {
       as: "span",
       truncate: isTruncated,
       typography: "overline",
-      className: `${CLASSNAME$_}__label`,
+      className: `${CLASSNAME$$}__label`,
       children: label
     })]
   });
 });
-Flag.displayName = COMPONENT_NAME$_;
-Flag.className = CLASSNAME$_;
-Flag.defaultProps = DEFAULT_PROPS$M;
+Flag.displayName = COMPONENT_NAME$$;
+Flag.className = CLASSNAME$$;
+Flag.defaultProps = DEFAULT_PROPS$N;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Z = 'FlexBox';
+const COMPONENT_NAME$_ = 'FlexBox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Z = getRootClassName(COMPONENT_NAME$Z);
+const CLASSNAME$_ = getRootClassName(COMPONENT_NAME$_);
 
 /**
  * FlexBox component.
@@ -6653,32 +6065,32 @@ const FlexBox = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$Z,
+      prefix: CLASSNAME$_,
       orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
       vAlign,
       hAlign,
       gap
-    }), wrap && `${CLASSNAME$Z}--wrap`, fillSpace && `${CLASSNAME$Z}--fill-space`, noShrink && `${CLASSNAME$Z}--no-shrink`, marginAuto && castArray(marginAuto).map(align => `${CLASSNAME$Z}--margin-auto-${align}`)),
+    }), wrap && `${CLASSNAME$_}--wrap`, fillSpace && `${CLASSNAME$_}--fill-space`, noShrink && `${CLASSNAME$_}--no-shrink`, marginAuto && castArray(marginAuto).map(align => `${CLASSNAME$_}--margin-auto-${align}`)),
     children: children
   });
 });
-FlexBox.displayName = COMPONENT_NAME$Z;
-FlexBox.className = CLASSNAME$Z;
+FlexBox.displayName = COMPONENT_NAME$_;
+FlexBox.className = CLASSNAME$_;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Y = 'GenericBlock';
+const COMPONENT_NAME$Z = 'GenericBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Y = getRootClassName(COMPONENT_NAME$Y);
+const CLASSNAME$Z = getRootClassName(COMPONENT_NAME$Z);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$L = {
+const DEFAULT_PROPS$M = {
   gap: Size.big,
   orientation: Orientation.horizontal
 };
@@ -6708,8 +6120,8 @@ const BaseGenericBlock = forwardRef((props, ref) => {
     children,
     actions,
     actionsProps,
-    gap = DEFAULT_PROPS$L.gap,
-    orientation = DEFAULT_PROPS$L.orientation,
+    gap = DEFAULT_PROPS$M.gap,
+    orientation = DEFAULT_PROPS$M.orientation,
     contentProps,
     ...forwardedProps
   } = props;
@@ -6728,7 +6140,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
   }, [children]);
   return /*#__PURE__*/jsxs(FlexBox, {
     ref: ref,
-    className: classNames(className, CLASSNAME$Y),
+    className: classNames(className, CLASSNAME$Z),
     gap: gap,
     orientation: orientation,
     ...forwardedProps,
@@ -6738,7 +6150,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...figureProps,
       ...sections.figureChildProps,
-      className: classNames(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$Y}__figure`),
+      className: classNames(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME$Z}__figure`),
       children: [figure, sections.figureChildProps?.children]
     }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.contentChild?.ref,
@@ -6748,7 +6160,7 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...contentProps,
       ...sections.contentChildProps,
-      className: classNames(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$Y}__content`),
+      className: classNames(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME$Z}__content`),
       children: [sections.contentChildProps?.children, sections.otherChildren]
     }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
       ref: sections.actionsChild?.ref,
@@ -6756,14 +6168,14 @@ const BaseGenericBlock = forwardRef((props, ref) => {
       hAlign: forwardedProps.hAlign,
       ...actionsProps,
       ...sections.actionsChildProps,
-      className: classNames(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$Y}__actions`),
+      className: classNames(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME$Z}__actions`),
       children: [actions, sections.actionsChildProps?.children]
     })]
   });
 });
-BaseGenericBlock.displayName = COMPONENT_NAME$Y;
-BaseGenericBlock.className = CLASSNAME$Y;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS$L;
+BaseGenericBlock.displayName = COMPONENT_NAME$Z;
+BaseGenericBlock.className = CLASSNAME$Z;
+BaseGenericBlock.defaultProps = DEFAULT_PROPS$M;
 const GenericBlock = Object.assign(BaseGenericBlock, {
   Figure,
   Content,
@@ -6834,17 +6246,17 @@ function wrapChildrenIconWithSpaces(children) {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$X = 'Text';
+const COMPONENT_NAME$Y = 'Text';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$X = getRootClassName(COMPONENT_NAME$X);
+const CLASSNAME$Y = getRootClassName(COMPONENT_NAME$Y);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$K = {};
+const DEFAULT_PROPS$L = {};
 
 /**
  * Text component.
@@ -6891,10 +6303,10 @@ const Text = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Component, {
     ref: useMergeRefs(ref, labelRef),
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$X,
+      prefix: CLASSNAME$Y,
       isTruncated: isTruncated && !isTruncatedMultiline,
       isTruncatedMultiline
-    }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME$X}--no-wrap`),
+    }), typographyClass, fontColorClass(color, colorVariant), noWrap && `${CLASSNAME$Y}--no-wrap`),
     title: tooltipLabel,
     style: {
       ...truncateLinesStyle,
@@ -6905,9 +6317,9 @@ const Text = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(children)
   });
 });
-Text.displayName = COMPONENT_NAME$X;
-Text.className = CLASSNAME$X;
-Text.defaultProps = DEFAULT_PROPS$K;
+Text.displayName = COMPONENT_NAME$Y;
+Text.className = CLASSNAME$Y;
+Text.defaultProps = DEFAULT_PROPS$L;
 
 /** The maximum authorized heading level. */
 const MAX_HEADING_LEVEL = 6;
@@ -6944,17 +6356,17 @@ const useHeadingLevel = () => {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$W = 'Heading';
+const COMPONENT_NAME$X = 'Heading';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$W = getRootClassName(COMPONENT_NAME$W);
+const CLASSNAME$X = getRootClassName(COMPONENT_NAME$X);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$J = {};
+const DEFAULT_PROPS$K = {};
 
 /**
  * Renders a heading component.
@@ -6974,16 +6386,16 @@ const Heading = forwardRef((props, ref) => {
   const computedHeadingElement = as || headingElement;
   return /*#__PURE__*/jsx(Text, {
     ref: ref,
-    className: classNames(className, CLASSNAME$W),
+    className: classNames(className, CLASSNAME$X),
     as: computedHeadingElement,
     typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement],
     ...forwardedProps,
     children: children
   });
 });
-Heading.displayName = COMPONENT_NAME$W;
-Heading.className = CLASSNAME$W;
-Heading.defaultProps = DEFAULT_PROPS$J;
+Heading.displayName = COMPONENT_NAME$X;
+Heading.className = CLASSNAME$X;
+Heading.defaultProps = DEFAULT_PROPS$K;
 
 /**
  * Provide a new heading level context.
@@ -7011,17 +6423,17 @@ const HeadingLevelProvider = ({
 /**
  * Component display name.
  */
-const COMPONENT_NAME$V = 'Grid';
+const COMPONENT_NAME$W = 'Grid';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$V = getRootClassName(COMPONENT_NAME$V);
+const CLASSNAME$W = getRootClassName(COMPONENT_NAME$W);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$I = {
+const DEFAULT_PROPS$J = {
   orientation: Orientation.horizontal,
   wrap: 'nowrap'
 };
@@ -7039,20 +6451,20 @@ const Grid = forwardRef((props, ref) => {
     className,
     gutter,
     hAlign,
-    orientation = DEFAULT_PROPS$I.orientation,
+    orientation = DEFAULT_PROPS$J.orientation,
     vAlign,
-    wrap = DEFAULT_PROPS$I.wrap,
+    wrap = DEFAULT_PROPS$J.wrap,
     ...forwardedProps
   } = props;
   return /*#__PURE__*/jsx("div", {
     ref: ref,
     ...forwardedProps,
-    className: classNames(className, `${CLASSNAME$V}-container`, {
-      [`${CLASSNAME$V}--h-align-${hAlign}`]: hAlign
+    className: classNames(className, `${CLASSNAME$W}-container`, {
+      [`${CLASSNAME$W}--h-align-${hAlign}`]: hAlign
     }, {
-      [`${CLASSNAME$V}--v-align-${vAlign}`]: vAlign
+      [`${CLASSNAME$W}--v-align-${vAlign}`]: vAlign
     }, handleBasicClasses({
-      prefix: CLASSNAME$V,
+      prefix: CLASSNAME$W,
       orientation,
       wrap,
       gutter
@@ -7060,19 +6472,19 @@ const Grid = forwardRef((props, ref) => {
     children: children
   });
 });
-Grid.displayName = COMPONENT_NAME$V;
-Grid.className = CLASSNAME$V;
-Grid.defaultProps = DEFAULT_PROPS$I;
+Grid.displayName = COMPONENT_NAME$W;
+Grid.className = CLASSNAME$W;
+Grid.defaultProps = DEFAULT_PROPS$J;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$U = 'GridItem';
+const COMPONENT_NAME$V = 'GridItem';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$U = getRootClassName(COMPONENT_NAME$U);
+const CLASSNAME$V = getRootClassName(COMPONENT_NAME$V);
 
 /**
  * GridItem component.
@@ -7094,7 +6506,7 @@ const GridItem = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$U,
+      prefix: CLASSNAME$V,
       width,
       order,
       align
@@ -7102,23 +6514,23 @@ const GridItem = forwardRef((props, ref) => {
     children: children
   });
 });
-GridItem.displayName = COMPONENT_NAME$U;
-GridItem.className = CLASSNAME$U;
+GridItem.displayName = COMPONENT_NAME$V;
+GridItem.className = CLASSNAME$V;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$T = 'GridColumn';
+const COMPONENT_NAME$U = 'GridColumn';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$T = getRootClassName(COMPONENT_NAME$T);
+const CLASSNAME$U = getRootClassName(COMPONENT_NAME$U);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$H = {};
+const DEFAULT_PROPS$I = {};
 
 /**
  * The GridColumn is a layout component that can display children in a grid
@@ -7143,7 +6555,7 @@ const GridColumn = forwardRef((props, ref) => {
   return /*#__PURE__*/jsx(Component, {
     ...forwardedProps,
     ref: ref,
-    className: classNames(className, CLASSNAME$T),
+    className: classNames(className, CLASSNAME$U),
     style: {
       ...style,
       ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
@@ -7153,24 +6565,24 @@ const GridColumn = forwardRef((props, ref) => {
     children: children
   });
 });
-GridColumn.displayName = COMPONENT_NAME$T;
-GridColumn.className = CLASSNAME$T;
-GridColumn.defaultProps = DEFAULT_PROPS$H;
+GridColumn.displayName = COMPONENT_NAME$U;
+GridColumn.className = CLASSNAME$U;
+GridColumn.defaultProps = DEFAULT_PROPS$I;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$S = 'Icon';
+const COMPONENT_NAME$T = 'Icon';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$S = getRootClassName(COMPONENT_NAME$S);
+const CLASSNAME$T = getRootClassName(COMPONENT_NAME$T);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$G = {};
+const DEFAULT_PROPS$H = {};
 
 /**
  * Icon component.
@@ -7224,10 +6636,10 @@ const Icon = forwardRef((props, ref) => {
       color: iconColor,
       colorVariant: iconColorVariant,
       hasShape,
-      prefix: CLASSNAME$S,
+      prefix: CLASSNAME$T,
       theme,
       size: iconSize
-    }), !hasShape && `${CLASSNAME$S}--no-shape`, !hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle && `${CLASSNAME$S}--has-dark-layer`, `${CLASSNAME$S}--path`),
+    }), !hasShape && `${CLASSNAME$T}--no-shape`, !hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle && `${CLASSNAME$T}--has-dark-layer`, `${CLASSNAME$T}--path`),
     children: /*#__PURE__*/jsx("svg", {
       "aria-hidden": alt ? undefined : 'true',
       role: alt ? 'img' : undefined,
@@ -7246,9 +6658,9 @@ const Icon = forwardRef((props, ref) => {
     })
   });
 });
-Icon.displayName = COMPONENT_NAME$S;
-Icon.className = CLASSNAME$S;
-Icon.defaultProps = DEFAULT_PROPS$G;
+Icon.displayName = COMPONENT_NAME$T;
+Icon.className = CLASSNAME$T;
+Icon.defaultProps = DEFAULT_PROPS$H;
 
 /** Internal component used to render image captions */
 const ImageCaption = props => {
@@ -7333,17 +6745,17 @@ const ImageBlockCaptionPosition = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$R = 'ImageBlock';
+const COMPONENT_NAME$S = 'ImageBlock';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$R = getRootClassName(COMPONENT_NAME$R);
+const CLASSNAME$S = getRootClassName(COMPONENT_NAME$S);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$F = {
+const DEFAULT_PROPS$G = {
   captionPosition: ImageBlockCaptionPosition.below,
   align: Alignment.left
 };
@@ -7359,9 +6771,9 @@ const ImageBlock = forwardRef((props, ref) => {
   const defaultTheme = useTheme() || Theme.light;
   const {
     actions,
-    align = DEFAULT_PROPS$F.align,
+    align = DEFAULT_PROPS$G.align,
     alt,
-    captionPosition = DEFAULT_PROPS$F.captionPosition,
+    captionPosition = DEFAULT_PROPS$G.captionPosition,
     captionStyle,
     className,
     description,
@@ -7380,15 +6792,15 @@ const ImageBlock = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$R,
+      prefix: CLASSNAME$S,
       captionPosition,
       align,
       size,
       theme
-    }), fillHeight && `${CLASSNAME$R}--fill-height`),
+    }), fillHeight && `${CLASSNAME$S}--fill-height`),
     children: [/*#__PURE__*/jsx(Thumbnail, {
       ...thumbnailProps,
-      className: classNames(`${CLASSNAME$R}__image`, thumbnailProps?.className),
+      className: classNames(`${CLASSNAME$S}__image`, thumbnailProps?.className),
       fillHeight: fillHeight,
       align: align,
       image: image,
@@ -7397,7 +6809,7 @@ const ImageBlock = forwardRef((props, ref) => {
       alt: alt || title
     }), /*#__PURE__*/jsx(ImageCaption, {
       as: "figcaption",
-      baseClassName: CLASSNAME$R,
+      baseClassName: CLASSNAME$S,
       theme: theme,
       title: title,
       titleProps: titleProps,
@@ -7408,24 +6820,24 @@ const ImageBlock = forwardRef((props, ref) => {
       align: align,
       truncate: captionPosition === 'over'
     }), actions && /*#__PURE__*/jsx("div", {
-      className: `${CLASSNAME$R}__actions`,
+      className: `${CLASSNAME$S}__actions`,
       children: actions
     })]
   });
 });
-ImageBlock.displayName = COMPONENT_NAME$R;
-ImageBlock.className = CLASSNAME$R;
-ImageBlock.defaultProps = DEFAULT_PROPS$F;
+ImageBlock.displayName = COMPONENT_NAME$S;
+ImageBlock.className = CLASSNAME$S;
+ImageBlock.defaultProps = DEFAULT_PROPS$G;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$Q = 'ImageLightbox';
+const COMPONENT_NAME$R = 'ImageLightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$Q = getRootClassName(COMPONENT_NAME$Q);
+const CLASSNAME$R = getRootClassName(COMPONENT_NAME$R);
 
 /**
  * Observe element size (only works if it's size depends on the window size).
@@ -7735,12 +7147,12 @@ const ImageSlide = /*#__PURE__*/React__default.memo(props => {
     // Make it accessible to keyboard nav when the zone is scrollable
     ,
     tabIndex: isScrollable ? 0 : undefined,
-    className: `${CLASSNAME$Q}__image-slide`,
+    className: `${CLASSNAME$R}__image-slide`,
     children: /*#__PURE__*/jsx(Thumbnail, {
       imgRef: useMergeRefs(imgRef, propImgRef),
       image: image,
       alt: alt,
-      className: `${CLASSNAME$Q}__thumbnail`,
+      className: `${CLASSNAME$R}__thumbnail`,
       imgProps: {
         ...imgProps,
         style: {
@@ -7878,12 +7290,12 @@ const ImageSlideshow = ({
       })
     }), (metadata || slideShowControls || zoomControls) && /*#__PURE__*/jsxs(FlexBox, {
       ref: footerRef,
-      className: `${CLASSNAME$Q}__footer`,
+      className: `${CLASSNAME$R}__footer`,
       orientation: "vertical",
       vAlign: "center",
       gap: "big",
       children: [metadata, /*#__PURE__*/jsxs(FlexBox, {
-        className: `${CLASSNAME$Q}__footer-actions`,
+        className: `${CLASSNAME$R}__footer-actions`,
         orientation: "horizontal",
         gap: "regular",
         children: [slideShowControls, zoomControls]
@@ -8003,7 +7415,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: currentImageRef,
           target: triggerImageRefs[currentIndex],
-          name: CLASSNAME$Q
+          name: CLASSNAME$R
         }
       });
     }
@@ -8055,7 +7467,7 @@ function useImageLightbox(props) {
         viewTransitionName: {
           source: triggerImage,
           target: currentImageRef,
-          name: CLASSNAME$Q
+          name: CLASSNAME$R
         }
       });
     }
@@ -8109,7 +7521,7 @@ const Inner = forwardRef((props, ref) => {
   }, [onClose]);
   return /*#__PURE__*/jsx(Lightbox, {
     ref: ref,
-    className: classNames(className, CLASSNAME$Q),
+    className: classNames(className, CLASSNAME$R),
     parentElement: parentElement,
     isOpen: isOpen,
     onClose: onClose,
@@ -8138,8 +7550,8 @@ const Inner = forwardRef((props, ref) => {
     })
   });
 });
-Inner.displayName = COMPONENT_NAME$Q;
-Inner.className = CLASSNAME$Q;
+Inner.displayName = COMPONENT_NAME$R;
+Inner.className = CLASSNAME$R;
 
 /**
  * ImageLightbox component.
@@ -8155,17 +7567,17 @@ const ImageLightbox = Object.assign(Inner, {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$P = 'InlineList';
+const COMPONENT_NAME$Q = 'InlineList';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$P = getRootClassName(COMPONENT_NAME$P);
+const CLASSNAME$Q = getRootClassName(COMPONENT_NAME$Q);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$E = {};
+const DEFAULT_PROPS$F = {};
 
 /**
  * InlineList component.
@@ -8191,7 +7603,7 @@ const InlineList = forwardRef((props, ref) => {
     jsx("ul", {
       ...forwardedProps,
       ref: ref,
-      className: classNames(className, CLASSNAME$P, wrap && `${CLASSNAME$P}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
+      className: classNames(className, CLASSNAME$Q, wrap && `${CLASSNAME$Q}--wrap`, fontColorClass(color, colorVariant), typographyClassName)
       // Lists with removed bullet style can lose their a11y list role on some browsers
       ,
       role: "list",
@@ -8203,9 +7615,9 @@ const InlineList = forwardRef((props, ref) => {
           // eslint-disable-next-line jsx-a11y/no-redundant-roles
           jsxs("li", {
             role: "listitem",
-            className: `${CLASSNAME$P}__item`,
+            className: `${CLASSNAME$Q}__item`,
             children: [index !== 0 && /*#__PURE__*/jsx("span", {
-              className: `${CLASSNAME$P}__item-separator`,
+              className: `${CLASSNAME$Q}__item-separator`,
               "aria-hidden": "true",
               children: '\u00A0•\u00A0'
             }), child]
@@ -8215,9 +7627,9 @@ const InlineList = forwardRef((props, ref) => {
     })
   );
 });
-InlineList.displayName = COMPONENT_NAME$P;
-InlineList.className = CLASSNAME$P;
-InlineList.defaultProps = DEFAULT_PROPS$E;
+InlineList.displayName = COMPONENT_NAME$Q;
+InlineList.className = CLASSNAME$Q;
+InlineList.defaultProps = DEFAULT_PROPS$F;
 
 const INPUT_HELPER_CONFIGURATION = {
   error: {
@@ -8234,17 +7646,17 @@ const INPUT_HELPER_CONFIGURATION = {
 /**
  * Component display name.
  */
-const COMPONENT_NAME$O = 'InputHelper';
+const COMPONENT_NAME$P = 'InputHelper';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$O = getRootClassName(COMPONENT_NAME$O);
+const CLASSNAME$P = getRootClassName(COMPONENT_NAME$P);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$D = {
+const DEFAULT_PROPS$E = {
   kind: Kind.info
 };
 
@@ -8260,7 +7672,7 @@ const InputHelper = forwardRef((props, ref) => {
   const {
     children,
     className,
-    kind = DEFAULT_PROPS$D.kind,
+    kind = DEFAULT_PROPS$E.kind,
     theme = defaultTheme,
     ...forwardedProps
   } = props;
@@ -8271,31 +7683,31 @@ const InputHelper = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$O,
+      prefix: CLASSNAME$P,
       color,
       theme
     })),
     children: children
   });
 });
-InputHelper.displayName = COMPONENT_NAME$O;
-InputHelper.className = CLASSNAME$O;
-InputHelper.defaultProps = DEFAULT_PROPS$D;
+InputHelper.displayName = COMPONENT_NAME$P;
+InputHelper.className = CLASSNAME$P;
+InputHelper.defaultProps = DEFAULT_PROPS$E;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$N = 'InputLabel';
+const COMPONENT_NAME$O = 'InputLabel';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$N = getRootClassName(COMPONENT_NAME$N);
+const CLASSNAME$O = getRootClassName(COMPONENT_NAME$O);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$C = {};
+const DEFAULT_PROPS$D = {};
 
 /**
  * InputLabel component.
@@ -8321,7 +7733,7 @@ const InputLabel = forwardRef((props, ref) => {
     ...forwardedProps,
     htmlFor: htmlFor,
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$N,
+      prefix: CLASSNAME$O,
       isRequired,
       theme,
       hasCustomTypography: Boolean(typography)
@@ -8329,19 +7741,19 @@ const InputLabel = forwardRef((props, ref) => {
     children: children
   });
 });
-InputLabel.displayName = COMPONENT_NAME$N;
-InputLabel.className = CLASSNAME$N;
-InputLabel.defaultProps = DEFAULT_PROPS$C;
+InputLabel.displayName = COMPONENT_NAME$O;
+InputLabel.className = CLASSNAME$O;
+InputLabel.defaultProps = DEFAULT_PROPS$D;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$M = 'Lightbox';
+const COMPONENT_NAME$N = 'Lightbox';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$M = getRootClassName(COMPONENT_NAME$M);
+const CLASSNAME$N = getRootClassName(COMPONENT_NAME$N);
 
 /**
  * Lightbox component.
@@ -8426,7 +7838,7 @@ const Lightbox = forwardRef((props, ref) => {
       role: "dialog",
       tabIndex: -1,
       className: classNames(className, handleBasicClasses({
-        prefix: CLASSNAME$M,
+        prefix: CLASSNAME$N,
         isHidden: !isOpen,
         isShown: isOpen || isVisible,
         theme
@@ -8435,7 +7847,7 @@ const Lightbox = forwardRef((props, ref) => {
         zIndex
       },
       children: [closeButtonProps && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$M}__close`,
+        className: `${CLASSNAME$N}__close`,
         children: /*#__PURE__*/jsx(IconButton, {
           ...closeButtonProps,
           ref: closeButtonRef,
@@ -8455,7 +7867,7 @@ const Lightbox = forwardRef((props, ref) => {
             childrenRefs: clickAwayRefs,
             children: /*#__PURE__*/jsx("div", {
               ref: childrenRef,
-              className: `${CLASSNAME$M}__wrapper`,
+              className: `${CLASSNAME$N}__wrapper`,
               role: "presentation",
               children: children
             })
@@ -8465,18 +7877,18 @@ const Lightbox = forwardRef((props, ref) => {
     })
   });
 });
-Lightbox.displayName = COMPONENT_NAME$M;
-Lightbox.className = CLASSNAME$M;
+Lightbox.displayName = COMPONENT_NAME$N;
+Lightbox.className = CLASSNAME$N;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$L = 'Link';
+const COMPONENT_NAME$M = 'Link';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
+const CLASSNAME$M = getRootClassName(COMPONENT_NAME$M);
 
 /**
  * Link component.
@@ -8508,7 +7920,7 @@ const Link = forwardRef((props, ref) => {
     ...forwardedProps,
     ...disabledStateProps,
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$L,
+      prefix: CLASSNAME$M,
       color,
       colorVariant,
       hasTypography: !!typography
@@ -8516,34 +7928,34 @@ const Link = forwardRef((props, ref) => {
     children: wrapChildrenIconWithSpaces(/*#__PURE__*/jsxs(Fragment, {
       children: [leftIcon && /*#__PURE__*/jsx(Icon, {
         icon: leftIcon,
-        className: `${CLASSNAME$L}__left-icon`
+        className: `${CLASSNAME$M}__left-icon`
       }), children && /*#__PURE__*/jsx("span", {
-        className: `${CLASSNAME$L}__content`,
+        className: `${CLASSNAME$M}__content`,
         children: children
       }), rightIcon && /*#__PURE__*/jsx(Icon, {
         icon: rightIcon,
-        className: `${CLASSNAME$L}__right-icon`
+        className: `${CLASSNAME$M}__right-icon`
       })]
     }))
   });
 });
-Link.displayName = COMPONENT_NAME$L;
-Link.className = CLASSNAME$L;
+Link.displayName = COMPONENT_NAME$M;
+Link.className = CLASSNAME$M;
 
 /**
  * Component display name.
  */
-const COMPONENT_NAME$K = 'LinkPreview';
+const COMPONENT_NAME$L = 'LinkPreview';
 
 /**
  * Component default class name and class prefix.
  */
-const CLASSNAME$K = getRootClassName(COMPONENT_NAME$K);
+const CLASSNAME$L = getRootClassName(COMPONENT_NAME$L);
 
 /**
  * Component default props.
  */
-const DEFAULT_PROPS$B = {
+const DEFAULT_PROPS$C = {
   size: Size.regular,
   titleHeading: 'h2'
 };
@@ -8563,11 +7975,11 @@ const LinkPreview = forwardRef((props, ref) => {
     link,
     linkAs,
     linkProps,
-    size = DEFAULT_PROPS$B.size,
+    size = DEFAULT_PROPS$C.size,
     theme = defaultTheme,
     thumbnailProps,
     title,
-    titleHeading = DEFAULT_PROPS$B.titleHeading,
+    titleHeading = DEFAULT_PROPS$C.titleHeading,
     ...forwardedProps
   } = props;
   // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).
@@ -8576,14 +7988,14 @@ const LinkPreview = forwardRef((props, ref) => {
     ref: ref,
     ...forwardedProps,
     className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME$K,
+      prefix: CLASSNAME$L,
       size: size === Size.big && thumbnailProps ? Size.big : Size.regular,
       theme
     })),
     children: /*#__PURE__*/jsxs("div", {
-      className: `${CLASSNAME$K}__wrapper`,
+      className: `${CLASSNAME$L}__wrapper`,
       children: [thumbnailProps && /*#__PURE__*/jsx("div", {
-        className: `${CLASSNAME$K}__thumbnail`,
+        className: `${CLASSNAME$L}__thumbnail`,
         children: /*#__PURE__*/jsx(Thumbnail, {
           ...thumbnailProps,
           linkAs: linkAs,
@@ -8598,9 +8010,9 @@ const LinkPreview = forwardRef((props, ref) => {
           fillHeight: true
         })
       }), /*#__PURE__*/jsxs("div", {
-        className: `${CLASSNAME$K}__container`,
+        className: `${CLASSNAME$L}__container`,
         children: [title && /*#__PURE__*/jsx(TitleHeading, {
-          className: `${CLASSNAME$K}__title`,
+          className: `${CLASSNAME$L}__title`,
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
@@ -8611,14 +8023,14 @@ const LinkPreview = forwardRef((props, ref) => {
             children: title
           })
         }), description && /*#__PURE__*/jsx("p", {
-          className: `${CLASSNAME$K}__description`,
+          className: `${CLASSNAME$L}__description`,
           children: description
         }), /*#__PURE__*/jsx("div", {
-          className: `${CLASSNAME$K}__link`,
+          className: `${CLASSNAME$L}__link`,
           children: /*#__PURE__*/jsx(Link, {
             ...linkProps,
             linkAs: linkAs,
-            className: classNames(`${CLASSNAME$K}__link`, linkProps?.className),
+            className: classNames(`${CLASSNAME$L}__link`, linkProps?.className),
             target: "_blank",
             href: link,
             color: theme === Theme.light ? ColorPalette.primary : ColorPalette.light,
@@ -8633,9 +8045,136 @@ const LinkPreview = forwardRef((props, ref) => {
     })
   });
 });
-LinkPreview.displayName = COMPONENT_NAME$K;
-LinkPreview.className = CLASSNAME$K;
-LinkPreview.defaultProps = DEFAULT_PROPS$B;
+LinkPreview.displayName = COMPONENT_NAME$L;
+LinkPreview.className = CLASSNAME$L;
+LinkPreview.defaultProps = DEFAULT_PROPS$C;
+
+/**
+ * Render link with default <a> HTML component or a custom one provided by `linkAs`.
+ *
+ * Can be used to inject the `Link` component from `react-router` and provide better a11y on LumX components.
+ *
+ * @param linkAs    Custom link component.
+ * @param children  Link children.
+ * @return          A link.
+ */
+const renderLink = ({
+  linkAs,
+  ...forwardedProps
+}, ...children) => /*#__PURE__*/React__default.createElement(linkAs || 'a', forwardedProps, ...children);
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME$K = 'ListItem';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME$K = getRootClassName(COMPONENT_NAME$K);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS$B = {
+  size: Size.regular
+};
+
+/**
+ * Check if the list item is clickable.
+ * @return `true` if the list item is clickable; `false` otherwise.
+ */
+function isClickable({
+  linkProps,
+  onItemSelected
+}) {
+  return !isEmpty(linkProps?.href) || !!onItemSelected;
+}
+
+/**
+ * ListItem component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ListItem = forwardRef((props, ref) => {
+  const {
+    isAnyDisabled,
+    disabledStateProps,
+    otherProps
+  } = useDisableStateProps(props);
+  const {
+    after,
+    before,
+    children,
+    className,
+    isHighlighted,
+    isSelected,
+    linkAs,
+    linkProps = {},
+    linkRef,
+    onItemSelected,
+    size = DEFAULT_PROPS$B.size,
+    ...forwardedProps
+  } = otherProps;
+  const role = linkAs || linkProps.href ? 'link' : 'button';
+  const onKeyDown = useMemo(() => {
+    if (onItemSelected && role === 'link') return onEnterPressed(onItemSelected);
+    if (onItemSelected && role === 'button') return onButtonPressed(onItemSelected);
+    return undefined;
+  }, [role, onItemSelected]);
+  const content = /*#__PURE__*/jsxs(Fragment, {
+    children: [before && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$K}__before`,
+      children: before
+    }), /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$K}__content`,
+      children: children
+    }), after && /*#__PURE__*/jsx("div", {
+      className: `${CLASSNAME$K}__after`,
+      children: after
+    })]
+  });
+  return /*#__PURE__*/jsx("li", {
+    ref: ref,
+    ...forwardedProps,
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME$K,
+      size
+    })),
+    children: isClickable({
+      linkProps,
+      onItemSelected
+    }) ? (/* Clickable list item */
+    renderLink({
+      linkAs,
+      tabIndex: !disabledStateProps.disabled ? 0 : undefined,
+      role,
+      'aria-disabled': isAnyDisabled,
+      ...linkProps,
+      href: isAnyDisabled ? undefined : linkProps.href,
+      className: classNames(handleBasicClasses({
+        prefix: `${CLASSNAME$K}__link`,
+        isHighlighted,
+        isSelected,
+        isDisabled: isAnyDisabled
+      })),
+      onClick: isAnyDisabled ? undefined : onItemSelected,
+      onKeyDown: isAnyDisabled ? undefined : onKeyDown,
+      ref: linkRef
+    }, content)) :
+    /*#__PURE__*/
+    /* Non clickable list item */
+    jsx("div", {
+      className: `${CLASSNAME$K}__wrapper`,
+      children: content
+    })
+  });
+});
+ListItem.displayName = COMPONENT_NAME$K;
+ListItem.className = CLASSNAME$K;
+ListItem.defaultProps = DEFAULT_PROPS$B;
 
 /**
  * Component display name.